ビューティー&コスメ設計ガイド -- "Clean Glow"
Glossier や Aesop に代表されるクリーンビューティーブランドのデジタルデザインは、「肌のようなUI」を目指す。ウォームヌードの背景、ソフトな角丸、そして透明感のある余白が製品の純粋さと誠実さを伝える。
本テンプレートは「Clean Glow」設計システムとして、ビューティー製品に最適化されたデザインを定義する。ローズウッド (#d4736e) のアクセントとトープ (#9b8579) の補助色が、クリーンで信頼感のあるブランド体験を構築する。
核心となる設計思想
全てがソフトでウォーム。角丸は 16px 以上、フォントウェイトは 400-500、背景は #ffffff / #faf7f5 / #f0ebe5 の3段階。ダークモードは存在しない。明るく清潔な世界観を徹底する。
1. デザイン哲学 -- 「肌のようなUI」
Glossier の透明感
Glossier のサイトはピンクとホワイトの世界。製品は白背景で撮影され、余計な装飾は一切ない。ユーザーレビューが信頼の柱となり、成分情報が透明性を担保する。
Aesop の誠実さ
Aesop はウォームトーンとミニマルなタイポグラフィで「正直な美しさ」を表現する。製品パッケージそのものがデザインの一部であり、UIはそのパッケージの延長線上にある。
製品ページプレビュー
2. カラーパレット
背景系
Base
#ffffff
Warm
#faf7f5
Deeper
#f0ebe5
テキスト&アクセント
Primary
#2c2c2c
Secondary
#666666
Rosewood
#d4736e
Taupe
#9b8579
3. タイポグラフィ
Hero Display 48px
Section Title 36px
Product Name 24px
Body -- 肌に瞬時に浸透し、内側から輝く透明感を引き出す軽やかなテクスチャー。
Body Small -- 成分情報や使用方法の説明テキスト。
Label -- Skincare / Ingredients
4. コンポーネント
ボタン
成分カード
Key Ingredients
Hyaluronic Acid
深層保湿で肌のハリと弾力を維持する。
Vitamin C
くすみにアプローチし、明るい肌へ導く。
Niacinamide
毛穴を引き締め、肌のキメを整える。
レビューカード
★★★★★
「使い始めて2週間で肌のトーンが明るくなったのを実感。テクスチャーが軽くてベタつかないのも気に入っている。」
Yuki M. -- 購入者レビュー
カラースウォッチ
Select Shade
Fair
Light
Medium
Tan
Deep
5. レイアウトパターン
ページ構成
| セクション | 背景 | コンテンツ |
|---|---|---|
| ヒーロー | #faf7f5 | キャッチコピー + 製品画像 |
| 製品詳細 | #ffffff | 2カラム（画像 / 情報） |
| 成分情報 | #f0ebe5 | 成分カードグリッド |
| レビュー | #ffffff | レビューカードリスト |
| 関連製品 | #faf7f5 | 3カラム製品グリッド |
スペーシング
- セクション上下: 64-80px
- カード間: 16-24px
- 製品グリッドギャップ: 32px
- カード内パディング: 20-24px
- テキスト最大幅: 600px
- コンテンツ最大幅: 1200px
- 角丸: 16px 統一
6. 影とデプス
ビューティーデザインの影はソフトでウォーム。
| 状態 | 影 |
|---|---|
| デフォルト | なし（ボーダーのみ） |
| ホバー | 0 4px 20px rgba(0,0,0,0.06) |
| ドロップダウン | 0 8px 24px rgba(0,0,0,0.08) |
| モーダル | 0 16px 40px rgba(0,0,0,0.12) |
| スウォッチ | 0 2px 4px rgba(0,0,0,0.10) |
7. 実装上の注意点
Do
- 角丸 16px 以上で統一
- ウォームトーン背景を使い分ける
- CTAは pill shape
- 成分情報を丁寧に表示
- レビューを信頼感ある形で配置
Don't
- ダークモードを使わない
- 角丸 0px にしない
- 原色を使わない
- 影を濃くしない
- uppercase を乱用しない
- 太字を多用しない
8. レスポンシブ対応
| ブレークポイント | 製品グリッド | 製品詳細 | CTA |
|---|---|---|---|
| Mobile (<640px) | 1カラム | 縦積み | 画面下固定 |
| Tablet (640-1024px) | 2カラム | 縦積み | インライン |
| Desktop (1024px+) | 3-4カラム | 2カラム | インライン |
9. Agent プロンプト例
製品カード:
#ffffff 背景、角丸 16px、ボーダー rgba(0,0,0,0.06)。
画像 1:1。製品名 #2c2c2c, 16px, weight 500。
価格 #2c2c2c, 18px。ホバー shadow 0 4px 20px rgba(0,0,0,0.06)。CTA:
背景 #d4736e, テキスト #ffffff, pill shape, 幅100%。
15px, weight 500。ホバー #c45f5a。成分セクション:
背景 #f0ebe5。成分カード #ffffff, 角丸 12px。
成分名 #2c2c2c, 14px, weight 500。
説明 #666666, 13px, line-height 1.60。