DESIGN.md — 青×淡グレーのアイソメ図解 教育情報サイト（Blue Isometric Education Portal LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 教育情報・アイソメ線画・青と白・カード一覧・検索導線・方眼背景
• 地の質感: フラットな面に細い方眼パターンと淡い大きな円形の背景装飾。影は弱く柔らかい。
• 形: 角丸の小さいカード、ピル型ボタンとタグ、円形アイコンボタン。
• 温度感: やや寒色寄りだが、手描き風人物イラストで温かみを足す

Colors

• 地は白と淡青グレー#F1F5F8を交互に使い、セクションを区切る。
• 紹介セクションは淡い青の方眼地に白い枠付きボックスを載せる。
• 検索セクションだけ濃い青の全面地にして重要度を示す。
• ボタン・タグ・強調語はすべて同じブランド青で統一。
• 黄・ピンク系は見出しのグラデ文字やイラストの差し色に限定。

Typography

• 見出しは太字ゴシックで、強調語だけ青やグラデ文字にする。
• 本文は行間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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。