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

2020年8月15日 18:13

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

参考サイト

トレース結果

要素に関するメモ

デザインソース：コーポレートブランドロゴ・人気ソフト
書体：ヒラギノ角ゴシック・Roboto・Yakuhan JP
カラー：メインカラーは企業ロゴの赤(#e60012) 文字カラーは黒(#3c3c3c)
とサブで11色のグレーを使用。スケジュールの部分でのみオレンジ(#f87700)を使用。　
ボタン：ボタンは白文字に背景色は赤(#e60012)　矢印は小さい丸の中に矢印(Nintendo Switchのコントローラーのボタン風？)
アイコン：グレー#b4b4b4　シンプルな形状。人気ゲームから着想したアイコンもあり　ゲーム機をデフォルメしたアイコン　svgデータ
写真：ゲームソフトのタイトル画像　縦横比率は1.7-1.8で統一
グローバルメニュー：メガドロップメニュー、画像を使用し視覚的に誘導

考察メモ

視覚の誘導
メインコンテンツであるゲームソフトのタイトル画像に視覚が自然と行くように工夫されている。タイトル画像のテイストが多岐に渡っているので、それ以外の要素は極力シンプルで邪魔にならないよう配慮されている。
メインイメージ
メインイメージはカルーセルでトピックスを5つ表示。そのトピックスを直下にバナーとして表示。グレーのスライダーが移動し、タイトルの文字色が変化することで、どのトピックスが表示されているか判断可能。
グレーの多用
メインイメージだけでなく、全体的にグレーのアイコン・フォント、グレーアウトが効果的
・メニューのアイコンをグレーで処理。あくまでメニュー項目の補助的な役割。
・ゲーム情報の中でも、優先度の高くない部分の文字色はグレー。
・新作ゲームソフト情報は発売日は重要であるがタイトル画像より控えめになるように30px BOLDで文字色グレー
・メイン部分の背景色は白で通しているが、セクションごとにグレーのボーダーで区切り、さらに細いグレーのボーダーでコンテンツ、日付ごとに区切りがあり、文字情報のグルーピングができている。

ゲームソフトの情報の見やすさ
新作ゲームソフト情報は横並びで時系列順。横スライドで多くの情報を見せるようにしている。直下のスライダーのナビゲーションで画面からはみ出ている部分の情報量を把握できる。

その他
・文字が小さいのに見やすい
・矢印がかなり小さい丸型　レスポンシブ対応？
・フッターのナビゲーションが充実している。ソフト単体でない情報が見たいときはここから探せる。
・初見でシンプルで見やすいことに驚いた。(ゲーム会社のサイトは賑やかでアグレッシブそして黒背景というイメージを勝手に持ってた)