webデザインを”見る”勉強⑦
こんにちは、デザイン分析第７回目です。
数週間振りの更新になってしまいました、、
移動中などに分析して記録しておいた記事を今回投稿します。
やっと卒制が完成し、スクールも無事卒業できました！！
今月ずっとバタバタしていましたが落ち着いてきたので、実務に向けてデザイン分析を再開して引き出しを増やしていきたいと思います！
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
本日も上記に沿って分析していきたいと思います。
今回はこちらのサイトです。
THE BEAUTIFUL by Amino Mason 様
"the 若い女性向けのサイト"感があり、ターゲットが明確なのでこのユーザー層へのアプローチの勉強になりそう！と思い、今回こちらのサイトを選びました。
1
ピンク！可愛くて若者向けなイメージ
→全体色がピンク、FVの女性たちが20代
2
・ハンバーガーボタンを押した時に、下から上、上から下に曲線になってナビゲーションが表示される
→シャンプーの液体感を演出
・セクションごとにピンク色の濃さが違うので区切りがわかりやすい
3
・SPの余白はそんなに広くない
→SP100px、PC270px
・全体的に左右に振っているデザインだが、バランスがよく偏っていない
→about:タイトルと背景色が左、見出しは中央(左揃え)、画像は右ときた後、本文は左、ボタンはテキスト中心に中央で、矢印は右寄り
⇒全体的に左寄りな印象
→ethical:タイトルと縦のあしらいは右、画像と見出しは左、本文は中央(左揃え)、ボタンはテキストと矢印を合わせた幅の中央
⇒全体的に左寄りな印象
→products:タイトルは左、あしらいは商品ごとに右についている、背景色・商品画像、テキスト、ボタン(テキスト〜矢印の幅)は中央
⇒全体的に右寄りな印象
→News:タイトル、画像、本文、日付全てが左だが、背景色は全面
⇒全体的に左、上のセクションが右寄せの印象だったのでバランスを取っている
4
・あしらい、主張したい部分のフォントがかなり大きく、本文で使用されているフォントの大きさとのメリハリがあって見やすい
・セクションタイトルが小さく縦に、交互に置かれている
→内容やデザインを邪魔しない
・日本語フォント：ゴシックMB101
・欧文フォント：poppins
・キャッチコピー：SP15.5px、PC42px
・本文：SP12.5px、PC18px
・sectionタイトル：SP13px、PC25px
・sectionタイトル（キャッチコピー）：SP38.5〜42.5px、PC90〜105px
・ボタンリンクの大きさ：SP幅…130px、フォントサイズ…12px、PC幅…212〜268px、フォントサイズ…20px
5
・商品カラーのピンク（#F1A2B0）、ポップではっきりした色味の濃いピンク（#EC6486）を使用
→より印象付ける
・フォントカラーは白#fff
6
・あしらいテキストがベタ塗りではなく枠のみのフォント
→余白が大きくない、フォントが大きい分窮屈にならないようにしている
&ボトルや液体の透明感を演出
7
・アニメーションがかなり多い印象
・流行りの、テキストが円になっていて回っているデザインを取り入れている
→若者向けなイメージ
・商品一覧のproductsは、商品とそれを囲む背景の楕円が中央からぽわっと出てくる
・フッターの上が、液体が入っている容器の液体が揺れているような波打ち
・フッターやハンバーガーメニュー内のコンテンツをhoverするとブロックのようにくるっと面が手前に動く
ではまた次回お会いしましょう〜！
この記事が気に入ったらサポートをしてみませんか？