design works

大学運動部ホームページ制作(2016)

大学の野球部のホームページを制作しました。多くの一般的なサイトと同じように、レスポンシブなCSSフレームワークを使用しています。PCやタブレット、スマートフォンなどで閲覧時にそれぞれの画面サイズや操作感などに合ったレイアウトをワンソースで表示出来るレスポンシブサイトです。(art direction:株式会社ビーンビズ|design, coding:塚本元)

レスポンシブサイト制作において、スマホやタブレットで閲覧した時のデザイン、レイアウトを優先的にデザイン・構築していく「モバイルファースト」と言う考え方は、コンテンツによるのかもしれませんが、合理的すぎて日本では多少違和感があるような気がします。かといって「とりあえずスマホ対応はしています」的なレスポンシブはもっと違和感がある。それではといって、それぞれに最適な作り込みはコストがかかってしまい本末転倒になってしまう。後続して登場する「コンテンツファースト」が、レスポンシブサイト制作におけるコストと質のバランスがとれたコンセプトのように想像できます。

しかしそれでも、案件ごとに総合的なバランスを考えて制作していくことが必須です。この案件では、PCで閲覧した時のイメージとスマホなどスモールデバイスでの閲覧した時のイメージが一致すようPC閲覧とスマホ、タブレット閲覧の両方にバランスを置いたコンセプトで制作しました。

トップページは縦方向にセクションごと表示が切り替わるようにしました。それぞれにキービジュアルとコピー文とリンクボタンという基本構成にして、イメージ重視のトップページになりました。

実際のサイトデザインの前に制作するワイヤーフレーム(ページの簡単なレイアウトのたたき台)段階からのアイデアが最終的に採用になりました。このアイデアでの肝はスマホ画面でも変わらない操作感とイメージを実現することでした。 この段階から背景画像やコピー文、ボタンなどの要素が画面のサイズや比率の変化に最適に変遷するように設計しました。

スマホでの表示イメージ。トップページはPC表示と同じ全体イメージを維持しました。背景画像としてレイアウトしているイメージビジュアルはスマホの縦長比率の画面やサイズに対応するため、スマホ用の画像に切り替えています。

スケジュールのページと試合結果のページ。試合結果ページではギャラリーページと連動して、その試合のイメージギャラリーも表示しています。

 

スターティングメンバーは、部員(メンバー)ページのコンテンツに紐付いていますので、クリックすると部員の詳細がモーダルウインドウに表示されます。