見出し画像

#1日1サイトレビュー Day40 伊藤忠商事

【サイトの印象】
・TOPページに写真が多く(サムネイル)見やすい
・ロゴの青と同じトーンの青が多く使われていて、パッと見でコーポレートカラーが伝わる=印象に残る
・商社らしく地球や空が使われていて、ワールドワイドで仕事をしている会社のイメージが伝わる

【リンクボタン】
・リンクアイコンの位置
→頭についている。分かりやすい矢印アイコンを四角で囲っていて視認性も高い。
大項目→矢印を四角で囲んだもの
小項目→矢印のみ

・文中のリンクテキストの表現
→略せず分かりやす。日本語表記。

・ボタンのデザインの形やサイズの種類
→TOP:長方形 270x50
 下層:長方形:200x50

・ドロップシャドウが使われている箇所の共通点
→使用なし

【UI感覚】
・企業のコーポレートサイトのヘッダの縦幅はだいたい何~何px?
→1440px

・ボタンのサイズは1サイトの中で何種類あるか?縦横サイズは何pxか?
→2種類、横幅270pxと200px

・見出し、本文の文字サイズはそれぞれ何px?
→見出し:26px
 本文:15px
 ヘッダー:15px
 フォント:PTserif

・パネルの中や文字の頭に付くアイコンはどんなサイズが適切か?
→18x18

【薄い色は何種類あるか】
・薄く敷かれたグレーの色は何種類あるか?1種類?2種類?
→2種類
#EEEEEE #f0f2f5

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

【コンテンツの横幅やグリッドルール】
・このサイトで使われるコンテンツ幅、グリッドは何種類あるか?
→1200px、1080px、920px

・2~3種類の幅を使い分ける際のルールや共通点は?
→TOPページ:ニュース、事業紹介等情報が多いものは1200px、情報量が少ない社長挨拶バナーやトピックスは1080px 
 下層ページ:トップ画像1200px、それ以降はサイドバーが入るため920px

【写真や図の比率】
・写真や図の縦横の比率は何種類あるか?
→TOP事業紹介アイキャッチ:300x225
    社長挨拶バナー写真:500x225 
 社会貢献バナー:243x243
 注意事項一覧:256x180
それぞれ横幅のルールに従って横並びにした結果、この幅になったイメージ。

・この微妙な比率の違いって本当に必要なルールなのか?
→同上

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

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

・ベース、メイン、アクセントはそれぞれどんな箇所で使われているか?
→ベース:背景色、フッター
 メイン:背景色
 アクセントカラー:見出しの色、ホバーの色、あしらいの色

・トップページの配色の印象を下層ではどんな形で生かしてるのかな?
→背景色は白、リンク、背景にメリハリ付けたい時はグレーと、ルールが統一され反映されている。

【読みやすい文字量を掴む】
・グロナビの各メニューの文字量はだいたい何文字以内になってるか
→10文字以内
 5文字以内だとより簡潔で分かりやすい。

・写真+リンクテキスト、みたいなモジュールはだいたい何文字以内になるか
→15文字以内

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