DESIGN.md — 紺×淡ブルーの誠実な大学学部紹介 LP（Navy Blue Academic Nursing Faculty LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺・淡ブルーグレー・斜めの切り返し・英字ラベル・手描きイラスト・図解
• 地の質感: フラットな塗りが中心。見出し横の帯だけにブルーグレーのグラデーションを使う
• 形: 四角を基本にし、角丸は小さめ。FV だけ斜めのカットを入れる
• 温度感: やや寒色寄り。イラストの暖色で親しみを足す

Colors

• 地は白と淡ブルーグレーを交互にし、セクションを区切る
• 見出し・主ボタン・帯見出しはすべて濃紺で揃える
• 朱赤とオレンジは数値比較などの強調にだけ使う
• 図解の中だけ多色（赤・青・緑）を使ってよい
• 見出しの左上にブルーグレーから白へのグラデ帯を置く
• contact-button は文字 #FFFFFF × 背景 #DB5333 のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D24625、4.52:1）を使う。

Typography

• 見出しは紺の太字ゴシックにする
• 見出しの上に細い英字ラベルと番号（01 など）を添える
• 手書き風の書体はFVキャッチと吹き出しだけに使う
• 強調したい数字はとても大きくし、単位は小さく添える
• 本文は行間を1.8前後にして読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードや施設の写真は SP でも 2 列まで
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの最初に、左寄せのグラデ帯と右側に置いた英字・見出しのセットを入れる
• 番号付きの小見出しは左揃えにし、短い横線を添える
• 図解と表は横に並べ、SP では縦に積む
• CTAボタンは中央に置き、最大幅320px

Elevation & Depth

• 影はほぼ使わずフラットにする
• 比較ボックスやチェック項目は、白地に細い枠線か薄い影だけ
• 動画のサムネイルにも影は付けない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。教員写真はカード上部に正方形に近い比率で入れる
• セクション境界: 基本は直線で背景色を切り替える。FVだけ斜めのカット
• ボタンは角丸4pxの長方形
• 帯見出しは角のない紺のバー
• アコーディオンは紺の角丸バーで右端に矢印を付ける

Components

• 紺の主ボタン（button-primary）: 紺の塗りに白文字。左にアイコンを置く
• アウトラインボタン（button-outline）: 白地に紺の細い枠線と紺の文字。出願などの導線に使う
• グラデ帯付き大見出し（section-header-gradient）: 左側にブルーグレーのグラデ矩形を置き、右側に英字ラベルと紺の見出しを並べる
• 番号付き小見出し（numbered-heading）: 短い横線＋「01」と英字ラベル＋太字の見出しを組む
• チェック項目（check-list）: 白い帯に紺のチェックマークを置き、強調語は朱赤にする
• 数値比較ボックス（compare-box）: 枠線で囲んだ箱に紺と朱赤のラベルを並べ、大きな数字で比べる
• 教員カード（profile-card）: 上に色付きの面と写真、下にクリーム地の経歴を置く。カードごとに色を変える
• 紺の帯見出し（band-heading）: 階数などの区切りに使う全幅の紺バー。左に白文字
• アコーディオン（accordion）: 紺のバーに白文字、右端に開閉の矢印を付ける
• 問い合わせボタン（contact-button）: ピンク→紫のグラデ面に白丸アイコンと電話・メールを入れる

Do's and Don'ts

Do - 紺・白・淡ブルーグレーの3色を基本にする - 見出しには必ず英字ラベルを添える - 図解・表・イラストで制度を見せる - 強調する数値は大きく、色は紺か朱赤にする - CTAは途中と最後に繰り返し置く

Don't - ボタンをピル型にしたり強い影を付けたりしない - 朱赤やオレンジを広い面に使わない - 手書き風の書体を本文に使わない - 暗い背景のセクションを作らない - 派手なグラデを背景全体に広げない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（新学部の開設を伝える）: 白地に斜めにカットした紺の面を重ね、手書き風コピーと学生の写真を置く
2. 導線とリード（出願への導線と学部の独自性を示す）: アウトラインボタンと、明朝の2行リードを中央に置く
3. 動画（雰囲気を伝える）: 英字の見出しの下に16:9の動画サムネイルを置く
4. メッセージ（学部長の想いを伝え、信頼を得る）: グラデ帯の見出しの後、左に写真、右に見出しと長い本文を並べる
5. 特長（カリキュラム・資格）（教育の独自性を伝える）: 番号付きの見出しに、図解と表、資格を矢印でつないだ図を添える
6. メリット・進路（卒業後の活躍の場を見せる）: 淡ブルーグレーの地に、イラストとラベル付きの進路カードを3〜4列で並べる。チェック項目と数値比較も置く
7. 学びのステップ（4年間の成長を見せる）: 階段状の青い図に学年ごとの説明と吹き出し付きのイラストを置き、赤い斜面に育成目標を書く
8. CTA（資料請求・募集要項へ誘導する）: グレーの地にアウトラインボタンと紺のボタンを横に並べる
9. 教員紹介（教員の層の厚さを示す）: 色違いの教員カードを3枚並べる
10. キャンパス紹介（施設の魅力を伝える）: 紺の帯見出しで階を分け、パース画像を2〜3列で並べてキャプションを付ける
11. アクセス（立地と交通手段を示す）: 水彩風のイラストマップに交通案内の枠と住所のバーを添える
12. 入試情報（制度の詳細を見せる）: 紺のアコーディオンを縦に並べ、最後に出願ボタンを置く
13. パンフレット・お問い合わせ（最終の行動を促す）: パンフレットのバナーと動画を置き、グレーの地にグラデの電話・メールボタンを並べ、左右に学生の写真を添える

Imagery

• 学生の写真は白衣姿で、明るい自然光。背景を切り抜いて使うこともある
• 人物イラストは線画に淡い水彩風の色。職業や場面を描く
• 進路イラストの背後に、淡い色の丸いにじみを敷く
• 施設は明るいCGパースで、人物を小さく入れる
• 地図は水彩風の手描きイラストで、建物を立体的に描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのコンテンツ幅は約900px。SPでは90%幅の1カラムにする
• メッセージの写真と本文の横並びは、SPでは写真を上にして縦に積む
• 進路カードはPCの4列をSPでは2列に、施設写真は3列を2列か1列にする
• 図解と表はSPで縦に並べ、表は横スクロールを許す
• グラデ帯の見出しはSPで帯を細くし、見出しを下に重ねる

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 行書くと起動時に読み込まれる。