AIでプロ品質のUIを作る方法｜非デザイナー向け実践ガイド
AIでデザインの品質が低いと感じるのは、AIの能力不足ではなく「使い方」の問題です。Claude Codeやその他のAIツールでUI作成を行う際、適切な指示の出し方を知っているだけで、デザインの仕上がりは劇的に変わります。
私は受託でWebサイトやアプリのUI開発を行っていますが、デザイン調整は基本的に全てAIで行っています。Photoshopを開くことはほぼありません。それでも「プロが作ったように見える」と言われるレベルのUIを納品できています。
この記事では、非デザイナーでもAIを使ってプロ品質のUIを作るための実践手法を、私の開発現場での経験をもとに解説します。
「AIはデザインが苦手」が誤解である理由
「AIにデザインを任せると、ダサいものしかできない」という声をよく聞きます。しかし、これはスキルイシュー（使う側の技術不足）です。
典型的な失敗パターンを見てみましょう。
- 「いい感じのランディングページを作って」
- 「おしゃれなヘッダーにして」
- 「モダンなデザインで」
このような曖昧な指示では、AIは「平均的なデザイン」しか出力できません。人間のデザイナーに同じ指示を出しても、期待通りの結果にはならないでしょう。問題はAIではなく、指示の出し方にあります。
逆に、構造化された具体的なフィードバックを与えた場合、AIのデザイン出力は驚くほど改善します。私の経験では、指示の具体性が10倍になれば、デザインの品質も10倍になるという感覚です。
つまり「AIはデザインが苦手」ではなく、「曖昧な指示に対してAIは曖昧なデザインを返す」が正確な表現です。ここを理解するだけで、AIデザインへのアプローチが根本的に変わります。
AIデザインの品質を上げる5つの実践手法
ここからは、私が実際の開発現場で使っている具体的な手法を紹介します。どれも特別なデザインスキルは不要で、非デザイナーでもすぐに実践できるものです。
1. マルチモーダル指示 ── スクリーンショットを活用する
現在のAIツール（Claude Code、Cursor、ChatGPTなど）は、スクリーンショットや参考画像を直接貼り付けて指示できるマルチモーダル機能を備えています。これがAIデザインの品質を上げる最大の武器です。
言語だけで「余白をもう少し広げて、ボタンの角を丸くして、背景をうすいグレーに」と伝えるより、スクリーンショットを撮って「ここのこの部分」と指し示す方が圧倒的に正確に伝わります。
私が日常的に使っている方法は以下の3つです。
- 現状のスクリーンショット + 修正指示: 「このスクショの赤枠の部分、余白を上下24pxに変更して」
- 参考サイトのスクリーンショット: 「このサイトのヘッダーのレイアウトを参考にして」
- 再現したいデザインに近いコード: 既存のCSSやHTMLを見せて「この雰囲気を踏襲して」
重要なのは、「どれだけ詳細に自分のイメージを伝えられるか」です。AIは超高速で作業するジュニアデザイナーだと考えてください。指示が曖昧なら曖昧な結果が返ってきますし、具体的なら具体的な結果が返ってきます。
2. DESIGN.mdでデザインガイドラインを定義する
最近、X（旧Twitter）のエンジニア界隈でDESIGN.mdというアプローチが話題になっています。デザインガイドラインをMarkdownファイルにまとめてAIに読み込ませ、一貫したデザインを出力させる手法です。
私自身は、このアプローチを以前から実践しています。ただし「DESIGN.md」というファイル名ではなく、CLAUDE.md（プロジェクトの設定ファイル）やrules/配下にコーディングルールとして記述しています。
たとえば、私のあるプロジェクトでは以下のようなルールを定義しています。
- CSS変数:
--cc-accent: #e67e22（アクセントカラー）、--cc-text-main: #4a2c2a（本文色） - フォント指定: セリフ体とモノスペースの使い分けルール
- アイコン: 絵文字禁止、SVGフラットアイコンのみ使用
- 背景効果: Three.js +
backdrop-filter: blur()のフロストガラス効果
これらをプロジェクトルートに置いておくと、AIがコードを生成するたびに自動的にガイドラインを参照します。結果として、ページごとにデザインがバラバラになる問題が解消され、プロジェクト全体で統一感のあるUIが維持されます。
DESIGN.mdの書き方についてさらに詳しく知りたい方は、以下の記事が参考になります。
ポイントは、プロンプトで毎回デザインを指示するのではなく、ガイドラインを一度定義してAIに準拠させること。これにより、「毎回デザインの指示を繰り返す」手間がなくなり、トータルの作業コストが大幅に下がります。
3. 数値で指示する ── 曖昧な指示を排除する
デザインの品質が低くなる原因の大半は、曖昧な指示にあります。以下の比較を見てください。
- 悪い例: 「余白をもう少し広げて」 → AIは何pxにすべきかわからない
- 良い例: 「
padding: 32px 24pxに変更して」 → 明確に実行できる
- 悪い例: 「文字を少し大きく」 → どのくらい？
- 良い例: 「h2を
font-size: 28px、line-height: 1.4に」 → 迷いなく反映
- 悪い例: 「もっと明るい色に」 → 何色？
- 良い例: 「背景を
#F5F5F0に変更」 → 一発で完了
色・余白・フォントサイズ・角丸（border-radius）・影（box-shadow）など、デザインの要素は全て数値で表現できます。数値で指示する習慣をつけるだけで、AIの出力精度は飛躍的に上がります。
「でも、適切な数値がわからない」という方もいるでしょう。その場合は、参考にしたいサイトのデベロッパーツール（ChromeならF12キー）で実際の数値を確認し、それをAIに伝えれば問題ありません。デザインセンスがなくても、「真似したいデザインの数値を調べてAIに渡す」だけでプロ品質に近づけます。
4. ツールを使い分ける ── Gemini × Claude Code × Cursor
AIデザインの品質を上げるもう一つの重要なポイントは、ツールの使い分けです。全てを1つのツールで完結させようとすると、どうしても品質に限界が出ます。
私の使い分けは以下の通りです。
- 大きなデザイン変更・UIのコーディング → Gemini: UIデザインのコーディングや、素材を元にしたデザイン作成はGeminiがかなり有効です。レイアウト全体の刷新、新しいセクションの追加など、ゼロからデザインを起こす場面で威力を発揮します
- 画像生成 → Gemini一択: サムネイル画像や挿絵、アイコンの素材生成はGeminiが圧倒的に強いです
- 細かいデザイン修正 → Claude Code / Cursor: 余白の微調整、色の変更、レスポンシブ対応の修正など、既存デザインの改善はClaude CodeやCursorが得意です
実際の作業フローとしては、Cursor上でGemini Proを使ってデザインの大枠を作り、Claude Codeでスクリーンショットを貼りながら細かい修正を行うというパターンが多いです。
Claude Codeと他ツールの比較について詳しく知りたい方は、以下の記事もご覧ください。
1つのツールに固執せず、それぞれの強みを活かして組み合わせるのが、AIデザインの品質を最大化するコツです。
5. コンセプトから逆算する ── デザインの「判断基準」を持つ
これは最も重要でありながら、最も見落とされがちなポイントです。
プロのデザインとアマチュアのデザインの最大の違いは、個々のデザイン要素に「なぜそうしたか」の理由があるかどうかです。色、フォント、余白、アニメーション——全てがコンセプト（設計思想）から逆算されている状態が、プロ品質のデザインです。
AIに「おしゃれにして」と頼んでも、コンセプトがないので「なんとなくおしゃれっぽい」止まりになります。しかし、「このサイトのコンセプトは〇〇で、ターゲットは〇〇だから、〇〇な雰囲気にしたい」と伝えれば、AIの出力は一貫性を持ったものになります。
コンセプトを持つために、最低限以下の3点を決めておくことをおすすめします。
- ターゲット: 誰に向けたデザインか（年齢層、業種、ITリテラシーなど）
- キーワード3つ: デザインの方向性を表す言葉（例: 「信頼感」「親しみ」「先進性」）
- NGイメージ: 避けたい雰囲気（例: 「堅すぎない」「安っぽくない」「古臭くない」）
この3つをAIに最初に伝えるだけで、デザインの方向性が大きくブレなくなります。
実際のプロジェクトで実践した例
ここまで解説した手法を、実際のクライアントワークでどう活用しているかを紹介します。
建設会社のコーポレートサイト制作
ある建設会社のコーポレートサイトを制作した際、コンセプトは「伝統 × 若者向け」でした。これは一見、相反する要素です。伝統を前面に出すと重厚で堅い印象になり、若者向けにするとカジュアルになりすぎる。この両立が最大のデザイン課題でした。
以下の5つの要素を、全てコンセプトから逆算して決定しました。
カラーパレット: 当初は黒を基調にしていましたが、クライアントから「黒を使いすぎると硬くなりすぎる」というフィードバックがありました。そこでベージュ・ゴールド・白を基調に調整。伝統の格式をゴールドで表現しつつ、ベージュと白で親しみやすさを出しました。
フォント: 洗練されつつも硬くなりすぎない書体を選定。さらに縦書きテキストを部分的に使用することで、和の雰囲気を自然に演出しました。縦書きは「伝統」、横書きのモダンなレイアウトは「若者向け」——テキストの方向だけでコンセプトの両立を表現しています。
アニメーション: GSAPを使ったモダンなアニメーションを実装しました。伝統的なコンテンツを現代的な動きで見せることで、「古臭さ」を払拭。スクロールに連動したフェードインやパララックス効果が、若い世代に違和感のないUI体験を提供します。
全てのデザイン判断がコンセプトから派生している——これが重要です。色を変えた理由、フォントを選んだ理由、アニメーションを入れた理由、全てが「伝統 × 若者向け」というコンセプトに紐づいています。
このプロジェクトでは、大きなデザイン変更にはGeminiを、細かな修正にはClaude Codeを使い、全体のデザインガイドラインはCLAUDE.mdに定義して一貫性を担保しました。先述した5つの手法を全て組み合わせた実例です。
AIデザインの典型的なワークフロー
上記の経験を含め、私が普段行っているAIデザインの作業フローを整理します。
- コンセプト定義: ターゲット・キーワード3つ・NGイメージを決める（5〜10分）
- ガイドライン作成: カラー・フォント・余白のルールをCLAUDE.mdやrules/に記述する（15〜30分）
- 参考サイト収集: 再現したい雰囲気のサイトを2〜3つスクリーンショットで保存（10分）
- 大枠のデザイン生成: Geminiに参考画像 + コンセプト + ガイドラインを渡してHTMLを生成（30分〜1時間）
- 細部の調整: Claude Codeでスクリーンショットを貼りながら、数値指定で微調整（1〜2時間）
- レスポンシブ対応: モバイル表示のスクリーンショットを確認しながらClaude Codeで修正（30分〜1時間）
このフローで、1ページあたり3〜5時間程度でプロ品質のUIが完成します。デザインツール（FigmaやPhotoshop）を使わず、コード上で全てのデザイン調整を行っているのがポイントです。
よくある失敗パターンと対策
最後に、AIデザインで陥りがちな失敗パターンと、その対策をまとめます。
失敗1: 一度の指示で完璧を求める
AIデザインは「一発で完成」ではなく、反復的な改善プロセスです。最初の出力が70点でも、スクリーンショットを貼って「ここをこう修正して」を3〜4回繰り返せば90点以上に仕上がります。1回で完璧を求めると挫折します。
失敗2: テキストだけで指示する
「もう少し余白を」「色をいい感じに」——テキストだけの曖昧な指示はAIにとって最も難しい入力です。必ずスクリーンショットを添えて、視覚的に「ここ」と指し示してください。言葉で10行書くより、スクリーンショット1枚 + 1行の指示の方が正確に伝わります。
失敗3: デザインガイドラインなしで複数ページを作る
ガイドラインなしで複数ページを作ると、ページごとに色・フォント・余白がバラバラになります。2ページ以上のサイトを作る場合は、必ずDESIGN.md（またはCLAUDE.md）にガイドラインを定義してから作業を始めてください。
失敗4: 1つのツールで全てをやろうとする
Claude Codeは万能ですが、画像生成やゼロからのUIデザインではGeminiに軍配が上がる場面があります。ツールの得意分野を把握して使い分けることで、トータルの品質と効率が最大化されます。
まとめ ── AIデザインは「指示の質」で決まる
この記事で紹介した5つの実践手法を振り返ります。
- マルチモーダル指示: スクリーンショットを撮って視覚的に伝える
- DESIGN.md: デザインガイドラインを定義してAIに準拠させる
- 数値指示: 色・余白・フォントサイズを具体的な数値で伝える
- ツール使い分け: Geminiで大枠、Claude Code/Cursorで微調整
- コンセプト逆算: 全てのデザイン判断に「なぜ」の理由を持つ
AIデザインの品質は、AIの性能ではなく「指示の質」で9割が決まります。言い換えれば、指示の出し方さえ身につければ、デザイナーでなくてもプロ品質のUIを作ることは十分に可能です。
「AIはデザインが苦手」と感じている方は、まずスクリーンショットを1枚貼り付けて、「ここをこう変えて」と具体的に指示するところから始めてみてください。それだけで、AIの出力品質が変わるのを実感できるはずです。
Claude Codeの基本的な使い方から知りたい方は、以下のガイドをご覧ください。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。