DESIGN.md — 濃紺×墨色の明朝で語る鉄器ブランド LP（Midnight Navy Iron Craft Product LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、和風、信頼・誠実、シンプル・ミニマル
• キーワード: 濃紺・墨色・明朝体・大地と空・職人技・余白
• 地の質感: 濃紺や墨色の地に細かいノイズ（鉄肌のようなザラつき）をのせ、明るいセクションは淡いグレーのフラット地
• 形: ほぼ直角の写真と面。CTA だけピル型。終盤に弧状の写真の切り抜き
• 温度感: 寒色寄りで静か。料理写真と温かい差し色のベージュで温度を足す

Colors

• 地は淡いグレー・白・濃紺・墨色をセクション単位で交互に切り替えてリズムを作る
• 濃紺はブランド色として CTA とノンコーティング訴求セクションに限定する
• 暗い地は細かいノイズ質感をのせ、鉄の肌合いを表現する
• 強調は太字や赤ではなく、本文中のベージュ文字で控えめに行う
• ラインナップは生成りベージュと冷たいグレーで商品ごとに地色を変える
• 彩度の高い色は料理写真の中だけに任せる

Typography

• 見出しは明朝体で字間を広めにとり、静かな語り口にする
• 英字ラベルはセリフ体で最初の 1 語を太字、残りを細字にする
• 長文本文はゴシック、リードや見出しは明朝と使い分ける
• 見出しは句点で終える短い 2 行構成を基本にする
• FV のキャッチは縦書きで写真上に置く
• 重要語は四角い枠線で囲む装飾を 1 箇所だけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の散らし配置のみ左右にずらす
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 40px（375px 幅換算）
• セクション上下に 80〜100px の大きな余白
• 見出しと導入文は中央揃え、技術解説の本文は左揃え
• 写真はフル幅か左右 20px の余白付きで大きく見せる
• 料理シーンは写真→見出し→本文を縦に繰り返す
• 導入の後に大小の写真を左右交互にずらして散らす
• 技術ポイントは番号付き円形テキストを写真の角に重ねる

Elevation & Depth

• 基本は影なしのフラット
• 最後の CTA ボタンにだけ柔らかい落ち影
• 商品の箱写真の下に床への映り込み表現

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。最終セクションは上辺が大きな弧になった写真
• セクション境界: 直線で地色を切り替え。FV 下は写真から淡いグレーへのグラデーション
• ボタン以外に角丸を使わない
• 写真は大胆にトリミングしフライパンの一部だけ見せる
• 番号は円周に沿った英字テキストで囲む
• 斜めの細い平行線を見出し横の装飾に使う

Components

• 濃紺ピル型 CTA（button-primary）: 濃紺塗りに白の明朝文字と外部リンクアイコン。中央配置
• 白抜きピル型購入ボタン（button-outline）: 白地に黒の細線枠、黒文字と外部リンクアイコン。ラインナップ内で使用
• 英字セクションラベル（section-label）: 見出し上に置くセリフ体英字。先頭語太字＋後続細字
• 円形英字の番号バッジ（circle-number）: 円周に沿った英字の中に 2 桁の番号。写真の角に重ねる
• 枠囲み強調語（boxed-keyword）: 暗い地の大きな文中で、重要語を細い白線の四角で囲む
• 引用符付き下線見出し（quote-heading）: 左右に引用符を付け、下に細い下線を引いた明朝見出し
• ラインナップカード（product-card）: 背景色付きの全幅ブロックに切り抜き商品写真、キャッチ、商品名、税込価格、白抜きボタン
• 料理シーンブロック（scene-block）: 全幅の料理写真の下に明朝 2 行見出しと短い本文

Do's and Don'ts

Do - 明朝体見出しと広い字間で落ち着いた語りを保つ - セクションごとに地色を淡グレー・濃紺・白・墨色で切り替える - 暗い地には細かいノイズ質感を入れる - 空・山・溶けた鉄・料理など素材感のある写真を大きく使う - 英字ラベルを各セクション冒頭に置き統一感を出す - CTA は濃紺ピルに統一し数を絞る

Don't - 赤や黄色などの派手な強調色を使わない - ポップな丸ゴシックや手書き文字を使わない - カードに角丸や強い影を付けない - 割引・限定などの煽りバッジを置かない - 余白を詰めて情報を詰め込まない - イラストやアイコンを多用しない

Page Structure

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

1. ファーストビュー（自然と鉄の世界観を一瞬で伝える）: 空と大地の写真に濃紺のフライパンとロゴ、縦書き明朝キャッチ、短いリード、濃紺 CTA。下部は淡グレーへグラデーション
2. 導入（ブランドの想い）（商品哲学を詩的に語る）: 英字ラベル＋明朝見出し＋中央揃えの短い段落。その下に大小の風景写真を左右に散らす
3. 開発背景（顧客の声から生まれた理由を示す）: 濃紺ノイズ地。左右に商品と家族写真、枠囲み強調語の大きな文、引用符見出し、左揃え本文
4. 技術・製法（独自技術の信頼性を伝える）: 淡グレー地。大きな工場写真に円形番号を重ね、太い明朝見出しと左揃え本文を 2 項目
5. 使用シーン（料理の美味しさと暮らしを想像させる）: 白地。全幅の料理写真＋明朝見出し＋短い本文を 4 回繰り返す
6. ギャラリー（パッケージと世界観の余韻）: 横に並ぶ写真を横スクロール風に配置
7. 商品ラインナップ（商品選択と購入へ導く）: グレー質感地にキャッチとロゴ、その下に地色違いの商品カードを縦に並べる
8. メーカー紹介（作り手の歴史と職人技で信頼を補強）: 墨色ノイズ地。英字ラベル、白明朝見出し、職人写真、本文、白ロゴ
9. クロージング CTA（購入の最終後押し）: 弧状に切り抜いた空と山の写真に宙に浮くフライパンと箱、明朝 3 行コピー、影付き濃紺 CTA
10. フッター（ブランド情報とストア導線）: 白地中央にロゴ、説明、製造元、下線付きテキストリンク。最下部に黒帯のコピーライト

Imagery

• 青みがかった空・雲・山・溶岩台地などの雄大な自然写真をローキーで使う
• 製品は黒い鉄肌を活かした切り抜きや、空中に浮かせた合成表現
• 工場や職人は暗めの現場で溶けた鉄の橙の光をドラマチックに
• 料理は黒い鉄鍋に乗せたシズル写真を近接・浅い被写界深度で
• 家族の写真は自然光の明るいキッチンで穏やかに
• 装飾は細い線と円形テキスト程度に抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 60% に絞り中央に配置する
• 開発背景と技術セクションは写真とテキストの左右 2 カラムにする
• 料理シーンは写真を横長帯にしてテキストを写真上に重ね交互に左右配置
• ラインナップは PC で 2 商品を横並びにする
• ギャラリーは PC で 3 枚横並び
• 最終 CTA はフライパンの円の中に縦書きコピーを入れる

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