240116 サイト分析 #07
分析するサイト様：SPRINAGE（スプリナージュ） -
「肌にいいものは、髪にもいい。」
スキンケア発想のヘアケアブランド。
低刺激処方の新ライン『モイストヴェール』を追加し新たにリニューアル。
1.ファーストインプレッション
繊細
綺麗
柔らかい印象
優しい雰囲気
淡色カラー
2.ロゴ、文章、写真からブランド理解を深める
https://nssg.jp/article/sprinage/
3.レイアウト・余白を分析する
レイアウト
・メインビジュアル
・動画
・コンセプト
・ラインナップ
・マガジン
・ニュース
・インスタグラム
・フッター
機能面
シンプルなレイアウト。
余白が多めに取られており、行間も広く読みやすい。
余白が広いため各コンテンツに目が行きやすいく感じる。
動画がメインビジュアルの次に来ており、ブランドのイメージが湧きやすい。その次にラインナップが来ており、アクセスがしやすい順になっている。
情緒面
余白が広く要素も少なく整っており落ち着いた優しい印象。
4.色味を分析する
ベースカラー：#FBF9FA(淡く薄いピンク),#FFFFFF(白)
フォントカラー：#52514C(グレー)
アクセントカラー：#E0C2C4(淡く濃いピンク)
メインビジュアル背景カラー：
#F2E2E2,#B6C4D2,#E7DACC
トータルでパステルカラーが使用されており、女性的。
パステルカラーは柔らかさや静けさを連想させる色とされている。 暖かさ、心地よさ、リラックス感などを連想させる色として使われることが多く、 またパステルカラーは、モダンなインテリアデザインに見られるような、洗練された印象を与える色でもある。
5.フォントを分析する
「YakuHanJPs」
約物半角専用のWebフォント。
約物（やくもの）とは記号の中でも文中によく使われるもののこと。
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
Web上でこれらを半角にできるのが「Yaku Han JP」
「Neue Kabel」
Neue KabelはRudolf Koch作のKabel®をリデザインしたものです。手がけたのは、Kochもかつて在籍したドイツのオッフェンバッハ・アム・マイン造形大学で書体デザインを教えていたMarc Schützです。Schützが目指したのは、オリジナルのKabelの特徴と魅力を保ちながら、現代の表示環境に適した形にすることでした。
本文をNeue Kabelで組むと、Kochのデザインの優雅さ、明るさが現れます。印刷物でもインタラクティブデザインでも、高い汎用性を発揮します。
クリングスポール活字鋳造所（the Klingspor foundry）のために、ルドルフ・コッホというドイツの書体デザイナーがデザインしたサンセリフがKabel。
Kabel®フォントについて書いているnoto：
https://note.com/shijimiota/n/n08e2d3d0face#c37e4ebc-9c23-4615-b242-73bc644d83c7
「游ゴシック体」
「游ゴシック体」は、長文でも非常に読みやすいようにデザインされた、標準的なゴシック体ファミリー。字面は比較的小さくデザインされており、文字間にゆとりを持たせることで、文字同士が干渉せず、読みやすい組版を実現。
6.あしらい
7.アニメーション
ローディング画面でロゴがじんわりと左から表示される（ぼかしが溶けていくような感じ）
メインビジュアルの画像の切り替わりとズームアウトしていくような動き
ラインナップページで縦スムーススクロール
8.感動/振り返り
サイトを通してブランディングがしっかりされていると感じる。
色味や画像、フォント、インスタグラムまでが統一感のあるデザインになっている。
女性的なデザインでありながら、要素は少なくミニマルで清潔感があり洗礼された雰囲気を受け、大人向けのフェミニンな印象。
パッケージデザインや写真などがとても好みで、素敵でした。
この記事が気に入ったらサポートをしてみませんか？