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

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

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

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

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

湯沢中里スノーリゾート　様

【公式】湯沢中里スノーリゾート

今シーズン家族旅行で最初の候補だった、湯沢中里スノーリゾート。
母に、調べといて〜と言われて調べてみたら…！
サイトめっちゃ可愛いんですけど〜〜！！！

そこから数ヶ月忘れられず笑、今回サイト分析に選びました。

１かわいい！！イラストもそうですが、FVで個々のイラストたちがそれぞれ動いている（滑っていたり、リフトが動いていたり、動物たちがちょっと動いていたり、、）

２
・ずっと見ていたくなるようなFV
→電車のイラストがちょこちょこあることで（FV下部、キッズパークsection）
→アクセスの良さを表している＆子供受け◎
・他のページも含め、イラストや写真が多く、文量が少ない
→大人でも子供でも見飽きることなくサイトを見ることができる
・アクセスページのインターからの行き方が超わかりやすい！！
→交差点にロゴ付き看板が立っている上に、目印になるコンビニや線路などが明記されていることで
→マップアプリを開かなくても分かる！

３
・余白結構狭め：margin60〜80px
→ページ長くなると離脱に繋がる（特に親子はそうなのかも？）
・タイトルと内容の間のmargin：24px
・SNSアイコンだけでなく、内容も一部掲載している
→どんな内容を投稿しているのか系統がわかりやすい
・提携している観光系サービス、ツアーを数多く掲載することで
→信頼感がある、有名なのかな？と思ってしまう
・今日の天候や積雪だけでなく、リフトの運行状況やゲレンデの状況もFVにあることで見やすく、イラスト化されていることでわかりやすい
・コンテンツをなるべく横並びにして（PC:4個、SP:2~3個）
→ページを短くして離脱を防いでいる

４
・日本語、英語フォントともにOpen Sans、それ以外のフォントは画像化している
・ヘッダー：15px
・ニュースsection：14px
・本文で主張したい部分：21〜24px（SP:16〜23px）

５
・湯沢中里のロゴに使われているカラーを中心に使用
→パキッとしすぎないくすんだカラーを使用

６
・ロゴに使われている３つの山のシェイプに近い、三角形を
画像のタイトルや説明、あしらいに使用
・フッターの背景
→雪のような質感の背景、FVの雪山のイラストを使用している

７
・トップのFVとコース紹介のキッズパークの2箇所
→子供が好きそうな、乗り物や動物の動きにアニメーションをつけている

本日もお疲れ様でした！
また明日お会いしましょう〜！