目的・背景

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

プロジェクトについて

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の設計を緻密に行いました。