--- version: alpha name: Warm Orange Gradient Business Expo Archive LP description: クリーム色の地に、オレンジ〜黄色のグラデーションカードと黒のピル型ボタンを組み合わせたビジネス展示会のアーカイブ LP。白抜きの大きな欧文アウトライン見出しとフラットなイラストで、BtoB でも軽快で親しみやすい印象に仕上げている。 colors: primary: '#FD8413' background: '#FBF3DC' surface: '#FEFEFE' secondary: '#FEE155' accent-1: '#FEB246' accent-2: '#FE4101' cta: '#010101' on-cta: '#FFFFFF' text: '#020100' accent-3: '#ED400B' background-alt: '#FBF3DC' line: '#D4C9AB' dark-section: '#000000' on-dark: '#FFFFFF' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat Alternates fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px 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: 44px button-register: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px heading-outline-en: textColor: '{colors.surface}' typography: '{typography.accent}' height: 48px card-seminar: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 260px badge-web: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px stat-number: textColor: '{colors.accent-3}' typography: '{typography.display}' height: 70px rank-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 32px filter-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px panel-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px --- # DESIGN.md — オレンジ×クリームのビジネス展示会アーカイブLP（Warm Orange Gradient Business Expo Archive LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、クール・先進的 - **キーワード**: オレンジグラデーション・クリーム地・欧文アウトライン見出し・丸窓ポートレート・黒ピルボタン・カード一覧 - **地の質感**: なめらかなグラデーション面と細い曲線ラインの装飾。紙のような薄いクリーム地。 - **形**: 角丸の大きいカード、円形やカプセル型に切り抜いた人物写真、ピル型ボタン、波形のセクション境界。 - **温度感**: 暖色寄りで明るく活気がある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FD8413` | ブランドのオレンジ（FV背景・カード） | 16% | 画素の実測 | | `background` | `#FBF3DC` | ページ全体のクリーム地 | 35% | 画素の実測 | | `surface` | `#FEFEFE` | 白いパネル・カード面 | 13% | 画素の実測 | | `secondary` | `#FEE155` | 黄色系グラデーションカード | 6% | 画素の実測 | | `accent-1` | `#FEB246` | 明るいオレンジ（カードのグラデーション中間） | 8% | 画素の主要色に補正 | | `accent-2` | `#FE4101` | 赤みのオレンジ（ランキング・登録CTA帯） | 4% | 画素の実測 | | `cta` | `#010101` | 黒のピル型ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#020100` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-3` | `#ED400B` | 数字強調の赤オレンジ | 0% | 画素の実測 | | `background-alt` | `#FBF3DC` | 淡いピーチの切替帯 | 7% | 画素の実測 | | `line` | `#D4C9AB` | 区切り線・タグ枠 | 1% | 画素の主要色に補正 | | `dark-section` | `#000000` | フッターの黒 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター文字 | 0% | 画素の主要色に補正 | - 地はクリーム色で統一し、白パネルは情報をまとめる箱にだけ使う - カードはオレンジ→黄色のグラデーションで、セクションごとに色を変えて区別する - ボタンは黒地に白文字のピル型でそろえ、オレンジの面の上でも目立たせる - 実績の数字だけ赤オレンジで大きく強調する - ランキングと会員登録の帯には赤みのオレンジを使い、ほかより強く見せる - フッターだけ黒地にして締める ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー・イベント名 | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.02em | | `accent` | セクション背景の欧文アウトライン大見出し | 欧文サンセリフ | Montserrat Alternates | 600 | 40px | 1.1 | 0.02em | | `headline-lg` | セクションの和文見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-sm` | 見出し上の斜線で挟んだリード | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `headline-md` | カード内のセミナータイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 肩書き・タグ・注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.02em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - 和文見出しはとても太いゴシックの黒で、大きく1行にまとめる - 欧文見出しは白抜き＋黒の縁取りにし、和文見出しの斜め上に重ねて配置する - 見出し上のリードは「\ 〜 /」のように斜線で挟む - 数字は太字で大きくし、単位は小さく添える - カードの文字は黒の太字で、オレンジの面の上でも読みやすく保つ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード一覧は横スクロール、または 1 列に縦積み - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - セクション冒頭は欧文アウトライン＋和文見出し＋短いリードの3段構成にする - 白パネルは左右に余白をとり、角丸の箱として浮かせる - 実績は3つの数字を縦線で区切って横に並べる - 各セクションの最後には黒ピルボタンを中央に1つ置く - 絞り込み条件はタグを折り返して並べる ## Elevation & Depth - カードは影なしか、ごく薄い影にとどめる - 白パネルは影を付けず、地色との差だけで浮かせる - イラストや写真をパネルの角にはみ出させて奥行きを出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は円形かカプセル型に切り抜き、オレンジの円を背にして置く。会場写真は角丸の四角 - **セクション境界**: なだらかな波形の曲線で切り替え、細い曲線ラインを装飾として流す - カードの右下に丸い矢印アイコンを置く - 「Web限定」などのバッジは黄色の円形にする - タグは白地のピル型で小さく作る ## Components - **黒ピルボタン**（`button-primary`）: 黒地に白文字。右端に白丸の矢印アイコンを付ける - **白ピル登録ボタン**（`button-register`）: 赤オレンジの帯の上に置く白いピル型ボタン。右端に外部リンクのアイコンを付ける - **欧文アウトライン見出し**（`heading-outline-en`）: 白抜きに黒縁の大きな欧文。少し傾けて和文見出しに重ねる - **グラデーションのセミナーカード**（`card-seminar`）: オレンジ〜黄色のグラデーション面に、タイトル・登壇者の丸写真・タグ・矢印を収める - **Web限定バッジ**（`badge-web`）: 黄色の小さな円に太字2行を入れ、人物写真の右上に重ねる - **実績数字**（`stat-number`）: ラベルの下に赤オレンジの大きな数字と小さい単位を置き、縦線で区切って並べる - **順位バッジ**（`rank-badge`）: カードの左上に「1位」などを入れた角丸の小さなバッジ。順位ごとに金・青・銅の色にする - **絞り込みタグ**（`filter-tag`）: 白地のピル型タグ。選択中のものはオレンジ地に白文字にする - **白い情報パネル**（`panel-white`）: クリーム地の上に置く角丸の白い箱。中央揃えで見出しとカードを収める ## Do's and Don'ts **Do** - 見出しは欧文アウトラインと太い和文ゴシックを必ずセットで使う - 人物写真は丸く切り抜き、オレンジの背景円と組み合わせる - カードはグラデーションと大きな角丸でそろえる - フラットな人物・PCイラストを余白に散らして軽さを出す - ボタンは黒ピル＋矢印アイコンで統一する **Don't** - 寒色を主役にしない - 角が尖ったカードや四角いボタンを使わない - 明朝体を使わない - グラデーションの上に細い文字を置かない - 白パネルに強い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビゲーション）: 白地にロゴとテキストリンクを横一列に並べる 2. **ファーストビュー**（イベントのテーマと会期を伝える）: オレンジ地に白い太字のコピーを置き、カプセル型の登壇者写真をカルーセルで見せる。会期は白い角丸の箱に入れ、下部にイベント名を大きく置く 3. **導入・実績**（規模で信頼感を出す）: 中央揃えのリードの下に3つの数字を並べ、その下に会場写真を横に並べる 4. **特別コンテンツ**（目玉の登壇者を紹介する）: 丸窓の人物写真3人に名前・肩書き・演題を添え、黒ボタンを置く 5. **メインステージ**（テーマを解説する）: オレンジの波形の帯に欧文見出しとイラストを重ね、テキストと写真を2列で並べる 6. **展示動画**（会場の様子を伝える）: 白いパネルにアイコン付きの見出しと本文を入れ、黒ボタンを置く 7. **最新トレンド**（協賛企業の講演へ誘導する）: 白いパネルの中に、オレンジのカードを3枚並べ、企業ロゴを丸く入れる 8. **ランキング**（人気のセミナーを示す）: 赤オレンジのカードを横スクロールで並べ、順位バッジとページ送りを付ける 9. **おすすめ**（回遊を促す）: 黄色グラデーションのカードを3列で並べる 10. **一覧・絞り込み**（全件から探せるようにする）: タグで絞り込む欄の下にカードを並べ、「もっと見る」ボタンを置く 11. **協賛企業**（信頼性を示す）: 白い帯にロゴを4〜5段並べる 12. **関連記事**（外部の記事へ誘導する）: 漫画風のイラストやサムネイル付きの白カードを3枚並べる 13. **会員登録CTA**（登録を促す）: 赤オレンジのグラデーションの角丸帯に、白文字のコピーと白いピル型ボタンを置く 14. **フッター**（各種リンク）: 黒地にロゴ・規約リンク・SNSアイコンを並べる ## Imagery - 人物は白背景で明るく撮った笑顔の上半身。丸く切り抜く - 会場写真は人が多く賑わっている様子を、角丸で並べる - PC・グラフ・地球儀・歯車などのフラットな3D風アイコンを余白に散らす - ビジネスパーソンを細い線で描いたフラットなイラストを添える - 細いオレンジの曲線を背景に流して動きを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカードを1列に縦積みするか、横スクロールにする - 実績の3つの数字は SP でも1行に収め、数字のサイズを縮める - 欧文アウトライン見出しは SP で幅の80%程度に縮める - FVの登壇者カルーセルは、SP では中央に1人を大きく見せる - 協賛ロゴは SP で3列のグリッドにする ## 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-ae2efd2e`（元 LP の URL から採番） - **元 LP**: https://www.otsuka-shokai.co.jp/ilab/jsf/archive/ - **解析に使った画像**: 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/）からご連絡ください。