DESIGN.md — 生成り紙肌×グレーの内装デザイン企業 LP（Muted Paper-Texture Interior Design Corporate LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: シンプル・ミニマル、上品・高級、ナチュラル、信頼・誠実
• キーワード: 紙肌テクスチャ・細い幾何学欧文・大きな余白・写真の非対称配置・点線グリッド・モノトーン
• 地の質感: 背景に和紙やコンクリートのような細かいノイズがある。面はマットで、影はつけない
• 形: 四角い写真と直線の罫線が基本。角丸は使わず、円は矢印ボタンとスライダーの番号だけに使う
• 温度感: 少し温かみのあるニュートラル。生成りグレーと写真の木の色で暖かさを足す

Colors

• 地は紙肌のライトグレーにし、事業紹介だけセージグレーに切り替える
• お問い合わせは濃いグレーの全幅帯にし、ページで唯一の暗い面にする
• 文字・線・ボタンは墨色だけで描き、彩度の高い色は使わない
• 彩りは写真の木・緑・オレンジに任せる
• 補助情報（番号の分母・タグ）は薄いグレーに落とす

Typography

• 欧文は細い幾何学サンセリフで、見出しの主役にする
• 和文はウェイトを控えめにし、行間を 2 以上取って静かに組む
• 欧文見出しの右下に小さな和文ラベルを並べる
• 字間を広く取った欧文で余白のリズムをつくる
• 太字は和文の短い見出しにだけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か片寄せ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 22px
• 事業紹介の背景に、縦の点線ガイドを 2 本ほど引く
• 写真は全幅とインデントを交互にして非対称に置く
• 会社概要は 2 列の表にし、行ごとに黒い罫線を引く
• セクション見出しは左寄せ、お問い合わせだけ中央寄せにする

Elevation & Depth

• 影は一切つけず、すべてフラットにする
• 奥行きは写真の重なり（ずらし配置）だけで出す
• 区切りは色面の切り替えと細い罫線で表す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま角丸なし。小さい写真には細い白枠をつけて重ねる
• セクション境界: 直線で背景色を切り替える
• 矢印ボタンは細線の正円にする
• スライダーの番号は円弧のプログレスで囲む
• 番号の下に短い横線を引く

Components

• 円形矢印リンク（button-circle-arrow）: 細い墨色線の正円の中に矢印を置き、左に欧文ラベルを添える
• 問い合わせボタン（contact-block）: 濃いグレー帯の上に、明るい長方形を縦に 2 つ並べる。1 つはアイコンとメール導線、もう 1 つは大きな電話番号と受付時間
• 欧文見出し＋和文ラベル（section-heading）: 大きな細い欧文の横に、小さな和文の訳を添える
• サービス番号（service-number）: 小さな欧文ラベルと大きな数字を並べ、下に短い線を引く
• スライド番号（slider-counter）: 「現在の番号 / 総数」を表示し、総数は薄いグレーにする。円弧で囲む
• お知らせ行（news-row）: 欧文ラベル・日付・タイトルを横に並べ、下に墨色の罫線を引く
• 事例カード（works-card）: 横スクロールで、写真の下にタイトルとタグを置く
• 会社概要の表（info-table）: 左に項目名、右に内容を置き、行間に罫線を引く

Do's and Don'ts

Do - 紙肌のノイズテクスチャを背景に敷く - 欧文見出しは細いウェイトで大きく置く - 写真をずらして重ね、余白を大胆に残す - 色は墨色とグレー系に限定する - 矢印リンクは細線の円で統一する

Don't - 彩度の高い CTA 色やグラデーションを使わない - 角丸カードやドロップシャドウを使わない - 太い和文で大きく煽る訴求見出しを置かない - アイコンやイラストを多用しない - 写真に文字を重ねすぎない

Page Structure

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

1. ファーストビュー（空間デザインの世界観を一目で伝える）: 大小の内装写真を重ね、短い和文コピーと大きな欧文ロゴ（2 行目はアウトライン）を置く。スライダー番号を添える
2. お知らせ（最新情報を示す）: 1 行のニュースと罫線、右に番号を置く
3. 企業メッセージ（理念と事業を説明する）: 字間の広い欧文見出し、全幅の写真、和文のリード見出しと長めの本文を並べ、最後に円形矢印リンクを置く
4. 事業紹介（4 つの事業を提示する）: セージグレー地に点線ガイドを引き、全幅写真・番号・事業名・説明文を 4 回繰り返す
5. 事例紹介（施工実績を見せる）: 欧文見出しと円形矢印リンクの下に、横スクロールの写真カードを並べる
6. お問い合わせ（相談を促す）: 濃いグレーの全幅帯に中央寄せの白文字を置き、明るいボタンを 2 つ縦に並べる
7. 会社概要（信頼性を示す）: 受付の写真の下に、罫線で区切った 2 列の表と地図埋め込みを置く
8. フッター（締め）: 中央にロゴ、プライバシーリンク、小さなコピーライトを置く

Imagery

• 実際の内装施工例を明るく自然光で撮る
• 木目・植物・布張りの椅子など、素材感が伝わる構図にする
• 人物は入れず、空間そのものを主役にする
• 色温度はやや暖かく、彩度は控えめにする
• 装飾イラストは使わず、細線のアイコンを 1 点だけ使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの写真を左右に散らし、ロゴを中央左に置くコラージュにする
• PC の企業メッセージは写真と本文を左右 2 カラムにする
• PC の事業紹介は 4 枚の写真を横一列に並べ、その下に 4 カラムの説明を置く
• PC の事例は 2 段のグリッドにし、見出しは左に置く
• PC のお問い合わせボタンは横 2 列にする
• 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 行書くと起動時に読み込まれる。