Works » ヤマハ発動機 » レーススペシャルサイト レスポンシブ化リニューアル
2013年7月17日 [MovableType] [レスポンシブ]
ヤマハ発動機:
レーススペシャルサイト レスポンシブ化リニューアル
ヤマハのマシン&ライダーが活躍する日本で開催されるレースを、現地からさまざまな写真+コメントを発信するリアルタイム感あるスペシャルサイトを、レスポンシブ対応デザインリニューアル。
2009年4月に制作したレーススペシャルサイトのMovableTypeテンプレートは、[ブログの複製]機能によってレースごとにクライアント担当様がサイトを開設、セットアップ、更新していく構造です。
レスポンシブWebデザイン化にあたっては、レースごとにコンテンツ数が可変することもあり、汎用化とスマートフォンでの操作感を重視しました。モックアップを作り、検討修正を繰り返し、デザインを決めていきました。
*左のスクリーンショットは、テンプレート作成時のダミー写真を使用しています。
レスポンシブwebデザインでは、狭小画面になった場合のナビゲーションメニュー部デザインが問題になります。特定サイトでメニュー数が決まっている場合は、収納させず画面上に配置する方が分かりやすい反面、ファーストビューにコンテンツをどこまでいれるかのせめぎ合いとなります。
このレースSPサイトのテンプレートでは、レースごとにメニュー数が可変すること、ブログのように新しい記事をすぐチェックできる必要があったため、Facebookのスマホアプリ版のような横からスライドして現れるメニューを採用して記事タイトルへのアプローチを優先しつつ、ページ下にも同メニューを配置する構成しました。
■実稼働された「8耐」サイトのスマートフォンでの見え方
■リニューアルによって変更された部分の更新マニュアルの一部
■リニューアル後に公開された「8耐」スペシャルサイトの事前情報で、レスポンシブ化をさらりと記事にしていただきました。[この記事を読む]