ファーストビューは3人の野球選手の写真で構成されたスライドショーで、ブラックの背景に溶けこむように加工された写真と、写真に重ねられた力強いキャッチコピーが迫力を生み出しています。ブラックとダークグレーの背景にくっきりとしたホワイトのフォントで画面全体を引き締め、リンクボタンなどに使われているエメラルドグリーンがひときわ目立つ色使いです。写真を大きく使い、テキストを収めたボックスを半透明にして重ねることで、フラットなレイアウトの中に動きを出しています。画面スクロールでコンテンツが浮かび上がるモーションが、暗闇から人物が浮かび上がるような演出になっていてよりドラマチックになっています。
カテゴリ
基本情報
スポーツに関連するデザイン
- 「Nike Circular Design Guide」のホームページデザイン解説
世界的なスポーツブランド、NIKEのデザインガイドラインのページです。モノトーンでまとめた色使いで、ファーストビューではブラックのラインで区切られた画面にシンプルにタイトル・キャッチコピー・ロゴが配置されています。サムネイルのコーナーと辺の...
- 「Oakshop」のホームページデザイン解説
スポーツウェアブランドのオークリーのECサイトです。メインビジュアルの鮮やかな女性アスリートの写真から画面をスクロールすると、一転してブラック基調のクールな写真に切り替わり、クールなイメージを感じさせます。商品ページのテキストもブラックとグ...
- 「Championオンラインストア」のホームページデザイン解説
ファーストビューではテンポ画面幅いっぱいに表示されたスライドショーがテンポよく再生され、商品ラインナップの多彩さを表すと同時にお得なクーポンやキャンペーンの情報を効率よく表示しています。グリッド上に整然と並んだレイアウトを基本としていますが...
サービスサイトに関連するデザイン
- 「Caroselling」のホームページデザイン解説
イタリアのデザインスタジオのページで、サイトにアクセスすると画面を埋め尽くす勢いの大きなフォントで書かれたキャッチコピーに圧倒されます。トップページは写真が1枚使われている以外はすべてフォントの大小とウェイトの差のみでコントラストをつけたレ...
- 「stimmt」のホームページデザイン解説
オランダのデザイン会社のサイトです。ファーストビューではダークな画面に流線型のグラフィックが浮かび上がり、その上にホワイトのフォントでメッセージが重ねられた画面が目を引きます。モノトーン中心の配色に鮮やかなピンクが映え、スタイリッシュな中に...
- 「TRIPPIN」のホームページデザイン解説
海外の旅行をメインにしたコミュニティプラットフォームサイトで、隙間なく並べられた角丸長方形のサムネイルにはヒートマップ風にドットが重ねられており、記事ページに移動すると同じ色のピンがマップに重ねられています。画面左2/3がマップ、残りのエリ...
ブラックを使ったデザイン
- 「cube.」のホームページデザイン解説
オランダのソフトウェア会社のコーポレートサイトです。サイトにアクセスするとダークグレーの背景の画面中央で回転する透明なキューブのCGが再生され、キューブがゆっくりとテーブルに着地する流れまで思わず見入ってしまいます。暗い背景の中でホワイトの...
- 「stimmt」のホームページデザイン解説
オランダのデザイン会社のサイトです。ファーストビューではダークな画面に流線型のグラフィックが浮かび上がり、その上にホワイトのフォントでメッセージが重ねられた画面が目を引きます。モノトーン中心の配色に鮮やかなピンクが映え、スタイリッシュな中に...
- 「Legal Japan」のホームページデザイン解説
グレーをベースにブラックをアクセントにしたサイトです。ファーストビューには、笑顔のリーガルジャパンのスタッフが写っています。グローバルナビにて事務所の取扱業務、弁護士費用などを案内しています。グリーンのバナーから、無料相談を予約できます。ト...
迫力なホームページのデザイン
- 「TRIPPIN」のホームページデザイン解説
海外の旅行をメインにしたコミュニティプラットフォームサイトで、隙間なく並べられた角丸長方形のサムネイルにはヒートマップ風にドットが重ねられており、記事ページに移動すると同じ色のピンがマップに重ねられています。画面左2/3がマップ、残りのエリ...
- 「Bornfight」のホームページデザイン解説
クロアチアのデザイン事務所のコーポレートサイトです。サイトにアクセスすると、ブラック1色の画面に力強く書かれたホワイトのキャッチコピーが特大のインパクトを与えます。実績紹介は画面全体を2分割して左にテキスト、右にビジュアルを配置した構成です...
- 「Caroselling」のホームページデザイン解説
イタリアのデザインスタジオのページで、サイトにアクセスすると画面を埋め尽くす勢いの大きなフォントで書かれたキャッチコピーに圧倒されます。トップページは写真が1枚使われている以外はすべてフォントの大小とウェイトの差のみでコントラストをつけたレ...