DESIGN.md — 紺×黄の線画イラスト法人支援 LP（Friendly Line-Illustration Business Support LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、親しみ・手作り感、シンプル・ミニマル
• キーワード: 線画イラスト・黒枠カード・クリーム地の波形・紺のピルボタン・黄色の大きな番号・法人向けBtoB
• 地の質感: フラットな単色。影やグラデーションはほぼ使わず、黒の細い線と淡い有機的な波形で質感を出す
• 形: 角丸 8px 前後の黒枠カード、ピル型ボタン、ゆるい雲のような曲線の背景面
• 温度感: 温かめの中間。クリーム地と黄色で柔らかさを出し、紺で引き締める

Colors

• 地は白とクリーム色の波形を交互に重ね、面ではっきり区切らない
• ボタンと事例リストは紺で統一し、ブランドの軸にする
• 問い合わせ CTA だけを緑にして、ほかのボタンと区別する
• 黄・オレンジは番号やイラストの差し色に限る
• カードは白地＋黒の 1.5px 枠。淡い色で塗らない
• 見出しの社名部分を紺、強調語を緑で塗り分けてもよい

Typography

• 見出しは極太ゴシックで中央揃え、黒
• 箇条書きは先頭を黒丸「●」にし、太めの 500 で書く
• 注釈は「※」付きの小さいグレー文字で項目の直下に置く
• 番号は欧文の極太数字を黄色で大きく見せる
• 本文は左揃え。中央揃えは見出しとボタンに限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。支援の流れだけ左に画像、右にテキストの 2 分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは縦に 8px 間隔で積む
• 道具紹介カードは幅 70% で中央に寄せ、ロゴ枠・説明・ボタンの順に並べる
• 強みの項目は点線の区切り線で分ける
• 支援の流れは細いグレーの線で区切る
• 見出しの下に 24px ほど空けてから内容を置く

Elevation & Depth

• 基本は影なし。枠線で面を区切る
• 事例の紺バーにだけ右下へグレーのずらし影（4px）を付ける
• ロゴ枠は薄いグレーの 1px 線で囲む

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は使わない。線画イラストを切り抜きで置き、アイコンは水色の円の上に載せる
• セクション境界: 直線では区切らず、クリーム色の雲のような波形の面を背景に重ねて切り替える
• カードは角丸 8px＋黒 1.5px 枠
• 主要ボタンはピル型
• 事例バーは角丸 4px の長方形
• ステップ番号はオレンジの正円

Components

• ページ内ナビのタブ（nav-tabs）: 白地にグレーの細い枠の小さなボタンを横に並べる
• FV のラベル帯（label-badge）: 紺の角丸帯に白文字。キャッチの上に置く
• 悩みのカード（problem-card）: 黒枠カード。左に見出しと●箇条書き、右に水色円のアイコン
• 斜線で挟む見出し（slash-heading）: 見出しの左右に斜線を置き、社名を紺・強調語を緑で塗る
• 強みの大きな番号（big-number）: 黄色の極太数字をイラストの上に重ねる
• 白抜きのサブボタン（button-outline）: 白地に黒枠のピル型。詳細ページへのリンク
• 事例リストのバー（case-bar）: 紺の横長バー。左に CASE 番号、続けて事例名。ずらし影付き
• ツール紹介カード（tool-card）: 黒枠カードに分類名、ロゴ枠、2〜3 行の説明、紺ピルボタンを縦に並べる
• 紺の詳細ボタン（button-primary）: カード幅いっぱいの紺ピル型に白い太字
• 問い合わせ CTA（button-contact）: 緑の面に吹き出しアイコンと白文字。下部の固定帯と、角丸 4px のボタンで使う

Do's and Don'ts

Do - イラストは黒線＋紺・黄・青のフラットな塗りで統一する - カードはすべて白地＋黒枠＋角丸 8px にそろえる - 箇条書きは●で始め、短い文で 2〜3 個に絞る - クリームの波形の背景はセクションの途中にまたがるように置く - 問い合わせだけを緑にする

Don't - 写真やグラデーションを使わない - カードに濃い影を付けない - 紺・緑以外の色をボタンに使わない - 黄色を本文の文字色にしない - 背景を直線の帯で区切らない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ブランドの提示とページ内の移動）: 左上に水色の波形、中央にロゴ、その下にタブ型のナビを 5 個並べる
2. ファーストビュー（サービスの一言紹介）: 紺のラベル帯、極太の 2 行見出し、書類の山に悩む人々の大きな線画。周りに課題語を縦書きの手書き風で散らす
3. 悩みの提起（業務の課題に共感してもらう）: 中央の見出しの下に黒枠カードを 4 枚。各カードに分野名、●の悩み 2 つ、水色円のアイコン
4. 支援内容（解決できる範囲を示す）: グレーの下向き三角のあと、斜線で挟んだ見出し。3 分野のカードに見出し・小見出し・●の支援項目
5. 3つの強み（選ばれる理由）: クリーム地の波形の上に、黄色の大きな番号とイラスト、太字の見出し、●の根拠を並べ、点線で区切る。白抜きのボタンを添える
6. 支援の流れ（進め方を 3 段階で示す）: オレンジの番号円とイラストを左、見出しと●2 つを右に置き、細い線で区切る
7. 支援実績（事例への入口）: 紺の事例バーを 4 本縦に積み、その下に握手する人々の大きな線画
8. ツール紹介（連携サービスを一覧で見せる）: ロゴ枠付きの黒枠カードを縦に並べ、それぞれに紺の詳細ボタン
9. CTA（相談を促す）: 白地の中央に極太の見出しと緑の問い合わせボタン。画面下には緑の固定帯
10. フッター（法定表示）: 小さい太字で会社情報を中央揃え、その下にコピーライト

Imagery

• 人物は黒の均一な線で描き、スーツを紺・青、シャツや髪を黄・オレンジで塗る
• オフィスの机や書類の山はアイソメトリックの線画にする
• アイコンは水色の円の上に小さな線画を置く
• キラキラの十字や汗マークなど、漫画的な効果線を添える
• 地図などの図形は青のベタ塗り＋黒い太線
• ロゴは白地に薄いグレー枠の中へ中央配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を 2 カラム（左に見出し、右にイラスト）、ナビは右上に横並び
• 悩みは 4 列、支援内容とツール紹介は 3 列のカードグリッド
• 強み・流れは 3 列で横に並べ、流れには背景に大きな黄色の矢印を敷く
• 事例は紺の正円を 4 つ横に並べる形に変える
• 問い合わせは右下に浮かぶ緑の円形ボタンになる

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 行書くと起動時に読み込まれる。