DESIGN.md — 橙グラデと淡グレーのエネルギー企業 LP（Orange Gradient Energy Corporate LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、シンプル・ミニマル
• キーワード: 橙グラデーション・フラットイラスト・四角ドット装飾・折れ線グラフ線・余白多め・法人向け
• 地の質感: ノイズのないフラットな塗り。グラデーションは黄→橙の斜め方向。
• 形: ピル型ボタン、角丸カード、正方形の小さなドット、円形のイラスト台座。
• 温度感: 暖色アクセントと寒色の地を組み合わせた、明るく落ち着いた温度感。

Colors

• 地は白と淡ブルーグレーを交互に使い、セクションを切り替える。
• 橙は黄→橙の斜めグラデーションで、ボタンと大きな訴求帯にだけ使う。
• セクションラベルは橙の小さな四角と橙文字にする。
• グラデーション帯の上のボタンは白地に橙文字に反転させる。
• 2つ目のサービスは青系で色を分け、同じ型を繰り返す。
• 本文は黒ではなく濃いグレーにする。
• button-primary は文字 #FDFAEF × 背景 #F18B01 のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA6201、4.51:1）を使う。
• button-inverse は文字 #EE7502 × 背景 #FFFFFF のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BB5C02、4.52:1）を使う。
• gradient-banner は文字 #FDFAEF × 背景 #F6BB1A のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#926D06、4.55:1）を使う。
• tag-pill は文字 #FDFAEF × 背景 #EE7502 のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BB5C02、4.51:1）を使う。

Typography

• 大コピーは短く改行して、字間を広く取る。
• 見出しは中太にして、太すぎないようにする。
• 本文は行間を約2倍にして読みやすくする。
• サービスの強調コピーだけサービス色で太字にする。
• 見出しの上には必ず四角と小さな橙ラベルを置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は 2 カラム（文章と画像の左右配置）
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約20pxで、左揃えにする。
• ラベル→見出し→本文→ボタンの順を全セクションで統一する。
• 写真は2枚をずらして重ね、非対称にする。
• セクションの間は余白を大きく取る。
• グラデーションのカードは左右の余白内に収め、角丸にする。

Elevation & Depth

• 影はほとんど使わず、色面の差で階層をつける。
• 白カードはグラデーション地や淡グレー地に置き、影なしで浮かせる。
• イラストの人物はカードの外にはみ出させて奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角で、隅に小さな橙の四角を添える。採用バナーの写真は角丸や扇形にする。
• セクション境界: 直線で地の色を切り替える。折れ線グラフ風の細線や丘のイラストで境界をつなぐ。
• ボタンは常にピル型にする。
• 装飾は正方形のドットに統一する。
• イラストの台座は白い正円にする。

Components

• グラデーションのピルボタン（button-primary）: 黄→橙のグラデーションに白文字。右端に小さな白い四角か、外部リンクのアイコンを付ける。
• 白のピルボタン（button-inverse）: 橙の地の上で使う、白地に橙文字のボタン。横幅いっぱいの版もある。
• 四角付きのセクションラベル（section-label）: 小さな橙の正方形と、橙の小さな太字ラベルを見出しの上に置く。
• サービス紹介ブロック（service-block）: ロゴ風の見出し、白い円の中のイラスト、リード文、色付きの強調コピー、本文、ボタンの順に並べる。
• グラデーションの訴求カード（gradient-banner）: 角丸の橙グラデーションカード。白文字の見出しと白ボタンを載せ、人物イラストを下にはみ出させる。
• ニュースの一行（news-item）: 橙のピル型タグ、タイトル、グレーの日付を並べ、下に区切り線を引く。右端に橙の四角を置く。
• カテゴリタグ（tag-pill）: 橙地に白文字の小さなピル型タグ。
• 会社情報の白カード（footer-card）: 淡グレーの地に置いた角丸の白カード。ロゴ、コピー、住所、ビルのイラストを入れる。

Do's and Don'ts

Do - CTA は必ず黄→橙のグラデーションのピル型にする。 - 各セクションの冒頭に、四角付きのラベルを置く。 - 装飾は正方形のドットと細い折れ線を少しだけ散らす。 - イラストはフラットで、人物・建物・発電設備のモチーフにする。 - 余白を広く取り、情報を詰め込まない。

Don't - 強い影や立体的なボタンを使わない。 - 原色の赤や黒い地を使わない。 - 丸いドットやハートなど、可愛い装飾を混ぜない。 - 本文を中央揃えにしない。 - 橙を本文の文字色に多用しない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（企業のビジョンを印象づける）: 白地に字間の広い大コピーを3行。折れ線の装飾、短いリード文、橙の不定形の上に街とエネルギーのイラストを置く。
2. 想い・企業紹介（事業の目的を伝える）: ラベル、2行の見出し、本文、グラデーションボタン。その下に写真2枚をずらして重ねる。
3. 事業内容（サービスのシリーズを示す）: 淡ブルーグレーの地に見出しとボタン。サービスブロックを2つ、色を変えて縦に並べる。
4. 導入事例（お客様の声へ誘導する）: 橙グラデーションの角丸カードに白文字と白ボタン。吹き出しと人物のイラストを添える。
5. ニュース（最新のお知らせを見せる）: タグ・タイトル・日付の一覧を3件と、一覧ボタン。
6. サステナビリティ（社会的責任を示す）: 薄い面のカードに文章とボタン。下に緑の丘と街並みのイラストを敷く。
7. 会社情報（会社概要へ誘導する）: 文章とボタンの下に、ビル写真と人物写真を重ね、ビルのイラストを添える。
8. 採用情報（採用サイトへ誘導する）: グラデーションカードの中に、写真を並べた白いバナーと白文字の見出し、白ボタン。
9. CTA（資料請求・問い合わせ）（資料請求と問い合わせを促す）: 全幅の橙グラデーション帯。アイコン付きの見出し、本文、横幅いっぱいの白ボタンを2組。人物イラストを添える。
10. フッター（会社の情報とナビゲーション）: 淡グレーの地に、角丸の白カードでロゴ・コピー・住所を入れる。

Imagery

• イラストは線のないフラットな塗り。色は青・緑・橙・グレーに限る。
• モチーフは太陽光パネル、風車、工場、ビル、スーツの人物。
• 写真は明るいオフィスで、スーツの社員の自然な表情を撮る。
• 写真の隅に小さな橙の四角を添える。
• 棒グラフや折れ線グラフ風の装飾で、データ感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では文章と写真を左右 2 カラムで配置する。
• PC ではサービスブロックを2つ横に並べ、間に縦線を引く。
• PC ではニュースを左に見出し、右に一覧のレイアウトにする。
• PC では CTA 帯の資料請求と問い合わせを左右に分ける。
• PC のヘッダーには横並びのナビゲーションと橙のボタンを置き、SP ではハンバーガーメニューにする。

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。