DESIGN.md — 濃紺×青光のガラス調ダッシュボード開発LP（Dark Navy Glassmorphism Dashboard Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、信頼・誠実、シンプル・ミニマル
• キーワード: ダークUI・グラスモーフィズム・青い光彩・ダッシュボードモック・英字ラベル
• 地の質感: ほぼ黒の濃紺地に、青い放射状グロウと半透明カードの淡いハイライトを重ねる。
• 形: 角丸16〜24pxのカードと、細い白縁の半透明パネル。ラベルはピル型。
• 温度感: 寒色で、静かで知的な印象。

Colors

• 地はほぼ黒の濃紺にし、セクションの切り替えは紺の明るさだけで行う。
• 青いグロウは見出しの上やセクション境界に放射状に置き、明るい点光源のように見せる。
• 強調色は青系だけにし、暖色は画面モック内の警告表示以外では使わない。
• カードは地より少し明るい半透明の紺に、白10〜20%の細い縁をつける。
• 作品ギャラリーは水色パネルの上にダーク画面を載せ、コントラストを出す。
• 本文は純白にせず、淡いグレーにする。

Typography

• 見出しは細めのゴシックで中央揃えにし、太字はカード見出しだけに使う。
• 日本語見出しの上に、英字1〜2語の小さなピルラベルを置く。
• 英字の大見出しは細いウェイトで大きく左寄せにし、右端に小さな英字サブを添える。
• 強調コピーは水色の文字で、文の一部を少し明るくしてグラデーション風に見せる。
• 本文は11px前後で行間を1.8にし、詰め込まない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは悩み・解決カードを3カラム、デザイン特長を画像と文の左右交互にする
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右12px前後の余白で、ほぼ全幅に置く。
• セクションの冒頭は、ピルラベル→見出し→リード文の順で中央に積む。
• フローは番号＋英字ステップ名＋説明＋期間タグを縦に並べる。
• 作品ギャラリーは角丸の大パネルに、複数の画面モックを重ねて配置する。
• FVと作品紹介は、画面モックを横に並べて左右にはみ出させる。

Elevation & Depth

• カードは影を使わず、半透明の面と1pxの明るい縁で浮かせる。
• 背景には青い放射状のグロウやスポットライトを置き、奥行きを出す。
• 画面モックは柔らかい黒い影で、地から浮かせる。
• CTAボタンは内側がほのかに光るガラス調にする。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真や画面は角丸12〜16pxの長方形で切り抜く。
• セクション境界: 直線で切り替える。一部は青い光の弧で区切る。
• ラベル・タグ・CTAはすべてピル型にする。
• 大パネルは角丸24pxで、内側にさらに角丸の画面を載せる。
• 区切りには下向きの小さな三角を使い、結果ボックスへの流れを示す。

Components

• ガラス調問い合わせボタン（button-primary）: ほぼ全幅のピル型。半透明の青に明るい縁をつけ、中央に白文字を置く。
• ヘッダー問い合わせボタン（button-header）: 右上に置く小さなピル型。濃紺の面に細い縁をつける。
• 英字ピルラベル（section-label）: 見出しの上に置く、英字の小さなタグ。
• ガラス風悩みカード（card-glass）: 上に青い3Dアイコン、続けて太字見出しと説明文を中央に置く。半透明の面に細い縁をつける。
• 結果ボックス（result-box）: チェックアイコンと英字ラベルの下に、成果の文を置く。重要語は太字にする。濃紺の帯で、縦縞のグラデーションをつける。
• チェック付き特長タグ（check-tag）: 丸いチェックの横に、短い特長名を並べたピル型タグ。
• フローのステップ（step-item）: 括弧付きの小さな番号を青で、英字ステップ名を大きく並べる。下に説明と期間タグを置く。
• 作品ギャラリーパネル（gallery-panel）: 水色の大きな角丸パネルの上に、ダーク画面のモックを重ねて置く。

Do's and Don'ts

Do - 地は濃紺〜黒で統一し、明るさは青い光とガラスカードで出す。 - 見出しの前に、必ず英字の小ラベルを置く。 - 成果はチェックアイコン付きの結果ボックスで示し、重要語を太字にする。 - 画面モックを主役のビジュアルにして、実例の量を見せる。 - 余白を広く取り、1セクションに1つのメッセージを置く。

Don't - 白地や明るい背景のセクションを長く続けない。 - 赤やオレンジをボタンや見出しに使わない。 - 太く重いゴシックで見出しを大きくしすぎない。 - カードに濃いドロップシャドウをつけない。 - イラスト調・手書き調の装飾を入れない。

Page Structure

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

1. ファーストビュー（提供価値を一言で伝える）: 上部に青い光を置き、中央に2行の白見出しを置く。下に画面モックを横並びではみ出させる。
2. 悩みの提起（データ活用の課題に共感を得る）: ピルラベルと見出しの下に、3Dアイコン付きのガラスカードを3枚並べる。
3. 課題のまとめ（課題の広がりを強調する）: 水色の強調文字で、4行の中央揃えコピーを置く。
4. 解決策（提供ソリューションの効果を示す）: リード文の後に、カード3枚を並べる。各カードは見出し→図解→説明→下三角→結果ボックスの順。
5. デザインの特長（設計思想を3つ伝える）: 写真、見出し、チェック付きタグ、説明の順で縦に3回繰り返す。PCでは左右交互にする。
6. 開発フローとスケジュール（進め方と期間を示す）: 紺地に4ステップを番号付きで並べ、期間をピル型タグで添える。
7. 制作事例（企画・設計）（実績の質を見せる）: 英字の大見出しの下に、水色パネルに重ねた画面モック群を置く。
8. 制作事例（デザイン・階層表示）（利用者別の画面設計を示す）: ラップトップのモックと、利用者別のレイヤー画面を、ピルラベル付きで縦に並べる。
9. 実績一覧（事例の幅を見せる）: 黒い角丸パネルの中に、英字見出しと横スクロールの画面カードを置く。
10. CTA（問い合わせへ誘導する）: 暗くした画面モックの背景に光を当てる。ラベル・見出し・一言・ガラス調ボタンを中央に置く。
11. フッター（ナビと規約を示す）: 黒地にロゴ・英字ナビ・区切り線・規約リンク・著作権表記を中央に積む。

Imagery

• ダークUIのダッシュボード画面を主役にする。数値・ドーナツグラフ・地図・ネットワーク図を入れる。
• 画面モックは斜めに傾けたり重ねたりして、奥行きを出す。
• アイコンは青のグラデーションと半透明を使った3D風にする。
• 写真は青みの強いオフィスや手元のシーンにし、寒色に色補正する。
• 背景には青い光のにじみや、地平線のような光の弧を置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは悩みカードと解決カードを3カラムにする。
• PCではデザイン特長を、画像と文の左右交互の2カラムにする。
• PCではフロー4ステップを横一列に並べる。
• PCでは英字大見出しの横に、日本語リードを並べる。
• PCではヘッダー中央にピル型のナビを置く。CTAボタンは中央の幅狭ピルにする。

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