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

こんにちは、デザイン分析第６回目です。
そして２週間振りの投稿です。。卒制に追われてなかなかこちらに時間を割けなかったのですが、PCを開けない移動時間を利用して分析したので書いていきます！

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

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

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

サパラ公式サイト　様

SÚPALA(サパラ)公式サイト｜未来へ機能する根源ケアブランド

暗めベースのサイトにちゃんと触れたことがなく、デザインの色味や構成に興味があり、こちらのサイトがおしゃれでスタイリッシュで素敵だな〜と思ったので選びました。

1
シンプルでスタイリッシュ、おしゃれ
→使用色が少ない

2
・FVでテキストと写真、背景色を被せることで
→ブランド色としての認知も向上
・ SP版ナビゲーション内に、カートに今入っている商品数が入っている
→購入ページを辿る手間を省けるので良い

3
・ニュースsection内も余白を大きめに取っている：30px
→全体や商品画像に余白を取っているように、圧迫した印象にならない
・section隣接余白：120px（sp：100px）
・ボタンの大きさ（幅）：239px（sp：163px）

4
・使用色がラベルの色、よりくすんだグレーと写真のアクセントカラーのみ
→#363F45（メイン）、#909090（グレー）
・商品のラベルの色を全体の背景色に使用
→ブランドとしての認知向上
・商品ラベルに使用されているラベルの背景色だけでなくテキストに使用されている色も統一している
→更なるブランドの認知向上

5
・sectionタイトルのフォントが小さく：18px（sp：14px）、
訴えたいキャッチコピーの方がフォントが大きい：26px（sp：20px）
→キャッチコピーに目がいき、自然に入ってくる
・本文：14px（sp：12px）
・ボタンのフォント、商品名、金額：16px（sp：14px）
・商品説明：12px

6
・あしらいはほぼ入れずシンプルに
・media欄の各社ロゴがモノクロ
→全体のトーンと合わせている
・商品写真は、アップではなく商品と写真との余白広め
→圧迫した印象を持たせない

7
・SP版ナビゲーション部分はふわっと出てくる
→世界観を保ち、パチっと切り替えないように
・FVもその下の商品画像や商品名テキストも、右から左にページを捲るように、出てくる
→商品をカタログのように見せている
→商品カタログを見ながらショッピングしているような視点

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