1日1サイトレビュー Day38 ANA
【リンクボタン】
・リンクアイコンの位置
→テキストの後ろ、一番右
・文中のリンクテキストの表現
→全て日本語、多少長くても分かりやすい表記。
・ボタンのデザインの形やサイズの種類
→デザイン:1種類のみ。角が若干丸くなった長方形。
色:紺、赤、白
【UI感覚】
・コーポレートサイトのヘッダの縦幅
→横:1,440px
縦:195px
・ボタンのサイズは1サイトの中で何種類か?縦横サイズは何pxか?
→90 x 36、200 x 44、240 x 40、130 x 45、255 x 40、130 x 42
横幅の種類多い。測ると数ピクセルの違いも多い。縦幅もバラバラだが、だいたい40px前後になっている。
・見出し、本文の文字サイズ
→見出し:30px ヒラギノ角ゴシック
本文:14px
・パネルの中や文字の頭に付くアイコンはどんなサイズが適切か?
→このサイトでは下記で設定
文字:14px
アイコン:18 x 11、 16 x 17
【薄い色は何種類あるか】
・結局、薄く敷かれたグレーの色は何種類あるか?
→1種類 #f0f1f4
・1pxのライン、白とグレーの上で色に乗ってるもので違いがあるのかも?
→白背景:#dbdbdb
グレー背景:#ddd
グレー背景上の方が線の色も濃い
【コンテンツの横幅やグリッドルール】
・このサイトで使われるコンテンツ幅、グリッドは何種類あるかな?
→横幅:1,080px
・2~3種類の幅を使い分ける際のルールや共通点は?
→検索機能つきの表示は横幅346pxで統一、バナーは348pxで統一。
【写真や図の比率】
・写真や図の縦横の比率は何種類あるか?
→333 x 251
243 x 150
1440 x 530
他にも微妙に違う大きさ。あまりにも微妙な違いで種類が多い。もう少し統一してもいいのでは?
・一覧ページのサムネイルと詳細ページのメイン写真は使いまわしてるのか
→違う写真が使われている。
【配色ルールの適用方法】
・webサイトのUIでは最低限として何色の色が使われているか?
→6色
・ベース、メイン、アクセントの3色を抜き出すとどの色が抜き出せるか?
→ベース:白
メイン:水色
アクセントカラー:濃い青
・ベース、メイン、アクセントはそれぞれどんな箇所で使われているか?
→ベース:背景
メイン:ヘッダーの一部、カテゴリー背景、一部背景
アクセントカラー:ヘッダー、ボタン
・トップページの配色の印象を下層ではどんな形で生かしてるか?
→ヘッダー、フッター統一。各ページの構成も似た感じにし、検索機能の色・デザインも全ページで統一されている。
【読みやすい文字量を掴む】
・H2見出し文字数
→最大15文字。パッ見での認識は難しい。
・グロナビの各メニューの文字量
→最大11文字。ただ、11文字は名詞のため、長くてもすぐ読める。
10文字以内がベストか。
・写真+リンクテキストの文字量
→30〜40文字で書かれている。リンク先の内容が分かりやすい表記。
・ボタンの中の文字量
→10字以内が多い。10文字を超えてくると、ボタンというよりも背景に溶け込んで見えてしまう。