DESIGN.md — ベージュ×オレンジの漫画調腕時計 LP（Warm Beige Retro Illustrated Gadget LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 家電・ガジェット ／ 雰囲気: レトロ、親しみ・手作り感、シンプル・ミニマル、ポップ・元気
• キーワード: ベージュ地・オレンジ線画・大文字英字見出し・余白の多い写真・レトロ漫画調・黒い製品
• 地の質感: マットな紙のようなベージュ面。図解パネルにはうっすら紙の粒子がある
• 形: 四角いブロックが基本。ボタンは角丸なしの長方形、図解内のラベルだけピル型
• 温度感: 暖色寄り。ベージュとオレンジの温もりを、黒とグレーで引き締める

Colors

• 白とベージュをセクションごとに交互に置き、リズムを作る
• オレンジはイラスト・図解の見出し・ロゴだけに使う。本文には使わない
• テキストはほぼ黒。英字見出しだけグレーで少し控えめにする
• ボタンは黒の長方形に白文字。オレンジのボタンは作らない
• 仕様表は無彩色のグレー地にして、情報エリアとして区別する
• button-product は文字 #FFFFFF × 背景 #B2B2B2 のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#767676、4.54:1）を使う。

Typography

• セクション見出しは英字大文字で字間を広くとり、中央に置く
• 見出しの直下に、2〜3 行の和文リードを中央寄せで添える
• 特長は大きな数字と太字の和文見出しを横に並べる
• 本文は行間を広くとり、細かく改行する
• 遊びのある極太書体はロゴと図解だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真とテキストを縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下に大きな余白をとる
• 写真ギャラリーは大小の写真を左右交互にずらして置く
• 特長の各項目は細い横線で区切る
• 全幅の写真を区切りとして挟む
• 仕様は左揃えの項目名：値で並べる

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる
• 奥行きは面の色の切り替えだけで表す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長 3:2 前後を主に使う
• セクション境界: 直線で色を切り替える。イラストの帯を境界に置くこともある
• ボタンは角丸なしの長方形
• 図解内のモードラベルだけピル型にする
• ロゴは円形のバッジに入れてよい

Components

• 黒い長方形ボタン（button-primary）: 取扱説明やSNSへ誘導するボタン。外部リンクのアイコンを添える
• 商品カードのグレーボタン（button-product）: ラインナップのカード下にある購入ボタン
• 英字大文字の見出し（section-title-en）: 字間を広くとったグレーの英字を中央に置き、下に和文リードを添える
• 商品カード（product-card）: 白地に切り抜きの製品写真、NEW ラベル、お気に入りアイコン、型番、価格を並べる
• 番号付きの特長（feature-row）: 大きな数字と太字見出し、小見出し付きの本文、写真で構成し、区切り線で分ける
• 手描き図解パネル（usage-diagram）: ベージュ地に線画の人物、時計、矢印、ピル型ラベルを置き、オレンジの縦書き見出しを添える
• 仕様リスト（spec-list）: グレー地に太字の項目名と値を左揃えで並べる
• イラストの帯（illustration-band）: オレンジの線画で描いた人物と雲の横長の帯。セクションの境界に置く

Do's and Don'ts

Do - オレンジは線画とロゴに絞って使う - 写真は暗めでシネマティックなトーンにそろえる - 英字大文字の見出しは中央に置き、字間を広くする - 白とベージュを交互にしてセクションを区切る - ボタンは黒の長方形で統一する

Don't - グラデーションや強い影を使わない - オレンジを大きなベタ面やボタンに使わない - 角丸のカードを多用しない - 写真に彩度の高いフィルターをかけない - 本文を詰めて組まない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品の世界観を一目で伝える）: ベージュ地に、オレンジ線画のイラストと極太ロゴ、製品写真、縦書きのラベルを置く
2. コンセプト（生まれた背景と悩みを語る）: 白地に小さなロゴ、太字のリード、中央寄せの短い段落を並べる
3. ラインナップ（色違いの商品を見せて購入へ誘導する）: 商品カードを 2 列に並べ、グレーのボタンを置く
4. イラストの帯（雰囲気の転換）: オレンジ線画の横長イラストで区切る
5. コンセプト動画（情緒的に訴求する）: ベージュ地に英字見出しと 16:9 の動画を置く
6. スタイリング写真（使っている場面を想像させる）: 白地に大小の写真を左右交互にずらして置き、最後に全幅写真を入れる
7. 使い方（機能をわかりやすく説明する）: 手描き図解パネルと黒ボタンで構成する
8. 特長（機能と技術を 4 項目で伝える）: ベージュ地に番号付きの特長を置き、写真を左右交互に配置する
9. 仕様（スペックを正確に伝える）: グレー地に仕様リストを並べる
10. SNS誘導（フォローを促す）: ベージュ地に見出し、アイコン、円形ロゴ、黒ボタンを置く

Imagery

• オレンジ単色の線画で、レトロ漫画のような人物や湯気、雲を描く
• 製品は白背景の切り抜き写真にする
• 人物写真は暗めの暖色光で、余白と静けさのある構図にする
• 寒色の自然光でぼかした写真を混ぜ、緩急をつける
• 図解は黒とオレンジの線画に、点線の矢印を組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央のコンテンツ幅を約 70% に抑え、余白を広くとる
• PC の特長は写真とテキストの 2 カラムで左右交互。SP では写真を上にして縦に積む
• PC の商品カードは 2 列。SP も 2 列でよい
• 写真ギャラリーは、SP では左右のずれを小さくして 1 列で並べる
• 図解パネルは、SP では横幅いっぱいに広げて縮小表示する

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 行書くと起動時に読み込まれる。