藍と栗色の水彩和モダンヘアカラーLP
Watercolor Japanese Muted Hair Color LP
白地を大きく取り、カラー別に藍色と焦げ茶を差し色にしたミニマルなヘアマスカラLP。水彩イラストと素材写真、細身の欧文セリフで静かな上質感を出す。
ヘアケア・ボディケア上品・高級シンプル・ミニマル和風ナチュラルPC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地は白一色。面で区切らず余白でセクションを分ける
- 商品カラーごとにCTAを藍(寒色)/焦げ茶(暖色)に切り替える
- 差し色は購入ボタンと水彩イラストのみに限定
- 文字は真っ黒を避けチャコールグレー
- フッターのみ濃いグレーで締める
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- 和文は細〜中ウェイトで字間を広く
- 欧文セリフは字間を大きく開けて装飾的に使う
- 本文は中央揃えか短い行で改行し行間2以上
- 見出しは小さめに抑え余白で目立たせる
PAGE STRUCTURE
セクション構成
- ファーストビューブランドと2色展開を見せる中央ロゴ、左右に水彩女性イラストと商品、円バッジ
- コンセプト世界観の提示中央揃えの短い見出しと4行の本文
- カラー1紹介寒色カラーの魅力左に商品カード、右に見出し+本文+素材写真
- 香りの説明香調の可視化淡色見出しと水彩植物の三角ピラミッド
- 成分紹介自然素材の安心感成分写真2列グリッド+小キャプション
- カラー2紹介暖色カラーの魅力カラー1と同構成で差し色を焦げ茶に
- 使い方手順の理解細枠カードに線画3ステップ
- 最終CTA購入2商品カードを並べ色別CTA
- フッターナビと問い合わせ濃グレー面に白小文字リンク
COMPONENTS
部品
- 購入ボタン button-primary藍または焦げ茶のベタ矩形、白太字
- 成分を見るボタン button-outline細い濃色枠の白抜き矩形、右に+
- カラー名円バッジ color-badge水彩イラスト上の白い円に欧文小+和名+下矢印
- 商品カード product-card欧文カラー名、商品写真、商品名、価格、送料注記、CTAを縦積み
- 香りピラミッド scent-pyramid淡グレー三角形を3段に分け各段に植物の水彩イラスト
- 成分グリッド ingredient-grid素材写真+成分名キャプションの2列
- 使い方カード howto-card細枠カード内に線画3ステップと矢印
DO
守ること
- 白地の余白を大胆に取る
- カラーごとに差し色を切り替える
- 水彩・線画イラストで手描き感を出す
- 欧文セリフを字間広めで添える
DON'T
避けること
- 彩度の高い色やグラデボタンを使わない
- 太いゴシックの大見出しで詰めない
- 角丸ピルボタンにしない
- 背景に色面や柄を敷き詰めない
DESIGN.MD
design.md 全文
読みやすい形で表示する
DESIGN.md — 藍と栗色の水彩和モダンヘアカラーLP(Watercolor Japanese Muted Hair Color LP)
AI コーディングツール(Claude Code / Cursor / v0 など)に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML(トークン)が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。
Overview
- 業種: ヘアケア・ボディケア / 雰囲気: 上品・高級、シンプル・ミニマル、和風、ナチュラル
- キーワード: 余白・水彩・和の色名・素材感・カラー別展開・静けさ
- 地の質感: 白地に水彩のにじみと素材の物撮り写真。面の装飾はほぼなし
- 形: 直線的な矩形ボタンと細い枠線。円形バッジのみ丸
- 温度感: やや冷たく静か。カラーごとに寒色(藍)と暖色(栗)を切り替える
Colors
| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
primary |
#0B1C31 |
藍色系の購入ボタン・カラー1の差し色 | 2% | 画素の実測 |
secondary |
#33231C |
栗色系の購入ボタン・カラー2の差し色 | 1% | 画素の実測 |
cta |
#0B1C31 |
主CTA(藍) | 1% | 画素の実測 |
on-cta |
#E8F0F5 |
CTA上の文字 | 0% | 画素の実測 |
background |
#FFFFFF |
ページ地 | 76% | 画素の実測 |
background-alt |
#F2F3F5 |
香りピラミッドの淡いグレー面 | 3% | 画素の実測 |
text |
#201F25 |
見出し・強い文字 | 2% | 画素の主要色に補正 |
text-body |
#565457 |
本文 | 2% | 画素の主要色に補正 |
line |
#EAEBEB |
使い方カード枠・サブボタン枠 | 0% | 画素の主要色に補正 |
dark-section |
#565457 |
フッター | 3% | 画素の実測 |
on-dark |
#FFFFFF |
フッター文字 | 0% | 画素の主要色に補正 |
accent-1 |
#B67C5F |
栗・水彩の暖色アクセント | 2% | 画素の主要色に補正 |
tint-1 |
#FDFEFD |
ベージュの淡色 | 2% | 画素の実測 |
- 地は白一色。面で区切らず余白でセクションを分ける
- 商品カラーごとにCTAを藍(寒色)/焦げ茶(暖色)に切り替える
- 差し色は購入ボタンと水彩イラストのみに限定
- 文字は真っ黒を避けチャコールグレー
- フッターのみ濃いグレーで締める
Typography
| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ(375px 幅) | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
display |
ロゴ・欧文カラー名 | 欧文セリフ | Cormorant Garamond | 400 | 28px | 1.2 | 0.2em |
headline-lg |
コンセプト見出し | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.2em |
headline-md |
特長の短い見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.15em |
headline-sm |
商品名・小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.05em |
body-md |
本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.1 | 0.12em |
note |
成分名・注釈・送料 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em |
accent |
英字サブ見出し(How to use等) | 欧文セリフ | Cormorant Garamond | 400 | 13px | 1.4 | 0.15em |
label-button |
ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.15em |
- 和文は細〜中ウェイトで字間を広く
- 欧文セリフは字間を大きく開けて装飾的に使う
- 本文は中央揃えか短い行で改行し行間2以上
- 見出しは小さめに抑え余白で目立たせる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。
Layout
- カラム: SPは1カラム。商品情報→特長→写真を縦積み
- 本文ブロックの幅: 画面幅の約 86%
- 余白: セクション間 96px、基本単位 8px、カード内 24px(375px 幅換算)
- セクション間は大きな余白で区切る
- 商品カードは中央揃え
- 成分写真は2列グリッド
- 使い方は3ステップを横並び(SPは縦も可)
Elevation & Depth
- 影はほぼ使わない
- 使い方カードは細い枠線と極薄の影のみ
Shapes
- 角丸: 小 0px / 中 2px / 大 4px。ボタンは角丸の長方形。
- 写真の切り抜き: 矩形の写真をそのまま、成分写真は白地に切り抜き
- セクション境界: 境界線なし、余白のみ
- ボタンは角丸なしの矩形
- サブボタンは細枠の白抜き
- 円形の白バッジでカラー名を示す
Components
- 購入ボタン(
button-primary): 藍または焦げ茶のベタ矩形、白太字 - 成分を見るボタン(
button-outline): 細い濃色枠の白抜き矩形、右に+ - カラー名円バッジ(
color-badge): 水彩イラスト上の白い円に欧文小+和名+下矢印 - 商品カード(
product-card): 欧文カラー名、商品写真、商品名、価格、送料注記、CTAを縦積み - 香りピラミッド(
scent-pyramid): 淡グレー三角形を3段に分け各段に植物の水彩イラスト - 成分グリッド(
ingredient-grid): 素材写真+成分名キャプションの2列 - 使い方カード(
howto-card): 細枠カード内に線画3ステップと矢印
Do's and Don'ts
Do - 白地の余白を大胆に取る - カラーごとに差し色を切り替える - 水彩・線画イラストで手描き感を出す - 欧文セリフを字間広めで添える
Don't - 彩度の高い色やグラデボタンを使わない - 太いゴシックの大見出しで詰めない - 角丸ピルボタンにしない - 背景に色面や柄を敷き詰めない
Page Structure
LP 独自の章。上から順に、カッコ内が各セクションの役割。
- ファーストビュー(ブランドと2色展開を見せる): 中央ロゴ、左右に水彩女性イラストと商品、円バッジ
- コンセプト(世界観の提示): 中央揃えの短い見出しと4行の本文
- カラー1紹介(寒色カラーの魅力): 左に商品カード、右に見出し+本文+素材写真
- 香りの説明(香調の可視化): 淡色見出しと水彩植物の三角ピラミッド
- 成分紹介(自然素材の安心感): 成分写真2列グリッド+小キャプション
- カラー2紹介(暖色カラーの魅力): カラー1と同構成で差し色を焦げ茶に
- 使い方(手順の理解): 細枠カードに線画3ステップ
- 最終CTA(購入): 2商品カードを並べ色別CTA
- フッター(ナビと問い合わせ): 濃グレー面に白小文字リンク
Imagery
- 墨や絵具がにじむ水彩の女性横顔イラスト
- 素材(藍・栗・木の実)を俯瞰やクローズアップで撮った自然光写真
- 白背景に切り抜いた成分物撮り
- 黒の細い線画で使い方を説明
- 香りの植物は小さな水彩カット
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。
Responsive Behavior
- PCは商品カード左・説明右の2カラム、SPは縦積み
- PCの最終CTAは2商品横並び、SPは縦並び
- FVのイラスト2点はSPで縦並びか縮小横並び
- 成分グリッドはSPでも2列維持
Agent Prompt Guide
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う(CSS 変数に展開してよい)
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP(375px)で組み、Responsive Behavior に沿って PC に広げる
Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。
SOURCE
出典と注意
- 元の LP: https://mascara.uruotte.com/(公開状況により表示できない場合があります)
- この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
- 元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
- 色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
- 元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。
似た LP の design.md
ヘアケア・ボディケアグレージュ×レモンイエローのヘアケアLPSoft Greige Hair Care Ingredient LP
ヘアケア・ボディケア紫×夜空の和モダン高級ヘアケア LPStarry Purple Japanese Heritage Haircare LP
ヘアケア・ボディケアパステルハート舞うキャラコラボ ヘアコスメ LPPastel Character Collab Hair Cosmetic LP
ヘアケア・ボディケアグレージュ×ローズ×マスタードの2タイプヘアオイル LPGreige Salon Hair Oil Two-Type LP
ヘアケア・ボディケア生成り×モカブラウンの上品ヘアケア LPIvory and Mocha Organic Haircare LP
ヘアケア・ボディケア夜の紫×金ウェーブのボディソープLPNight Purple Gold Wave Bodycare LP