webデザインを”見る”勉強⑤

こんにちは、デザイン分析第５回目です。

1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード

本日も上記に沿って分析していきたいと思います。

今回はこちらのサイトです。

和倉温泉 虹と海【公式】加賀屋グループ　様

和倉温泉 虹と海【公式】加賀屋グループ

旅行業務取扱管理者の資格勉強でも学習した、石川県の有名温泉「和倉温泉」。
伝統のある有名温泉地ですが、このサイトは結構イマドキ？で元々あった自分の印象からかなりギャップがあったので選びました。

１
・ターゲット層は20〜40代女性グループ？
→淡い色合い、全体的にグラデーション、2〜4人の写真を使用、
TOPページ中央部分で、コンテンツを＃で示している
・伝統的な重厚感・高級感あるサイトではなく、シンプルで軽い印象
→背景色が白メイン

２
・宿泊の醍醐味である、景色・部屋・食事をFVに持ってきて、
→宿の魅力をプッシュしている
・”虹”が入っている宿名にちなんでグラデーションを全体に使用
→印象を持たせている（ブランドの刷り込み）

３
・余白多め
→400pxくらい
・ヘッダーを右に持ってきて、
→写真のインパクトやサイトの世界観を邪魔しないようにしている
・ヘッダー：100px
・１ページに１コンテンツ
・横並びコンテンツの１つの横幅は200〜250px

４
・全体的に線が細い
→重厚感ではなく軽いポップな印象、シンプルで繊細な印象
・游ゴシック
・あしらい英語フォント
→Poiret One（100px）
・フォントのカラーは黒ではなくグレーを使用
→#323232、#727272
・本文フォントサイズ：15〜16px

５
・白地にすることにより、明るい印象
→写真の美しさが映えるようにし、黒ではなく白を背景にすることで、
→伝統的・高級感のある印象を払拭し、若い女性グループにも気軽に宿泊して欲しいという意図がありそう
・白に近いグレーを使用
→虹に関連して明るい色の雲をイメージしている？
・写真の邪魔をしないカラー

６
・宿名の虹に合わせてあしらいやイラストも虹に
・カクカクした宿のロゴに合わせて、
→あしらいに三角を使用

７アニメーションなし

ではまた次回お会いしましょう〜！