藍と栗色の水彩和モダンヘアカラーLP

Watercolor Japanese Muted Hair Color LP

白地を大きく取り、カラー別に藍色と焦げ茶を差し色にしたミニマルなヘアマスカラLP。水彩イラストと素材写真、細身の欧文セリフで静かな上質感を出す。

ヘアケア・ボディケア上品・高級シンプル・ミニマル和風ナチュラルPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。

COLORS

配色

TYPOGRAPHY

書体

displayロゴ・欧文カラー名欧文セリフ / Cormorant Garamond 400 / 28px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-lgコンセプト見出しゴシック / Noto Sans JP 500 / 20px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
headline-md特長の短い見出しゴシック / Noto Sans JP 700 / 18px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
headline-sm商品名・小見出しゴシック / Noto Sans JP 700 / 13px / 行間 1.6
あなたの LP を、もっと伝わる形に。Aa 123
body-md本文ゴシック / Noto Sans JP 400 / 13px / 行間 2.1
あなたの LP を、もっと伝わる形に。Aa 123
note成分名・注釈・送料ゴシック / Noto Sans JP 400 / 10px / 行間 1.6
あなたの LP を、もっと伝わる形に。Aa 123
accent英字サブ見出し(How to use等)欧文セリフ / Cormorant Garamond 400 / 13px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
label-buttonボタン文字ゴシック / Noto Sans JP 700 / 14px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビューブランドと2色展開を見せる中央ロゴ、左右に水彩女性イラストと商品、円バッジ
  2. コンセプト世界観の提示中央揃えの短い見出しと4行の本文
  3. カラー1紹介寒色カラーの魅力左に商品カード、右に見出し+本文+素材写真
  4. 香りの説明香調の可視化淡色見出しと水彩植物の三角ピラミッド
  5. 成分紹介自然素材の安心感成分写真2列グリッド+小キャプション
  6. カラー2紹介暖色カラーの魅力カラー1と同構成で差し色を焦げ茶に
  7. 使い方手順の理解細枠カードに線画3ステップ
  8. 最終CTA購入2商品カードを並べ色別CTA
  9. フッターナビと問い合わせ濃グレー面に白小文字リンク
COMPONENTS

部品

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 独自の章。上から順に、カッコ内が各セクションの役割。

  1. ファーストビュー(ブランドと2色展開を見せる): 中央ロゴ、左右に水彩女性イラストと商品、円バッジ
  2. コンセプト(世界観の提示): 中央揃えの短い見出しと4行の本文
  3. カラー1紹介(寒色カラーの魅力): 左に商品カード、右に見出し+本文+素材写真
  4. 香りの説明(香調の可視化): 淡色見出しと水彩植物の三角ピラミッド
  5. 成分紹介(自然素材の安心感): 成分写真2列グリッド+小キャプション
  6. カラー2紹介(暖色カラーの魅力): カラー1と同構成で差し色を焦げ茶に
  7. 使い方(手順の理解): 細枠カードに線画3ステップ
  8. 最終CTA(購入): 2商品カードを並べ色別CTA
  9. フッター(ナビと問い合わせ): 濃グレー面に白小文字リンク

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 の design.md