--- version: alpha name: Pastel Neon Gradient Youth Contest LP description: ラベンダーからピンクへ流れるパステルグラデーションの地に、ネオン調の発光文字とフラットなイラストを重ねた学生向けアイデアコンテストの募集 LP。白い角丸カードとピンクのグラデーションボタンで情報を区切り、最後は黒帯見出しの募集要項表で締める。 colors: primary: '#FE82B4' secondary: '#DDAAFC' background: '#FFFFFF' background-alt: '#FEECFB' tint-1: '#FE9BD1' tint-2: '#FFF1F3' surface: '#FEFEFE' cta: '#FF7EBA' on-cta: '#FFF3FD' accent-1: '#C695E0' text: '#333333' dark-section: '#333333' marker: '#F3FD0B' cta-accessible: '#DC0066' tint-1-accessible: '#DA0278' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.04em accent: fontFamily: Yomogi fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Montserrat fontSize: 10px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.12em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px 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: 56px button-secondary: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px nav-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 125px section-heading-pill: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 28px label-bar: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px theme-bubble: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px award-badge: textColor: '{colors.primary}' typography: '{typography.display}' height: 200px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 900px --- # DESIGN.md — ラベンダー×ピンクの学生コンテスト募集 LP（Pastel Neon Gradient Youth Contest LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステルグラデーション・ネオン発光文字・フラットイラスト・白カード・ピンクのピル型ボタン・ユース - **地の質感**: ラベンダーとピンクのなめらかなグラデーション。審査員セクションは淡いピンク地に細い方眼グリッドを敷く。 - **形**: 角丸の白カード、ピル型ボタン、円形のテーマバブル、月桂冠の賞バッジ。 - **温度感**: 明るく甘めの暖色寄りパステル。若々しく前向き。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE82B4` | ブランドピンク（見出し・ラベル帯） | 4% | 画素の実測 | | `secondary` | `#DDAAFC` | ラベンダー（セクション地の上端） | 10% | 画素の実測 | | `background` | `#FFFFFF` | 白の基本地 | 25% | 画素の実測 | | `background-alt` | `#FEECFB` | 審査員セクションの淡ピンク地 | 16% | 画素の実測 | | `tint-1` | `#FE9BD1` | グラデーション中間の桜ピンク | 10% | 画素の実測 | | `tint-2` | `#FFF1F3` | 特典セクションの薄桃地 | 8% | 画素の実測 | | `surface` | `#FEFEFE` | カード面 | 12% | 画素の実測 | | `cta` | `#FF7EBA` | 主CTAのピンクグラデーション | 1% | 画素の実測 | | `on-cta` | `#FFF3FD` | CTA上の白文字 | 0% | 画素の実測 | | `accent-1` | `#C695E0` | 英字ラベル・リンクの紫 | 0% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃グレー | 3% | 推定 | | `dark-section` | `#333333` | 募集要項表の見出し帯 | 2% | 画素の実測 | | `marker` | `#F3FD0B` | トップへ戻るボタンの蛍光イエロー | 0% | 画素の実測 | | `cta-accessible` | `#DC0066` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#DA0278` | AA を満たす補正値（計算） | | 計算 | - 地はラベンダー→ピンク→白の縦グラデーションでセクションを移り変わらせる。 - 情報カードは必ず白で、パステル地から浮かせる。 - ピンクは見出し、ラベル帯、CTA、点数バッジに限定する。 - 紫は英字の小ラベルとURLリンクに使う。 - 賞バッジは賞ごとに色を分ける（ピンク・緑・青・オレンジ）。 - 募集要項の表だけは濃グレーの帯を使い、引き締める。 - `button-primary` は文字 `#FFF3FD` × 背景 `#FF7EBA` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DC0066`、4.6:1）を使う。 - `button-secondary` は文字 `#FFF3FD` × 背景 `#FE9BD1` のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#DA0278`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのタイトル（ネオン発光） | 装飾・ディスプレイ | Dela Gothic One | 700 | 52px | 1.1 | 0.04em | | `accent` | 手書き風の発光キャッチ・テーマ文字 | 手書き・筆 | Yomogi | 400 | 22px | 1.4 | 0.1em | | `headline-lg` | セクション見出し（ピンク） | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.02em | | `headline-md` | テーマ枠・カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.0em | | `headline-sm` | 英字の小ラベル | 欧文サンセリフ | Montserrat | 800 | 10px | 1.2 | 0.12em | | `body-md` | 本文・プロフィール | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.04em | | `note` | 注釈・要項の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ENTRYなどのボタン文字 | 欧文サンセリフ | Montserrat | 700 | 15px | 1.0 | 0.12em | - FVのタイトルは白文字に色のついた外側グローをかけ、ネオン管のように見せる。 - 手書き風のキャッチは白に発光をかけ、少し斜めに置く。 - 英字の小ラベルを和文見出しの上に添えて二段にする。 - グラデーション地の本文は白の太字で中央揃えにする。 - 賞金額の数字だけは60px級に大きくし、賞の色で塗る。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。審査基準や賞はカード内に縦積み。 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約8%の余白を取って中央に置く。 - セクションの頭は英字ラベル＋ピンク地の見出しピルで始める。 - サブ項目はピンクグラデの細い横長ラベル帯で区切る。 - 本文は中央揃えを基本にし、プロフィール本文だけ左揃えにする。 - CTAは横幅約85%の大きなピル型にする。 ## Elevation & Depth - 白カードには淡いピンクのぼかし影（0 4px 16px rgba(240,150,200,.2)）をつける。 - テーマ枠はピンクのずらし影でオフセットを出す。 - CTAは下方向に薄ピンクのずらし影をつける。 - 要項表は影なし、細い濃グレー線のみ。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は角丸16px程度の矩形。右下に英字の透かし文字を重ねる。 - **セクション境界**: 直線の境界のまま、地のグラデーションで自然に色を移す。 - カードは角丸12〜16px。 - テーマ分類は大きな正円のバブルにする。 - 賞は月桂冠のリース型で囲む。 - 点数バッジは角丸4pxの小さなピンクの四角。 ## Components - **ENTRYボタン**（`button-primary`）: 左ピンクから右サーモンへのグラデのピル型。白文字で、下にずらし影をつける。 - **ダウンロードボタン**（`button-secondary`）: 淡いピンクグラデのピル型。白文字にアイコンを添える。 - **FVのアンカーカード**（`nav-card`）: 白の角丸カード。英字ラベル、見出し、説明、丸い下矢印アイコンの順に並べ、3枚を縦に積む。 - **見出しピル**（`section-heading-pill`）: 英字の小ラベルの下に、ピンク地に白文字の角丸ラベルを置く。 - **サブ見出し帯**（`label-bar`）: 横長でピンクグラデ地の細い帯。白文字を中央に置く。 - **テーマバブル**（`theme-bubble`）: グラデの大きな円。手書き風の大きな漢字1字とキーワード3行を入れ、周りにカプセル型の飾りを散らす。 - **審査員カード**（`profile-card`）: 角丸の人物写真の下に名前と肩書きを置き、続く白カードに太字の要約と経歴を入れる。 - **賞バッジ**（`award-badge`）: 月桂冠のリースの中に星、賞名、賞金の大きな数字、人数を入れる。 - **募集要項表**（`spec-table`）: 細い線で囲んだ角丸の表。項目ごとに濃グレーの見出し帯（白文字）があり、下に白地の本文が続く。 ## Do's and Don'ts **Do** - パステルのグラデーション地と白カードを交互に重ねて柔らかく見せる。 - FVはカラフルなフラットイラストを全面に敷き、ネオン文字を重ねる。 - 英字の小ラベルと和文見出しをセットで使う。 - CTAはページ中盤と末尾に同じピル型で繰り返す。 - 審査基準には点数バッジをつけて、評価の仕組みを見える形にする。 **Don't** - 濃い原色の広い面や黒地のセクションを作らない（要項表の見出し帯は例外）。 - 角の立った四角いボタンにしない。 - 明朝体を使ってかしこまった印象にしない。 - 白カードに強く濃い影をつけない。 - イラストのタッチを写真風やモノクロに混在させない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コンテストの存在と世界観を一目で伝える）: ラベンダー〜ピンクのグラデ地に、カラフルな学生のイラストを置く。手書き風の発光キャッチとネオン調タイトルを重ねる。 2. **アンカーナビ**（テーマ・審査・特典へ誘導する）: 英字ラベル付きの白カード3枚を縦に積み、丸い下矢印をつける。 3. **概要**（コンテストの趣旨を説明する）: 白地にピンクの大見出しを置き、中央に本文の段落を組む。 4. **募集テーマ**（テーマを印象づける）: 回数バッジと年度ラベルの下に、ずらし影つきの枠を置き、太字のテーマを入れる。 5. **テーマの解説**（応募を後押しし、取り組む分野の例を示す）: 紫からピンクへのグラデ地に白字で本文を中央揃えにし、分野ごとの円バブルを3つ縦に並べる。 6. **テンプレート案内とCTA**（応募の準備を促す）: 白カードのスライダー（ドットページャー付き）、ダウンロードボタン、短い一言、ENTRYボタンの順に並べる。 7. **審査員**（審査員を紹介して信頼感を出す）: 方眼入りの淡ピンク地に、写真カード、経歴カード、COMMENTカードを1人ずつ繰り返す。 8. **参加対象**（誰が応募できるかを示す）: ラベル帯の下にイラストと白カードを2組並べる。 9. **審査基準**（評価の仕組みを示す）: 天秤のイラストの下に、点数バッジ付きの番号リストと合計点のピンク帯を入れた白カードを置き、下向きの大矢印につなぐ。 10. **入賞者特典**（賞金で意欲を高める）: 色違いの月桂冠バッジを縦に並べ、プラス記号のあとに特典イベントを案内する。 11. **募集要項**（条件の詳細を一覧にする）: 濃グレーの見出し帯と白地の本文を交互に重ねた表にする。 12. **最終CTA・フッター**（応募と問い合わせ先を示す）: ENTRYのピル型ボタンを置き、グレー地のフッターに主催者ロゴと連絡先を中央揃えで入れる。 ## Imagery - FVはグラデ陰影のフラットなベクターイラスト。本・定規・鉛筆・植物と若者を密に重ねる。 - 背景にはカプセル形や円の飾りを散らし、浮遊感を出す。 - 人物写真は自然光のバストアップ。角丸に切り抜き、右下に紫の英字透かしを重ねる。 - 審査基準には天秤、参加対象には学生のフラットなイラストを添える。 - テーマの円はピンク・オレンジ・水色のグラデーションにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVイラストを横長に広げ、アンカーカード3枚を横一列に並べる。 - PCではテーマバブル3つを横一列にする。 - PCでは審査員を写真左・経歴右の2カラムにする。 - PCでは参加対象の2枚を横並びにし、副賞バッジ3つも横並びにする。 - PCでは要項表を左に項目名、右に内容を置く2列の表にする。 - PCでは余白に装飾イラストを散らし、コンテンツ幅は約800pxに抑える。 ## 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-52602714`（元 LP の URL から採番） - **元 LP**: https://janic-ideacontest.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。