デザイン上達のため行うwebトレース_12

デザイン上達のため行うwebトレースのログです。気づき・疑問メモ

参考サイト
横浜スタジアム　https://www.yokohama-stadium.co.jp/

トレース結果

要素に関するメモ

書体：日本語はさわらびゴシック。英数字はBARLOW
カラー：メインカラーはベイスターズの青(#0A3DA0)　文字カラーは白と黒(#0c0c0c)　薄グレー(#F2F4F7)(#D7DBE3)　ラベルに赤(#E74F34)と水色(#60DCE9)
メインイメージ：スタジアムの風景写真にスタジアム名を太文字で表記
ボタン：角丸無しのboxに円で構成した矢印　
アイコン：メニューでのモノクロのアート　サイズ小さめ
写真：スタジアムの風景写真　ブルーのカラートーン
グローバルメニュー：ハンバーガーメニューからのメガドロップ

考察メモ

ベイスターズのホームグランドであることを上手く取り入れたデザイン。
チームカラーのブルー、そのほか白と黒のコントラストの強いスポーティーなカラー配色。メインイメージのスタジアムの写真は青い客席を目立たせた無人の写真。ボールドの欧文。野球の試合写真や選手の写真を使わずに、野球のイメージを伝えている。
シンプルでインパクトのある英文字
英数字はBARLOWというフォントを使用。飾りの部分はイタリック体のボールドでスピード感と力強さを演出。
情報をスッキリ見せる工夫
PCもハンバーガーメニューだが、メインイメージの直下に主な4つのメニュー項目を表示。ここは文字サイズに対して広めのボックスでスッキリと見せている。また、矢印アイコンを3つの点でミニマムに表しているのも特徴。矢印がミニマムな分、ホバーで暗くなる面積を広くして目視しやすくしてる。
遊び心
野球スタジアムの内野のようなダイヤ型を背景に使ったり、TOPへボタンが野球のバッターボックスになっている。最後まで読んだ人を楽しませる遊び心が良い。