実績

OUR WORKS

番組ホームページリニューアル

国内放送メディア 様
  • システム構築・アプリ開発
  • UX/UIデザイン
WORK #23 eyecatch

国内放送メディアの番組ホームページ(検索、番組表を含む)のリニューアルにおけるデザインおよびフロントエンド開発を担当。Nuxt.js(Vue.js)とExpressによる開発を行い、AMPやダークモード対応も行いました。

目的・背景

旧来の番組ホームページの技術やデザインが老朽化していたため、オンラインでのリアルタイム番組視聴、見逃し配信を行うタイミングで、最新の技術基盤を構築し、番組ホームページのリニューアルを行うこととなりました。

プロジェクトについて

Nuxt.js(Vue.js)とExpressを採用し、SSR(Server Side Rendering)に対応

技術基盤として、Nuxt.js(Vue.js)とExpressを採用し、SSR(Server Side Rendering)を実現し、静的ページではAMPにも対応しています。静的なページではAMP HTMLを出力、動的なページでは通常のHTMLを出力するように切り替えを行っています。

SEO対策の一環として、AMP(Accelerated Mobile Pages)や構造化データに対応

AMP対応を行い、モバイル端末におけるGoolgleなどの検索サイトからの流入には、AMPキャッシュが用いられるため、番組ページが高速表示されます。 また、構造化データを出力することで、検索結果ページでリッチリザルト表示が行われるように対応しています。

UX向上のため、ダークモード表示にも対応

様々なOSやブラウザで対応されているダークモード(ダークテーマ)表示に対応しました。使用しているOSの設定に合わせて、ライトテーマとダークテーマを自動的に切り替えて、ページを表示します。 先述のAMPにはCSS容量制限があるため、AMP/ダークモード/レスポンシブ対応を行うため、デザインとCSSの設計を緻密に行いました。

To our contact form
この実績に関することなら、
お気軽にお問い合わせください。
PAGE TOP
PAGE TOP
Asialの発信や
ニュースをチェック
アシアルTechブログ

アシアルの中の人が
技術と想いのたけをつづるブログ

アシアルnote

日々の活動や取り組み、
アシアルのカルチャーを紹介