--- version: alpha name: Monochrome Editorial Interior Studio LP description: 明るいグレー地に黒の極細ラインと等幅英字を合わせた、エディトリアル調の空間・インテリアデザイン事務所のサイト。前半は施工事例を写真リストで縦に並べ、後半は黒地に切り替えて理念・問い合わせ・フッターを見せる。装飾はほぼ使わず、余白とタイポグラフィの対比だけで上品さを出している。 colors: background: '#F2F2F2' primary: '#171717' dark-section: '#0E0E0E' background-alt: '#3D3D3D' on-dark: '#FFFFFF' text-muted: '#9F9F9F' line: '#D1CEC8' text-muted-dark: '#8F8F8F' surface: '#474340' typography: display: fontFamily: Big Shoulders Stencil Display fontSize: 80px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em headline-lg: fontFamily: Inter Tight fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.03em headline-md: fontFamily: IBM Plex Mono fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Inter fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: -0.01em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: IBM Plex Mono fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.04em label-button: fontFamily: IBM Plex Mono fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' vertical-logo: textColor: '{colors.primary}' typography: '{typography.display}' height: 290px marquee-text: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px client-logo-strip: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' height: 60px project-row: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 380px arrow-link: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 20px view-all-bar: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 54px contact-hero: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 120px footer-nav: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 340px --- # DESIGN.md — ライトグレー×漆黒のモノクロ空間デザイン LP（Monochrome Editorial Interior Studio LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: シンプル・ミニマル、クール・先進的、上品・高級、ラグジュアリー・ダーク - **キーワード**: モノクロ・エディトリアル・等幅フォント・ステンシル風ロゴ・余白・ポートフォリオ - **地の質感**: フラットな単色面。影もグラデーションも使わず、写真だけが質感を持つ - **形**: 角丸なしの矩形。1px の細い罫線と小さな目盛り（ティック）で区切る - **温度感**: クールで無機質。写真の暖色だけが温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F2F2F2` | 前半の地色（ライトグレー） | 31% | 画素の主要色に補正 | | `primary` | `#171717` | ロゴ・見出し・本文の黒 | 4% | 画素の実測 | | `dark-section` | `#0E0E0E` | 後半の黒セクション地 | 30% | 画素の実測 | | `background-alt` | `#3D3D3D` | 理念セクションのチャコール地 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白文字 | 2% | 画素の実測 | | `text-muted` | `#9F9F9F` | ラベル・補足の英字グレー | 1% | 画素の実測 | | `line` | `#D1CEC8` | 事例を区切る細い罫線 | 0% | 画素の主要色に補正 | | `text-muted-dark` | `#8F8F8F` | 黒地の上のグレー文字 | 0% | 画素の実測 | | `surface` | `#474340` | 黒地で区切る罫線・サブ面 | 1% | 画素の主要色に補正 | - 前半はライトグレー地に黒文字、後半は黒地に白文字。この 2 トーンだけで構成する - 有彩色は使わない。色は施工写真からだけ入る - 補足ラベルは中間グレーで書き、ラベルと値の明暗差で情報の階層を見せる - 理念セクションはチャコールの空間写真を背景にして、黒への切り替わりをなだらかにする - 罫線は 1px のグレー。黒地では暗いグレーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦組みのステンシル風ロゴ・ワードマーク | 装飾・ディスプレイ | Big Shoulders Stencil Display | 700 | 80px | 1.0 | 0.1em | | `headline-lg` | 問い合わせへ誘う大きな英字見出し・横に流れる英文マーキー | 欧文サンセリフ | Inter Tight | 400 | 56px | 1.1 | -0.03em | | `headline-md` | 事例名（英大文字） | 欧文サンセリフ | IBM Plex Mono | 500 | 14px | 1.4 | 0.02em | | `headline-sm` | スタジオの英文キャッチ | 欧文サンセリフ | Inter | 500 | 13px | 1.4 | -0.01em | | `body-md` | 日本語の本文・理念文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.04em | | `note` | PROJECT: などのラベル・年号・補足英文 | 欧文サンセリフ | IBM Plex Mono | 400 | 10px | 1.5 | 0.04em | | `label-button` | テキストリンク（↗ 付き）・メニュー項目 | 欧文サンセリフ | IBM Plex Mono | 400 | 12px | 1.4 | 0.02em | - 英字は等幅フォントを基本にして、図面や仕様書のような印象を出す - ロゴだけはステンシル風の極太書体にし、SP では 90 度回転させて縦に置く - 大見出しは細めのサンセリフを大きく、字間を詰めて組む - 日本語本文は小さめにし、行間を 2 前後と広く取る - ラベル（グレー）＋値（黒）の 2 段組みで、事例の情報を表のように見せる - リンクの末尾には ↗ を付けて、外部や下層ページへの導線であることを示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は事例リストを写真（左約 64%）と情報の行に分け、理念セクションは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 20px で全セクション共通にする - 事例は全幅の罫線で区切り、罫線の上に小さな目盛りを等間隔で付ける - 事例 1 件の並び順は ラベル → 事例名 → カテゴリ → 年号と View リンク → 写真 - 要素の間隔は 8 の倍数で揃え、ブロックの間は 40〜60px 空ける - ファーストビューの下半分は大きく空け、ロゴと短いコピーだけを置く ## Elevation & Depth - 影は一切使わない - 奥行きは地色の明暗の切り替えと写真だけで表す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 横長の矩形（約 16:9）。角丸なしで本文幅いっぱいに置く - **セクション境界**: 1px の全幅罫線と、地色の直線的な切り替え - ボタンは枠も塗りも付けず、テキストリンク＋↗ で表す - PC の『すべての事例』ボタンだけは、細い罫線で囲んだ矩形にする - 角丸・アイコン・イラストは使わない ## Components - **縦組みロゴ**（`vertical-logo`）: ステンシル風のワードマークを 90 度回転させ、左端に大きく置く。黒地では白抜きにする - **流れる英文コピー**（`marquee-text`）: 細いサンセリフの大文字コピーを、横に無限スクロールさせる - **取引先ロゴ列**（`client-logo-strip`）: 小さなラベルの下に、モノクロのロゴを横に並べてスクロールさせる - **事例リスト項目**（`project-row`）: 目盛り付きの罫線の下に、ラベルと値の組・年号・View リンク・横長写真を順に置く - **矢印付きテキストリンク**（`arrow-link`）: 等幅英字の末尾に ↗ を付けた、下線のないリンク。横に 3 つ並べることもある - **すべての事例への帯リンク**（`view-all-bar`）: 罫線で区切った帯の中央に、等幅英字と件数の上付き数字を置く - **問い合わせ大見出し**（`contact-hero`）: 黒地に、画面幅いっぱいの白い英字見出しを置く。上には理念文と Contact リンク - **フッターナビ**（`footer-nav`）: 黒地に、等幅英字のメニューを縦に並べる。現在のページは [ ] で囲み、件数は上付き数字で添える ## Do's and Don'ts **Do** - 色はライトグレー・黒・グレーの 3 系統に絞る - ラベルは等幅英字で書き、『項目名:』の形で値と組み合わせる - 写真は本文幅いっぱいに置き、角丸なしの横長で揃える - 区切りは 1px 罫線と目盛りで、製図のような精密さを出す - 余白はたっぷり取り、要素の数を極力減らす **Don't** - 鮮やかな色の塗りボタンや、角丸・ピル型のボタンを置かない - 影・グラデーション・アイコンイラストを足さない - 日本語本文を太字にしたり、大きく組んだりしない - 写真に枠や装飾フレームを付けない - 文字を中央揃えで多用しない（基本は左揃え） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの存在感と事業領域を伝える）: グレー地に縦組みの巨大ロゴを置き、右上に Menu、右に Studio リンク、下に小さな英文と日英のキャッチを添える 2. **英文マーキー**（スタジオの姿勢を印象づける）: 細い大文字英文を画面からはみ出すサイズで横に流す 3. **取引先ロゴ**（実績から信頼を得る）: 小さなラベルとモノクロロゴを横スクロールで並べる 4. **事例一覧**（施工実績を見せる）: 罫線で区切った事例を 5 件ほど縦に並べる。各件はラベル・値・年号・写真で構成する 5. **すべての事例への導線**（一覧ページへ誘導する）: 罫線帯の中央に等幅英字のリンクと件数を置く 6. **スタジオ紹介**（理念と事業内容を伝える）: 暗い空間写真を背景に白抜きの縦ロゴを置き、短い本文と ↗ リンク 3 つ、モノクロの作業風景写真を続ける 7. **問い合わせ**（気軽な相談へ誘う）: 黒地に理念文と Contact リンクを置き、画面幅いっぱいの白い英字大見出しで締める 8. **フッター**（サイト内を回遊させる）: 黒地に著作権表記・縦並びメニュー・ポリシー・トップへ戻る・次の事例へのリンクを置く ## Imagery - 店舗・オフィスの竣工写真を、正面から広角で撮った自然光のカットにする - 人物を入れず、空間全体と素材感が伝わる構図にする - スタジオの作業風景はモノクロにして、無機質なトーンに揃える - 背景用の写真は、壁と天井の角が見える暗いグレーの空間カットにする - 取引先ロゴはすべて黒の単色にして並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではロゴを横組みで画面幅いっぱいに置き、ナビをヘッダーに横一列で並べる - PC の事例は 1 行に、ラベル・事例名・カテゴリ・年号を横に並べ、写真を左約 64% に置く - PC の取引先ロゴは折り返さず、1 行に全部並べる - PC のスタジオ紹介は、左に縦ロゴ、中央に写真、右に本文の 3 分割にする - PC の問い合わせは、左に本文、右下に大見出しを置く 2 カラムにする。フッターメニューは横一列にする ## 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-fbfcc1f4`（元 LP の URL から採番） - **元 LP**: https://www.figaro-vis.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/9 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。