--- version: alpha name: Warm Orange Gradient Corporate Education Site description: 白地に橙→赤橙のグラデーションピルボタンと、橙→黄のグラデーション欧文見出しを繰り返す教育系企業サイト。人物写真を角丸で切り抜き、ボタンを写真の下端に重ねる構成が特徴。黄色のリボン曲線と手書き風の欧文スクリプトを添えて、前向きで親しみのある印象を出している。 colors: primary: '#EC7616' cta: '#E54201' secondary: '#F69B00' on-cta: '#FFFFFF' accent-1: '#EABF04' background: '#FFFFFF' background-alt: '#F6F7F9' tint-1: '#E4E1DC' text: '#1F272B' text-muted: '#CBCBCB' accent-2: '#E95412' line: '#EDEDEC' on-dark: '#FFFFFF' cta-accessible: '#D83E01' text-muted-accessible: '#767676' secondary-accessible: '#A76900' typography: display: fontFamily: Poppins fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Yellowtail fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 80px 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: 46px heading-en-gradient: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px tab-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px news-tag: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px photo-card-overlap: textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 330px icon-link-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 90px panel-soft: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 900px banner-diagonal: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.md}' height: 260px --- # DESIGN.md — 橙〜黄グラデの明るい教育企業コーポレート LP（Warm Orange Gradient Corporate Education Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか - **キーワード**: 橙グラデーション・白基調・欧文グラデ見出し・角丸写真・手書きスクリプト・人物写真 - **地の質感**: フラットな白地に、淡い橙〜黄のぼかしグラデと柔らかい影を重ねている - **形**: 角丸カード・ピル型ボタン・リボン状の曲線 - **温度感**: 暖色寄りで明るく温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC7616` | ブランド橙（フッター面・強調色） | 6% | 画素の実測 | | `cta` | `#E54201` | CTA グラデの赤橙側の端 | 3% | 画素の実測 | | `secondary` | `#F69B00` | CTA グラデの黄橙側の端 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#EABF04` | 欧文見出しグラデの黄側・リボン | 1% | 画素の実測 | | `background` | `#FFFFFF` | ページ地の白 | 45% | 画素の実測 | | `background-alt` | `#F6F7F9` | IR 区画のパネル地 | 5% | 画素の実測 | | `tint-1` | `#E4E1DC` | 理念セクションの写真背景の生成り | 8% | 画素の実測 | | `text` | `#1F272B` | 見出し・本文の濃い墨色 | 3% | 画素の実測 | | `text-muted` | `#CBCBCB` | グレーのカテゴリタグ | 0% | 画素の実測 | | `accent-2` | `#E95412` | お知らせタグの赤橙 | 0% | 画素の実測 | | `line` | `#EDEDEC` | ニュースの区切り線 | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 橙面上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D83E01` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#A76900` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。IR 区画だけ淡いグレーの角丸パネルにする - 主ボタンはすべて左が黄橙、右が赤橙の横グラデにする - 欧文の大見出しは左の赤橙から右の黄へ文字グラデにする - 本文と和文見出しは墨色。純黒は使わない - ニュースのカテゴリはグレー・赤橙・橙のタグで色分けする - フッターはブランド橙のベタ面に白文字 - `button-primary` は文字 `#FFFFFF` × 背景 `#E54201` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D83E01`、4.56:1）を使う。 - `tab-pill` は文字 `#FFFFFF` × 背景 `#E54201` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D83E01`、4.56:1）を使う。 - `news-tag` は文字 `#FFFFFF` × 背景 `#CBCBCB` のコントラスト比が 1.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.54:1）を使う。 - `banner-diagonal` は文字 `#FFFFFF` × 背景 `#F69B00` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#A76900`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文サンセリフ | Poppins | 700 | 44px | 1.1 | 0.02em | | `headline-lg` | FV のコピー・理念の見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.6 | 0.1em | | `headline-md` | 挨拶などの中見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.02em | | `headline-sm` | 日付・カード見出し・和文の副見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.03em | | `body-md` | 本文・ニュース本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `accent` | 見出しに添える筆記体の英字 | 欧文スクリプト | Yellowtail | 400 | 24px | 1.2 | 0.05em | | `label-button` | ボタン・タグの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | | `note` | ファイルサイズ・コピーライト | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em | - 欧文の大見出しの右下に、小さな和文の副題を右寄せで添える - 理念の文章は行間 2.2 程度まで広げ、文字間も広めにとる - 筆記体の英字は斜めに傾け、見出しの肩に重ねる - FV のコピーは白い帯の上に橙の太字で 1 行ずつ載せる - 本文は 14px 前後、行間 1.8 で読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、PC はカードを 3 列か 2 列に並べる - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 20px - ボタンは幅 70% 程度で中央に置き、各セクションの末尾に配置する - 写真カードの下端にボタンを半分重ねる - ニュースは日付とタグの行の下に本文を置き、細い線で区切る ## Elevation & Depth - ボタンには橙色の柔らかいぼかし影をつける（y 8px・blur 20px 程度） - 白カードには薄い橙のぼかし影を広めにつける - 写真には影をつけず角丸だけにする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸 10px の長方形。FV は角丸写真を少しずらして重ねるコラージュにする - **セクション境界**: 白い面の下端に大きな角丸をつけ、次の写真セクションに重ねる。線や波は使わない - ボタンとアクティブなタブはすべてピル型 - タグは角丸 2〜4px の小さな長方形 - 円形の矢印ボタンは単体で添える - 採用バナーは色面を斜めに切って写真と分ける ## Components - **グラデーションピルボタン**（`button-primary`）: 黄橙から赤橙への横グラデ。中央に白い太字、右端に白い矢印を置き、橙の影をつける - **欧文グラデーション見出し**（`heading-en-gradient`）: 赤橙から黄へグラデした太い欧文を置き、右下に墨色の和文副題を添える - **ニュースのタブ**（`tab-pill`）: 選択中のタブはグラデのピルに白文字と小さな丸。それ以外は墨色の文字だけ - **カテゴリタグ**（`news-tag`）: 日付の右に置く小さな長方形タグ。種類ごとにグレー・赤橙・橙で塗り分ける - **写真＋重ねボタンカード**（`photo-card-overlap`）: 角丸の写真の下端にグラデのピルボタンを半分重ねて、リンク先を示す - **アイコン付き白カード**（`icon-link-card`）: 白い角丸カード。左に橙の線画アイコン、中央にラベル、右に円形のグラデ矢印ボタンを置く - **淡グレーの角丸パネル**（`panel-soft`）: IR などの関連リンクをまとめるグレーのパネル。中に写真リンクを縦に並べる - **斜め切りの採用バナー**（`banner-diagonal`）: 左は黄橙→橙のグラデ面に白の欧文大見出し、右は人物写真。境界を斜めに切る ## Do's and Don'ts **Do** - 主ボタンはすべて同じグラデのピル型・矢印付きでそろえる - セクション見出しは欧文グラデと和文副題の組み合わせで統一する - 人物写真は笑顔で明るいものを選び、角丸で切り抜く - 白の余白を十分にとり、橙は要所だけに使う - 筆記体の英字や黄色のリボン曲線で軽い動きを出す **Don't** - 寒色を強調色に使わない - 角が尖ったボタンや線だけのボタンを主 CTA にしない - 背景を橙で広く塗りつぶさない（フッターとバナーだけにする） - 本文に純黒や極端に細い書体を使わない - 写真に強いフィルターや暗いトーンをかけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の使命を伝え、幅広い世代を対象にしていることを示す）: 角丸の人物写真を重ねたコラージュに、黄〜橙のリボン曲線を通す。白帯の上に橙の太字コピーを 3 行載せる 2. **周年メッセージ**（記念の節目と代表の感謝を伝える）: 周年ロゴに筆記体の英字を添え、横にロゴの説明を置く。中見出し、代表の角丸写真、本文、続きを読むボタンの順に並べる 3. **ニュース**（最新の活動を一覧で見せる）: 欧文グラデ見出しの下にピルタブ。日付・タグ・本文・PDF リンクを細線で区切って並べ、最後に一覧ボタン 4. **IR・サステナビリティ**（投資家向けの情報へ誘導する）: 淡グレーの角丸パネルの中に、写真とリンク見出しのセットを 3 つ縦に並べ、最後にボタン 5. **企業理念**（目指す社会像を語る）: 明るい室内の写真を全面に敷き、筆記体の英字、大きな和文見出し、行間の広い本文、ボタンを重ねる 6. **事業紹介**（事業領域ごとの入口を作る）: 角丸の写真カードの下端にピルボタンを重ねて 3 つ並べる。アイコン付きの白カードとまとめボタンを続ける 7. **企業情報**（挨拶・会社概要へ誘導する）: 写真＋重ねボタンのカードを 2 つ並べ、企業情報ボタンで締める 8. **採用バナー**（採用サイトへ送客する）: グラデ面と人物写真を斜めに切り分けたバナーに、白の欧文大見出しを載せる 9. **フッター**（ブランドの締めと規約リンク）: 橙のベタ面に白ロゴと筆記体のスローガン、スラッシュで区切ったリンク、コピーライトを置く ## Imagery - 自然光の明るいオフィスや教室で撮った笑顔の人物写真 - 子ども・学生・社会人・高齢者まで、幅広い世代と多国籍の人物を入れる - 白〜生成りを基調にした高キーの色調 - 黄〜橙のリボン状の曲線を写真の間に通す - 細い線で描いた筆記体の英字を装飾として斜めに置く - アイコンは橙の細い線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はグローバルナビを横一列に置き、右端に縦書きの固定タブを付ける - PC の FV はコラージュを横長に広げ、コピーを 2 行にする - PC のニュースは左にタブを縦に並べ、右に日付・タグ・本文の行を置く - PC の事業カードは 3 列、企業情報カードは 2 列、IR のリンクは 3 列にする - 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-75c2cff3`（元 LP の URL から採番） - **元 LP**: https://www.with-us.co.jp/ - **解析に使った画像**: 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/）からご連絡ください。