--- version: alpha name: Curious Blue Swirl Academic LP description: 白地に藍と水色の渦形のモチーフと丸く切り抜いた研究写真を散らした、大学学科の紹介 LP。細めのゴシック体の大きなコピーと、薄いグレーで大きく置いた欧文の見出しで、知的で軽やかな好奇心を表している。後半は藍の面と角丸の写真枠で奥行きを出す。 colors: primary: '#113080' secondary: '#64B4DC' accent-1: '#0D7DBF' background: '#FFFFFF' background-alt: '#FDFDFD' tint-1: '#D4DAE9' text: '#070707' text-body: '#4E4E4E' text-muted: '#E6E7E8' line: '#D1D4DB' on-dark: '#E7ECF1' cta: '#56AEDB' on-cta: '#FFFFFF' secondary-accessible: '#237199' cta-accessible: '#257EAC' typography: display: fontFamily: Noto Sans JP fontSize: 38px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Poppins fontSize: 52px fontWeight: 300 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 300 lineHeight: 2.0 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Poppins fontSize: 26px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.text-muted}' typography: '{typography.headline-lg}' height: 100px photo-circle: rounded: '{rounded.full}' height: 70px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px tag-label: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 26px point-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 180px floating-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px number-label: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 48px link-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — 藍と水色の渦が舞う理系学科紹介 LP（Curious Blue Swirl Academic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、清潔・爽やか、信頼・誠実、シンプル・ミニマル - **キーワード**: 好奇心・渦モチーフ・丸い写真・細い欧文見出し・藍と水色・余白 - **地の質感**: 白〜淡い青のグラデーション地に、フラットな渦状の図形を置く。質感はつけない - **形**: 正円の写真、四分円や渦の大きな図形、角丸のカード - **温度感**: 涼しく澄んだ寒色。肌色の人物写真で少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#113080` | 藍。ブランド色、見出しの強調、面 | 6% | 画素の実測 | | `secondary` | `#64B4DC` | 水色。キーワードの強調、渦の図形 | 3% | 画素の実測 | | `accent-1` | `#0D7DBF` | 鮮やかな青。イラスト枠やセクションの面 | 5% | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | 47% | 画素の実測 | | `background-alt` | `#FDFDFD` | 淡い青のグラデーション地 | 8% | 画素の実測 | | `tint-1` | `#D4DAE9` | 薄い青灰。適性カードの面 | 6% | 画素の実測 | | `text` | `#070707` | 見出しと本文の濃い文字 | 4% | 画素の実測 | | `text-body` | `#4E4E4E` | リード文の灰色の文字 | 3% | 画素の実測 | | `text-muted` | `#E6E7E8` | 大きな欧文見出しの薄いグレー | 2% | 画素の主要色に補正 | | `line` | `#D1D4DB` | カードやタグの枠線 | 1% | 画素の主要色に補正 | | `on-dark` | `#E7ECF1` | 藍の面の上の白い文字 | 1% | 画素の実測 | | `cta` | `#56AEDB` | 受験生向け導線のボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタンの白い文字 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#237199` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#257EAC` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い青のグラデーションにし、濃い面は後半の藍と青だけに使う - コピーの強調語は、1 語目を藍、2 語目を水色にして塗り分ける - 渦の図形は藍・青・水色の 3 色を重ねる - 大きな欧文見出しは薄いグレーにし、和文の小見出しを主役にする - 暖色はイラストの黄色以外では使わない - `floating-bubble` は文字 `#E7ECF1` × 背景 `#64B4DC` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#237199`、4.54:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#56AEDB` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#257EAC`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー（強調語だけ太字） | ゴシック | Noto Sans JP | 300 | 38px | 1.5 | 0.02em | | `headline-lg` | セクションの大きな欧文見出し | 欧文サンセリフ | Poppins | 300 | 52px | 1.1 | 0.0em | | `headline-md` | 太字の和文中見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.05em | | `headline-sm` | 欧文見出しの上に置く和文ラベル（先頭に・） | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-lg` | リード文 | ゴシック | Noto Sans JP | 300 | 15px | 2.0 | 0.05em | | `body-md` | ニュースやカードの本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `accent` | 番号や英字の見出し | 欧文サンセリフ | Poppins | 700 | 26px | 1.1 | 0.0em | | `note` | タグや日付 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.05em | - 和文は細字を基本にし、キーワードだけ太字か色で強調する - 欧文の大見出しは細い Poppins を薄色で置き、和文ラベルと重ねて 2 段にする - 番号は太い欧文で藍にする - リード文は中央揃えで短く改行し、行間を 2.0 前後と広めに取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PC は FV が左右 2 カラム、研究室カードは 3 カラム） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの頭は、和文ラベル＋薄い欧文大見出しを中央に置く - セクション間に大きな余白を取り、白いまま抜ける部分を残す - 渦の図形は画面の端から一部だけ見せる - カードは画面幅の約 92% に収める ## Elevation & Depth - カードは影を極めて淡くし、主に枠線で区切る - セクションの境目に、うっすら灰色のグラデーションの帯を入れる - 人物の切り抜き写真を枠からはみ出させて立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 32px。ボタンは角丸の長方形。 - **写真の切り抜き**: 研究写真は正円に切り抜き、キャンパス写真は大きな角丸の枠に入れ、人物は背景を抜く - **セクション境界**: 四分円や大きな弧で、藍と青の面に切り替える - 写真は正円を基本にする - メニューボタンと吹き出し型の導線は白か水色の円にする - タグは小さな角丸の枠線で作る ## Components - **2 段のセクション見出し**（`section-heading`）: ・付きの太字和文ラベルの下に、薄いグレーの大きな欧文を置く - **丸い研究写真**（`photo-circle`）: 大小の正円写真を、FV に星座のように散らす - **お知らせカード**（`news-card`）: 白地に角丸と細枠線。日付・タグ・本文・下線付きのリンクを並べる - **カテゴリタグ**（`tag-label`）: 細い枠線の小さなタグ。文字は藍の太字 - **ポイントボックス**（`point-box`）: 左上に水色の見出しタブを付けた枠線ボックス。人物の丸アイコンとコメントを入れる - **追従する丸い導線**（`floating-bubble`）: 画面の右端に固定する水色の円。白い文字と下向き矢印を入れる - **番号見出し**（`number-label`）: 藍の太い欧文番号と、横に伸びる細線 - **導線ボタン**（`button-primary`）: 水色の角丸長方形。白い文字で、右端に矢印を付ける - **矢印付きのリンク行**（`link-row`）: 白地の枠線ボタン。右端に水色の矢印を置く ## Do's and Don'ts **Do** - 渦の図形を画面の端で切れるように置き、動きを出す - コピーの強調語は藍と水色の 2 色で塗り分ける - 欧文の大見出しは細字・薄色・大きめにする - 写真は正円に切り抜き、大小を混ぜて散らす - 余白を広く取り、情報を詰め込まない **Don't** - 赤やオレンジなどの暖色を CTA に使わない - 太く重い書体を本文に使わない - 写真を四角いまま並べない - 濃い影や立体的なボタンを使わない - セクションごとに色を増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（学問の幅と好奇心を一目で伝える）: 中央にロゴを置き、周囲に丸い写真を散らす。分野名を縦に並べ、曲線に沿わせたキャッチコピーを添える 2. **メインコピー・リード**（学科の理念を示す）: 細字の大きなコピーで、強調語を 2 色にする。リード文の脇に渦の図形を置く 3. **お知らせ**（最新の実績を示す）: 角丸の枠線カードに、日付・タグ・本文・リンクを並べる 4. **コンセプト**（問いの大切さを訴える）: 感嘆符と疑問符のアイコンを並べ、中央揃えの太字見出しと細字のリード文を置く 5. **特長**（3 つの強みを紹介する）: 番号付きのスライダーに丸写真を置き、見出し・本文・ポイントボックスを続ける。地は淡い青のグラデーション 6. **活躍分野**（卒業後の進路を見せる）: 青い角丸の面に分野のタブとイラストを入れ、下に英文のキャッチを添える 7. **向いている人**（読み手に自分ごと化させる）: 藍の弧の面に、淡い色のカードを置く。条件のリストを並べ、人物の切り抜き写真を周りに配置する 8. **キャンパスビジュアル**（環境の魅力を伝える）: 大きな角丸の枠にキャンパス写真を入れ、白いコピーを重ねる。人物の切り抜きをはみ出させる 9. **受験生向け導線**（声・Q&A・進路へ誘導する）: 番号付きのリスト行に、右端の丸い矢印と水色のボタンを付ける 10. **研究室紹介**（研究内容を一覧で見せる）: 研究室ごとのカードに、大きな番号・丸写真・教員の顔写真・タグ・リンクボタンを入れる 11. **フッター**（関連リンクとロゴをまとめる）: 中央にロゴとナビを置き、両端に渦の図形を見せる ## Imagery - 研究機器・実験・素材などのクローズアップ写真を、正円に切り抜く - 人物（学生・教員）は自然なポーズで撮り、背景を抜いて配置する - 藍・水色・黄の 3 色で描いた、細密なアイソメトリックの街のイラスト - 藍と水色の四分円を組み合わせた渦のモチーフ - 青空と緑が入る明るいキャンパスの広角写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV のコピーとリード文を左右 2 カラムにする - PC のお知らせは、左に見出し、右に一覧を置く横組みにする - 研究室カードは PC で 3 カラム、SP で 1 カラム - 渦の図形は PC で大きくし、左右の余白に見せる - 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-66bdb233`（元 LP の URL から採番） - **元 LP**: https://www.rs.tus.ac.jp/ph/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。