見出し画像

#1日1サイトレビュー Day36 JR東日本

【サイトの印象】
・文字が多くごちゃごちゃした印象
→「何となく観に来る」ではなく、「目的があって観に来る」人が多数なので問題ないか

・グローバルナビの表現が分かりやすい
→大きなくくりで6個のみ

・グローバルナビの項目にホバーすると、細かくカテゴリーが分かれていて知りたい情報にすぐアクセス出来る

パッと見だと「文字多い!」と感じるが、触ってみると情報が整理されていて分かりやすい。迷子になることなく欲しい情報にアクセス出来る。

【リンクボタン】
・文中のリンクテキストの表現
→表現を簡略化せず(もっと読む等)、「鉄道イベント情報をもっとみる」「ニューリリース一覧へ」等、見出しを見なくてもリンクテキストを読むだけでどこに飛ぶボタンなのか分かる表現で書かれている。

・ボタンのデザインの形やサイズの種類
→3種類

・ドロップシャドウが使われている箇所の共通点
→ヘッダー、ホバー時の緑ボタン
 他と差別化を図りたい重要な部分?

【UI視点】
・ヘッダーの縦幅
→1,440px × 90px

・ボタンのサイズは1サイトの中で何種類あるか
→200pxだったり193oxだったり意外とバラバラ。paddingの数値も横幅はバラバラ。上下は10px。

・見出し、本文の文字サイズはそれぞれ何px?
見出し:1.8rem=18px
本文:1.3rem=13px
フォント:ヒラギノ角ゴシック

【薄い色は何種類あるか】
・薄く敷かれたグレーの色は何種類あるか
→線:#ddd
   背景:#f8f8f8、#EEE

・1pxのライン、白とグレーの上で色に乗ってるもので違いがあるか
→なし

【写真や図の比率】
・写真や図の縦横の比率は何種類か
写真:460px × 230px、460px × 140px、218.5px × 145px
バナー:297px × 140px、297.34px × 198.22px、218.5px × 145.66px
               299.66px × 299.66px

【配色ルールの適用方法】
・webサイトのUIでは最低限として何色の色が使われているのか
→白、薄いグレー、濃いグレー、緑

・ベース、メイン、アクセントの3色を抜き出すとどの色が抜き出せるか
→ベース:薄いグレー
 メインカラー:濃いグレー
 アクセントカラー:緑

・ベース、メイン、アクセントはそれぞれどんな箇所で使われているか?
→ベース:背景
 メインカラー:ヘッダー、フッター
 アクセントカラー:ボタン、アイコン、リンクテキスト

【読みやすい文字量を掴む】
・グロナビの各メニューの文字量
→10文字以内

・ボタンの中の文字量は〇文字までにしないとボタンに見えにくいな
→10文字以内

この記事が気に入ったらサポートをしてみませんか?