--- version: alpha name: Airy Pastel Gradient Vocational School LP description: ごく淡い青白の地に、水色〜ミントのグラデーションと斜めの短いライン装飾を散らした、清潔で軽やかな学校案内 LP。欧文見出しは字間を広げた幾何学系サンセリフで、白い角丸カードを並べて情報を整理する。 colors: background: '#F4F7FC' surface: '#FEFFFE' primary: '#05ADE4' cta: '#42D9E5' on-cta: '#FFFFFF' text: '#071C2C' text-muted: '#9AA3AD' background-alt: '#CCEAF2' tint-1: '#F9CAD5' tint-2: '#ADEABB' accent-1: '#A4EACD' accent-2: '#9AAAEC' accent-3: '#9BE5AB' secondary: '#E4EBF3' cta-accessible: '#13818A' primary-accessible: '#036F92' typography: display: fontFamily: Montserrat fontSize: 22px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.2em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.25em headline-md: fontFamily: Outfit fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Outfit fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px 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: 48px button-white-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px heading-slash: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px card-course: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 145px badge-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px tab-guide: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px card-photo-link: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 280px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px banner-event: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 72px contact-box: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 380px --- # DESIGN.md — 淡青地×水色グラデの福祉系専門学校 LP（Airy Pastel Gradient Vocational School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル - **キーワード**: 淡いブルー地・水色グラデーション・斜めライン装飾・白カード・字間広めの欧文見出し・散らばる写真 - **地の質感**: フラットで影はほぼなし。グラデーションと半透明の斜め線で軽さを出す - **形**: 角丸 8〜12px のカードとピル型ボタン、円形矢印アイコン - **温度感**: やや寒色寄りの爽やかさ。ピンクとミントで温かみを補う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F4F7FC` | ページ全体の地色 | 41% | 画素の実測 | | `surface` | `#FEFFFE` | カード・FAQ・ボタン面 | 18% | 画素の実測 | | `primary` | `#05ADE4` | メニュー・選択中タブの鮮やかな水色 | 2% | 画素の実測 | | `cta` | `#42D9E5` | 主ボタンの水色グラデ（左端色） | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#071C2C` | 見出し・本文の濃紺文字 | 4% | 画素の実測 | | `text-muted` | `#9AA3AD` | フッター注記の灰色文字 | 0% | 推定 | | `background-alt` | `#CCEAF2` | タブ切替ガイド枠の水色面 | 5% | 画素の実測 | | `tint-1` | `#F9CAD5` | 学科カードのピンクグラデ | 2% | 画素の実測 | | `tint-2` | `#ADEABB` | 学科カードのミントグラデ | 2% | 画素の実測 | | `accent-1` | `#A4EACD` | 見出し上の斜めライン・Qマーク | 0% | 画素の実測 | | `accent-2` | `#9AAAEC` | 問い合わせフォームボタンの薄紫 | 0% | 画素の実測 | | `accent-3` | `#9BE5AB` | 資料請求ボタンの薄緑 | 0% | 画素の実測 | | `secondary` | `#E4EBF3` | 問い合わせ枠の灰青面 | 2% | 画素の実測 | | `cta-accessible` | `#13818A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#036F92` | AA を満たす補正値（計算） | | 計算 | - 地は淡い青白で統一し、情報は白カードに載せる - 主ボタンは水色→スカイブルーの横グラデにする - 学科ごとにピンク・ミントのパステルグラデで色分けする - 文字は黒ではなく濃紺を使う - ミントの短い斜め線を見出し上と背景に散らす - フォーム系ボタンは薄紫・薄緑の淡色で区別する - `button-primary` は文字 `#FFFFFF` × 背景 `#42D9E5` のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#13818A`、4.63:1）を使う。 - `tab-guide` は文字 `#05ADE4` × 背景 `#CCEAF2` のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#036F92`、4.5:1）を使う。 - `banner-event` は文字 `#FFFFFF` × 背景 `#05ADE4` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#036F92`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV上の欧文大文字コピー | 欧文サンセリフ | Montserrat | 600 | 22px | 1.2 | 0.2em | | `headline-lg` | コンセプトの和文大見出し | ゴシック | Zen Kaku Gothic New | 500 | 28px | 1.6 | 0.25em | | `headline-md` | セクション欧文見出し | 欧文サンセリフ | Outfit | 500 | 18px | 1.4 | 0.12em | | `headline-sm` | カード名・学科名 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 1.8 | 0.05em | | `note` | 補足・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.05em | | `label-button` | ボタン・タブ文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | | `accent` | View All などの欧文リンク | 欧文サンセリフ | Outfit | 500 | 11px | 1.4 | 0.05em | - セクション見出しは欧文中心で中央揃え、字間を広く取る - 和文見出しは中ウェイトで字間 0.2em 以上 - 本文は行間 1.8 で読みやすく - 見出しの上にミントの斜め線を 1 本置く - 太字はカード名・ボタンに限定する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、ギャラリーのみ 4 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右余白は約 18px - 見出し→コンテンツ間は約 32px - カードは縦に 16px 間隔で積む - リンクは右下に「文字＋円形矢印」で置く - コンセプト部は写真を不規則に散らして中央に文章 ## Elevation & Depth - 基本は影なしのフラット - 白カードは淡い地との明度差で浮かせる - スライダー矢印のみ薄い影可 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸 8px の長方形。カード内では上辺のみ角丸 - **セクション境界**: 区切り線は使わず余白と地色の切替で分ける - ボタンはピル型 - 矢印は細線の円形アイコン - 斜めの細いライン装飾を背景に重ねる - タブは角丸小の長方形、選択中は下に三角 ## Components - **グラデのピル型ボタン**（`button-primary`）: 水色グラデ、白文字と右矢印 - **白ピル型リンクボタン**（`button-white-pill`）: 白地に濃紺文字と右矢印、対象別導線 - **斜線付きセクション見出し**（`heading-slash`）: ミントの短い斜め線を上に置いた中央欧文見出し - **学科グラデカード**（`card-course`）: パステルグラデ地に角丸写真、学科名、年数バッジ、丸矢印 - **枠線ピルバッジ**（`badge-outline`）: 白地に濃紺枠の小さな年数表示 - **タブ切替**（`tab-guide`）: 水色枠内に2×2タブ、選択中は青地白文字 - **写真リンクカード**（`card-photo-link`）: 上に大きな写真、下の白帯にタイトルと補足、右に丸矢印 - **FAQアコーディオン**（`faq-item`）: 白カードに水色Q、質問、右端に＋ - **イベント告知帯**（`banner-event`）: 青紫グラデ帯に欧文見出しと日付の円バッジ2件 - **問い合わせボックス**（`contact-box`）: 灰青枠に白カード2枚、線画アイコンと淡色ピルボタン ## Do's and Don'ts **Do** - 地は淡い青白、情報は白カードに分ける - 見出し上にミントの斜め線を必ず添える - 欧文見出しは字間を広げた幾何学サンセリフで - リンクは細線の円形矢印で統一 - 写真は明るく自然光の笑顔カットを角丸で **Don't** - 黒や原色の強い赤を使わない - 濃い影や立体的なボタンにしない - セクションを太い罫線で区切らない - 明朝体や手書き体を混ぜない - グラデを濃く・暗くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニュー導線）: 左にロゴ、右上に正方形の水色メニューボタン 2. **ファーストビュー**（学びの雰囲気を伝える）: 角丸の大きな実習写真に白い欧文コピーを重ね、下にイベント告知帯を重ねる 3. **コンセプト**（理念を短く伝える）: 小写真と人物イラストを散らし、中央に字間広めの見出しと本文 4. **お知らせ**（最新情報）: 白カードの横スライダー、円形の水色矢印、ドット送り 5. **学校紹介**（学校の概要）: 左に角丸写真、右に本文の回り込み、下にグラデのピルボタン 6. **学科紹介**（コース案内）: ピンク・ミントのグラデカードを縦に並べる 7. **入学ガイド**（入試・学費などの案内）: 水色枠内にタブ4つ、写真と説明、下線付きリンク 8. **学校生活**（行事・先輩の声への導線）: 大きな写真＋白帯タイトルのカード2枚 9. **ギャラリー**（SNS投稿の紹介）: 4列の正方形サムネイルを2段 10. **対象別ガイド**（卒業生・企業向け導線）: 白ピル型ボタンを中央に縦並び 11. **よくある質問**（不安の解消）: 白カードのQ＋アコーディオン3件とView All 12. **資料請求・問い合わせ**（コンバージョン）: 灰青枠に白カード2枚、線画アイコンと淡色ピルボタン 13. **フッター**（基本情報）: 白地にSNSアイコン、リンク2列、ロゴと住所、淡青のコピーライト帯 ## Imagery - 明るい室内の自然光で、学生と講師の笑顔の実習・授業風景 - 制服やポロシャツの色が映える高明度・低コントラストの写真 - 人物の線画風フラットイラストを余白に配置 - 背景に半透明の白・ミントの斜め線を散らす - アイコンは細い濃紺の線画 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左に固定の水色縦ナビを置く - PC のコンテンツ幅は約 55〜60% で中央寄せ - 学科カードは PC で左右 2 分割の縦長カード - 学校生活カード・問い合わせカードは PC で 2 列 - ガイドのタブは PC で横 4 列、写真と文章は左右配置 - FV のイベント告知は PC で写真右下に縦長で重ねる ## 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-703d61e3`（元 LP の URL から採番） - **元 LP**: https://www.kanafuku.ac.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。