AIデザインツール、増えすぎました。
Pencil、Figma AI、Midjourney、v0。
名前を聞くだけで4つ。
調べ始めると比較記事が山ほど出てきて、読めば読むほど選べなくなる。
「結局どれがいいの？」と思いながらブラウザのタブが10個開いている。
そんな状態じゃないですか。
自分はデザインと実装を17年やっています。
4つとも実務で使いました。
その結論を先に言います。
どのツールが優れているかは、あなたの目的で変わります。
そしてもっと言うと、ツール選びで迷っている時間は、たぶん無駄です。
この記事では、同じタスクを4ツールで試した体験を元に、選び方の判断基準を整理します。
AIデザインツール、多すぎて選べない問題
「AIデザインツール おすすめ」で検索すると、10個も20個もリストアップされた記事が出てきます。
スペック表。
料金比較。
スクリーンショット。
情報はたくさんある。
でも、使った感触が書いてない。
スペックで比較しても、実際の制作で何が起きるかはわかりません。
「画像生成AI」とひとくくりにされるけど、Midjourneyとv0ではやっていることが全然違います。
LPのアイキャッチを作りたいのか、UIモックアップが欲しいのか、コードごと生成したいのか。
目的が違えば正解も違う。
リスト記事を5本読んで迷いが増えたなら、この先を読んでください。
実際に手を動かした人間の話をします。
4つのAIデザインツールを30秒で整理する
まず全体像を掴みます。
詳しい使い方は各ツールの公式を見ればいいので、ここでは「何をするツールか」だけ。
Pencil — テキスト指示で叩き台を生成
Claude CodeからMCP経由でテキスト指示を出すと、Pencilのキャンバスにデザインが生成されます。
独自の`.pen`形式。
Figmaへのエクスポートも可能。
特徴は「対話的に微調整できる」ことです。一発生成で終わりではなく、「この要素の色を変えて」「余白をもう少し広げて」といった個別ノードの修正がターミナルから通ります。
詳しくはClaude Code × Pencilで実際にAIデザインを試した記録に書きました。
Figma AI — 既存ワークフローにAIを追加
Figmaの中にAI機能が内蔵されています。
First DraftでUIの叩き台を生成したり、テキストやアセットをAIで差し替えたり。
最大の利点は「Figmaの中で完結する」こと。すでにFigmaを使っているなら、新しいツールを覚える必要がありません。
ただし、Figma AIが「使えない」と感じたときの本当の原因でも書いた通り、精度には波があります。
Midjourney — ビジュアル特化の画像生成
プロンプトからビジュアルを生成する画像生成AI。
UIではなく、アイキャッチ画像やイラスト、ビジュアルコンセプトの制作に強い。
クオリティは4ツールの中で最も高い。
ただしUIデザインはできません。
あくまで「画像素材を作る」ツールです。
v0 — UIコードを直接生成
Vercelが開発したAIツール。
プロンプトを入力すると、React + Tailwind CSSのUIコードが生成されます。
デザインファイルではなく、動くコードが出てくる。
エンジニアには魅力的ですが、バイブコーディングの限界を痛感した体験談でも触れた通り、「コードが動く」と「デザインが良い」は別の話です。
同じタスクを4ツールでやってみた
比較記事を書くなら、同じ条件で試さないとフェアじゃない。
やったこと：個人開発サービスのLPアイキャッチ画像を1枚作る。
テーマは「タスク管理アプリのヒーローセクション」。
ネイビーブルーとコーラルの配色指定。
テキスト要素あり。
Pencil：叩き台→微調整の流れが速い
Claude Codeから「タスク管理アプリのヒーローセクション、ネイビーブルーとコーラル、CTAボタンあり」と指示。
30秒で叩き台が出ました。
レイアウトの大枠はいい。
でもCTAボタンの余白が詰まりすぎていた。
「ボタン周囲のパディングを24pxに」と追加指示。
10秒で修正完了。
この「指示→修正→確認」のサイクルが速い。
合計5分。
Figma AI：Figmaの中で完結する安心感
Figma AIのFirst Draftに同じ指示を入力。
UIが1画面生成されました。
出てきたものは「悪くないけど、なんか違う」。
見出しと本文のフォントサイズ差が足りない。
タイポグラフィの**階層**が弱い。H1が24pxで本文が16px。
差が8pxしかない。
手動でH1を40pxに変更して、ようやくメリハリが出ました。
Figmaの操作に慣れていたから修正は早かったけど、合計15分。
Midjourney：ビジュアルの質は圧倒的
Midjourneyにプロンプトを入れました。
「modern task management app hero section, navy blue and coral, clean UI mockup style –ar 16:9 –v 6」。
出てきた画像を見て、正直うなりました。
圧倒的にきれい。
でも、これは「画像」です。
テキストは読めない（AIが生成した擬似文字）。
ボタンの位置は変えられない。
あくまでビジュアルコンセプトやアイキャッチ用。
実装に使えるUIではありません。
合計3分。
ただし、用途がビジュアル素材に限定されます。
v0：動くコードは出るが、デザインは…
v0に「task management app hero section with navy blue and coral color scheme」と入力。
React + Tailwindのコードが生成されました。
ブラウザでプレビューすると、動く。
ただ、見た目がテンプレート感全開でした。
余白が均一。
フォントウェイトに変化がない。
配色は指定通りだけど、アクセントの使い方が雑。
「とりあえず全部にコーラルを散らしました」という印象。
コードとして動くことと、デザインとして成立することの間には、けっこうな溝があります。
合計7分。
体験比較まとめ
| 項目 | Pencil | Figma AI | Midjourney | v0 |
|---|---|---|---|---|
| 所要時間 | 5分 | 15分 | 3分 | 7分 |
| 出力形式 | .penファイル | Figmaフレーム | 画像（PNG/JPG） | React + Tailwind |
| 微調整 | ターミナルから対話的 | Figmaで手動 | 再生成 | コード編集 |
| UI制作 | ○ | ○ | × | ○（コード） |
| ビジュアル品質 | △ | △ | ◎ | △ |
| そのまま実装 | × | ×（デザインファイル） | × | ○ |
得意・不得意マトリクス
同じタスク以外にも、日常の制作で使い続けてみて見えてきた得意・不得意があります。
Pencilが得意なこと
- ゼロからの叩き台生成。白紙のキャンバスで悩む時間がなくなる
- 対話的な微調整。個別ノードの色、サイズ、配置をテキストで指定可能
- Claude Codeとの統合。コーディングからデザインまで同じターミナルで完結
Pencilが苦手なこと
- ピクセル単位の精密な調整（Figmaに持っていく方が速い）
- チームでのデザインレビュー（共有フローが未成熟）
- 写真素材やリアルなビジュアルの生成
Figma AIが得意なこと
- 既存のFigmaワークフローへの統合。新しいツールを覚えなくていい
- コンポーネント化。Figmaコンポーネント設計の実践ガイドのノウハウがそのまま活きる
- チームコラボレーション。共有、コメント、バージョン管理がFigmaのまま
Figma AIが苦手なこと
- 生成精度の安定性（同じプロンプトでも結果がバラつく）
- 日本語UIの品質
- 1プロンプトで複数画面の一括生成
Midjourneyが得意なこと
- ビジュアルクオリティ。4ツールの中で圧倒的
- コンセプトビジュアル。ムードボードやアイキャッチに最適
- スタイルの多様性。写真風、イラスト風、アイソメトリックなど自在
Midjourneyが苦手なこと
- UIデザイン（そもそも用途が違う）
- テキスト要素の正確な生成
- 細かい修正（再生成ガチャになりがち）
v0が得意なこと
- 動くプロトタイプの即時生成。デザインファイルを経由せずコードが出る
- エンジニアとの共通言語。React + Tailwindなのでそのまま議論できる
- インタラクションの確認。ホバーやアニメーションも含めて生成される
v0が苦手なこと
- デザインの質（テンプレート的になりがち）
- 余白やタイポグラフィの繊細なコントロール
- ブランドに合わせた配色設計
結局どれを使えばいい？ — ツールではなく目的で選ぶ
ここまで読んで「で、どれがおすすめなの？」と思いますよね。
答えは、目的で決まります。ツールの優劣ではありません。
「白紙から叩き台がほしい」→ Pencil
デザインのゼロイチが重い人。
フリーランスで全工程を一人でやっている人。
Claude Codeを使っているなら、同じターミナルから指示を出せるPencilが最も摩擦が少ないです。
「Figmaのワークフローを崩したくない」→ Figma AI
チームでFigmaを使っている。
コンポーネントライブラリがある。
デザインシステムが整備されている。
その環境にAIを追加したいならFigma AI一択です。
「アイキャッチやビジュアル素材がほしい」→ Midjourney
ブログのOGP画像、LPのヒーローイメージ、プレゼン資料のビジュアル。
画像素材の品質を求めるならMidjourney。
AI画像生成プロンプトのコツも参考にしてみてください。
「デザインファイルなしで動くUIがほしい」→ v0
個人開発でとにかく速くプロトタイプを動かしたい。
デザインの精度よりも「まず動くものを見せる」が優先。
そういう場面ではv0のスピード感が活きます。
組み合わせという選択肢
実は、1つに絞る必要はありません。
自分の実務では使い分けています。
- Pencilで叩き台を作り → Figmaで仕上げる
- Midjourneyでアイキャッチを作り → PencilでUI本体を組む
- v0でプロトタイプを作り → デザイン確認後にFigmaでリデザイン
ツールを組み合わせると、それぞれの得意領域だけを使えます。
全部を1ツールでやろうとするから「使えない」と感じるのかもしれません。
まとめ：ツール選びの先にある本当の問題
4ツールを全部使って気づいたことがあります。
どのツールを使っても、「なんかイマイチ」は消えませんでした。
Pencilで叩き台を作っても、余白のバランスがおかしければダサい。
Midjourneyで美しい画像を生成しても、UIに組み込む配色設計が雑なら台無し。
v0で動くコードが出ても、階層構造が崩れていたら素人感が出る。
ツールを変えても解決しない問題がある。
それは「出てきたものが良いかどうかを判断する基準」です。
AI時代のデザイナー生き残り戦略でも書きましたが、AIが進化するほど、人間に求められるのは「作る力」ではなく「判断する力」になっていきます。
AIデザインツールが4つあろうが40個あろうが、使う側に判断基準がなければ結果は同じです。
まずは自分の目的に合ったツールを1つ選んで、1タスクだけ試してください。
そしてその出力を見て「ここがダサい」と感じたら、それを言語化してみてください。
余白なのか、階層なのか、配色なのか。
その言語化ができた瞬間から、ツールは「使えないもの」から「使えるもの」に変わります。
5つの判断基準（余白・階層・タイポグラフィ・コントラスト・配色）を体系的に学びたい方のために、「Vibe Codingの落とし穴 — AI生成サイトをプロ品質に仕上げる5つの判断基準」というUdemy講座を準備中です。
参考になれば幸いです。
このシリーズの他の記事
「AIデザインの隙間を埋める」シリーズでは、AIデザインの判断基準を8つの切り口で解説しています。
