--- version: alpha name: Neon Diagonal Pop Talk Event LP description: 若年層向けオンライン交流イベントのLP。蛍光グリーン・オレンジ・紫・深緑・水色のベタ面を斜めに切って重ね、極太の斜体ゴシックで勢いを出す。黒帯に縦書きした見出しと、ギザギザの日程カードが特徴。グラデーションや影は使わず、ベタ塗りと黒のずらし影でグラフィックとして見せる。 colors: primary: '#FF6600' secondary: '#03FF9A' background: '#006766' background-alt: '#670099' dark-section: '#000000' accent-1: '#38D5E7' cta: '#32CCFE' on-cta: '#010506' text-muted: '#006757' on-dark: '#FFFFFF' marker: '#FF6600' primary-accessible: '#C95100' typography: display: fontFamily: Dela Gothic One fontSize: 110px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 800 lineHeight: 1.4 body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 800 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Oswald fontSize: 18px fontWeight: 700 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 900 lineHeight: 1.2 rounded: sm: 0px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' cta-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 200px heading-vertical-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 240px schedule-card: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 140px badge-starburst: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 80px button-apply: textColor: '{colors.background-alt}' typography: '{typography.label-button}' height: 24px step-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 22px card-idea: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 130px speech-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 50px --- # DESIGN.md — 橙×紫×蛍光緑の斜め切りポップなトークイベントLP（Neon Diagonal Pop Talk Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、クール・先進的 - **キーワード**: 斜め切り・ネオンカラー・ベタ塗り・極太斜体・縦書き黒帯・ストリート - **地の質感**: グラデーションも質感もない完全なベタ塗り。黒の段ずらし影でステッカーっぽく見せる - **形**: 平行四辺形・斜めの帯・ギザギザの縁・星形バッジ・吹き出し。どれも右上がりに傾ける - **温度感**: 暖色と寒色の補色を強くぶつけた、高彩度でにぎやかな配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF6600` | FVと強調に使うブランド色のオレンジ | 22% | 画素の実測 | | `secondary` | `#03FF9A` | 日程カード・ステップ面の蛍光グリーン | 20% | 画素の実測 | | `background` | `#006766` | 楽しみ方セクションの深緑の地 | 15% | 画素の実測 | | `background-alt` | `#670099` | 日程一覧の紫の地 | 14% | 画素の実測 | | `dark-section` | `#000000` | フッター・縦書き見出し帯の黒 | 11% | 画素の実測 | | `accent-1` | `#38D5E7` | 申込円ボタン・カードの水色 | 8% | 画素の主要色に補正 | | `cta` | `#32CCFE` | 申込みスタートの円形CTA | 2% | 画素の実測 | | `on-cta` | `#010506` | CTAや淡色面に載る黒文字 | 3% | 画素の実測 | | `text-muted` | `#006757` | 日程カード内の時刻表示の深緑文字 | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃色面に載る白文字 | 2% | 推定 | | `marker` | `#FF6600` | 日付下の波線・先着バッジのオレンジ | 1% | 画素の主要色に補正 | | `primary-accessible` | `#C95100` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地色をオレンジ→紫→蛍光緑→深緑→黒と切り替え、境目は斜めにする - 隣り合う面には必ず補色に近い組み合わせを置いて、境目をはっきり見せる - カードは地色と違う色にして、緑・水色・紫を順番に回す - 強調語は文字色を変えて目立たせる。紫の地にはオレンジ、緑の地には深緑や紫を使う - 黒は見出しの帯・ずらし影・フッターに限る - グラデーション・半透明・パステルは使わない - `badge-starburst` は文字 `#FFFFFF` × 背景 `#FF6600` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C95100`、4.51:1）を使う。 - `speech-bubble` は文字 `#FFFFFF` × 背景 `#FF6600` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C95100`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大タイトル（変形させた極太文字） | 装飾・ディスプレイ | Dela Gothic One | 900 | 110px | 1.0 | -0.05em | | `headline-lg` | 黒帯に縦書きするセクション見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.1 | 0.02em | | `headline-md` | 日程カードの日付（数字を大きく、斜体にする） | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | -0.03em | | `headline-sm` | ステップ名やカード本文の太字斜体 | ゴシック | Noto Sans JP | 800 | 17px | 1.4 | 0.0em | | `body-lg` | FVで斜めに並べるリードの詩文 | ゴシック | Noto Sans JP | 800 | 15px | 1.7 | 0.02em | | `accent` | #01やSTEPなどの欧文ラベル | 欧文サンセリフ | Oswald | 700 | 18px | 1.0 | 0.0em | | `note` | ※注釈とフッターのリンク | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `label-button` | 申し込むなどのボタン文字 | ゴシック | Noto Sans JP | 900 | 14px | 1.2 | 0.0em | - 見出しも本文も原則 skewX(-10deg) 前後の斜体にする - 太さは800〜900が基本で、細い字は注釈だけに使う - セクション見出しは黒帯の中に白文字の縦書きで置く - 日付は数字を大きく、年・月・曜日を小さくして強弱をつける - FVのリード文は行ごとに左へずらし、斜めのラインを作る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムで、楽しみ方カードだけ 2 カラム。PC は中央寄せで、カードは 3 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの境目は右上がりの斜め線で区切る - 日程カードは縦に等間隔で並べ、右上に星形バッジを重ねる - 縦書き見出しの帯は画面の端から少しはみ出させて置く - 要素を地色の帯からはみ出させ、重なりで動きを出す - 余白は詰めめにして、色の面で密度を保つ ## Elevation & Depth - ぼかした影は使わない - 日程カードは右下に黒のベタ影を4〜6pxずらして重ねる - 重なりの奥行きは色面の前後関係だけで表す ## Shapes - **角丸**: 小 0px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は使わない。線画イラストを切り抜いて、色面の上に直接置く - **セクション境界**: 右上がりの斜めカットで区切り、色面を何枚も重ねる - 楽しみ方カードは角を丸めた平行四辺形にする - 日程カードは左右の縁をギザギザにした帯にする - 先着バッジは尖りの多い星形にする - 主CTAは大きな正円にする - 感想カードは吹き出しの尾がついた平行四辺形にする ## Components - **円形申込CTA**（`cta-circle`）: 水色の大きな正円に黒の斜体文字2行を入れ、下に紫の矢印を添える - **縦書き黒帯見出し**（`heading-vertical-band`）: 斜めに傾けた黒い帯に、白の縦書きで見出しを置く。助詞だけ小さくする - **ギザギザ日程カード**（`schedule-card`）: 蛍光緑の帯に日付・時刻・申し込むボタンを入れ、黒のずらし影をつける。日付の下にはオレンジの波線を引く - **先着バッジ**（`badge-starburst`）: オレンジの星形に白文字で、定員を2行で入れる - **申し込むボタン**（`button-apply`）: 紫の斜めの三角形の帯に、下線つきの紫文字を載せる - **STEPラベル**（`step-label`）: 紫の平行四辺形に水色の欧文でSTEPと番号を入れ、右に太字斜体の手順文を並べる - **楽しみ方カード**（`card-idea`）: 角丸の平行四辺形に#番号と短文を入れる。色は緑・水色・紫を順番に回し、強調語だけ色を変える - **吹き出し**（`speech-bubble`）: オレンジの平行四辺形に尾をつけ、白の斜体で短い一言を入れる ## Do's and Don'ts **Do** - 全体を右上がりの斜めでそろえる - 高彩度の色をベタで隣り合わせに置く - 文字は極太の斜体にする - 番号やSTEPなどのラベルは欧文の斜体にする - 影は黒ベタのずらしだけにする **Don't** - パステルやグラデーションを使わない - ぼかした影や半透明を使わない - 細い明朝体や上品な書体を使わない - 水平・垂直だけの静かなレイアウトにしない - 写真を大きく使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とイベントの気軽さを伝える）: オレンジの地に変形させた極太のロゴ文字を置き、短い詩文を斜めに並べる。奥には深緑の斜め面を入れ、円形CTAを配置する 2. **日程一覧**（開催回を選んで申し込ませる）: 紫の地に縦書きの黒帯見出しを置き、ギザギザの日程カードを縦に並べる。各カードに星形バッジをつけ、最後に注釈を入れる 3. **参加の流れ**（参加までの手軽さを示す）: 蛍光緑の地にSTEPラベルを4つ並べ、線画の人物イラストと注釈を添える 4. **参加者の声**（体験の価値を伝える）: 水色と深緑の吹き出し型カードを斜めに横並びにし、PCでは横に流して見せる 5. **楽しみ方**（話題の例で参加意欲を高める）: 深緑の地に縦書きの見出しと吹き出しを置き、#番号つきの平行四辺形カードを2カラムで14枚並べる 6. **フッター**（シェアと運営者の情報を載せる）: 黒い帯にTOPタブ・SNSアイコン・ロゴ・リンク・コピーライトを中央寄せで並べる ## Imagery - 写真は使わない - 人物は黒い手描き線画で、肌などをオレンジでベタ塗りする - ノートPCでのビデオ通話のような日常のワンシーンを描く - 稲妻や集中線など、手描きの小さな記号を添える - 装飾には矢印・波線・星形・吹き出しの図形を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも斜めの色面を画面幅いっぱいに敷き、内容は中央の約60%幅に置く - PCの日程カードは横長にして、日付と時刻を1行に並べる - PCの楽しみ方カードは3カラムにする - 参加者の声はPCで横一列に並べ、画面端からはみ出させる - 縦書き見出しの帯はPCでも内容ブロックの左上に重ねる ## 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-ab828f9d`（元 LP の URL から採番） - **元 LP**: https://job.mynavi.jp/careerdesign/cd3/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。