DESIGN.md — 鮮黄×線画イラストのプログラミングスクール LP（Bright Yellow Illustrated Coding School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、信頼・誠実
• キーワード: 鮮黄色・線画イラスト・白カード・比較表・LINE予約・未経験歓迎
• 地の質感: フラットな単色面に木目調の帯と淡黄・淡ミントの面を組み合わせる。ドットパターンをアクセントに散らす
• 形: 角丸小さめの白カード、ピル型の見出しラベル、ギザギザ円のバッジ、下向き三角の吹き出し
• 温度感: 明るく暖かい。黄色の地とティールの差し色で、温かさと誠実さを両立する

Colors

• 地は白・淡黄・淡ミントを交互に使い、黄色はFVと理由セクションの外枠に大きく塗る
• 価格や大事な一文だけ朱色の文字や帯で強調する
• CTA は LINE 緑に固定し、ほかの要素に緑を使わない
• 数値グラフや表見出しはティール系でまとめる
• 悩みリストは濃いグレーのボックスに白文字と黄色のチェックで目立たせる
• セクション背景に淡黄の大きな英字を透かしで敷く
• button-primary は文字 #FFFFFF × 背景 #01B401 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018901、4.59:1）を使う。
• badge-burst は文字 #E96A57 × 背景 #FFFFFF のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE361D、4.51:1）を使う。

Typography

• 見出しは極太ゴシックにする。一部の文字だけ黒地に白抜きか黄色の文字にして強調する
• 助詞（から・の・との）は小さくし、名詞を大きく見せる
• 数字（%・円）は本文の2倍以上の太字にする
• 強調したい一文は朱色の太字にする
• 英字の透かし見出しは淡黄で大きく置き、上に和文見出しを重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストとイラストの 2 カラム、理由は 3 カラムのカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 理由セクションは黄色の地の上に白い大枠を置き、その中に詳細ブロックを積む
• 詳細ブロックは白と淡黄を交互にし、テキストとイラストの左右を入れ替える
• 説明文は淡ミントの角丸ボックスに中央揃えで入れる
• 比較表・コース表は横スクロールの表にする
• CTA ブロックは木目調の帯の上に白いカードを置いて配置する

Elevation & Depth

• 白カードにはごく薄い影（0 2px 6px rgba(0,0,0,.08)）をつける
• 比較表の自社列は朱色の枠線と軽い影で浮かせる
• それ以外は基本フラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の小さい矩形にする。イラストは切り抜きで背景に溶け込ませる
• セクション境界: 直線で切り替える。理由ナビの下には下向き三角を置く
• 特長バッジはギザギザ縁の白い円形にする
• 見出しラベルは白いピル型に黒い枠線をつける
• 理由番号は黄色の正円に入れる
• CTA ボタンは角丸 4px の横長矩形にする

Components

• LINE予約ボタン（button-primary）: 左にLINEアイコン、中央に白文字を置いた緑の横長ボタン。白カードの中に置く
• ギザギザ円バッジ（badge-burst）: FV に5つ並べる特長バッジ。朱色の太字と小さな注番号を入れる
• ピル型見出しラベル（label-pill）: 白地に黒枠のピル。セクション導入の一文を入れる
• 理由番号（reason-number）: 黄色の正円に小さな「理由」と大きな数字を入れ、右に見出しと黄色の筆線を置く
• 悩みチェックリスト（worry-list）: 濃色ボックスに黄色のチェックアイコンと白文字の悩みを6行並べる
• 淡ミント説明ボックス（info-box）: 中央揃えの説明文。最後の一文だけ朱色の太字にする
• 料金比較の行（price-row）: 左に濃色か朱色のラベル、右に淡黄の地で大きな金額を置く
• 受講生の声カード（testimonial-card）: 淡黄のカードにイラストの顔と、名前・属性・感想を入れる。横スライドで並べる
• FAQ アコーディオン（faq-item）: 青い丸に Q を入れ、右端に開閉の矢印。区切りは細線にする
• 白抜き強調見出し（heading-highlight）: 1文字ずつ黒い四角に白文字を入れ、要の語だけ黄色の文字にする

Do's and Don'ts

Do - 黄色は大面積に思い切って使い、その上の白カードで情報を整理する - 線画にフラット着彩の人物イラストを多く使い、親しみを出す - 数値はグラフや大きな太字で見せる - CTA はページの序盤・中盤・末尾に同じデザインで繰り返す - 比較表では自社の列だけ朱色の見出しと枠で目立たせる

Don't - 黄色の上に細い淡色の文字を置かない - CTA の色を緑以外に変えない - 写真を多用しない。主役はイラストにする - 朱色を広い面に使わない。強調だけにとどめる - 明朝体や繊細な書体を混ぜない

Page Structure

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

1. ファーストビュー（未経験からの挑戦と特長を一目で伝える）: 黄色の地に極太のキャッチ、走る人物の線画を置き、下にギザギザバッジを5つ並べ、最後に最安値の強調ラベルを置く
2. コンセプト（スクールの価値観を示す）: 白地に手書き英字と人物イラストを置き、短文を段階的に並べる
3. スクール紹介（サービスを一言で定義する）: 黄色の地にピル型ラベル、強調帯の付いた語、PC モニターのモックを置く
4. CTA（無料相談へ誘導する）: 木目調の帯にピル型の見出し、赤いタグ、人物イラスト、白カードに入れた LINE 緑のボタンを置く
5. 悩みの提起（ターゲットの不安に共感する）: 人物3人の上に悩みカードを4つ並べ、青い下向き矢印を挟んで濃色のチェックリストにつなぐ。縦書きの英字を透かしで敷く
6. 実績データ（受講者層と就職率で信頼を得る）: 淡ミントの地にティールの円グラフを2つ並べる
7. 選ばれる理由（3つの理由で差別化する）: 白抜き強調見出しの下に、黄色い外枠の中で3枚のナビカードと理由ごとの詳細ブロックを置く
8. 比較表（他社との費用・制度の差を示す）: 透かし英字の上に見出しを置く。表は自社列だけ朱色の見出しで、他社列はグレーにする
9. お客様の声（受講生の体験で後押しする）: 淡黄の地に大きな体験談カードを1枚置き、その下に横スライドの小カードを並べる
10. コース一覧（料金と内容を網羅して見せる）: 列見出しを色分けした多列の表にする。価格は朱色で示す
11. CTA（コース選びの相談へ誘導する）: 淡黄の吹き出しの左右に人物を置き、黄色の帯の中に LINE ボタンを置く
12. よくある質問（不安を解消する）: 青い Q アイコン付きのアコーディオンを細線で区切って並べる
13. 最終CTA・フッター（最後のひと押し）: 序盤の CTA ブロックを再掲し、細いフッターで締める

Imagery

• 黒の線画にフラット着彩（青・黄・オレンジ・肌色）のビジネス人物イラストを使う
• 人物は走る・腕を組む・考えるなどの動きのあるポーズにする
• PC・コードウィンドウ・書類などの IT モチーフを線画で添える
• 黄色のドット柄の円をイラストの背景に敷く
• 写真は建物などの実在性を示すものに限り、角丸の小さい矩形で使う
• 取引先ロゴはグレー地のない白背景にグリッドで並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の 2 カラム（テキスト＋イラスト）は、SP では縦積みにしてイラストを上に置く
• 理由のナビカードは PC で 3 列、SP では縦に並べるか横スクロールにする
• 比較表・コース表は SP で横スクロールにし、左の見出し列は固定する
• FV のバッジは PC で5つ横並び、SP では3＋2の2段にする
• PC の本文幅は 900px 前後に収め、左右に黄色の余白を残す

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