--- version: alpha name: Muted Paper-Texture Interior Design Corporate LP description: 和紙のような薄いグレーの地に、細い欧文と内装写真を余白たっぷりに並べたコーポレートサイトの型。強い色は使わず、グレー・セージ・濃いグレーの帯でセクションを分ける。丸い矢印ボタンと縦の点線ガイドが、静かで建築的な印象をつくる。 colors: background: '#EDEDEA' background-alt: '#E1E2DC' dark-section: '#7F7F7D' surface: '#EEEFEA' primary: '#12130F' text-body: '#3A3A3A' text-muted: '#BAB3A7' on-dark: '#F9F9F7' line: '#333333' accent-1: '#BAB3A7' on-primary: '#F5F5F3' typography: display: fontFamily: Josefin Sans fontSize: 36px fontWeight: 300 lineHeight: 1.15 letterSpacing: 0.08em headline-lg: fontFamily: Jost fontSize: 30px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.01em headline-md: fontFamily: Jost fontSize: 21px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0.2em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 2.3 letterSpacing: 0.04em accent: fontFamily: Jost fontSize: 17px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Jost fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 22px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-circle-arrow: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px contact-block: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 64px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px service-number: textColor: '{colors.primary}' typography: '{typography.accent}' height: 30px slider-counter: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px news-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px works-card: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 320px info-table: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px --- # DESIGN.md — 生成り紙肌×グレーの内装デザイン企業 LP（Muted Paper-Texture Interior Design Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: シンプル・ミニマル、上品・高級、ナチュラル、信頼・誠実 - **キーワード**: 紙肌テクスチャ・細い幾何学欧文・大きな余白・写真の非対称配置・点線グリッド・モノトーン - **地の質感**: 背景に和紙やコンクリートのような細かいノイズがある。面はマットで、影はつけない - **形**: 四角い写真と直線の罫線が基本。角丸は使わず、円は矢印ボタンとスライダーの番号だけに使う - **温度感**: 少し温かみのあるニュートラル。生成りグレーと写真の木の色で暖かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EDEDEA` | 紙肌のページ地 | | 画素の実測 | | `background-alt` | `#E1E2DC` | 事業紹介セクションのセージグレー地 | | 画素の実測 | | `dark-section` | `#7F7F7D` | お問い合わせ帯の濃いグレー | | 画素の実測 | | `surface` | `#EEEFEA` | お問い合わせボタンの明るい面 | | 画素の実測 | | `primary` | `#12130F` | 見出し・本文の墨色 | | 画素の実測 | | `text-body` | `#3A3A3A` | 本文グレー | | 推定 | | `text-muted` | `#BAB3A7` | ページ番号やタグの薄いグレー | | 画素の主要色に補正 | | `on-dark` | `#F9F9F7` | 濃い帯の上の白文字 | | 画素の実測 | | `line` | `#333333` | 罫線・円ボタンの線 | | 推定 | | `accent-1` | `#BAB3A7` | 縦の点線ガイド | | 画素の主要色に補正 | | `on-primary` | `#F5F5F3` | 白抜きの欧文アウトライン文字 | | 画素の主要色に補正 | - 地は紙肌のライトグレーにし、事業紹介だけセージグレーに切り替える - お問い合わせは濃いグレーの全幅帯にし、ページで唯一の暗い面にする - 文字・線・ボタンは墨色だけで描き、彩度の高い色は使わない - 彩りは写真の木・緑・オレンジに任せる - 補助情報（番号の分母・タグ）は薄いグレーに落とす ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きな欧文ロゴ（2 行目は白抜きのアウトライン） | 欧文サンセリフ | Josefin Sans | 300 | 36px | 1.15 | 0.08em | | `headline-lg` | セクションの欧文見出し（小さな和文ラベルを横に添える） | 欧文サンセリフ | Jost | 300 | 30px | 1.2 | 0.01em | | `headline-md` | 字間を広く取った欧文のメッセージ見出し | 欧文サンセリフ | Jost | 300 | 21px | 1.4 | 0.2em | | `headline-sm` | 和文のリード見出し・サービス名 | ゴシック | Noto Sans JP | 500 | 15px | 1.9 | 0.08em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 11px | 2.3 | 0.04em | | `accent` | サービスの番号（01 など）・日付 | 欧文サンセリフ | Jost | 400 | 17px | 1.2 | 0.02em | | `note` | 和文の小ラベル・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.05em | | `label-button` | 円ボタンの横に置く欧文リンク文字 | 欧文サンセリフ | Jost | 400 | 11px | 1.4 | 0.06em | - 欧文は細い幾何学サンセリフで、見出しの主役にする - 和文はウェイトを控えめにし、行間を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-c53c97a7`（元 LP の URL から採番） - **元 LP**: https://revo-factory.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。