DESIGN.md — 海の青×ひまわり黄の教育支援サービスLP（Iceberg Blue & Sunny Yellow Edu-Tech Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、情報量多め・訴求型、清潔・爽やか
• キーワード: 社会課題・データ可視化・氷山メタファー・波線区切り・黄色アクセント・番号見出し
• 地の質感: フラットな面に、ジグザグ模様の地紋をうっすら重ねる。影はごく弱い
• 形: 角丸カード、ピル型ボタン、ゆるい波形のセクション境界、円グラフとドーナツ図
• 温度感: 青で冷静さ、黄とクリームで温かさを出す。やや暖かめの中間

Colors

• 地の色をセクションごとに替える。順番は青、白、薄グレー、クリーム、白、薄グレー、ピンク
• 青い地の上には白いカードを置き、数字は濃い青で目立たせる
• セクション番号・強調したい語句・アイコン・CTAは黄色にそろえる
• 円グラフは黄の濃淡か青の濃淡の2色だけで描く
• 料金プランは上位を珊瑚レッド、標準を黄、オプションをグレーで色分けする
• 本文は濃いグレーの#333にする。純黒は使わない

Typography

• 見出しは「黄色の大きな2桁番号＋上に英字の小ラベル＋日本語の見出し」の3点セットで作る
• 統計の数字は単位より大きく太くし、色は青か黄にする
• 強調語句は太字の黄色にする。下線やマーカーは使わない
• 出典は※を付けて小さな文字で数値の直下に置く
• 見出しの字間を少し広げて、落ち着いた印象にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラムで、統計カード・効果カードは縦に積む
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 統計カードと効果カードは幅を約62%に絞って中央に置く
• ステップカードは左にアイコン、右にテキストの2分割にする
• セクション見出しは左寄せ、カードの中身は中央寄せにする
• CTAボタンは青い課題セクションの最後とページ末尾に置く
• 料金プランはSPでも2列にし、オプションは下に中央寄せで置く

Elevation & Depth

• カードには、ぼかし広めの淡い影をつける
• 黄色枠のカードは影を付けず、1pxの線だけにする
• 料金カードには淡い紫系の柔らかい影をつける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角にする。図版はフラットなイラストやアイコンで描く
• セクション境界: 大きくゆるい波形の曲線
• セクションの切り替えは必ず波線にする
• ステップ番号は黄色の丸バッジにし、カード左上からはみ出させる
• 下向きの黄色い三角で、次の内容へ視線を誘導する
• CTAボタンはピル型にし、右端に白丸の矢印を付ける

Components

• 問い合わせピルボタン（button-primary）: 黄色のピル型で、文字は中央、右端に白い丸の矢印アイコンを付ける
• 番号付き見出し（section-heading）: 黄色の2桁番号を置き、その右に英字の小ラベルと日本語の見出しを2段で並べる
• 統計カード（stat-card）: 白い角丸カードに、見出し・青の大きな数字・注釈を中央寄せで縦に並べる
• ステップカード（step-card）: 黄色枠の白カードの左上に、STEPと番号を入れた黄色の丸バッジを置く。左に線画アイコン、右に説明文と▶付きの要点を並べる
• 効果円グラフカード（effect-card）: 黄色枠の白カードに、見出し・黄色の円グラフ・改善率・補足を縦に並べる
• 番号リストボックス（list-box）: クリーム地の角丸ボックスに、太字の番号付きリストを入れる
• 料金プランカード（pricing-card）: 上部をプラン色の帯にして白抜きの英字プラン名を入れ、下にチェック付きの項目リストを並べる。対象外の項目はグレーで表示する
• 特長項目（feature-item）: 黄色の線画アイコンと黄色の太字見出しを並べ、その下に本文を置く
• 図中ラベル（callout-label）: グレー角丸の説明ボックスの右上に、白地のピル型ラベルを載せて割合を示す

Do's and Don'ts

Do - 課題パートは青と白、解決パートは黄とクリームにして、色で流れを切り替える - 数値データは大きな数字＋出典の注釈でセットにする - アイコンは細い線画にし、色は黄か黒にそろえる - セクション番号を必ず振り、順を追って読める構成にする - 地紋は薄いジグザグにとどめ、うるさくしない

Don't - 写真を全面に敷いた派手なビジュアルにしない - 赤など強い警告色を広い面に使わない。赤は上位プランの帯だけ - 角が尖ったカードやボタンを使わない - セクション境界を直線で区切らない - 円グラフに3色以上を使わない

Page Structure

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

1. ファーストビュー（見えにくい課題を象徴的に伝える）: 淡い空色の上に氷山のイラストを置き、下半分は青い海面にする。グレーの説明ボックスとピル型ラベルを添える
2. 課題の現状（統計で深刻さを示す）: 青い地に番号見出しと白文字の本文を置き、白い統計カードを縦に並べる。円グラフも入れる
3. 中間CTA（問い合わせへ誘導する）: 黄色の三角で視線を下へ送り、黄色いピルボタンを置く。下端は波線で白地へ切り替える
4. 背景・行政の動き（導入の必然性を説明する）: 白地にクリーム色のリストボックスと、資料画像の枠を置く
5. 仕組み（運用サイクルを示す）: 薄グレーの地紋の上に黄色のドーナツ型サイクル図を置き、STEP1〜4の黄枠カードを続ける
6. 導入効果と事例（成果をデータで証明する）: クリーム地に効果円グラフのカードを並べ、事例の折れ線グラフを2つ置く
7. サービスの特長（機能を紹介する）: 白地に、黄色アイコン＋黄色見出し＋本文の項目と図版を交互に置く
8. 構築される体制（導入後の姿を示す）: 白地にフラットな人物イラストと、旗などのアイコン見出しを置く
9. 監修・根拠（学術的な信頼性を示す）: 薄グレーの地に人物写真、肩書き、経歴を載せた白い角丸の経歴ボックスを置く
10. 料金プラン（契約内容を比較させる）: 薄ピンクの地に、色帯付きのプランカードを2枚とオプションを1枚置く
11. 最終CTA・フッター（問い合わせを締めの導線にする）: クリーム地にページトップへのリンクとピルボタンを置き、白地のフッターにリンクとコピーライトを入れる

Imagery

• ポリゴン調の氷山イラストで、隠れた課題を表現する
• 人物は肌色・黄・グレーを使ったフラットなイラストにする
• アイコンは細い線の線画にし、黄か黒にする
• グラフはフラットな円グラフと、淡いグリッドの折れ線グラフにする
• 背景には薄いジグザグの地紋を敷く
• 監修者は自然光で撮った、柔らかい表情の上半身写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは統計カードを3列のグリッドにする
• PCではFVのキャッチを左、氷山を右に配置する
• PCではステップをサイクル図の左右に2枚ずつ配置する
• PCでは効果カードを4列に横並びにし、事例グラフも2列にする
• PCでは特長を「画像左＋テキスト右」の横組みにし、料金プランは3列にする

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