DESIGN.md Guide
DESIGN.md活用ガイド
好きなデザイン方向を選び、AIに一貫したUIを作ってもらう方法
WHAT IS DESIGN.md
AIに読み込ませるためのデザイン仕様書
DESIGN.mdは、色、フォント、余白、角丸、ボタン、カード、見出し、写真、モーションなどをMarkdownでまとめたデザインルールです。 Claude CodeやChatGPTにLPやWebサイトを作らせるとき、設計プロンプトと一緒に渡すことで、画面ごとの見た目がぶれにくくなります。
Page Blueprint Studio
目的、ターゲット、コピー、構成、集客導線を設計する。何を誰にどう伝え、どの行動へ進めるかを決める場所です。
DESIGN.md
色、フォント、余白、角丸、ボタン、カード、見出し、写真、モーションなど、見た目とUIルールを指定する仕様書です。
HOW TO USE
基本の使い方
01
このサイトで設計プロンプトを作る
目的、ターゲット、商品理解、コピー型、ブロック構成、集客導線を整理します。
02
DESIGN.mdを選ぶ
外部または内部のDESIGN.mdから、業種と読者に合う見た目の方向を選びます。
03
AIに一緒に渡す
設計プロンプトとDESIGN.mdをClaude CodeやChatGPTへ渡し、一貫したUIで実装してもらいます。
EXTERNAL RESOURCES
おすすめ外部リソース
Awesome DESIGN.md
DESIGN.mdやAI向けデザイン仕様書の参考を探す入口。
Awesome Design MD JP
日本語サイトや日本市場向けのデザイン仕様を探すときの参考。
Design AI Systems
AIにデザインシステムを読み込ませる前提のルール設計に向く。
Awesome Claude Design
Claude Codeへ渡すデザイン指示やUIルールの参考。
Aura Design Systems
洗練感、余白、コンポーネントルールを整理したいときの参考。
SELECTION CRITERIA
デザイン選びの基準
誰に見せるか
高級感か親しみやすさか
業種に合っているか
写真中心かテキスト中心か
CTAを強く見せるか信頼形成を重視するか
日本語の文字量に耐えられるか
LP TYPE FIT
LPタイプ別おすすめ方向
専門サービス・相談導線向け
白、ネイビー、ミント、人物写真、代表紹介、予約・問い合わせ導線。強い煽りより安心と相談しやすさを優先。
セミナー・講座向け
講師の信頼、学べる内容、参加後の変化、実績、FAQを読みやすく。情報商材臭を抑える。
SaaS・Webサービス向け
UIスクリーンショット、機能からベネフィットへの翻訳、導入ステップ、料金、無料登録CTA。
高単価サービス向け
証拠、実績、対象者条件、保証、個別相談導線。余白と落ち着いた配色で信頼を作る。
コミュニティ向け
参加者の雰囲気、活動内容、安心できる参加条件、継続価値。過度な盛り上げより実態を見せる。
店舗・地域密着向け
写真、アクセス、営業時間、口コミ、スタッフ紹介、予約や電話導線。スマホで迷わないことを優先。
CAUTION
使うときの注意点
ライセンスを確認する
商用利用できるか確認する
特定ブランドの完全模倣は避ける
ロゴや固有名詞は使わない
日本語LP向けに余白・行間・改行を調整する
DESIGN.md WORK
使うDESIGN.mdを整理する
参照するDESIGN.mdの名前、方向性、守るルール、調整してよい範囲を保存すると、Prompt Builderに反映されます。