DESIGN.md — 黄×墨グレーのラベルソフト配布 LP（Yellow Label Grayscale Software Download LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: シンプル・ミニマル、信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: ラベルテープの黄色・墨色の見出し帯・白カード積み・グレーの段階変化・製品写真と UI 画面
• 地の質感: フラットで影なし。グレーの面と白カードの明度差だけで階層を作る。
• 形: 角丸 16px 前後のカード、太い黒枠の黄色ボタン、番号バッジ。
• 温度感: やや寒色寄りのニュートラル。黄色で明るさを足す。

Colors

• 地はライトグレーにし、内容は白カードに載せる。
• 黄色はラベルテープの色として、CTA・番号バッジ・選択中のタブ・数字の下線だけに使う。
• セクション見出しは墨色の角丸帯に白文字を載せる。
• 下へ行くほど地のグレーを #F0→#E0→#D0→#C0→#50→#40 と段階的に濃くする。
• 濃いグレーの帯では見出しの下線と注意書きを黄色にする。
• 図解では青を使い、操作の流れをはっきり見せる。

Typography

• 見出しは太字ゴシック。装飾的な書体は使わない。
• セクション見出し帯の右下に、小さな英字のサブ見出しを灰色で添える。
• 強調したい数字は大きく太くし、黄色の下線を引く。
• CTA の上には斜線で挟んだ短い一言を手書き風に添える。
• 本文は 13px 前後で行間を 1.8 程度にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長カードを 2 カラムまたは文章と写真の左右配置にする。
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算）
• 白カードは画面端から 12px 内側に置き、カード同士は 24px あける。
• 大セクションの間は 40px 前後あけ、地のグレーの濃さを切り替える。
• 特長カードは番号バッジ＋見出し→本文→写真またはカルーセルの順に並べる。
• 仕様表は項目名と値を縦に積み、細線で区切る。
• 長い表は途中で切り、『全てを見る』ボタンで開く。

Elevation & Depth

• 影はほぼ付けず、地とカードの明度差で階層を出す。
• 固定のお知らせバナーだけ、太い黒枠で浮かせて見せる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 16px 前後の長方形に切り抜く。
• セクション境界: 直線で区切り、地のグレーの濃さだけを切り替える。
• 主 CTA は黄色の面に 2px の黒枠を付け、角丸 8px にする。
• サブボタンは白い面に黒枠、右端に外部リンクのアイコンを付ける。
• 番号バッジは黄色の角丸四角に黒枠。左上に黒い小さなタグを重ねる。
• 新機能のバッジは黄色の波形の円にする。

Components

• 黄色の主 CTA（button-primary）: 黄色の面に黒枠と黒の太字。左に下向きの矢印を付ける。
• 外部リンクボタン（button-outline）: 白い面に黒枠。中央に文字、右に外部リンクのアイコン。
• 墨色の見出し帯（section-heading-bar）: 幅いっぱいの角丸帯。左に白の大見出し、右下に灰色の英字サブ見出し。
• 特長の番号バッジ（feature-number-badge）: 黄色の角丸四角に黒枠と 2 桁の数字。上に黒い『特長』タグを重ねる。
• 白の特長カード（feature-card）: 大きな角丸の白カード。番号と見出し、本文、写真カルーセルを入れる。
• バー型のインジケーター（carousel-indicator）: 短い横棒を並べる。選択中は黄色、それ以外は墨色。
• カテゴリタブ（category-tab）: 横にスクロールするピル型のタブ。選択中は黄色、それ以外は薄灰。
• 新機能の波形バッジ（starburst-badge）: 黄色の波形の円に黒の太字を 2 行と小さな矢印。
• アンケート付きダウンロードフォーム（download-form）: 薄灰の箱にラジオボタンとセレクト、無効時は灰色になるダウンロードボタン。
• 履歴アコーディオン（accordion）: 薄灰の行の右端に細い＋アイコン。上下を細線で区切る。

Do's and Don'ts

Do - 黄色は CTA と番号・強調だけに絞って使う。 - セクションごとに墨色の見出し帯と英字のサブ見出しを付ける。 - 機能は番号付きの白カードで 1 つずつ見せる。 - UI 画面と、ラベルを貼った実物の写真をセットで載せる。 - 技術的な仕組みは青いブロックの図解で示す。

Don't - 黄色を広い背景に使わない。 - 強い影やグラデーションを付けない。 - カードの角丸を小さくしすぎて事務的にしない。 - 黄と青以外の鮮やかな色を増やさない。 - 注釈を本文と同じ大きさにしない。

Page Structure

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

1. ヘッダー（ナビゲーションと DL への導線）: 左にロゴ。墨色の角丸ナビの中に項目を並べ、右端に黄色のダウンロードボタンを置く。
2. ファーストビュー（何をするソフトかを一言で伝える）: オフィス写真を薄く敷き、大きなキャッチとロゴを置く。下に本体と PC を線でつないだ絵。
3. 導入文と CTA（概要を伝えて DL を促す）: 短い導入文の横に新機能の波形バッジ。斜線で挟んだ一言の下に黄色の CTA。
4. 対象機種（使える機種を示す）: 白カードの中に、型番をスラッシュ区切りで中央揃えに並べる。
5. 特長（機能の訴求）: 番号付きの白カードを 7 枚縦に積む。写真のカルーセル、タブ、数字の強調を混ぜる。
6. 開発者向け情報（API 連携・一括導入の説明）: アイコン付きの見出し、連携先のロゴ、青ブロックの構成図、外部リンクボタン。
7. 仕様（動作環境の提示）: 項目名と値を縦に積む表。途中で切って『全てを見る』ボタンで開く。
8. アップデート情報（最新版の変更点）: バージョンと日付の見出し、スクリーンショットの箱、履歴のアコーディオン。
9. ダウンロード（アンケート付きでソフトを渡す）: 注意事項、ファイル情報、薄灰の箱に入ったフォーム、取扱説明書へのボタン。
10. 説明動画（インストールの手順を補う）: 濃いグレーの地に、色違いのサムネイルカードを横スクロールで並べる。
11. よくある質問・その他（FAQ への導線と旧版の案内）: 濃いグレーの地に黄色の下線付き見出し。灰色セルの表とリンク一覧。
12. フッター（ブランドの表示）: 黒の地に白いロゴを左右に置き、コピーライトを小さく添える。

Imagery

• 実際の現場（ヘルメット、封筒、倉庫、配線、メニュー）にラベルを貼った様子を、明るく浅い被写界深度で寄って撮る。
• ソフトの UI 画面のキャプチャを写真に重ねて合成する。
• ピクトグラムは黒の太線で、角丸の枠に収める。
• 図解は青い角丸ブロックと灰色の矢印でフラットに描く。
• 人物はシンプルなフラットイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 70% にして中央に寄せ、地のグレーを左右に見せる。
• PC の特長は、文章と写真の左右 2 分割、または 2 枚のカードの横並びにする。
• PC の仕様表は、項目名と値を左右に並べる。
• PC の説明動画カードは 3 列のグリッドにする。
• PC のダウンロード部は、ファイル情報とフォームを左右に並べる。

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