WEBサイトトレース＆分析 #02 | スキンケアブランド YOAN
こんにちは！
6月だというのに冷えると言っていた前回から一転。
超早く梅雨が明けて、体感温度は40度を超える劇的な暑さが到来しました🏖️2022夏、恐るべしです。
さて今回も前回同様、トレースをしたWebサイトの分析を行いました。
スキンケアブランドYOAN（https://yoan.jp/）を設計側の視点とUI側の視点に分けて考えてみようと思います！
1. 概要
-スキンケアブランド YOAN
-タレントのゆうこすさんがプロデュースするスキンケアブランド
2. サイトのターゲット
-20代の女性で肌トラブルに悩みや不安を持っている人
-普段のお肌ケアはずぼらさんではなく、ある程度丁寧にケアをしている人
3. サイトの目的
-オンラインストアでの購入
-公式LINEアカウントのお友達登録
4. 全体構成
5. メインビジュアルの構成
・PCの場合：1360pxの画像で左右40pxのマージン
・コピーの文字サイズは24pxでサイトの中で一番大きいわけではない
→コピーは一番大きく！という概念があったので新しい引き出しに。目立たないサイズにすることで繊細で女性らしさを演出している
・薄いピンク色の水たまり背景→透明感があるお肌、素肌でも血色がよく潤いのあるお肌を想起させる
・彩度が低くグレーがかかったくすみピンクを使用することで、お肌を優しくいたわりながらケアできる、刺激性の低い商品の印象を与える
・揺らぎがちなお肌の繊細な印象もある
6. CTA
-LINEアカウントのお友達追加
-オンラインストア
UI側の視点
1. フォントサイズ
・各セクションタイトルがページ内で最も大きいサイズ
・どのセクションにも商品写真が大きめに配置されていたため文字サイズは13pxと他のサイトに比べると少し小さめだが、ユーザーに読んでもらうというよりは、写真で商品をクリックさせる方に重点を置いている
・SNSへの誘導ボタンのテキストが23px（他のボタンテキストは13px）と大きいことからSNSでの情報発信に力を入れていることが分かる
→他のサイトはSNSアイコンを並べるだけの印象が多いが、こちらではSNS登録のバナーをたくさん表示させているため、ユーザーが自然とSNSに流れる工夫をしている
2. 使用フォント
▼セクションタイトル：fontFogtwo
ページの中で最も大きいサイズのセクションタイトルには、fontFogtwoを使用。ただAdobeFontで検索しても出てこずFigmaにもなく、購入が必要そうだったので代わりにAthelasというセリフ体を使用。
▼コピータイトル、商品タイトル、商品説明：Yu Gothic Pr6N
ページ内で最も多く使われていたのは、Yu Gothic Pr6N。スタンダードなゴシック体で、文字が小さくても一字一字の識別性に優れている。
▼ボタンテキスト、欧文：Futura
欧文にはFuturaを使用。ルイ・ヴィトンやフォルクスワーゲンに使用されている定番欧文フォントであり、チープな印象を与えず見ていて心地よい雰囲気がある。
3. 配色
・落ち着きのあるくすみピンクとナチュラルなベージュをなじませる色合いで甘くなりすぎない大人っぽさを演出。くすみピンクはトレンドカラーでもあるので流行に敏感な女性に響きそう
・テキストカラーはブラウンピンクとグレーを使用、すごくかわいい組み合わせで個人的に好き
振り返り
分析をして感じたことは、YOANのサイトはビジュアル（写真）の印象があまりにも綺麗でその撮影ディレクションにすごくこだわって制作されたのではないかと想像しました。
商品をどんな配置でどんな背景で撮影するかなどはもしかするとデザイナーの範囲ではないかもしれませんが（明確には分かりません）、WEBサイトはユーザーに見てもらってなんぼなので、こういった商品サイトの場合は撮影のディレクションまで考えられるスキルも重要だと感じました…！
デザイン面では、基礎化粧品といえば白色や水色などクリアな色を使う印象がありましたが、YOANはくすみピンクを中心とした色使いで、
"かわいくなりたい"という女性なら多くの人が持っている潜在的欲求にズドンと響くデザインだなと感じました！
購買に結びつくデザインってこういうことなのかな...と、デザインの重要性を改めて認識しました。
今回はここまでとなります！🍀
最後まで見ていただきありがとうございました！👀
熱中症にはくれぐれもお気をつけくださいませ🌻