--- version: alpha name: Pop Flat Illustration Online Consultation LP description: 白と薄グレーの地を交互に敷き、インディゴの幾何学ディスプレイ書体で見出しを組む学校向け相談LP。コーラル・ピンク・水色・黄色のフラットイラストとカードで、親しみやすく軽快な印象を作る。ボタンはインディゴのピル型で統一する。 colors: primary: '#47579F' cta: '#4352A3' on-cta: '#F9FCFF' background: '#FFFFFF' background-alt: '#E6E8E7' accent-1: '#ED7962' accent-2: '#F19DC1' accent-3: '#C3E5F1' tint-1: '#FEE066' secondary: '#6FB3DE' tint-2: '#A5D8DB' marker: '#FFF4C7' text: '#121013' line: '#0B0B0D' dark-section: '#000000' accent-1-accessible: '#D83819' typography: display: fontFamily: Stick fontSize: 54px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Stick fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: DotGothic16 fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px tag-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 22px question-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 370px speech-bubble-large: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px step-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px check-merit: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px tel-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 380px --- # DESIGN.md — インディゴとパステルのポップな学校相談 LP（Pop Flat Illustration Online Consultation LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、清潔・爽やか、やさしい・柔らかい - **キーワード**: フラットイラスト・インディゴ見出し・パステル多色カード・吹き出し・ピル型ボタン・ステップ縦線 - **地の質感**: グラデーションや影はほぼ使わない。ベタ塗りの面と黒い細線で構成する、平面的なイラスト調。 - **形**: ボタンは完全なピル型。カードは角丸なしで黒の細枠。吹き出しは小さめの角丸と三角のしっぽ。背景に大きな有機的なブロブ形を置く。 - **温度感**: 明るく暖かい。コーラルと黄色で温度を足し、インディゴと薄グレーで落ち着きを保つ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#47579F` | 大見出し・ブランドを代表するインディゴ | 3% | 画素の実測 | | `cta` | `#4352A3` | 申込ボタンの塗り | 2% | 画素の実測 | | `on-cta` | `#F9FCFF` | ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 31% | 画素の実測 | | `background-alt` | `#E6E8E7` | 交互に敷く薄グレー地 | 28% | 画素の実測 | | `accent-1` | `#ED7962` | コーラル（カード地・タグ吹き出し） | 4% | 画素の実測 | | `accent-2` | `#F19DC1` | ピンク（カード地・ブロブ） | 4% | 画素の実測 | | `accent-3` | `#C3E5F1` | 淡い水色（カード地） | 3% | 画素の実測 | | `tint-1` | `#FEE066` | 黄色（カード地・問い合わせ帯） | 8% | 画素の実測 | | `secondary` | `#6FB3DE` | 水色のタグ吹き出し | 0% | 推定 | | `tint-2` | `#A5D8DB` | 背景ブロブの青緑 | 4% | 画素の実測 | | `marker` | `#FFF4C7` | メリット文の黄色マーカー | 0% | 画素の主要色に補正 | | `text` | `#121013` | 本文・小見出しの黒 | 2% | 画素の実測 | | `line` | `#0B0B0D` | カード枠・アウトラインボタン・ステップ縦線 | 0% | 画素の実測 | | `dark-section` | `#000000` | 最下部の黒帯 | 0% | 画素の実測 | | `accent-1-accessible` | `#D83819` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーをセクションごとに交互に切り替える。 - 見出しと全ボタンはインディゴ1色に統一し、ボタン色を増やさない。 - コーラル・ピンク・水色・黄色はカード地とイラストにだけ使い、1カード1色にする。 - 黄色は問い合わせ帯で面として大きく使い、ページ終盤の目印にする。 - 強調したい短文は黄色マーカーを文字の下半分に引く。 - タグ吹き出しはコーラルと水色を対にして白文字で置く。 - `tag-bubble` は文字 `#F9FCFF` × 背景 `#ED7962` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D83819`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し・セクションロゴ風見出し | 装飾・ディスプレイ | Stick | 400 | 54px | 1.2 | 0.05em | | `headline-lg` | セクション見出し（黒） | 装飾・ディスプレイ | Stick | 400 | 30px | 1.3 | 0.08em | | `headline-md` | カード吹き出し見出し・リード文 | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.03em | | `headline-sm` | ステップ見出し・メリット項目 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 受付時間などの注記 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `label-button` | ボタン・タグ吹き出しの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `accent` | 電話番号の大きな数字 | 装飾・ディスプレイ | DotGothic16 | 700 | 36px | 1.2 | 0.04em | - 大見出しは直線的なディスプレイ書体をインディゴで使い、ページの顔にする。 - セクション見出しは同じディスプレイ書体を黒で中央に置く。 - 本文とボタンは太字のゴシックで、可読性を優先する。 - 見出しの上にはタグ吹き出しを1〜2個重ね、ひと言で補う。 - 本文は太字を基本とし、細い本文は補足説明だけに使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は FV とメリットが左右 2 カラム、質問カードは 2×2 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 本文ブロックは左右に約20pxの余白を取る。 - ボタンは中央寄せで幅約200px、縦に8pxで重ねる。 - 参加方法はアイコン→ロゴ文字→説明→ボタンの縦並びを繰り返す。 - 質問カードは縦に約40px間隔で並べる。 - ステップは左に番号円と縦線、右に内容を置く。 ## Elevation & Depth - 影はほぼ使わず、平面で構成する。 - 奥行きは黒の細枠と、イラストの重なりで出す。 - 吹き出しには影を付けない。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は端末画面の枠に入れて角丸で見せる。イラストは切り抜きで背景ブロブに重ねる。 - **セクション境界**: 直線で地の色を切り替える。セクション内は薄グレーの細い横線で区切る。 - カードは角丸なしで黒1pxの枠。上部に白いタイトルバーと小さな図形アイコンを付けてブラウザ窓風にする。 - 吹き出しは白地に角丸、下向きの三角しっぽ。 - ステップ番号は黒線の円にStepと数字を入れる。 - 問い合わせ帯の受付時間は両端が矢印形の黒帯にする。 ## Components - **申込ボタン**（`button-primary`）: インディゴのピル型。白太字を中央に、右端に白い山括弧を置く。 - **詳しく知るボタン**（`button-outline`）: 白地に黒枠のピル型。右端に下向き矢印を置き、開閉に使う。 - **タグ吹き出し**（`tag-bubble`）: コーラルか水色の小さな角丸の吹き出し。白い斜体太字で見出しの上に置く。 - **質問テーマカード**（`question-card`）: ブラウザ窓風の黒枠カード。中央に白い見出し吹き出し、イラスト、黒丸の箇条書き質問を3つ並べる。 - **大きな吹き出し**（`speech-bubble-large`）: 白地に黒太枠の吹き出しで、ステップ紹介のひと言を2行で書く。 - **ステップ**（`step-item`）: 左に黒線の円で番号、円同士を黒の縦線でつなぐ。右に太字の見出しと本文。 - **チェック付きメリット**（`check-merit`）: 四角に赤いチェックのアイコンと、黄色マーカーを引いた太字の短文。 - **電話番号帯**（`tel-banner`）: 黄色地に大きなディスプレイ数字の電話番号。下に両端が矢印形の黒帯で受付時間を入れる。 ## Do's and Don'ts **Do** - ボタンはすべてインディゴのピル型に揃える。 - セクションごとに白と薄グレーの地を交互に使う。 - イラストは同じタッチのフラット人物で統一し、各セクションに入れる。 - カードの地色は4色のアクセントから1色ずつ割り当てる。 - 見出しの補足は短いタグ吹き出しにまとめる。 **Don't** - グラデーションや強いドロップシャドウを使わない。 - ボタンにアクセント色を使って色数を増やさない。 - カードに大きな角丸を付けない。黒枠の角張った形を保つ。 - 写真をそのまま全面に敷かない。端末枠やイラストと組み合わせる。 - 明朝や手書き書体を混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス名と気軽さを一目で伝える）: ロゴの下にタグ吹き出しを2つ、インディゴの大見出しを2行で置く。リード文の下に、端末画面風の写真をイラスト人物とブロブで囲む。 2. **参加方法**（選べる3つの手段と申込導線を示す）: 薄グレー地。タグ吹き出しと黒見出しの下に、アプリアイコン・ロゴ文字・説明・ボタンを縦に3回繰り返す。 3. **よくある質問テーマ**（相談できる内容を具体的にイメージさせる）: 白地。ブラウザ窓風カードを4色で4枚並べ、見出し吹き出し・イラスト・箇条書き3問を入れる。 4. **手段1の紹介とメリット**（1つ目の手段の安心感を伝える）: タグ吹き出し2つとロゴ風見出し。チェック付きメリット3つ、不安に寄り添う本文、申込ボタン、端末画面のイラストを続ける。 5. **手段1の3ステップ**（利用の流れを簡単に見せる）: 薄グレー地。大きな吹き出しとメガホンのイラスト、その下に縦線つなぎの番号ステップを3つ並べる。アプリストアのバッジと動画のサムネイルも入れる。 6. **手段2の紹介**（チャット相談の手軽さを伝える）: 白地。タグ吹き出し・ロゴ風見出し・リード文・ボタン・チャット画面のモック画像とイラストを並べる。 7. **手段2の3ステップ**（登録手順を示す）: 薄グレー地。吹き出しとイラスト、番号ステップ3つ。各ステップの右に小さなサムネイル画像を置く。 8. **お問い合わせ**（電話の窓口を示す）: 黄色の全幅帯。ディスプレイ見出し、大きな電話番号、黒い矢印形の帯で受付時間。白い吹き出しと猫の線画で親しみを出す。 9. **フッター**（運営元を示す）: 薄グレー地の中央にロゴ、コピーライト。最下部は黒の細帯。 ## Imagery - 人物はフラットなベクターイラストにする。インディゴ・コーラル・ピンク・水色・黄色の限定パレットで塗る。 - 服には格子・ドット・三角・波線などの柄を入れ、細いネイビーの線で輪郭を描く。 - 背景には有機的な大きいブロブ形を青緑・ピンク・黄色で置き、人物を重ねる。 - 実写は笑顔のスタッフをオンライン通話の画面風UIに入れ、端末枠で囲む。 - メガホン・電球・がま口など、テーマを表す小物を人物に持たせる。 - 白い猫の線画をマスコットとして、ページの要所に添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は左に見出しとリード文、右に端末画面の写真を置く 2 カラムにする。 - PC の参加方法は 3 手段を横 3 列に並べる。 - PC の質問カードは 2×2 のグリッドにする。 - PC のメリットとステップは、左にテキスト、右にイラストの 2 カラムにする。 - PC のステップ区画は角丸のない薄グレーのボックスに収め、左に吹き出しのイラストを置く。 - PC のコンテンツ幅は約 1000px に収め、問い合わせの黄色帯は全幅のままにする。 ## 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-6c87fad1`（元 LP の URL から採番） - **元 LP**: https://www.kyoto-art.ac.jp/hajisuma/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。