DESIGN.md — 白地×原色ブロックのグラフィカルな記念ギフトLP（Bold Color-Block Graphic Kids Gift LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、クール・先進的、シンプル・ミニマル
• キーワード: 原色カラーブロック・白地と黒文字・欧文グロテスク・有機的な図形・アートポスター・余白多め
• 地の質感: 平塗りのフラットな色面だけで、グラデーションや影はほとんど使わない。写真は明るい白背景か畳の上の物撮り。
• 形: 角丸カード、星形・歯車形・波線などの有機的なシェイプ、楕円の線ラベル、角丸の長方形ボタン。
• 温度感: 白と黒が中心のニュートラルな地に、暖色と寒色の原色を同じ強さで並べて元気さを出す。

Colors

• 地は白が基本。生成りは特別な説明セクション1つだけに使う。
• 文字は黒一色。色文字は使わない。
• 原色は色面（カード・ブロック・図形）として使い、文字の上に強調色は載せない。
• 多色ブロックの上の文字も黒にして統一する。
• ボタンは黒ベタと白地＋黒枠＋下側の黒い影線の2種のみ。
• フッターだけ黒地に白文字。
• color-block-tab は文字 #000000 × 背景 #E50014 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA0014、4.51:1）を使う。

Typography

• 欧文は太いグロテスク系で大きく使い、日本語より強く見せる。
• 日本語見出しは太字ゴシックで短く改行し、左揃えにする。
• 本文はやや字間を空けたゴシックの中太にする。
• 価格は黒帯の上に白の欧文で載せる。
• 欧文の職業名を横に流すマーキーで区切りを作る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カラーブロックは 2 列と 1 列の組み合わせ。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約20px。
• セクション間の余白は大きく取る。
• ラインナップは画面いっぱいの角丸カラーブロックを縦に重ねる。
• ステップは細い曲線の縦ラインに黒丸を置いてつなぐ。
• 写真カルーセルは左右のカードを少し見せる。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 白ボタンだけ下側に3pxほどの黒いズレ影を付ける。
• メインのカードは複数枚をずらして重ね、奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸16〜24pxの縦長または横長の長方形
• セクション境界: 基本は直線。生成りセクションの上辺だけ緩やかな弧にする。
• ラベルは細い黒線の楕円で囲む。
• カラーブロックは上側の角だけ丸め、重ねて並べる。
• 装飾は星形・歯車形・波線・六角形などの平塗り図形。
• ボタンは角丸8pxの長方形で、右端に矢印を付ける。

Components

• 黒ベタボタン（button-primary）: 黒塗りに白文字、右端に矢印。中身を見る導線に使う。
• 白黒枠の購入ボタン（button-outline）: 白地に黒の1.5px枠、下に黒いズレ影、右端に矢印。
• 楕円ラベル見出し（label-ellipse）: 細い黒線の楕円の中に、英字のセクション名を入れる。
• 欧文マーキー（marquee-text）: 職業名などの英単語をスラッシュでつなぎ、横に流す大きな黒文字。
• カラーブロック一覧（color-block-tab）: 原色の角丸ブロックに黒い欧文名を入れ、2列と1列で段々に重ねる。
• 黒帯の価格表示（price-tag）: 黒い帯に白の欧文で価格を載せる。
• 曲線つなぎのステップ（step-timeline）: 細い黒の曲線に黒丸を置き、太い番号＋見出し＋小さい説明＋角丸写真を左右にずらして並べる。
• 動画サムネイル（video-thumb）: 角丸の写真の中央に黒丸と白い再生三角を置く。

Do's and Don'ts

Do - 白地と黒文字を基本にして、原色は色面だけに使う。 - 欧文は太く大きく使い、ポスターのような迫力を出す。 - 有機的な平塗り図形を見出しの背面や区切りに置く。 - 余白を広く取り、要素を詰め込まない。 - ボタンは黒ベタと白黒枠の2種類に限る。

Don't - グラデーション・ぼかし影・光沢は使わない。 - 色付きの文字や色付きのボタンは作らない。 - パステル調にくすませず、原色の彩度を保つ。 - 明朝体や手書き書体は使わない。 - ピル型ボタンや丸すぎる角丸は使わない。

Page Structure

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

1. ヘッダー（ロゴとメニュー）: 白地の左にロゴ、右に太字英字のメニュー。
2. ファーストビュー（商品の世界観を一目で伝える）: 英字タイトルの下に、原色の大判カードを複数枚ずらして重ねて見せる。
3. 動画（使う様子を伝える）: 角丸の写真に黒丸の再生ボタンを載せる。
4. コンセプト（商品の意味を説明する）: 楕円ラベル＋太字の日本語見出し＋本文＋黒ボタンと白枠ボタン。
5. マーキー＋写真カルーセル（商品写真を見せる）: 流れる大きな欧文と、ドット付きの角丸写真スライダー。
6. 商品・価格（仕様と価格を伝える）: 楕円ラベル、英字小見出し、商品名、黒帯の価格、本文、購入ボタン。背面に図形を置く。
7. ラインナップ（種類の多さを見せる）: 星形の上に大見出しを置き、原色の角丸ブロックを段状に重ねて並べる。
8. 使い方（手順を4ステップで示す）: 曲線のタイムラインに番号・見出し・説明・写真を並べる。
9. 特別アイテムの紹介（自由記入タイプを訴求する）: 上辺が弧の生成り地に、中央の見出し、角丸写真、本文。
10. 最終CTA・サイトマップ（購入へ誘導し回遊させる）: 幅いっぱいの白枠ボタン、大きな英字タイトル、中央揃えの英字ナビ。
11. フッター（問い合わせ・規約）: 黒地に白文字のリンクと著作権表記。

Imagery

• 商品は白〜淡いグレーの無地背景で、真上から明るく撮る。
• 使用シーンは畳など自然素材の上で、真上から撮る。
• 装飾は原色の平塗りシェイプ（星・歯車・花形・波線・六角形）。
• 写真は角丸で切り抜き、枠線は付けない。
• 手形やメッセージなどの手作りの要素は写真で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンセプトと商品を、写真と文の2カラムにする。
• PC の FV はカードを横一列に扇状に重ねて並べる。
• PC の使い方は4ステップを横並びにし、横向きの曲線でつなぐ。
• PC のラインナップは幅を広げ、ブロックの高さを抑える。
• PC のフッター前には原色の図形を散らしたビジュアルを置く。

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