■ 概要 Overview
角質ケアと保湿ケアが同時に叶う新発想のスキンケアブランド「YOAN」
“Reset to live lithely”を掲げオーガニックの成分と発酵の力で肌のストレスをリセットし、潤いを満たし、肌のリズムを整えるスキンケア製品の情報を紹介する公式Webサイト
■ ファーストビュー Above the fold
ロゴ
キービジュアル
ハンバーガーメニュー
買い物かご
■ ターゲット Target
■ フォント Font
yu-gothic-pr6n 10px,14px,16px,20px
futura-pt 14px,28px
fontFogtwo 56px
■ カラー Color
<B>#F6EFE7
<M>#EFE1D1
<A>#E1BBBB
■ デザインの特徴 Design features
１カラムで比較的規則性をもった構成
余白をたっぷりとり、情報が伝わることを目的とした文字組で、必要最小限のテキストでよく整理されている
ページ全体、ペールピンク系のトーンで、文字色もグレー系やピンク系を使用
プロダクトの写真やキャプション、ボタンからその詳細ページにリンクできるようになっているが、全般的に色が薄めでやや見づらいように思うが、配色や華奢で繊細なフォントやイメージ画像からは透明感や肌の柔らかさ、ナチュラルで優しい印象を与える美しいデザインになっている
そのイメージはプロダクトデザインなどに沿うかたちで、トンマナが徹底されている
とはいえ、トライアルセットのキャンペーンや購入などのCTAボタンも多く設置され、アクションしてもらいたい目的を持つことから、JavaScriptで丸いしずくのような形状のマウスカーソルがマウスホバーで大きくなるアニメーションを実装し、クリックできる箇所をわかりやすくするようカバーしている
製品のイメージを最優先にデザインされたWebサイトになっている
https://yoan.jp/