Claude Codeでモック作り - AIと一緒に爆速プロトタイピング

はじめに#

新機能のUI検討を素早く進めたい時、フレームワークの足場作りやビルド設定に時間をかけたくありません。本記事では、Claude Codeと1枚のHTMLファイルだけでモックを爆速で作る方法を紹介します。 TailwindCSS CDNを使うことで、ゼロからでも即座にそれっぽいUIを組み上げ、複数案を短時間に試せます。

Claude Codeを契約していない方でも、claude.aiで無料で同様の体験が可能です。

本ブログの方針（ガイドライン駆動・小さく作って検証）にも合致する、軽量で実務的なアプローチです。

なぜTailwindCSS？モックアップに最適な理由#

プロトタイピングにTailwindCSSを選ぶ理由は明確です。

AIとの相性が抜群: クラス名だけで完結するため、AIへの指示が簡潔かつ明確になる
ゼロ設定で即開始: CDN一行で環境構築完了、CSSファイル不要
デザインシステム内蔵: 統一感のある余白・色・タイポグラフィが自動的に適用される
レスポンシブ対応が簡単: sm:、md:、lg:プレフィックスで画面サイズ別の調整が直感的
再現性が高い: 同じクラス名なら誰が書いても同じ見た目になる

特にAIとの協働では、「padding: 16px」より「p-4」のような標準化された指示の方が、意図が正確に伝わります。

準備：1枚HTML + TailwindCSS CDN#

まずは最小構成のHTMLを用意します。ローカルにmock-variant-a.htmlのような名前で保存します。 TailwindはCDNを読み込むだけでOKです。

ポイント

Tailwindは<script src="https://cdn.tailwindcss.com"></script>だけ。PostCSSや設定ファイルは不要。
proseユーティリティ（typographyプラグイン相当）風の表現も、CDN版のtypographyを有効化すれば利用可能。
まずは「形」を最短で作り、後で整える前提で進めます。

なぜClaude？AIモデルによるデザイン能力の違い#

AIモデルにはそれぞれ得意・不得意があります。特にUI/UXデザインの領域では、Claudeモデル（Sonnet、Opus）が優れた能力を発揮します。デザインの美的感覚、レイアウトバランス、色彩の調和など、視覚的な判断が必要なタスクでClaude Codeを選ぶことで、より洗練されたモックアップが期待できます。

実践例：様々なUIコンポーネントを即座に生成#

例1: ダッシュボードのプロンプト#

TailwindCSSでモダンなダッシュボードのモックを作って。
KPIカード、グラフエリア、アクティビティフィードを含む。
ダークモード対応で。

例2: ECサイトの商品カード#

ECサイトの商品カードコンポーネントを3パターン作成。
画像、価格、レビュー星、カートボタンを含む。
ホバーエフェクトあり。

例3: チャットUIのプロンプト#

Slack風のチャットUIモックを作成。
左サイドバー、メッセージエリア、入力欄。
メッセージは吹き出し形式で。

例4: 管理画面のテーブル#

管理画面用のデータテーブルを作成。
ソート、フィルター、ページネーション付き。
行選択とアクションボタンも。

これらのプロンプトをClaude Codeに投げるだけで、プロ品質のUIモックが数秒で生成されます。複数案を短時間で比較検討でき、最適なデザインを選んで本実装に進めます。

実務での使い所#

仕様が曖昧な段階でのUIたたき台作成
ステークホルダー合意形成のための選択肢提示
実装前のレイアウト難所の検証（長文・可変要素・スクロール挙動）

効果的なプロンプトの書き方#

具体的な要素を列挙: 「ヘッダー、サイドバー、フッター」など
デザインの雰囲気を指定: 「モダン」「ミニマル」「エンタープライズ向け」
技術的な要件を明記: 「レスポンシブ」「ダークモード」「アクセシビリティ配慮」
参考にしたいサービス名: 「Notion風」「Stripe風」など

まとめ#

フレームワーク不要、HTML 1枚で開始
Tailwind CDNで即スタイリング
Claude Codeに具体プロンプト → 複数案を瞬時に
良い案だけを本実装（Astro/Tailwind）へ移植

このやり方は、小さく作って確かめる本ブログの流儀に合致します。まずは1つ、今日の案件で試してみてください。