GUIDE

使い方

design.md は、Web サイトの見た目の要点（色・書体・余白・部品・構成）を、AI ツールが読める形でまとめた設計書です。Google が提唱した DESIGN.md の形式に、日本の LP 向けの章（セクション構成など）を足しています。

基本の流れ

一覧から、作りたい LP に近い業種・雰囲気の事例を選びます。
詳細ページで「design.md をコピー」または「ダウンロード」します。
AI ツールに design.md を渡し、作りたい商品・サービスの情報と一緒に依頼します。

依頼の例

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

ツール別の渡し方

Claude Code: プロジェクト直下に DESIGN.md として置き、CLAUDE.md に @DESIGN.md と 1 行書くと、起動時に読み込まれます。
Cursor: チャットで @DESIGN.md と指定するか、プロジェクトのルールに「DESIGN.md に従う」と書きます。
Bolt: チャットにファイルを添付してプロジェクト直下に保存させ、Knowledge に「DESIGN.md を参照する」と書きます。
Lovable: デザインシステムの設定に design.md の内容を取り込みます（有料プランの機能）。
Figma Make: guidelines/Guidelines.md に design.md の内容を入れます。
v0・ChatGPT・Claude（Web 版）: チャットに design.md の全文を貼るか、ファイルを添付して依頼します。

うまく使うコツ

素材は自社のものに。design.md は見た目の「型」だけを書いたものです。元の LP のロゴ・写真・文章・商品名は使わないでください。
トークンをそのまま使う。YAML の色・書体・角丸・余白は、CSS 変数や Tailwind の設定に変換して使えます（公式ツール: npx @google/design.md export）。
コントラストに注意。日本の LP には、白文字×明るい色のボタンなど、読みやすさの基準（WCAG AA）に届かない配色がよくあります。design.md に補正値（-accessible）がある場合は、通常の大きさの文字にはそちらを使ってください。
書体は近いものの提案です。書体名は画像から推定した、近い印象の Web フォントです。