DESIGN.md — 生成り紙×イラストの住まいブランド LP（Warm Paper Illustrated Brand Story LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 上品・高級、親しみ・手作り感、シンプル・ミニマル、やさしい・柔らかい
• キーワード: 生成り紙・イラスト・ブランドストーリー・幾何学欧文・有機的曲線・余白
• 地の質感: 薄いグレージュの紙質ノイズ。面はフラットで影はほぼ使わない。
• 形: 白カードは小さめの角丸。セクション境界は雲のような大きな曲線。写真は不定形のブロブ型で切り抜く。
• 温度感: やや温かいニュートラル。色はイラストが担い、UI はモノトーン。

Colors

• 地は紙色 2 種だけ。曲線で交互に切り替える。
• UI は黒・白・墨色のモノトーンに限る。
• 彩度の高い色はイラスト内だけに使う。
• 強調見出しは白の帯を文字の背に敷いて目立たせる。
• 主 CTA は黒の面に白文字。
• NEW バッジも黒地に白文字でまとめる。

Typography

• 欧文見出しは太い幾何学サンセリフで、すべて大文字。
• 欧文見出しのすぐ下に和文の副見出しを小さく中央揃えで置く。
• 本文は左揃えで、短い改行を重ねた詩的な組み方にする。
• 字間はやや広め、行間は 2 倍以上。
• 番号は欧文ラベルより一回り大きくする。
• 一部の番号は手書き風の欧文に変えて遊びを入れてよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 2 カラムに並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 35px 程度の余白で中央に置く。
• カード同士の間に欧文の番号見出しを挟む。
• ステートメントは 1 画面以上の縦長ブロックにする。
• 動画サムネイルは縦に 3 つ並べ、それぞれにキャプションを付ける。
• セクション見出しの上下は大きく空ける。

Elevation & Depth

• 影は使わずフラットにする。
• カードは白の面と地色の差だけで浮かせる。
• 装飾の雲形は地色より少し濃い紙色で塗る。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: カード画像は上辺だけ角丸の長方形。CTA の写真は不定形のブロブ型。
• セクション境界: 雲のようにうねる大きな曲線で地の色を切り替える
• ボタンは角張った矩形にする。
• MORE ボタンは細い黒枠に右向き矢印を付け、右と下の線を少しずらす。
• NEW バッジは角丸の黒タブにして、カードの左上からはみ出させる。
• FV のサブ導線は白の不定形の円に入れる。

Components

• 物件検索 CTA（button-primary）: 黒の矩形に白文字、右端に矢印を置く幅広のボタン。
• MORE ボタン（button-more）: 白地に細い黒枠、欧文の MORE と矢印を入れる。カード右下に置く。
• ストーリーカード（story-card）: 上にイラスト、下に 2 行コピーと人名・年齢を置く白カード。
• NEW バッジ（badge-new）: カード左上に重ねる黒のタブ。
• 白帯コピー（highlight-copy）: 問いかけの見出しを 1 行ずつ白い帯に乗せる。
• 欧文セクション見出し（section-title）: 大きな欧文の下に和文の副題を置く。必要なら短い横線で説明文と区切る。
• 動画サムネイル（video-thumb）: 角丸の写真の中央に、半透明の白枠付き再生ボタンを置く。
• SNS アイコン列（sns-icons）: 各サービス色の円形アイコンを 4 つずつ 2 段に並べる。

Do's and Don'ts

Do - 地は紙色の質感にして、真っ白にしない。 - 色はイラストに任せ、UI はモノトーンに保つ。 - 欧文の大見出しと和文の副題をセットで使う。 - 地の切り替えは有機的な曲線で行う。 - 余白をたっぷり取り、語りかけるように進める。

Don't - UI にビビッドな色のボタンや帯を使わない。 - セールのような訴求、強い赤字、価格の強調は入れない。 - ボタンをピル型やグラデーションにしない。 - ドロップシャドウを多用しない。 - イラストのタッチをカードごとに統一しすぎない。作家ごとの違いを活かす。

Page Structure

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

1. ファーストビュー（ブランドの考え方を一言で示す）: 和文の一行コピーと大きな欧文ロゴタイプの下に、家の形をした大判イラスト。右に縦書きの SCROLL DOWN、右下に白い不定形のサブ導線を置く。
2. 問いかけ（価値観への問いを投げかける）: 白帯を敷いた太字のコピーを 3 行、左揃えで並べる。
3. ステートメント（ブランドの思想を語る）: 短い改行の本文を、広い行間で長く続ける。
4. ブランドムービー（動画で世界観を伝える）: 曲線で地色を切り替え、欧文見出しの下に動画カードを 3 つ縦に並べる。
5. コンテンツ導入（連載コンテンツの説明）: 欧文見出し、和文の副題、短い横線、中央揃えの 2 行説明の順に置く。
6. ストーリー一覧（人物ごとの記事へ誘導する）: 番号付きの欧文見出しとイラストカードを 6 回繰り返す。新着には NEW バッジを付ける。
7. CTA（物件検索へ誘導する）: 少し濃い地色に、左揃えの 2 段コピー、ブロブ型の写真 2 枚、小さな家のアイコン、黒の CTA を置く。
8. 公式アカウント（SNS へ誘導する）: 中央見出しの下に、円形の SNS アイコンを 2 段で並べる。
9. フッター（著作権表記）: 黒帯に白の小さな欧文を中央揃えで置く。

Imagery

• 紙のかすれ感がある、平塗りの手描き風イラスト。
• 朱橙・黄・青・緑など、彩度の高い色を数色だけ使う。
• 暮らしの何気ない場面を描き、人物は等身大で表情豊かにする。
• カードごとに作家性の違うタッチを混ぜる（版画風、漫画風、線画など）。
• 実写は落ち着いたシネマ調、または夕景の住まい外観。
• 装飾は白い雲形と、小さな家のアイコン。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで、本文幅を約 50% に絞る。
• PC の FV イラストは横長の家の形に組み替える。
• PC の動画は 1 本を大きく置き、下に 2 本を横に並べる。
• PC のストーリーカードは 2 カラムのグリッドにする。
• PC の CTA はコピーとボタンを左、ブロブ写真を右に置く。
• PC の SNS アイコンは小さくして 1 行に並べる。

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