--- version: alpha name: Gold Textured University Donation LP description: ざらついた金色の面と白・薄グレーの地を組み合わせ、3Dクレイ風アイコンを入れたグレーカードを並べる構成。大学の寄附・基金サイトの型で、信頼感と親しみの両方を出す。見出しは小さな欧文ラベルと太いゴシックの2段組み。 colors: primary: '#E2CD84' cta: '#DEAA03' on-cta: '#FFFFFF' background: '#FEFFFE' background-alt: '#F1F1EF' surface: '#EAEAEA' text: '#353537' dark-section: '#2E2B28' accent-1: '#AF9C65' tint-1: '#EBDDC1' accent-2: '#C0AE52' line: '#EAEAEA' cta-accessible: '#937002' accent-2-accessible: '#847630' accent-1-accessible: '#635734' typography: display: fontFamily: Bebas Neue fontSize: 56px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em 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.5 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 16px section: 72px 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: 40px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 48px purpose-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 230px stats-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 110px news-row: textColor: '{colors.text}' typography: '{typography.body-md}' height: 56px cta-band: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 140px slogan-band: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 70px other-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 110px --- # DESIGN.md — 金色テクスチャ×3Dアイコンの大学寄附サイト（Gold Textured University Donation LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、上品・高級、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 金色テクスチャ・3Dクレイアイコン・グレーカード・大判欧文タイポ・丸い矢印ボタン・大学基金 - **地の質感**: 金色の面に細かい紙のようなノイズ質感を入れる。白の面はフラットにする。 - **形**: カードは角丸 16px 前後。ボタンはピル型。セクションの境界は大きな曲線で切り替える。 - **温度感**: 金色で暖かく見せ、グレーで落ち着きを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E2CD84` | 金色テクスチャ面（FV・その他の寄附） | 16% | 画素の実測 | | `cta` | `#DEAA03` | 寄附するボタン・CTA帯 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFFFE` | メインの白地 | 43% | 画素の実測 | | `background-alt` | `#F1F1EF` | フッター等の薄グレー地 | 11% | 画素の実測 | | `surface` | `#EAEAEA` | 寄附目的カードのグレー面 | 8% | 画素の主要色に補正 | | `text` | `#353537` | 見出しと本文の文字 | 2% | 画素の実測 | | `dark-section` | `#2E2B28` | グローバルナビの帯 | 1% | 推定 | | `accent-1` | `#AF9C65` | 欧文大判タイポの暗い金色 | 4% | 画素の主要色に補正 | | `tint-1` | `#EBDDC1` | ニュース分類ラベルの淡い金色 | 1% | 画素の主要色に補正 | | `accent-2` | `#C0AE52` | 数値と欧文ラベルの金色文字 | 0% | 画素の実測 | | `line` | `#EAEAEA` | リストの区切り線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#937002` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#847630` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#635734` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーを基本にし、金色テクスチャの面はFV・中盤・CTA帯に区切りとして入れる - 黄金色のベタ塗りは寄附ボタンと最終CTA帯だけに使う - カードは薄グレー、カード内のボタンは白地に金色の丸矢印をつける - 文字は黒に近い焦げ茶にし、純黒は使わない - 欧文の小ラベルと実績の数値は金色で強調する - `button-primary` は文字 `#FFFFFF` × 背景 `#DEAA03` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#937002`、4.61:1）を使う。 - `stats-box` は文字 `#C0AE52` × 背景 `#FEFFFE` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#847630`、4.54:1）を使う。 - `slogan-band` は文字 `#AF9C65` × 背景 `#E2CD84` のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#635734`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 帯状に敷く大判の欧文スローガン | 欧文サンセリフ | Bebas Neue | 700 | 56px | 1.0 | 0.02em | | `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em | | `accent` | 見出し上の欧文小ラベル（●つき） | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.1em | | `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 日付・注記・カテゴリラベル | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 見出しは金色●つきの欧文小ラベルを上、和文の太字見出しを下に置く2段構成 - 実績の数値は太い欧文数字で大きく、単位は小さく添える - 大判の欧文スローガンは画面幅いっぱいに1行で敷く - 本文は行間1.8で短めの段落にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。寄附目的カードは 2 列。PC は 4 列グリッドで、ニュース類は左に見出し・右にリストの 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツ幅は中央寄せで最大 680px 程度 - カードは均等グリッドで、高さを揃える - ニュース系セクションは見出しと一覧リンクを左、行リストを右に置く - プロジェクトは横スクロールのカルーセルにし、矢印ボタンで送る ## Elevation & Depth - カードは影なしで、グレー面だけで区別する - カード内の白ボタンにごく薄い影をつけてよい - FVのスライドは白枠と柔らかい影で浮かせる ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 角丸の矩形。FVの写真帯は角丸なしで横に並べる - **セクション境界**: 金色の面と白地の境界を大きな円弧のカーブで切り替える - ボタンはすべてピル型にし、右端に丸い矢印アイコンをつける - 最終CTA帯は角丸 32px 以上の金色の箱にする - カードの角丸は 16px で統一する ## Components - **寄附するボタン**（`button-primary`）: 黄金色のピル型ボタン。文字は白の太字 - **詳しく見るボタン**（`button-secondary`）: 白のピル型ボタン。右端に金色の丸矢印 - **2段見出し**（`section-heading`）: 金色●と欧文の小ラベルの下に、和文の太字見出しを置く - **寄附目的カード**（`purpose-card`）: グレー面に、左上のタイトル・中央の3Dアイコン・下の白ボタンを配置 - **寄附実績ボックス**（`stats-box`）: 白い角丸の箱に金色の大きな数値を2段で表示 - **ニュース行**（`news-row`）: 淡い金色枠のカテゴリラベル・日付・タイトルを並べ、右端に金色の丸矢印。下に区切り線 - **最終CTA帯**（`cta-band`）: 大きな角丸の金色の箱に、白いリンクカードを2つ並べる - **欧文スローガン帯**（`slogan-band`）: 金色テクスチャの上に、暗い金色の大判欧文を全幅で敷く - **その他の寄附カード**（`other-card`）: 白の角丸カード。左に3Dイラスト、右にタイトルと説明文 ## Do's and Don'ts **Do** - アイコンは3Dクレイ風のイラストで統一する - 金色の面には細かなノイズ質感を入れる - リンクにはすべて金色の丸矢印をつける - 見出しは欧文ラベル＋和文の2段構成を守る - 白・グレー・金の3色で画面のリズムを作る **Don't** - 原色の赤や青を面に使わない - カードに強いドロップシャドウをつけない - 角の尖ったボタンを使わない - フラットな線画アイコンを混ぜない - 金色のベタ塗りを広い面に多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・ナビ**（ロゴとカテゴリ別に移動できるナビ）: 白のヘッダーの下に濃色のナビ帯。右上に金色の検索ボタン 2. **ファーストビュー**（理念と寄附実績を示し、主要施策を紹介する）: 金色テクスチャの上に、左にコピーと実績ボックス、右に角丸スライダー 3. **スローガン帯と写真帯**（大学の活動を雰囲気で伝える）: 大判の欧文スローガンの下に、研究・スポーツ・学生の写真を横に連結。下端は円弧で白地へ 4. **寄附の目的**（寄附先を選べるようにする）: 3Dアイコンを入れたグレーカードを4列のグリッドで12枚並べる 5. **特定プロジェクト**（個別の募集案件へ誘導する）: 写真カードの横スクロール。カードごとに詳細ボタンと寄附ボタンの2つ 6. **ふるさと納税バナー**（別の寄附方法を案内する）: 薄グレーの角丸バナーに、説明文と3Dのギフトイラスト 7. **その他の寄附**（クラウドファンディング・遺贈などを案内する）: 金色テクスチャ地に、大きな白カード1枚と小さな白カード3枚 8. **寄附者向け案内**（特典や顕彰制度を紹介する）: 白のリンクカードを2つ横に並べる 9. **お知らせ・実績・活用事例**（最新情報と透明性を示す）: 左に見出し、右にラベルつきの行リストを並べる2カラム 10. **CTA**（FAQと問い合わせへ誘導する）: 大きな角丸の金色の箱に、白いリンクカードを2つ 11. **フッター**（サイトマップと所在地）: 薄グレー地にロゴと住所、3列のリンク一覧 ## Imagery - アイコンは光沢のある3Dクレイ風（苗・地球・ロケット・本など）。白背景で切り抜く - 写真は研究室・スポーツ・キャンパスで学生が写る自然光のもの - 金色の面は紙のような粒状ノイズのテクスチャにする - FVのビジュアルにはパステル調の3Dハートなど柔らかな表現を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではナビをハンバーガーメニューにまとめる - 寄附目的カードは PC の 4 列から SP では 2 列にする - ニュース系は SP で見出しをリストの上に縦積みする - FVは SP でコピー・実績・スライダーの順に縦に積む - 大判の欧文スローガンは SP で 2 行に折り返すか、縮小する ## 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-5e58de94`（元 LP の URL から採番） - **元 LP**: https://www.omu.ac.jp/fund/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。