---
version: alpha
name: Navy Blue Academic Nursing Faculty LP
description: 濃紺を軸に、淡いブルーグレーの地と白い面を交互に使う大学の新学部紹介LP。ファーストビューは斜めに切った紺の面と手書き風コピー。セクション見出しは左上にグラデーションの帯を置き、英字ラベルと紺の見出しを重ねる。図表や手描きイラスト、パース画像で教育内容と施設を丁寧に説明する、情報量の多い作り。
colors:
  primary: '#01327E'
  text: '#1E2B4A'
  background: '#FFFFFF'
  background-alt: '#EFF3F6'
  tint-1: '#A7BFE1'
  text-body: '#333333'
  text-muted: '#7E8187'
  accent-1: '#DB5333'
  accent-2: '#A41225'
  accent-3: '#0A8CDB'
  marker: '#F08A1C'
  surface: '#FEF7ED'
  line: '#092965'
  on-primary: '#FFFFFF'
  accent-1-accessible: '#D24625'
typography:
  display:
    fontFamily: Klee One
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.7
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.12em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  section-header-gradient:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 160px
  numbered-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 56px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    height: 40px
  compare-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 180px
  profile-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 300px
  band-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 28px
  accordion:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 44px
  contact-button:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 52px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#01327E` | ブランドの濃紺（FV面・見出し・ボタン） | 6% | 画素の実測 |
| `text` | `#1E2B4A` | 見出し文字の紺 | 2% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白い地 | 50% | 画素の実測 |
| `background-alt` | `#EFF3F6` | 淡ブルーグレーのセクション地 | 15% | 画素の実測 |
| `tint-1` | `#A7BFE1` | 見出し横グラデ帯の青 | 5% | 画素の実測 |
| `text-body` | `#333333` | 本文の濃いグレー | 3% | 推定 |
| `text-muted` | `#7E8187` | 英字ラベル・注釈のグレー | 1% | 画素の主要色に補正 |
| `accent-1` | `#DB5333` | 比較の強調に使う朱赤 | 1% | 画素の実測 |
| `accent-2` | `#A41225` | ステップ図の赤い斜面 | 2% | 画素の実測 |
| `accent-3` | `#0A8CDB` | ステップ図の明るい青 | 2% | 画素の実測 |
| `marker` | `#F08A1C` | 表内の強調オレンジ | 0% | 推定 |
| `surface` | `#FEF7ED` | 教員カード本文のクリーム地 | 2% | 画素の実測 |
| `line` | `#092965` | 枠線・アウトラインボタン | 0% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 紺の面に置く白文字 | 0% | 画素の主要色に補正 |
| `accent-1-accessible` | `#D24625` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの手書き風キャッチ | 手書き・筆 | Klee One | 600 | 26px | 1.5 | 0.08em |
| `headline-lg` | 大セクションの見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.04em |
| `headline-md` | 番号付きの小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em |
| `headline-sm` | リード文・カードタイトル | 明朝 | Noto Serif JP | 600 | 17px | 1.7 | 0.05em |
| `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 500 | 11px | 1.4 | 0.12em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | 注釈・経歴 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em |

- 見出しは紺の太字ゴシックにする
- 見出しの上に細い英字ラベルと番号（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

```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-fd9d4a9c`（元 LP の URL から採番）
- **元 LP**: https://www.iuk.ac.jp/nurse-lp/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。