webデザインを”見る”勉強⑧
こんにちは、デザイン分析第８回目です。
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
本日も上記に沿って分析していきたいと思います。
今回はこちらのサイトです。
TAKAYU♨︎温泉パーラー 様
卒制が終わって半年間のスクールも卒業して、達成感というか完全燃焼してしまったところがあり、分析やらなきゃだけど何にしよっかな〜今の私にビビッとくるサイトないかな〜と参考サイトを見ていたら、
「こ、ここここれは…！！！」
燃焼しきった私に響く可愛さだったので選びました笑
正直私個人レトロ系があまり好きではなく、どちらかというと分析６と７で取り上げたようなサイトの方が好みですが、今回６や７と同じターゲット層だけどnewではなくold系ということで今回こちらのサイトを分析していきたいと思います。
1
かわいい！レトロ
→フォント
2
・レトロなフォントと暖簾
・写真がレトロなフィルターかかってる
写真がずらっと並んでおり雰囲気がわかりやすい
・FV後の暖簾がスクロールする度に段々大きくなっていくのが、暖簾をくぐってお店に入る感が出ていて、さらにその後に店内の雰囲気がわかる写真が掲載されていて面白い
3
・sectionの間にロゴのアニメーションがあってわかりやすい
・余白は結構狭めな印象（PC：70px）
・商品ラインナップ一覧の画像を見せつつ、その下にラインナップの詳細がたたんであり、コンパクトで良い
4
・和文：IBM Plex Sans JP
・本文：14px
・値段：数字…25px、税込の文字…16px
・昭和っぽいメインフォントはパスで書かれている
5
あしらい配色
・さくらんぼっぽい赤い円：#C14238
・青い波線：#6AB9BE
・緑の波線：#5CC244
・オレンジの波線：#BB8B38
背景色に合わせたフォント色
・水色のフォント：#9AC8D5
・黒本文フォント：#042A31
・カード型背景色の白：#fff
6
・背景のグラデーションもクリームソーダ感、レトロな夕焼け感のある褪せたフィルタがかかった配色
・フッターの下のイラストも江戸時代の浮世絵感あるタッチでかわいい、さりげないインパクトがいい
7
・水色、緑、オレンジの波線+赤い丸（さくらんぼかな？）がクリームソーダを連想させる
上にふわっと上がるアニメーションもさらにクリームソーダの炭酸や液体感、さくらんぼが上に浮くふわっと感が出ていて素敵
今日もお疲れ様でした！
また次回お会いしましょう〜！
この記事が気に入ったらサポートをしてみませんか？