制作・活動実績

トライアル選手権 2013

画面サイズでレイアウトが調整されるメインビジュアル

ツインリンクもてぎで開催されたトライアル選手権 2013のレースサイト。
メインビジュアルは躍動感あふれる写真にし、障害に立ち向かうイメージを狙いました。PC用のバナーをそのまま使おうとすると、横長の画像でもスマートフォンでは高さが十分に確保できなくなり、訴求効果が薄まってしまいます。このため、画像の比率は考慮する必要がありました。

写真自体に高さを取る必要がありましたが、PCでは高さを取ってしまうとその次に見ることを想定しているチケット購入ボタン(スクリーンショット上では公式リザルト)が画面から見切れてしまう可能性があります。そのため中の要素を整理し、メインビジュアル内に主な導線を置くように調整しました。

スマートフォンでもPCと同様に一画面で見切れないようにメインビジュアル内に主な導線を置き、インパクトを重視しつつ、機能も重視したメインビジュアルを制作しました。

公開
2013/03/01
制作範囲
  • デザイン
  • コーディング
サイト特徴
・レスポンシブWebデザイン
Director
@cafekenta

スマートフォンでの表示速度を重視し、通信環境が悪くても軽いサイトに

トライアル選手権のレースはセクションごとに細かく観戦する場所が変わるレースです。セクションの移動の間にもWebをストレスなく読めるようにするため、表示速度に際しては十分に注意を払いました。CSS Spriteで画像のリクエスト数を減らしたり、画像の軽量化、CSSそのものの圧縮化などを施し、サイトの表示速度の高速化を実現しました。

とりあえず繋がっておく

柴田 大樹

Facebook

都内で働くフリーランスWebデザイナー。
4年間Web担当者として、対法人向けECサイトやアフィリエイトサービスのデザインと運用を兼任。2009年からキュープラス株式会社でWebデザイナーとして働き、2013年に独立。

内容をもう少し聞いてみる