DESIGN.md — 原色ブロック×線画イラストの管理会社LP（Pop Illustrated Color-Block Corporate LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、親しみ・手作り感、力強い・インパクト
• キーワード: 原色カラーブロック・黒線フラットイラスト・ザラついた紙のノイズ・白抜き極太英字・曲線の帯・黒いオフセットボタン
• 地の質感: 全面にうっすら紙のようなノイズ粒子。白カードは細かいドット方眼。
• 形: セクション境界は波打つ有機曲線。カードは丸みの強い不定形ブロブや角丸。斜めに走る薄色の太い帯が全体をつなぐ。
• 温度感: 明るく温かい。原色の多色使いを黒で引き締める。

Colors

• セクションごとに地の色を黄→ピンク→緑→赤→水色→生成り→黒と切り替える。
• 各色ブロックには同系の淡色の太い曲線帯を斜めに重ねる。
• ボタン・ロゴ・吹き出し・線画は黒に統一し、多色を締める。
• 英字見出しは白塗り＋黒縁＋黒の影で、どの地色でも読める。
• 白はカード・吹き出しのみに使う。
• フッターは黒地に白文字。

Typography

• 見出しは英字の極太スラブ体を主役にし、和文は小さく添える。
• 英字見出しは白塗り・黒縁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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。