--- version: alpha name: Blue Isometric Education Portal LP description: 白と淡い青グレーの地に鮮やかな青をアクセントにした教育情報ポータル。アイソメトリック調の線画イラストと子どもの写真カードを組み合わせ、清潔で信頼感のある、やさしい学びの雰囲気をつくる。 colors: primary: '#126CCD' on-primary: '#FFFFFF' cta: '#035BBC' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F1F5F8' tint-1: '#D1E2F6' tint-2: '#F3FDFE' secondary: '#3F83C6' text: '#222B38' line: '#DCE2E6' accent-1: '#F2C94C' text-muted: '#8A8F96' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 64px 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: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px article-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 96px tag-chip: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px filter-pill: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px badge-new: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px section-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 48px intro-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 360px --- # DESIGN.md — 青×淡グレーのアイソメ図解 教育情報サイト（Blue Isometric Education Portal LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 教育情報・アイソメ線画・青と白・カード一覧・検索導線・方眼背景 - **地の質感**: フラットな面に細い方眼パターンと淡い大きな円形の背景装飾。影は弱く柔らかい。 - **形**: 角丸の小さいカード、ピル型ボタンとタグ、円形アイコンボタン。 - **温度感**: やや寒色寄りだが、手描き風人物イラストで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#126CCD` | ブランド青・ボタン・検索セクション地 | 9% | 画素の実測 | | `on-primary` | `#FFFFFF` | 青地上の文字 | 1% | 画素の主要色に補正 | | `cta` | `#035BBC` | 主ボタン（記事をもっと見る・絞り込む） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の実測 | | `background-alt` | `#F1F5F8` | 淡い青グレーのページ地 | 22% | 画素の実測 | | `tint-1` | `#D1E2F6` | 方眼パターンの紹介セクション地 | 9% | 画素の実測 | | `tint-2` | `#F3FDFE` | 見出し下の淡水色ボックス | 2% | 画素の実測 | | `secondary` | `#3F83C6` | 淡い青のアクセント・矢印イラスト | 2% | 画素の主要色に補正 | | `text` | `#222B38` | 見出し・本文の濃紺黒 | 2% | 推定 | | `line` | `#DCE2E6` | カード・タグの枠線 | 3% | 画素の主要色に補正 | | `accent-1` | `#F2C94C` | 見出しのグラデ文字・黄アクセント | 0% | 推定 | | `text-muted` | `#8A8F96` | 日付・注釈のグレー | 0% | 推定 | - 地は白と淡青グレー#F1F5F8を交互に使い、セクションを区切る。 - 紹介セクションは淡い青の方眼地に白い枠付きボックスを載せる。 - 検索セクションだけ濃い青の全面地にして重要度を示す。 - ボタン・タグ・強調語はすべて同じブランド青で統一。 - 黄・ピンク系は見出しのグラデ文字やイラストの差し色に限定。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.5 | 0.05em | | `headline-lg` | サイト名ロゴ風見出し | 装飾・ディスプレイ | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.05em | | `headline-md` | セクション見出し（アイコン付き中央） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.08em | | `headline-sm` | カードの記事タイトル・検索の設問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.05em | | `note` | 日付・タグ・フッター | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは太字ゴシックで、強調語だけ青やグラデ文字にする。 - 本文は行間2.0前後で中央揃えの短い行に分ける。 - 強調語は青太字にし、下線やマーカーは使わない。 - タグや日付は11px程度の小さな文字で控えめに。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、記事カードは 1〜2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - セクション見出しは中央に小アイコン＋文字。 - 記事カードは写真左・テキスト右の横長型。 - 対象者カードは写真上・ラベル下の大判タイル。 - 検索フォームは青地の上に白い大きなパネルで載せる。 - イラストはパネルの角にはみ出させて配置する。 ## Elevation & Depth - カードはごく薄いぼかし影（0 2px 8px rgba(0,40,90,.08)）。 - 白パネルは影なしで細い枠線のみ。 - ボタンは影なしのフラット。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸小の長方形。カード上部や左側に配置 - **セクション境界**: 直線。背景の大きな淡い円がセクションをまたぐ - ボタンとタグはピル型。 - 矢印は右端の白丸アイコンに入れる。 - 大きなパネルは角丸8〜12px。 ## Components - **主ボタン**（`button-primary`）: 青のピル型。右端に白丸の矢印アイコン - **サブボタン**（`button-outline`）: 白地に青枠・青文字のピル型、右に丸矢印 - **記事カード**（`article-card`）: 写真左、日付とタグ、太字タイトル、右下に丸矢印 - **カテゴリタグ**（`tag-chip`）: 青細枠の小さな角丸タグ - **絞り込み選択肢**（`filter-pill`）: 淡グレー枠のピル型チップを横に並べる - **NEWバッジ**（`badge-new`）: カード左上に重ねる小さな青い円形バッジ - **セクション見出し**（`section-heading`）: 上に青い小アイコン、下に太字の中央見出し - **紹介パネル**（`intro-panel`）: 方眼地の上の白い枠付きボックス。中に淡水色の要約帯 ## Do's and Don'ts **Do** - 青は一色に絞り、ボタン・タグ・強調語で統一する。 - 白と淡青グレーの地を交互にしてリズムを出す。 - 線画の人物イラストを角やパネル外にあしらう。 - 写真は明るく自然光の子どもや学校風景を使う。 - カードには日付・タグ・矢印を必ず揃える。 **Don't** - 赤や原色の多色ボタンを使わない。 - 濃い影や立体的なボタンにしない。 - 装飾フォントを本文に使わない。 - 写真に強いフィルターや暗いトーンをかけない。 - セクションを斜めや波形で区切らない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと検索・メニュー導線）: 白地、右に検索窓と青丸メニューボタン 2. **ファーストビュー**（サイトの理念を伝える）: 左に太字コピーとグラデ強調語、右に大きなアイソメ図解イラスト 3. **ピックアップ記事**（注目記事へ誘導）: 横長記事カードを3枚横並び 4. **サイト紹介**（サイトの目的と対象を説明）: 方眼の淡青地に白枠パネル、角に人物イラスト 5. **対象者別で探す**（属性別の入口）: 写真タイルカードを3列＋4列、下にラベルと矢印 6. **カテゴリ別で探す**（記事一覧と分類）: 左にカテゴリメニュー、右に記事カード2列、下に主ボタン 7. **動画バナー**（動画コンテンツへ誘導）: 淡グラデのバナーに丸バッジと人物写真、サブボタン 8. **絞り込み検索**（条件で記事を探す）: 青全面地に白パネル、設問ごとにピルチップ、青い送信ボタン 9. **フッター**（サイトマップと運営情報）: 淡グレー地に4列のリンク一覧 ## Imagery - アイソメトリック視点の青単色＋白の線画で学校や机を描く。 - 人物イラストは細線＋青と黄の差し色、手描き風。 - 写真は明るい教室や家庭で子どもが学ぶ自然な場面。 - 背景に淡い大円と方眼パターンを薄く敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは記事カードを1列縦積みにする。 - 対象者タイルはSPで2列にする。 - カテゴリメニューはSPで横スクロールのタブにする。 - FVイラストはコピーの下に全幅で置く。 - 検索パネルの左右余白はSPで16pxに縮める。 ## 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-2fd24203`（元 LP の URL から採番） - **元 LP**: https://db.manasapo-kyokyo.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。