DESIGN.md — 紺×生成りと木目の職人家具ストーリー LP（Navy and Natural Oak Craft Furniture Story LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ナチュラル、信頼・誠実、シンプル・ミニマル、やさしい・柔らかい
• キーワード: 紺と生成り・木目の板片装飾・縦書き帯見出し・大きな欧文番号・手描きイラスト・インタビュー誌面
• 地の質感: 白と生成りのフラットな面に、無垢材の木目写真を短冊状に重ねて置く。影は付けない。
• 形: 角の立った矩形が基本。見出しは円弧ラインで囲み、カードは上下の太線と左右の縦線で枠取りする。
• 温度感: やや暖かい。木の色と生成りの温もりを紺で引き締める。

Colors

• 地は白と生成りを交互に切り替えて、セクションを区切る。
• 強調はすべて紺 1 色で行う。見出し帯、番号、枠線、下線に使う。
• 木目のオーク色は写真の板片として四隅に置くだけにする。文字には使わない。
• ヘッダーとフッターは紺青のベタ面にして、ページを上下から締める。
• 青と山吹色は外部リンクのボタンだけに使い、本文には持ち込まない。
• 協力企業などの付帯情報はライトグレー地で一段トーンを下げる。
• button-external は文字 #E8F5F8 × 背景 #1B85C4 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1874AB、4.57:1）を使う。

Typography

• 和文はゴシック体に統一し、見出しは字間を広めにとる。
• インタビューの質問見出しは縦書きにして、紺の細長い帯に白抜きで置く。
• 章番号は太い欧文の 2 桁にして、紺で大きく見せる。
• シーン紹介のカードは、手書き風の英単語 1 語を枠の左上に重ねる。
• 本文は行間 2.0 前後をとり、ゆったり読ませる。
• 導入のリード文は中央揃え、インタビュー本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビュー章だけ、写真と縦書き見出しを左右に振り分ける。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 100px、基本単位 8px、カード内 32px（375px 幅換算）
• インタビュー章では写真を画面端まで寄せ、反対側に番号と縦書き帯を置く。章ごとに左右を入れ替える。
• 写真 2 枚は大小をずらして配置し、余白をあえて残す。
• セクションの間には 80〜120px の大きな余白をとる。
• 木目の板片を 3〜4 枚重ねて、画面の左右端に交互に配置する。
• シーン紹介はイラストを全幅で置き、その下にカードを続ける。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 奥行きは、木目の板片と写真が重なるレイヤーで出す。
• 切り抜き家具の写真にはごく薄い接地影だけを付ける。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と工房の写真は角丸なしの矩形。家具は白抜きの切り抜きにする。
• セクション境界: 直線で背景色を切り替えるだけ。波や斜めの区切りは使わない。
• 見出し帯とラベルは角丸 0 の矩形にする。
• 外部リンクボタンだけ角丸 6〜8px にする。
• セクション見出しは、上下に途切れた紺の円弧で囲む。
• 動画には、紺の円形バッジを左上に重ねる。

Components

• 縦書き質問帯（vertical-question-band）: 紺の細長い帯に白抜きの縦書きで質問を入れる。2 本を並べて使う。
• 章番号（chapter-number）: 太い欧文 2 桁の紺の番号。下にグレーの細線を引く。
• 話者名ラベル（speaker-label）: ベージュ地の矩形に話者名を太字で入れ、発言の前に置く。
• 円弧見出し（arc-heading）: 上下が途切れた紺の円弧で見出しを囲む。円の内側に等高線のような淡い模様を入れる。
• シーン紹介カード（scene-card）: 上下の太い紺線と左右の縦線で囲むカード。左上に手書き英単語を重ねる。
• 太下線の掛け合わせ見出し（underline-heading）: 2 語を×でつなぐ紺の大きな文字に、紺の太い下線を引く。
• 動画番号バッジ（movie-badge）: 紺の円に白文字で動画の番号を入れ、動画の左上に重ねる。
• 外部リンクボタン（button-external）: アイコンと白文字を入れた角丸の横長ボタン。上に斜線で挟んだ小見出しを付ける。
• 問い合わせ帯（contact-band）: 紺のベタ帯に白文字で問い合わせの案内を入れる。下に連絡先を中央揃えで置く。

Do's and Don'ts

Do - 強調色は紺 1 色に絞り、余白を多めにとって上品にまとめる。 - 木目の板片装飾を、各セクションの左右端に繰り返し置く。 - インタビューは「番号＋縦書き帯＋写真 2 枚＋話者ラベル付き本文」の型を章ごとにそろえる。 - 利用シーンは手描きのやわらかいイラストと、英単語 1 語の見出しで見せる。 - 白と生成りの背景を交互に使い、セクションの切り替わりを伝える。

Don't - 鮮やかな色やグラデーションを本文エリアに使わない。 - 見出し帯や枠に角丸を付けない。 - 派手な影や立体的なボタンを使わない。 - 木目装飾を文字の背景にして、可読性を下げない。 - 縦書き見出しを横書きに置き換えない。誌面らしさが崩れる。

Page Structure

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

1. ヘッダー・ファーストビュー（商品の世界観を一目で伝える）: 紺青のヘッダーとメニュー帯の下に、生活シーンの写真を全幅で置き、白いロゴを重ねる。
2. コンセプト導入（商品の概念を語りかけで説明する）: 白地に太字の左揃え本文を並べる。下に切り抜きの家具写真と、字間の広い欧文ロゴを置く。
3. 動画紹介（動く様子を映像で見せる）: 動画埋め込みを 2 本並べ、左上に紺の円バッジを重ねる。下に中央揃えのキャプションを付ける。
4. 誕生の背景（産地と技術の掛け合わせを伝える）: 生成り地に太下線の掛け合わせ見出しと中央揃えのリードを置き、分解した家具の切り抜き写真を続ける。
5. 職人インタビュー（作り手の思いと技術で信頼を得る）: 円弧見出しの後に、01〜04 の章を続ける。各章は番号、縦書きの紺帯、大小の写真、話者ラベル付きの本文で組む。
6. 企業・協力者情報（関わった企業を示す）: 建物の写真と住所を載せる。協力企業はライトグレー地に白い枠のロゴを置く。
7. 利用シーン（暮らしでの価値を 4 つ提示する）: 生成り地に手描きイラストを全幅で置き、手書き英単語付きの紺枠カードを 4 回繰り返す。
8. SNS・関連リンク（情報発信と関連企画へ誘導する）: 斜線で挟んだ小見出しの下に、青と山吹色の角丸ボタンを縦に並べる。
9. 産地紹介・問い合わせ（産地ブランドの説明と問い合わせ先を示す）: 紺の縦長ロゴ、説明文、紺の問い合わせ帯、中央揃えの連絡先の順に置く。
10. フッター（関連サイトのバナーと権利表記を載せる）: 紺青のベタ面に白地のバナーを縦に並べ、最後に小さな著作権表記を置く。

Imagery

• 生活シーンは自然光の明るい室内で撮る。木の床、植物、若草色のファブリックを入れる。
• 家具は白背景の切り抜きにして、部品を浮かせた分解図でも見せる。
• 職人は工房で作業着姿のまま、自然体で撮る。色調はやや温かく、コントラストは控えめにする。
• 利用シーンは色鉛筆風の手描きイラストにする。人物は家族や高齢者などで、白い四角を背景に敷く。
• 装飾は無垢材の木目を短冊状に切り、段違いに重ねた写真素材を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーを横並びのグローバルナビにする。
• PC のコンセプト導入は、左に本文、右に家具写真の 2 カラムにする。
• PC のインタビューは、番号と縦帯、本文、写真の 3 列を左右交互に組む。
• 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 行書くと起動時に読み込まれる。