10人規模の会社を経営していて、「会社サイトをもう少し見栄え良くしたい」「業務で使う管理画面のデザインを整えたい」と思っているあなたへ。デザインの専門知識もプログラミングの勉強も、今日から必要なくなるかもしれません。
Claude Code（クロードコード、AIがコードを書いてくれるツール）を使えば、日本語で「こんな感じにしたい」と伝えるだけで、プロが作ったような画面が出来上がります。その秘密が、Claude CodeとTailwind CSS（テイルウィンドシーエスエス、ウェブページの見た目を素早く整えるための部品セット）という組み合わせです。
本記事では、この組み合わせを使って非エンジニアがどこまでできるのか、具体的な手順とコツをお伝えします。
図: Claude Code × Tailwind CSS の全体像（画像生成待ち）
Claude Codeが「デザイン担当」になる、という考え方
従来、ウェブページのデザイン修正には3つのコストがかかりました。
- 外注費: フリーランスデザイナーへの依頼で1ページあたり3万〜15万円
- 時間: 依頼から納品まで1〜2週間
- 往復コスト: 「ここをもう少し大きく」「色をもう少し濃く」という修正のたびに追加費用と日数
Claude Codeを使えば、この3つがすべて大幅に削減できます。私が試した感覚では、「ちょっとした画面の修正」なら10〜30分、「新しいページを1枚作る」なら1〜3時間で完成します。費用は月額20ドル（約3,000円）のClaude Proプランのみです。
なぜそんなに早くできるのか。Tailwind CSSという部品セットを使うと、AIへの指示が伝わりやすくなるからです。たとえば「ボタンをオレンジ色にして、マウスを乗せたら少し暗くなるようにして」と日本語で伝えると、Claude Codeは bg-orange-500 hover:bg-orange-600 というコードを返してきます。この部品セットの「単語」がAIにとって扱いやすく、迷いなく正確なコードが出てくるのです。
あなたがTailwind CSSを覚える必要はありません。Claude Codeが代わりに知っているからです。
非エンジニアがClaude Codeでデザインを依頼する3つのコツ
コツ1: 「具体的なイメージ」を言葉にする
抽象的な指示ほど、思っていたものと違う結果が返ってきます。
失敗しやすい指示の例: 「トップページをおしゃれにして」 「もう少しかっこよくして」 「洗練された感じにして」
「おしゃれ」「かっこよく」という言葉はAIには伝わりません。でも「背景色」「文字の大きさ」「余白の広さ」「ボタンの色」は正確に伝わります。
うまくいく指示の例: 「トップページの一番上に、横幅いっぱいのエリアを作ってください。背景は濃いネイビー、中央に大きな見出しと、その下に問い合わせボタンを配置してください。ボタンはオレンジ色で、マウスを乗せると少し明るくなるようにしてください」
コツ2: 参考にしたいサイトのURLを貼る
「このサイト（URL）のトップページの雰囲気に近づけてください」と伝えると、Claude Codeが画面を確認して参考にしてくれます。「言葉でうまく伝えられない」という場合は、参考サイトのURLを添えるだけで大幅に改善します。
コツ3: 修正するファイル名を明示する
Claude Codeは複数のファイルを扱えますが、「どのファイルのデザインを変えるか」を明示しないと、間違ったファイルを修正することがあります。「お問い合わせページ（app/contact/page.tsx）の見た目を変えてください」のようにファイル名も伝えると確実です。ファイル名がわからない場合は「お問い合わせページのファイルを教えてから修正してください」と伝えるとClaude Codeが先に確認してくれます。
実際の依頼例と結果（3つのシナリオ）
図: Claude Code デザイン依頼の流れ（画像生成待ち）
シナリオ1: スタッフ紹介カードを作る（所要時間: 約5分）
依頼文: 「スタッフ紹介ページ用のカードコンポーネントを作ってください。表示する情報は、名前・役職・一言コメント・顔写真の4つです。カードは白背景、角が少し丸く、マウスを乗せると少し浮き上がる演出を付けてください。スマートフォンでも見やすいように対応させてください」
結果: 約2分で、スマートフォン対応のスタッフカードが完成しました。マウスを乗せると自然に浮き上がる演出も、指示通りに実装されていました。手動で同じものを外注すれば1〜3万円、期間は3〜5日かかるところです。
シナリオ2: 問い合わせフォームのデザインを整える（所要時間: 約10分）
依頼文: 「問い合わせフォームの見た目を整えてください。入力欄は角が丸く、クリックしたときにオレンジの枠線が出るようにしてください。送信ボタンはページ幅いっぱいに広げて、目立たせてください」
結果: 10分かからずに、ユーザーが使いやすいフォームデザインに変わりました。入力欄をクリックしたときにオレンジ枠が出るという細かい指示も正確に反映されていました。
シナリオ3: スマートフォン・PC両対応のデザインにする（所要時間: 約30分）
依頼文: 「このサービス紹介ページをスマートフォンで見たときは1列、パソコンで見たときは3列に並ぶようにしてください。文字サイズもスマートフォンは少し小さく、パソコンは大きく表示してください」
結果: 30分ほどで、デバイスに応じてレイアウトが自動切り替わる仕様になりました。自分でゼロから作れば数時間〜丸一日かかる作業です。
うまくいかないときに確認する3つのパターン
Claude Codeにデザインを依頼していると、「指示を出したのに変わっていない」「思っていたのと違う」というケースが出てきます。その多くは以下の3パターンに当てはまります。
図: デザイン依頼：うまくいく指示 vs うまくいかない指示（画像生成待ち）
パターン1: 指示が抽象的すぎる
「もっとかっこよく」「洗練された感じ」は伝わりません。「フォントを大きく（24px以上）」「余白を2倍に広げる」「背景色を薄いグレーに変える」のように、具体的な数字や色で指示すると大きく改善します。
色の伝え方のコツ: 「白っぽい青」よりも「薄い水色（#E0F2FE）」のようにカラーコード（#で始まる6桁の色番号）を指定すると最も正確です。カラーコードは「色 カラーコード」でウェブ検索すると簡単に調べられます。
パターン2: スマートフォン対応が効かない
「スマートフォンで2列にして」という指示が反映されないことがあります。これはTailwind CSSのバージョン（版）の違いによる問題です。Tailwind CSS v4（2024〜2025年にリリースされた最新版）では、スマートフォン向けのデザイン指定方法が一部変わりました。
もし反映されない場合は、以下の1文を追加してください: 「Tailwind CSS v4を使っています。@layer componentsとメディアクエリを使ってスマートフォン対応を書いてください」
難しく聞こえますが、この1文をコピーして貼るだけでOKです。
パターン3: 変更が保存されていない・表示が更新されていない
Claude Codeが修正しても、ブラウザを再読み込みしないと変更が見えないことがあります。Ctrl+Shift+R（Macの場合はCmd+Shift+R）でキャッシュをクリアして再読み込みしてみてください。
デザインの一貫性を保つための「設計書メモ」を作る
ウェブサイトを作り込んでいくと、「このボタンの色はどこかで決めたっけ?」「見出しのフォントサイズが場所によってバラバラ」という問題が出てきます。
これを防ぐために便利なのが、CLAUDE.md（クロードエムディー）というメモファイルです。CLAUDE.mdとは、プロジェクトの「設計書」をClaude Codeに読ませるためのファイルで、ここにデザインのルールを書いておくと、Claude Codeが一貫したデザインでコードを生成してくれるようになります。
書く内容の例（テキストファイルに以下を書いてCLAUDE.mdというファイル名で保存するだけ）:
## デザインルール
ブランドカラー: オレンジ (#D97706)
背景色: 白 (#FFFFFF)
文字色: 濃いグレー (#1F2937)
見出しフォントサイズ: 大=48px、中=32px、小=20px
ボタン: 角丸8px、ホバーで少し暗くなる
余白: 上下パディングは基本32px
このメモを一度作っておけば、次回以降の依頼で「CLAUDE.mdのデザインルールに従って作ってください」と言うだけで、色や形が揃ったコンポーネントが返ってきます。月次で数回デザイン修正が発生する事業者なら、このメモを最初に作る価値は十分あります。
コピペで使えるプロンプト集
以下は非エンジニアの方がそのまま使えるプロンプト（AIへの指示文）のサンプルです。〔〕の中だけ自分の情報に書き換えて使ってください。
ナビゲーションメニュー: 「〔app/layout.tsx〕のナビゲーションメニューを整えてください。ロゴは左、メニューリンクは右に並べてください。背景は白、文字は濃いグレー、現在見ているページのリンクだけ〔オレンジ〕色にしてください」
サービス紹介セクション: 「サービス紹介セクションを作ってください。〔3つのサービス〕をカード形式で横に並べてください。各カードにはアイコン・タイトル・説明文を表示し、スマートフォンでは縦1列に変えてください」
お客様の声（テスティモニアル）: 「お客様の声セクションを作ってください。〔4件〕の声を2列に並べたカード形式で表示してください。各カードには名前・会社名・コメント・星評価を入れ、カードは薄いグレーの背景にしてください」
フッター: 「フッターを作ってください。左に会社名・コピーライト、右にプライバシーポリシー・利用規約のリンクを配置してください。背景は濃いグレー、文字は白にしてください」
外注 vs Claude Code、どちらが向いているか
すべてをClaude Codeで解決できるわけではありません。使い分けの目安を紹介します。
Claude Codeが向いているケース:
- 既存サイトの部分的な改善（「このセクションだけ見栄えを良くしたい」）
- 社内ツール・管理画面の画面デザイン
- ランディングページ1〜3ページの作成
- 試作品やプロトタイプとして素早く形にしたい場合
- 月に数回の定期的なデザイン修正が発生する場合
外注・デザイナー連携が向いているケース:
- ブランドアイデンティティ（会社の顔となるロゴ・カラー・雰囲気）をゼロから構築する場合
- 高度なアニメーションや複雑なインタラクションが必要な場合
- 大規模サイト（50ページ以上）を短期間で一気に構築する場合
月に数ページのデザイン修正が必要な事業者にとっては、デザイナーへの外注費（1回3万〜15万円）と比べて、月額3,000円のClaude Proで多くの作業をカバーできます。
まとめ: デザインはもう専門家だけの仕事ではない
Claude CodeとTailwind CSSの組み合わせは、「デザインは専門家に頼まないと」という常識を変えつつある選択肢の一つです。
今日から実践できる3つのポイントをまとめます。
- 具体的な言葉で指示する（色・サイズ・配置を数字で伝える。カラーコードも活用）
- CLAUDE.mdにデザインルールを書き残す（一貫性が保て、2回目以降の依頼が楽になる）
- うまくいかないときはファイル名とバージョン情報を補足する
まずは小さな一歩から試してみてください。「問い合わせボタンの色をオレンジに変えてください」という1文の指示から始めるだけで十分です。その1文が、デザインへの苦手意識を変えるきっかけになるかもしれません。
