--- version: alpha name: Orange and Sky Blue Qualification Guide LP description: オレンジを主役に水色と緑で 2 つの資格を色分けした、図解多めの資格案内 LP。白と薄グレーの面を交互に置き、黄色スーツの線画イラスト・吹き出し・比較表・グラフで情報を整理して見せる。 colors: primary: '#E49443' secondary: '#02AAEB' accent-1: '#24A50B' cta: '#02AAEB' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EEEEEE' tint-1: '#CAEEFC' tint-2: '#D4F7D9' accent-2: '#FDECC1' accent-3: '#F2C65A' text: '#222222' dark-section: '#999999' line: '#EFEFEF' cta-accessible: '#017EAE' primary-accessible: '#9E5B17' accent-1-accessible: '#1E8809' secondary-accessible: '#017EAE' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 accent: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.4 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 56px 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 banner-cta: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.display}' height: 72px kanji-grid: backgroundColor: '{colors.accent-2}' textColor: '{colors.primary}' typography: '{typography.display}' height: 40px tag-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 26px color-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 24px speech-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 90px compare-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px point-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 220px faq-item: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 46px spec-table: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — オレンジ×水色の図解型資格案内 LP（Orange and Sky Blue Qualification Guide LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 図解・色分け比較・線画イラスト・吹き出し・資料請求 - **地の質感**: ベタ塗りのフラット面。イラスト背後だけ淡いピンク〜黄色のグラデーションの不定形の影 - **形**: 四角の帯見出しと角のない表。吹き出しは楕円。CTA はピル型 - **温度感**: 暖色オレンジと寒色水色が半々。明るく前向き ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E49443` | ブランド色・強調見出し文字 | 5% | 画素の実測 | | `secondary` | `#02AAEB` | 管理系資格の色・FAQ帯・注目ボックス | 6% | 画素の実測 | | `accent-1` | `#24A50B` | 取引系資格の色・見出し帯 | 2% | 画素の実測 | | `cta` | `#02AAEB` | ファーストビューの資料請求ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 31% | 画素の実測 | | `background-alt` | `#EEEEEE` | 交互に置く薄グレー面 | 19% | 画素の実測 | | `tint-1` | `#CAEEFC` | W取得説明の水色面 | 8% | 画素の実測 | | `tint-2` | `#D4F7D9` | 取引系説明の薄緑面 | 2% | 画素の実測 | | `accent-2` | `#FDECC1` | 表の分類セル・淡いクリーム | 5% | 画素の実測 | | `accent-3` | `#F2C65A` | イラストの黄色スーツ・資料請求バナー | 5% | 画素の主要色に補正 | | `text` | `#222222` | 見出し・本文 | 4% | 推定 | | `dark-section` | `#999999` | 概要表の見出しセル | 2% | 画素の実測 | | `line` | `#EFEFEF` | 表の区切り・見出し下線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#017EAE` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#9E5B17` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#1E8809` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#017EAE` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーを交互に置いてセクションを区切る - 2 つの資格は緑と水色で色分けし、帯・矢印・表・スケジュールでも同じ色を使う - オレンジは資格名の強調文字と資料請求バナーにだけ使う - 本文中の強調は色マーカー下線（緑・水色）で入れる - 淡い水色・薄緑・クリームは図解の背景だけに使う - `button-primary` は文字 `#FFFFFF` × 背景 `#02AAEB` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#017EAE`、4.57:1）を使う。 - `kanji-grid` は文字 `#E49443` × 背景 `#FDECC1` のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9E5B17`、4.53:1）を使う。 - `tag-label` は文字 `#FFFFFF` × 背景 `#E49443` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9E5B17`、4.55:1）を使う。 - `color-band` は文字 `#FFFFFF` × 背景 `#24A50B` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1E8809`、4.58:1）を使う。 - `speech-bubble` は文字 `#FFFFFF` × 背景 `#02AAEB` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017EAE`、4.57:1）を使う。 - `point-box` は文字 `#FFFFFF` × 背景 `#02AAEB` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017EAE`、4.57:1）を使う。 - `faq-item` は文字 `#FFFFFF` × 背景 `#02AAEB` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017EAE`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | マス目に一字ずつ入れる資格名 | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.2 | 0.1em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.4 | 0.02em | | `headline-md` | 左寄せの小見出し（2〜3 行・色分け） | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | | `headline-sm` | 色帯ラベル・表の見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.0em | | `accent` | 吹き出しの中の問いかけ | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.4 | 0.0em | | `note` | 注釈・グラフの凡例 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | CTA・FAQ の質問文 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 見出しは中央寄せの黒文字。キーワードだけオレンジ・緑・水色にする - 左寄せ小見出しには左に黒い短い横線を付ける - 本文は細めの 12px で行間を広くとる - 強調したい語句は太字に色マーカー下線を付ける - 数字や重要語はマス目枠で一字ずつ囲む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。図解の中だけ左右に人物を置いて中央へ矢印を向ける - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは左右 8〜12px の余白でほぼ全幅 - セクションは背景色を全幅で切り替えて区切る - 表・グラフ・スケジュールは白いカードに入れて薄グレーの地に置く - 比較図は同じ構図を 2 回並べ、2 回目に要素を足して違いを見せる ## Elevation & Depth - 影はほぼ使わずフラットにする - 画面右下に固定の資料請求バナーだけ浮かせる - イラストの背後に淡いグラデーションの不定形を敷いて奥行きを出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの横長長方形で全幅 - **セクション境界**: 基本は直線で切り替え。一部は下向きの三角の切り欠きで次へつなぐ - 帯ラベル・表・FAQ は角丸なしの四角 - 吹き出しは楕円に小さな尻尾を付ける - タグ見出しは右端を矢羽根の形に切る ## Components - **資料請求ピルボタン**（`button-primary`）: 水色のピル型で、右に白丸のアイコンを入れる - **資料請求バナー**（`banner-cta`）: オレンジから黄色への斜め帯に、白マスの大きな文字と冊子アイコンを置く - **マス目タイトル**（`kanji-grid`）: クリーム地にオレンジ枠の正方形を並べ、一字ずつ入れる - **矢羽根タグ**（`tag-label`）: 左端に付けるオレンジのタグ見出し。右端は矢羽根の形 - **資格の色帯ラベル**（`color-band`）: 緑または水色の帯に白文字の資格名 - **問いかけ吹き出し**（`speech-bubble`）: 水色の楕円に白い太字で問いかけを書き、イラストの横に置く - **比較表**（`compare-table`）: 見出し行は水色と緑、分類列はクリーム。行はグレーと白の交互。○は水色、×は赤 - **注目ボックス**（`point-box`）: 水色の箱の上部に白い見出し帯。中はオレンジのチェック付きで白文字の箇条書き - **FAQ アコーディオン**（`faq-item`）: 水色の帯の左に Q、右に＋を置き、白文字で質問を書く - **概要表**（`spec-table`）: 左列はグレーに白文字、右列は白に黒文字の 2 列表 ## Do's and Don'ts **Do** - 2 つの対象は必ず緑と水色で色分けし、全ページで統一する - 説明は文章より図解・表・グラフを優先する - セクションの間に資料請求バナーを繰り返し置く - 人物イラストは黄色スーツの線画で統一する - 白と薄グレーの地を交互に置いてリズムをつくる **Don't** - 濃い影や立体的なボタンを使わない - オレンジを本文や背景の大きな面に使わない - 写真の上に長い文章を重ねない（最終セクションを除く） - 角丸を大きくしすぎない（ボタンと吹き出しは除く） - 緑と水色の役割を入れ替えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者に呼びかけ、資料請求へ誘導する）: オレンジと黄緑の斜め帯の上に、白文字のマス目コピー、ピル型 CTA、笑顔の人物写真を置く 2. **資格の紹介**（資格名を印象づける）: マス目タイトルと下線付きの問いかけ。下に線画イラストを 3 つ並べる 3. **資格とは**（制度の概要を説明する）: 薄グレーの地に中央見出し、本文、全幅写真 4. **違いの図解**（もう 1 つの資格との役割の違いを見せる）: 矢羽根タグ、吹き出しの疑問、薄緑と水色の帯で範囲を比較し、人物と矢印で図解する 5. **補足説明と CTA**（意義を補い、資料請求へ誘導する）: 白い地の本文、並木の写真、資料請求バナー 6. **合格者インタビュー**（体験談で実現できることを示す）: 吹き出しと喜ぶイラスト、グレー地に名前見出し・写真・本文、色分けした月別スケジュール 7. **試験範囲の比較表**（共通範囲の多さを示す）: 困り顔のイラストと吹き出し、○×の比較表、下線付きのまとめ文 8. **注目ポイントと合格者データ**（数字で根拠を示す）: 水色の注目ボックス、吹き出しとイラスト、白いカードに棒と折れ線の複合グラフ 9. **よくある質問**（疑問を解消する）: 水色帯のアコーディオンを 3 つ 10. **試験概要**（日程・費用などの詳細を示す）: グレーの見出しセルと白セルの 2 列表、続けて資料請求バナー 11. **締めのメッセージ**（最後のひと押しをする）: 淡い都市の空撮写真の上に中央寄せのメッセージを置き、右下に固定 CTA ## Imagery - 人物は黒い線画に黄色のスーツ、白い肌のフラットなイラスト - イラストの背後に淡いピンクから黄色・水色へのグラデーションの不定形を敷く - 写真は明るい自然光のビジネス・住宅・並木道。彩度は高め - 最終セクションは青空の都市空撮を白っぽくして背景に使う - 太い緑・水色の矢印と、グレーの楕円の吹き出しで関係を示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 1000px 幅の固定コンテンツ - ファーストビューは左にコピー、右に人物写真の横並び - 説明と写真、見出しと吹き出しイラストは左右 2 カラムに並べる - 比較の色帯は PC で左右に並べる - 表・FAQ・バナーは中央寄せで幅を広げる ## 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-106b09a2`（元 LP の URL から採番） - **元 LP**: https://chintaikanrishi.jp/add/about/realestate-agent2/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。