--- version: alpha name: Indigo Corporate Office Search LP description: 藍色のグラデーションの帯と、明るいグレーの帯を交互に重ねる BtoB オフィス仲介サイト。白いカードとピル型ボタン（水色の矢印チップ付き）を何度も使い、物件検索・物件一覧・強み・流れ・事例・お問い合わせへと順に案内する。細い欧文の大見出しと、背景に薄く敷いた大きな英字で、すっきりした先進的な印象を出している。 colors: primary: '#5264B0' dark-section: '#3E4977' background: '#EDEDED' surface: '#FFFFFF' text: '#484C68' text-body: '#3E3E3E' on-dark: '#F4FAFE' cta: '#5DB1D9' on-cta: '#FFFFFF' accent-1: '#F39A3D' accent-2: '#2C83AD' tint-1: '#E6F7FF' tint-2: '#FEDAB3' accent-3: '#3C4573' line: '#DADDE4' cta-accessible: '#277DA6' typography: display: fontFamily: Jost fontSize: 40px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Jost fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 62px arrow-chip: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 18px search-panel: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 1100px icon-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 140px property-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 300px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 100px flow-step: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px banner-split: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 128px tag-category: backgroundColor: '{colors.line}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 藍色×ライトグレーの法人オフィス仲介 LP（Indigo Corporate Office Search LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 藍色グラデーション・白カード・ピル型ボタン・細い欧文見出し・ドット柄の質感・都市の写真 - **地の質感**: 藍色の面は斜めにかかる薄いグラデーションと細かいドット柄。グレーの面にも淡いドットのかすみを敷く。 - **形**: 角丸カードとピル型ボタン。ファーストビューの写真は下側を大きな円弧で切り抜く。強みの写真は上辺を斜めにカットする。 - **温度感**: やや寒色寄りで落ち着いている。アクセントのオレンジが少しだけ温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5264B0` | ブランドの藍色（セクション地） | 30% | 画素の実測 | | `dark-section` | `#3E4977` | 濃紺（グラデーション終点・アクティブなタブ） | 8% | 画素の実測 | | `background` | `#EDEDED` | 明るいグレーの地 | 25% | 画素の実測 | | `surface` | `#FFFFFF` | カード・ボタンの白 | 15% | 画素の実測 | | `text` | `#484C68` | 見出しと本文の紺文字 | 2% | 画素の実測 | | `text-body` | `#3E3E3E` | ボタン・ラベルの濃いグレー文字 | 1% | 画素の実測 | | `on-dark` | `#F4FAFE` | 藍色の上に置く白文字 | 1% | 画素の実測 | | `cta` | `#5DB1D9` | 矢印チップの水色 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | 矢印チップ上の白い矢印 | 0% | 画素の主要色に補正 | | `accent-1` | `#F39A3D` | アクセントのオレンジ（キャッチの小見出し・バナーの帯） | 0% | 推定 | | `accent-2` | `#2C83AD` | キャッチ強調語の水色 | 0% | 画素の実測 | | `tint-1` | `#E6F7FF` | 淡い水色の選択中ラジオ・FV の円弧 | 0% | 画素の実測 | | `tint-2` | `#FEDAB3` | 淡いオレンジのチェック項目 | 0% | 画素の実測 | | `accent-3` | `#3C4573` | 物件タグの濃紺ピル | 0% | 画素の実測 | | `line` | `#DADDE4` | 区切り線・カテゴリタグの淡いグレー | 0% | 画素の実測 | | `cta-accessible` | `#277DA6` | AA を満たす補正値（計算） | | 計算 | - 地の色は藍色のグラデーション帯と明るいグレーの帯を交互に並べ、セクションのまとまりを分ける。 - カードとボタンは、どちらの地の上でも必ず白で浮かせる。 - 主な導線は白いピル型ボタンにし、右端に水色の矢印チップを置く形で統一する。 - オレンジは小さなキャッチ・バナーの帯・チェック項目だけに使い、面を大きく塗らない。 - 藍色の上の文字は白、グレーの上の文字は紺色にする。真っ黒は使わない。 - セクション背景には、地の色よりわずかに明るい大きな英字を透かしで敷く。 - `arrow-chip` は文字 `#FFFFFF` × 背景 `#5DB1D9` のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#277DA6`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し（細字） | 欧文サンセリフ | Jost | 300 | 40px | 1.2 | 0.04em | | `headline-lg` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.6 | 0.08em | | `headline-md` | 日本語のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 21px | 1.5 | 0.12em | | `headline-sm` | 物件名・カード見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.05em | | `note` | 駅からの距離・注釈・小さなラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.05em | | `accent` | キャッチ下の英字サブコピー・番号 | 欧文サンセリフ | Jost | 400 | 12px | 1.4 | 0.2em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは、細い欧文の大見出しの下に小さな太字の日本語を添える 2 段構成にする。 - 日本語見出しは字間を広め（0.1em 前後）にとる。 - キャッチは 1 語だけ水色にして強調する。 - 番号は欧文の細字で、01 から始まる 2 桁にする。 - 本文は中央揃えの短い改行を基本にし、ニュースや一覧のテキストは左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードの一覧は 2 列、条件のアイコンは 3 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 22px で統一する。 - セクションの最後には、中央にピル型の『一覧を見る』系のボタンを置く。 - 新しい物件は、左右の端が少し見える横スクロールのカルーセルにし、丸い矢印ボタンを付ける。 - カード同士の間隔は 8〜12px にする。 - 流れのステップは、番号・丸い写真・ラベルの横並びを点線でつなぐ。 ## Elevation & Depth - 白いカードにはごく弱い影（0 2px 8px rgba(0,0,0,0.06)）を付ける。 - ピル型ボタンは影なしにし、地との色の差だけで浮かせる。 - 藍色の地の上のカードは影を付けずに白で抜く。 ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 物件の写真はカード上部いっぱいに角丸で入れる。強みの写真は上辺を斜めにカットする。流れの写真は円形にする。ファーストビューの写真は下側を大きな円弧で切る。 - **セクション境界**: 直線で色を切り替える。ファーストビューだけは円弧にする。 - ボタン・タグ・矢印チップはすべてピル型にする。 - カードは角丸 8〜10px にする。 - 大きなパネル（運営会社・スタッフ紹介）は角丸 10〜12px にする。 ## Components - **矢印付きピル型ボタン**（`button-pill`）: 白いピルの左に黒の太字ラベル、右に水色の矢印チップを置く。幅は約 60%。 - **矢印チップ**（`arrow-chip`）: 水色の小さなピルに白い横矢印を入れる。カードやボタンに添える。 - **物件検索パネル**（`search-panel`）: 上部にアイコン付きの 2 タブ（選択中は濃紺）。その下に白地のセレクト、グレー地のフォーム（広さ・築年数・キーワード）を並べる。 - **条件アイコンタイル**（`icon-tile`）: 3 列の白い正方形タイル。細い線のアイコン、太字ラベル、矢印チップの順に並べる。 - **物件カード**（`property-card`）: 写真の下端に、状態タグ（水色）と面積タグ（白地に枠線）のピルを重ねる。物件名は紺色で 3 行まで、駅からの距離はグレーの小さな文字。 - **英字＋和文の見出し**（`section-heading`）: 細い欧文の大見出しの下に、小さな太字の和文を置く。背景には大きな英字の透かしを敷く。 - **ステップ行**（`flow-step`）: 欧文の番号、直径 70px ほどの円形写真、白い太字ラベルを横に並べ、縦の点線でつなぐ。 - **写真分割バナー**（`banner-split`）: 白いカードの片側に写真を置き、境目はオレンジまたは水色の曲線の帯にする。キーワードは色付きで大きく。 - **カテゴリタグ**（`tag-category`）: 淡いグレーのピルに紺の小さな太字を入れる。日付の下に置く。 ## Do's and Don'ts **Do** - 藍色のグラデーション帯とグレーの帯を交互に配置する。 - 導線はすべて『白いピル＋水色の矢印チップ』の型にそろえる。 - 見出しは細い欧文と小さな和文の組み合わせにする。 - アイコンは細い線画で、藍色系の単色にする。 - 写真は青空とガラス張りのビル、スーツ姿の人物で、明るく清潔に見せる。 **Don't** - オレンジを大きな面やメインのボタンに使わない。 - 太い黒文字や真っ黒の背景を使わない。 - ボタンを四角や角ばった形にしない。 - 強い影や立体的な装飾を付けない。 - ポップな手描きイラストを混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと実績の数字を見せ、メニューを置く）: グレーの地にロゴと月桂樹付きの登録件数バッジを置き、右端に濃紺の丸いメニューボタンを置く。 2. **ファーストビュー**（都市のイメージと価値を伝える）: 都市の空撮写真を下側の円弧で切り抜く。その下に中央揃えのキャッチ 2 行と、字間の広い英字サブコピーを置く。 3. **特集の入口**（主要な物件の種類へ誘導する）: 写真付きの白いカードを 2 枚並べる。オレンジの小さなキャッチと矢印チップを添える。 4. **物件検索**（条件を入れて検索してもらう）: 藍色の地に置いたタブ付きのパネル。フォームの部品は白い箱で、ピル型の検索ボタンを置く。 5. **こだわり条件**（特徴から物件を探してもらう）: 3×3 のアイコンタイルを並べ、見出しの上に小さなリードと罫線を置く。 6. **新築物件のカルーセル**（注目の物件を見せる）: 横スクロールの大きな白カード（竣工時期・物件名・タグ・写真）と、丸い水色の矢印ボタン。 7. **新着・人気の物件**（物件の多さを見せる）: 2 列の物件カードのグリッドを並べ、背景に英字の透かしを敷く。 8. **強み**（選ばれる理由を伝える）: グレーの地に、斜めにカットした写真と中央揃えの紺文字の 2×2 カードを並べる。 9. **移転の流れ**（手順を見せて安心してもらう）: 藍色の地に、円形写真と番号を点線でつないだ 6 ステップを置く。 10. **事例・取引企業**（実績で信頼を得る）: 写真と社名が横に並ぶリストと、ロゴが横に流れる帯。 11. **運営会社・スタッフ紹介**（会社の顔を見せる）: 藍色のグラデーションのパネルと白いパネルを縦に並べ、欧文の大見出しと矢印ボタンを置く。 12. **ニュース**（役立つ情報を発信する）: サムネイル・日付・カテゴリタグ・タイトルを並べ、細い区切り線で 3 件を区切る。 13. **お問い合わせ・フッター**（問い合わせへつなげる）: 藍色の地に、写真分割バナー 2 枚、フリーダイヤル、ピル型ボタン、住所、2 列のメニューを置く。 ## Imagery - 青空の下のガラス張りの高層ビルを見上げる構図で、彩度は高め。 - スーツ姿の男女が打ち合わせをしたり、笑顔で応対したりする明るいストック写真。 - アイコンは細い線（1.5px）の線画で、藍色系の単色にする。 - 背景には細かいドット柄と、大きな英字の透かしを敷く。 - バナーの写真は、オレンジや水色の曲線の帯で区切る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では内容の幅を約 70% に絞り、中央に寄せる。 - PC の条件アイコンタイルは 3 列の横長カードにし、アイコン・ラベル・矢印を横に並べる。 - PC の物件カードは 4 列にし、カルーセルは 4 枚を同時に見せる。 - PC の見出しは、欧文と和文を横に並べて左に寄せる。 - PC のファーストビューは、左にキャッチ、右に円で切り抜いた写真を置く。 - 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-b3077ddc`（元 LP の URL から採番） - **元 LP**: https://www.buildnext-osaka.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。