今日の分析するHP:株式会社オカムラ様
種類：コーポレートサイト

STEP1：第一印象

情報がすっきりとまとまっていて、まじめで実直な印象
・色数が抑えられている
・余白が大きく取られていてあしらいは最小限
・レイアウトのリピートや要素の形状や大きさが整っている

STEP2：ロゴ・文章・写真からブランド理解を深める

• トップページの文言は最小限にまとめられていて、下層ページでしっかり読ませる

• 画像を大きく使い、シンプルだけど無機質な感じがせず、イメージが湧く。人の笑顔や明るい写真が多く、会社の雰囲気の良さを感じる。

STEP3：レイアウト・余白を分析する

機能面：上から下に視線が迷うことなくスムーズに読み進められる。
情緒面：余白が広く、要素の配置が整頓されていて落ち着いた優しい印象をうける。

STEP4：色味の分析

メインカラー：#ffffff
ベースカラー：#f5f5f3
アクセントカラー：#e60039（ロゴカラーと同じ）
テキスト：#333333
色数が抑えられていて、無彩色が多い。シンプルで誠実感のある印象を受ける。アクセントカラーとしてロゴカラーの赤が使われていて、統一感があり、それ以外の色との差が大きいため視線誘導効果が高く感じる。

STEP5：フォントの分析

"UD Shin Go Regular" モリサワフォント
→「UD新ゴ」は、見やすい書体として評価の高い「新ゴ」をベースに、個々の文字のわかりやすさを重視した字形をとりいれたユニバーサルデザイン書体です。欧文・数字には判別性にすぐれた欧文書体 ClearTone SG のデザインを採用しています。ユニバーサルデザインに配慮をしたい媒体で、見出しやサインなど整然としたデザイン的な表現において特に力を発揮します。
モリサワHPより

h1:可変　calc(100vw * 32 / 1366)
h2:30px
h3:20px
本文:16px
ボタン:14px
セクション間余白：120px

まじめでかっちりとした印象で、全体の雰囲気と合っているように感じる。

STEP6：あしらい

なし

STEP7：アニメーション

画像：ホバーすると拡大
メニュー：ホバーすると左から下線
ボタン：ホバーすると左上と右下から赤いライン、矢印がグレー→赤
ニュース一覧：ホバーすると該当ニュースの上のラインの色が左から濃い色に
ソリューションセクション：各事業にホバーすると、横幅が広がる