DESIGN.md — 白×朱橙グラデのIT企業コーポレートLP（Warm Orange Gradient Corporate Site）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル
• キーワード: 朱橙グラデーション・浮遊する球体・淡いピーチ地・英字セクション見出し・ピル型CTA・余白多め
• 地の質感: フラットな面に柔らかい放射グラデと光沢のある3D球体を重ねる
• 形: 角丸の写真カード、ピル型ボタン、大きな円弧で区切るセクション
• 温度感: 暖色寄りで明るく親しみやすい

Colors

• 地は白と淡いピーチを交互に使い、セクションを色面で区切る
• 強い色は朱橙1色に絞り、ボタン・バッジ・矢印円だけに使う
• 採用節だけ橙の全面グラデーションにして山場をつくる
• 英字大見出しは淡いアプリコット〜橙のグラデ文字で、主張を抑える
• 本文は黒に近い濃グレー。橙地の上も黒文字で読ませる
• 装飾の球体は黄橙〜朱橙の光沢グラデで小さく散らす
• button-primary は文字 #FFFFFF × 背景 #F05A1F のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D3460E、4.51:1）を使う。
• button-small は文字 #F15A1E × 背景 #FFFFFF のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D2450D、4.57:1）を使う。
• badge-category は文字 #FFFFFF × 背景 #F15A1E のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D2450D、4.57:1）を使う。

Typography

• 英字見出しは大きく淡色、日本語見出しは黒太字で役割を分ける
• 本文は行間2倍前後でゆったり組む
• 理念文は短い行を空行で区切り、詩のように並べる
• 見出しは左揃え、ボタンだけ中央配置
• 字間はやや広め（0.05em前後）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フッターのリンクのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右余白は約20px
• セクション頭に英字大見出しを左上に置く
• 各セクション末尾に中央寄せのピル型ボタンを1つ置く
• 写真は左右にずらして2枚重ねるなど非対称に配置
• ニュースは横スクロールのカード
• 画像ギャラリーは大小の角丸写真を散らして並べる

Elevation & Depth

• 影はほぼ使わずフラット
• 球体だけ光沢グラデで立体感を出す
• カードは影ではなく細い橙の枠線で区切る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸長方形。FVは大きな角丸、ギャラリーは小さめの角丸
• セクション境界: 色面の直線切替。会社情報は大きな円弧のグラデ面、メディア節とフッターは上辺を大きく角丸にする
• ボタンは完全なピル型で右端に白い円の矢印
• バッジもピル型
• メディアカードは角丸大きめで橙の細枠

Components

• 矢印付きピルCTA（button-primary）: 朱橙のピル型で中央に白い太字、右端に白い円と橙の細い矢印
• 白い小型リンクボタン（button-small）: 白いピルに橙の文字と橙の丸矢印。会社情報の各行に添える
• 英字グラデ見出し（section-title-en）: 淡いアプリコットから橙へのグラデ文字で大きく左上に置く
• ニュースカード（news-card）: 角丸サムネイル＋日付＋朱橙ピルのカテゴリバッジ＋3行の見出し
• カテゴリバッジ（badge-category）: 朱橙のピルに白い欧文
• 会社情報の行（info-row）: 小さいラベル＋太字の値＋白ピルリンク。行の間は淡い橙の線
• SNSメディアカード（media-card）: 白地に橙の細枠の角丸カード。ロゴ、2行の説明、右に朱橙の丸矢印ボタン
• 浮遊する球体（floating-orb）: 黄橙〜朱橙の光沢球を大小散らし、写真やセクションの境界にまたがらせる

Do's and Don'ts

Do - 強調色は朱橙1色に絞る - セクションの頭は必ず英字の淡いグラデ見出しで始める - ボタンは中央寄せのピル型で右端に丸矢印をつける - 装飾は小さな光沢球体を散らす程度にする - 余白を広く取り、本文は行間2倍で組む

Don't - 寒色を強調色に使わない（プロダクトロゴ以外） - 角の立った四角ボタンや強いドロップシャドウを使わない - 英字見出しを濃い色や黒にしない - 1画面にCTAを詰め込まない（採用節の3つ並びは例外） - 写真を全幅の四角でベタ置きしない

Page Structure

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

1. ヘッダー（ロゴとメニューを示す）: 白地の左にロゴ、右に橙のドットグリッドのメニューアイコン
2. ファーストビュー（企業の姿勢を一言で伝える）: 大きな角丸の人物写真の下半分に2行の黒いキャッチを重ね、球体を散らす
3. カルチャー（理念と組織観を伝える）: 英字見出し、左右にずらした2枚の写真、空行区切りの理念文、ピルCTA
4. プロダクト（主力サービスの紹介）: 淡いベージュの放射グラデ地にロゴ、2行見出し、説明、PCとスマホのモックアップ、CTA
5. 写真ギャラリー（活動の様子を見せる）: 白地に大小の角丸写真を散らして横に流す
6. ニュース（最新のお知らせ）: ピーチ地に横スクロールのカード、日付とバッジ、CTA
7. 会社情報（基本情報を示す）: 左の大きな橙グラデの円弧の上に、線で区切った情報行と小型リンクを置く
8. 採用（採用への導線）: 全面の橙グラデ地に集合写真、2行見出し、説明、ピルCTAを3段
9. メディア（SNS・ブログへの誘導）: 上辺が大きく角丸の白い面に、橙枠のカードを2枚縦に並べる
10. フッター（サイトマップと補足リンク）: ピーチ地にロゴ、キャッチ、黒丸のSNSアイコン、2カラムのリンク一覧、コピーライト

Imagery

• 自然光の明るいオフィスで笑顔の社員を撮った写真
• 白っぽく少しハイキーで暖かい色調
• 集合写真や登壇風景でチームらしさを出す
• プロダクトは白いデバイスのモックアップで見せる
• 光沢のあるオレンジ球体の3D装飾を浮かせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFV写真をほぼ全幅の横長にし、ナビをその下に横並びで置く
• PCのカルチャー節は左に本文、右に写真と英字見出しの2カラム
• PCのプロダクト・採用節はテキストと画像の左右2カラム
• PCのニュースは3枚横並び、会社情報は表形式の行
• PCのメディアカードは2枚横並び、フッターは左にロゴ・右に多列リンク

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 行書くと起動時に読み込まれる。