DESIGN.md × Claude Code 導入支援

デザインは
センスではなく、
科学です。

Fittsの法則・コントラスト比4.5:1——測定可能なルールをDESIGN.mdに書いてClaude Codeに渡すだけ。コードなし・デザイン知識なしでプロ品質のWebが出来上がります。

相談無料・オンライン対応 · 初回60分

デザインワークスペース
生成時間
10分で完成
コントラスト比
4.7:1 PASS
70%
プロンプト長の削減
4.5:1
コントラスト比(WCAG AA)
9
DESIGN.mdのセクション数
0
行のコーディング
DESIGN.md·デザインは科学·Fittsの法則·プロンプト70%削減·Claude Code·コントラスト比4.5:1·コーディング不要·CLAUDE.md·ゲシュタルトの法則·F字視線パターン·センスより科学·
DESIGN.md·デザインは科学·Fittsの法則·プロンプト70%削減·Claude Code·コントラスト比4.5:1·コーディング不要·CLAUDE.md·ゲシュタルトの法則·F字視線パターン·センスより科学·
困っているマーケター
よくある声
「なんか素人っぽく
なった…」

こんな状況、
心当たりはありますか?

設計書なしでは、AIは統計的に最も無難なデザインを出力します。それが「素人っぽさ」の正体です。

よくある悩み 01

「Claude Codeで作ったらなんか素人っぽくなった」

設計書なしでは、AIは学習データの統計的平均を出力します。

よくある悩み 02

「毎回200文字のプロンプトを書き直している」

DESIGN.mdがあれば、プロンプトは6文字で済みます。

よくある悩み 03

「ページを増やすたびにトーンがバラバラになる」

設計書があれば、何ページ作っても同じトーンが保たれます。

3点セットで
プロ品質を自動化する

DESIGN.md・CLAUDE.md・Claude Codeの組み合わせで、コーディングもデザイン判断もAIが担います。必要なのは設計書を書くことだけです。

DESIGN.md — デザイン設計書
📄

DESIGN.md

デザインの科学を書いた設計書。色はhexコード、フォントは固有名、余白はpx。曖昧な言葉はゼロ。

Google Stitch 2.0 対応
CLAUDE.md — 自動命令書
⚙️

CLAUDE.md

「UIを実装する際は必ずDESIGN.mdを参照せよ」という自動命令書。一度設定すれば以降ずっと有効です。

プロンプト70%削減
Claude Code — 会話でWebを作る
💬

Claude Code

会話するだけでWebサイトが生成されるツール。コードは1行も書きません。DESIGN.mdのルールに従い、毎回一貫したプロ品質を出力します。

コーディング不要

3ステップでプロ品質のWebが生まれる

センスも、コードも、Figmaも不要。必要なのは設計書を書く30分だけです。

01

DESIGN.mdを書く

色のhexコード、フォント名、余白のpx。最初は3セクションだけ。所要時間は30分。

Color: #D97757 Font: Noto Sans JP Button: 48px以上
02

CLAUDE.mdに命令を追記

「UIを作る際はDESIGN.mdを必ず参照せよ」。これを一度書けば、以降ずっと有効です。

Always read DESIGN.md when building UI.
03

Claude Codeに話しかける

「LPを作ってください」の6文字だけ。DESIGN.mdのルールに従いプロ品質が出力されます。

「LPを作ってください」

導入した方の

コードもデザインも未経験のビジネスパーソンが、DESIGN.md × Claude Codeで変わった事例です。

「毎回エンジニアにお願いしていたLPを、自分で10分で作れるようになりました。プロンプトの6文字という感覚がまったく信じられなかったです。」

田中様
田中 美香 様
マーケティング部長 / 食品メーカー

「チームのプロンプト長が導入後に70%削減されました。DESIGN.mdを共有するだけで、メンバー全員が同じ品質でWebを作れるようになっています。」

山田様
山田 拓也 様
事業企画マネージャー / IT企業

「デザイナーを頼まずに新サービスのLPを自社で作りました。DESIGN.mdがあれば、ブランドの一貫性が勝手に保たれるのが本当に助かります。」

小林様
小林 さやか 様
代表取締役 / スタートアップ

デザインのルールは
すべて数値で定義されている

センスではなく、測定可能な法則の集合体。ルールを知っていれば、誰でも同じ結果が再現できます。

01
Fittsの法則
ターゲットが大きく・近いほど、人はクリックしやすい
02
ゲシュタルトの法則(近接)
近くにある要素は、同じグループに見える
03
F字視線パターン
人は画面を左上から右、次に左下へF字型に読む
04
コントラスト比 4.5:1
WCAG AA基準。これを下回ると文字が読みにくくなる
デザイン分析画面
DESIGN.mdなし
背景色は白にして、メインカラーは青系にして、フォントはゴシック体で、ボタンは角丸にして、余白は適度に取って…
約 200文字
DESIGN.mdあり
「LPを
作って
ください」
6文字

設計書が自動参照されるため、プロンプト長が70%削減されます。

センスは不要です。
ルールを設計書に書いて、
AIに渡すだけです。

初回60分の無料相談で、あなたのプロジェクトに最適なDESIGN.md × Claude Code導入プランを設計します。

オンライン対応 · 相談無料 · 当日からでも受付中