DESIGN.md — 日の丸赤×墨茶の和モダン撮影マッチングLP（Japanese Red and Charcoal Photography Matching LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 上品・高級、和風、信頼・誠実、シンプル・ミニマル
• キーワード: 和モダン・日の丸の赤・墨茶の帯・明朝見出し・円形写真・大きな角丸の切り替え
• 地の質感: 薄い紙のような白〜グレーの地。うっすら和紙調・霞んだ写真を背景に重ねる
• 形: 大きな角丸のセクション、円形の写真、細い罫線と矢印付きの丸アイコン
• 温度感: 中間〜やや暖かい。赤の熱と生成りの柔らかさを墨茶で引き締める

Colors

• 地は白と淡いグレーを交互に使い、要所で墨茶の濃色帯を挟む
• 赤は帯・ボタン・欧文ラベル・番号・小見出しに限定する
• 濃色帯と赤帯は大きな角丸で上下を切り替える
• 本文は墨色、補足はグレージュで階層を分ける
• フッターは全面赤で白文字にする

Typography

• 見出しは明朝で中央揃え、字間を広めに取る
• 見出しの上に赤い小さな大文字欧文ラベルを置く
• 本文はゴシックで細く小さめ、行間は広く
• リード文は中央揃えで短い行を重ねる
• 番号は細い欧文の大きな数字で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カードやジャンルは2列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは欧文ラベル＋明朝見出し＋短いリードで始める
• セクション内は中央寄せでゆったり余白を取る
• 特長カードは上下に少しずらして配置しリズムを出す
• 手順は縦に並べ、カード間を赤い短線でつなぐ
• 濃色帯は横幅いっぱいにし上端を大きな角丸にする

Elevation & Depth

• カードはごく薄い影で地からわずかに浮かせる
• 濃色セクションには影を使わず平面で見せる
• ボタンは影なしの平面塗り

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物・ジャンル写真は円形。主要写真は大きな角丸や楕円で切り抜く
• セクション境界: 上端に大きな角丸がつく面でセクションを切り替える
• ボタンはピル型
• 手順カードは片方の角だけ大きく丸める
• ジャンル写真の円の周りに十字のトンボ線を添える
• フォーム入力欄は角丸小さめ

Components

• 赤いピル型ボタン（button-primary）: 主要な申込・資料請求ボタン。赤地に白文字
• 白抜きピルボタン（button-outline）: 濃色地のフォーム送信用。白い細線枠
• 欧文ラベル付き見出し（section-heading）: 赤い小さな欧文ラベルの下に明朝見出しを中央に置く
• 番号付き特長カード（feature-card）: 白カードに赤小見出し、本文、細い欧文番号と写真
• 円形ジャンル写真（genre-circle）: 円形写真に十字トンボ線を重ね、下にラベル
• 手順カード（step-card）: 赤細線枠、左に大きな番号、赤見出しと本文
• 資料請求バナー（download-banner）: 赤帯の中に白線枠、文言と矢印のボタン。下に大きな透かし欧文
• FAQ行（faq-item）: 赤い吹き出しアイコン、質問、右端に＋。下に罫線
• 濃色地のフォーム（form-field）: 白い入力欄と白ラベル。2列で並べる

Do's and Don'ts

Do - 赤・墨茶・白の3色を軸に、ほかの色は写真だけにする - 見出しは必ず明朝＋赤い欧文ラベルにする - セクション切り替えは大きな角丸で柔らかくつなぐ - 写真は円形か大きな角丸で切り抜く - 余白を多めに取り、上品さを保つ

Don't - 赤を広い本文背景に多用しない（帯とフッターのみ） - 丸ゴシックやポップな書体を使わない - 派手なグラデーションや強い影を付けない - 四角いままの写真を並べない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（サービスの価値とロゴを示す）: 左に明朝コピー、ロゴ、赤ボタン2つ。右に和の風景写真。上にヘッダーナビ
2. コンセプト（サービスの理念を伝える）: 霞んだ街並み写真を背景に、中央揃えの明朝リードとロゴ
3. 特長（強みを3つ示す）: 淡いグレー地に番号付き白カードを3枚、上下にずらして並べる
4. 人物紹介（登録者の質を見せる）: 墨茶地に円形の人物写真、名前と短い紹介を中央に
5. ジャンル一覧（目的別に探させる）: 白地に円形写真とラベルをグリッド配置
6. 地域一覧（地域から探させる）: 墨茶の角丸パネルに矢印付きリスト、横に風景写真
7. 資料請求バナー（中間の申込導線）: 赤帯に白線枠のバナーと大きな透かし欧文
8. 利用の流れ（利用手順を示す）: タブで2通りを切り替え、縦に5つの手順カード、横に楕円写真
9. よくある質問（不安を解消する）: 罫線区切りのアコーディオン
10. 資料請求フォーム（最終的な申込）: 墨茶の角丸パネルに白い入力欄、同意チェック、白抜きボタン
11. フッター（サイト内リンク）: 全面赤地にロゴとカテゴリ別リンク一覧

Imagery

• 富士山や桜、日本庭園など日本らしい風景写真を使う
• 人物は自然光で撮り、仕事中の様子を写す
• 背景写真は白く霞ませ、文字が読めるよう明るく調整する
• カメラのレンズ線画や照準マークを薄い装飾に使う
• 大きな欧文ロゴを透かしの帯として配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFV左右2分割は、SPでは写真を上・コピーを下に縦に積む
• 特長カード3列はSPで1列か横スクロールにする
• ジャンル4列はSPで2〜3列にする
• 地域パネルと写真の横並びはSPで縦に積む
• フォームの2列はSPで1列にする
• 見出しはSPで22〜24pxに抑える

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