--- version: alpha name: Pop Illustrated Color-Block Corporate LP description: 黄・ピンク・緑・赤・水色の大きな有機的カラーブロックをセクションごとに切り替えるコーポレートLP。黒い太線のフラットイラストと、白抜き黒縁の極太スラブセリフ英字見出しが特徴。黒地に白文字のオフセット影付きボタンでポップさと引き締めを両立している。 colors: primary: '#000000' background: '#FEFAC8' secondary: '#FCF3AC' accent-1: '#F9788B' tint-1: '#F1ADB5' accent-2: '#3BD592' tint-2: '#D1E7D4' accent-3: '#4ECECB' marker: '#F2604F' surface: '#FEFEFE' dark-section: '#040000' on-dark: '#DBDBD9' text: '#050202' background-alt: '#8DDAFA' typography: display: fontFamily: Rammetto One fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Dela Gothic One fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: DotGothic16 fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em label-button: fontFamily: Rammetto One fontSize: 14px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.03em accent: fontFamily: Rammetto One fontSize: 32px fontWeight: 900 lineHeight: 1.0 rounded: sm: 8px md: 20px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 58px heading-outline: textColor: '{colors.surface}' typography: '{typography.display}' height: 60px blob-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 320px speech-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px arrow-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 60px tag-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px news-item: textColor: '{colors.text}' typography: '{typography.accent}' height: 80px staff-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 360px --- # DESIGN.md — 原色ブロック×線画イラストの管理会社LP（Pop Illustrated Color-Block Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、親しみ・手作り感、力強い・インパクト - **キーワード**: 原色カラーブロック・黒線フラットイラスト・ザラついた紙のノイズ・白抜き極太英字・曲線の帯・黒いオフセットボタン - **地の質感**: 全面にうっすら紙のようなノイズ粒子。白カードは細かいドット方眼。 - **形**: セクション境界は波打つ有機曲線。カードは丸みの強い不定形ブロブや角丸。斜めに走る薄色の太い帯が全体をつなぐ。 - **温度感**: 明るく温かい。原色の多色使いを黒で引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ブランドの黒（ボタン・ロゴ・線画） | 10% | 画素の実測 | | `background` | `#FEFAC8` | FV・アクセスの生成り地 | 11% | 画素の主要色に補正 | | `secondary` | `#FCF3AC` | 導入文の黄色ブロック | 9% | 画素の主要色に補正 | | `accent-1` | `#F9788B` | 会社紹介のピンクブロック | 8% | 画素の主要色に補正 | | `tint-1` | `#F1ADB5` | ピンクの淡色帯 | 8% | 画素の主要色に補正 | | `accent-2` | `#3BD592` | サービスの緑ブロック | 9% | 画素の実測 | | `tint-2` | `#D1E7D4` | 緑の淡色帯 | 7% | 画素の主要色に補正 | | `accent-3` | `#4ECECB` | ニュースの水色ブロック | 7% | 画素の主要色に補正 | | `marker` | `#F2604F` | スタッフ紹介の赤橙ブロック | 8% | 推定 | | `surface` | `#FEFEFE` | 白カード・吹き出し | 9% | 画素の実測 | | `dark-section` | `#040000` | フッターの黒地 | 6% | 画素の実測 | | `on-dark` | `#DBDBD9` | 黒地・ボタン上の白文字 | 1% | 画素の実測 | | `text` | `#050202` | 本文の黒文字 | 2% | 画素の主要色に補正 | | `background-alt` | `#8DDAFA` | FV下の空色 | 2% | 画素の実測 | - セクションごとに地の色を黄→ピンク→緑→赤→水色→生成り→黒と切り替える。 - 各色ブロックには同系の淡色の太い曲線帯を斜めに重ねる。 - ボタン・ロゴ・吹き出し・線画は黒に統一し、多色を締める。 - 英字見出しは白塗り＋黒縁＋黒の影で、どの地色でも読める。 - 白はカード・吹き出しのみに使う。 - フッターは黒地に白文字。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し（白抜き黒縁） | 欧文セリフ | Rammetto One | 900 | 44px | 1.1 | 0.02em | | `headline-md` | 英字見出し下の和文サブ見出し | 装飾・ディスプレイ | Dela Gothic One | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | ブロブカードのタイトル・吹き出しの文字 | 装飾・ディスプレイ | DotGothic16 | 700 | 18px | 1.4 | 0.08em | | `body-lg` | 導入文・リード文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.2 | 0.1em | | `body-md` | 住所・ニュース本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.03em | | `label-button` | 黒ボタンの英字 | 欧文セリフ | Rammetto One | 900 | 14px | 1.0 | 0.03em | | `accent` | 日付・ページ番号の大きな数字 | 欧文セリフ | Rammetto One | 900 | 32px | 1.0 | 0.0em | - 見出しは英字の極太スラブ体を主役にし、和文は小さく添える。 - 英字見出しは白塗り・黒縁2〜3px・右下に黒い影。 - 和文サブ見出しの前に黒い引用符マークを置く。 - 本文は字間広め・行間2以上でゆったり。 - キャッチは縦書きで手書き風フォントを使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、PC は見出しとイラストの左右交互配置 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 見出しは左揃え、英字が画面幅いっぱいに近い大きさ。 - テキスト→ボタン→大きなイラストの順で縦に積む。 - セクション間は余白ではなく色ブロックの切替で区切る。 - ボタンは幅約90%の横長。 ## Elevation & Depth - ぼかし影は使わない。 - ボタンは右下4〜6pxずらした黒線の枠を重ねたオフセット影。 - 英字見出しは黒のベタ影で立体感を出す。 ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: イラストは切り抜きでブロック上に直接配置。カードは丸い不定形ブロブ。 - **セクション境界**: 波打つ有機曲線、FVとフッター上は大きな円弧 - メインボタンは角丸なしの長方形。 - 矢印ボタンは黒い正円。 - ラベルは黒線のピル型。 - 吹き出しは黒い角丸四角に三角しっぽ。 - ブロブカードは太い黒線で縁取る。 ## Components - **黒のオフセットボタン**（`button-primary`）: 黒の長方形に白の英字、右端に白丸。右下に黒線枠をずらして重ねる。 - **白抜き英字見出し**（`heading-outline`）: 白塗り黒縁の極太英字に、引用符＋和文サブ見出しを添える。 - **ブロブ型リンクカード**（`blob-card`）: 白いドット方眼の不定形カードに黒太線の縁。イラスト・タイトル・黒丸矢印を縦に並べる。 - **黒い吹き出し**（`speech-bubble`）: 黒い角丸四角に白文字2行。キーワードをイラストの近くに置く。 - **丸い矢印ボタン**（`arrow-circle`）: 黒い正円に白い矢印。スライダーの左右に2つ並べる。 - **カテゴリラベル**（`tag-pill`）: 白地黒線のピル型。ニュースのカテゴリを示す。 - **ニュース行**（`news-item`）: 左に年月の小さな数字と日付の大きな数字、右に本文2行。 - **スタッフカード**（`staff-card`）: 白い吹き出し枠の人物イラストに、斜めの白い番号ラベルを添え、分数のページ番号を付ける。 ## Do's and Don'ts **Do** - 地色はセクションごとに原色ブロックで切り替える。 - 線画は黒の均一な太線で描き、塗りはフラットにする。 - 黒い要素を各セクションに入れて引き締める。 - 淡色の曲線帯を複数セクションにまたがらせて回遊感を出す。 - 紙のようなノイズを全体に薄く重ねる。 **Don't** - グラデーションやぼかし影を使わない。 - 写真素材を主役にしない。 - ボタンを色付きやピル型にしない。 - 直線の水平区切りで分割しない。 - 細い明朝体で上品にまとめない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（会社の立ち位置と世界観を伝える）: 生成り地に角丸の黒線枠のタグライン、縦書きコピー、建物と人々の群像イラスト。下端は円弧。 2. **導入・理念**（事業の役割を説明する）: 空色から黄色の丘へ。会議のイラストの下に長めの本文を置く。 3. **関係図**（自社が両者の間に立つことを示す）: 中央人物の左右に関係者を置き、弧でつなぐ。ラベルはピル型。 4. **会社紹介**（会社概要へ誘導）: ピンク地に英字見出し、リード、黒ボタン、走る人物と吹き出し。 5. **サービス**（サービスへ誘導）: 緑地に同じ型の見出しとボタン、会議イラスト。 6. **特集リンク**（診断・実績ページへ誘導）: 白いブロブカードを2つ縦に並べる。 7. **スタッフ紹介**（人の顔を見せ親しみを出す）: 赤地にスタッフカードのスライダー、矢印、分数のページ番号、ボタン。 8. **お知らせ**（更新情報）: 水色地に白い角丸サムネとニュース行のスライダー。 9. **アクセス**（所在地案内）: 地図埋め込みの下、生成り地に英字見出しと中央揃えの住所。 10. **フッター**（会社情報・外部リンク）: 黒地に吹き出し型ロゴと白文字の住所。下部にピンク・青の2分割リンク帯。 ## Imagery - 黒の均一な太線で描いたフラットな人物イラスト。 - 動物の被り物をした人物で親しみとユーモアを出す。 - 建物はアイソメトリックか正面のフラット画で、窓を規則的に並べる。 - 雲・木などの小物を余白に散らす。 - 全体に紙のノイズを重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左右端に縦書きのロゴ帯と固定サイドボタンを置く。 - PC は見出しブロックとイラストを左右交互に配置する。 - PC はブロブカードを横2列に、スタッフカードを横に複数並べたスライダーにする。 - PC はニュースを3カラムのカードにする。 - 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-591b559f`（元 LP の URL から採番） - **元 LP**: https://betterplace.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。