こんにちは、AIニュースアプリ Morning AI 開発者の矢野哲平です。この記事では、AIとデザインについて触れます。ここでいうデザインとは、ウェブサイトやアプリのデザインといったタスクです。

最近はAIを使ってプログラミングをする人が増え、その流れで自分のホームページをAIに作ってもらった、という話もよく聞きます。この記事では、次の3つのポイントを解説します。

  1. 直近でアップデートされたGoogleのデザインツールStitch
  2. ChatGPT・Gemini・Claudeのどのモデルがデザインタスクに優れているのか（私の実験を交えて）
  3. AIのデザイン精度を上げるデザインプロンプト

Google Stitchのアップデート

まず直近のニュースから。GoogleのデザインツールStitchのアップデートが発表されました。

Stitchは、AIのチャット欄に「こういうデザインをしてほしい」と指示すると、ウェブサイトやアプリのデザインがどんどん完成していくツールです。デザインタスクに特化したAIエージェントのようなもので、出来上がったデザインに対してAIと対話を重ねながら修正もできます。イメージとしては、デザインツールとAIチャットが合体したような存在です。

今回のアップデートについて、Googleはこう説明しています。

Stitchの画面を全面的にリニューアルしました。AIネイティブな新しい無限のキャンバスを搭載し、アイデアの初期段階から実用的なプロトタイプまで自由に展開できます。

そしてGoogleは、Stitchを使ったデザインタスクをvibeデザインと表現しています。雰囲気やノリでプログラミングを行うバイブコーディングをもじった言葉で、感覚に身を任せてデザインを進めていくアプローチです。

なおStitchはまだベータ版で、正式提供はされていません。ただ、初公開時に比べると機能や画面の使いやすさがどんどん良くなっているので、近い将来に正式版がリリースされれば、AIを使ったデザインはさらにやりやすくなると思います。無料で利用できるので、興味のある方はぜひ試してみてください。

どのAIモデルがデザインタスクに優れるか

AIでデザインタスクを行えるのは分かったとして、ChatGPT・Gemini・Claudeのどれが一番精度高くデザインしてくれるのか。気になるところだと思います。

デザインといってもウェブサイト、アプリ、広告バナーなどさまざまで、一概に比較するのは難しいです。今回私が試したのは、ウェブサイトのデザインと、iOS（iPhone）アプリのデザインです。

先に結論を言うと、現時点で私が試した範囲では、精度が高い順にClaude、Gemini、ChatGPTでした。WebサイトやアプリのデザインではClaudeが一番精度が高く、意外にもChatGPTが振るわなかった、という印象です。もともとClaudeはデザインタスクに優れていると言われていましたが、その評価どおり1位を維持しているような結果です。Claudeのデザイン機能についてはClaude Designでも触れています。

実験の内容は、全く同じプロンプトを各AIに渡し、Webサイトやアプリのデザインを作成してもらう、というものです。たとえばタスク管理アプリのデザインや、会社のコーポレートサイトのデザインなどを各AIに提出してもらい、人間が目視で評価しました。その結果がこの順位です。

ただし後述するように、これはあくまで「同じプロンプトを渡したとき」の話で、プロンプトを細かく設計すればChatGPTでも十分良いデザインが出てきます。ともあれ、デザインタスクではClaudeが良く、Geminiも悪くない、というのを頭の片隅に置いてもらえればと思います。

デザインの精度を上げるコツ

実験を進める中で、「このアプローチを採るとデザインの精度が上がる」と感じた点がいくつかあったので紹介します。

英語のプロンプトを使う

一つ目は、日本語ではなく英語のプロンプトを使うこと。いろいろ試した結果、デザインタスクに関しては日本語より英語で指示したほうが良くなるケースが多いです。

戦略としては、一度日本語を英語に翻訳してからAIに渡します。正直少し面倒で、英語で指示するとウェブサイトやアプリのデザインも英語で出力されます（見出し、本文、メニュー名など）。それを後から日本語に差し替えていく手間はかかりますが、このアプローチがおすすめです。

デザインプロンプトを活用する

もう一つ、特におすすめなのがデザインプロンプトの活用です。これは、デザインに関する全体的な指示やルールをあらかじめプロンプトで渡しておき、そこから細かい指示を飛ばしていく、という方法です。

実は、AnthropicがClaude向けに公開しているデザインプロンプトがあります。これを使うと明らかに成果物が変わるのでおすすめです。英語のプロンプトなので、そのまま英語で渡して英語でデザイン指示をしながら進めるのが良いです。

冒頭に興味深い指示が書かれているので、一部を日本語で紹介します。

あなたはしばしば、一般的で「分布の平均的な」出力に収束する傾向があります。フロントエンドデザインでは、これはユーザーが「AIっぽい雑なデザイン（AI slop）」と呼ぶような見た目を生み出します。これを避けてください。代わりに、驚きや楽しさを与える、創造的で個性のあるフロントエンドを作りましょう。

面白いのは、指示の冒頭でAIに自覚を促している点です。AIが書いた文章にどこかAIっぽさが出るのと同じで、AIが作ったデザインにもAIっぽさが出ます。それを「あなたの成果物は平均的なデザインに陥りがちです、これを避けてください」と先に釘を刺しているわけです。

具体的には、「タイポグラフィは美しくユニークで興味深いフォントを選ぶ」「カラーは主役となる色にシャープなアクセントを加える」「退屈にならないようアニメーションを追加する」といった指示が続きます。こうしたプロンプトを渡すだけでも仕上がりがかなり変わります。

Claudeはもともとデザイン精度が高いですが、このプロンプトでさらに良くなります。そしてビフォーアフターが一番変わったのはGeminiでした。デザインプロンプトの有無でガラッと変わるので、GeminiにもChatGPTにもおすすめです。

実はChatGPTも、GPT向けにチューニングされたデザインプロンプトを公開しています。こちらは長めのプロンプトですが、使った場合とそうでない場合で仕上がりがかなり変わります。ChatGPTでデザインを行いたい人は、こちらも試してみてください。

複数のデザイン案を出させる

もう一つのコツが、デザイン案を複数作成してもらうことです。

たとえば会社のホームページのデザインをAIに頼むとき、一つだけ出してもらうのではなく、「タイプの違うデザイン案を3つ、もしくは5つ出してください」と指示します。提出された案を見て「Bが良いですね、これを掘り下げましょう」と進めていく。複数案をAIに出させ、人間が取捨選択していく流れです。

これはデザインに限らず使えるテクニックです。人間相手だと「ウェブサイトのデザイン案を今から5つ出して」と言われても困りますが、AIなら5個でも10個でも、それこそ100個でもすぐ出してくれます。これはAIならではのアプローチです。

デザインの仕様書を作って進める

デザイン関連のタスクでも、デザインの仕様書のようなものを作って進めると作業がしやすくなります。

AIとデザインのやり取りを進める中で、「カラーコードは何色」「フォントはこれを使う」といった仕様を design.md のような形で保存していきます。デザインを変更するときや作業を再開するときに、人間もAIもこの仕様書を参照して進められます。

仕様書を作っておくと横展開もしやすくなります。私は最近ニュースアプリをWebとiPhoneアプリでリリースしましたが、先にWebを作るときに design.md という形でデザイン仕様書を用意していました。iPhoneアプリを作るときは、この design.md をAIに渡して「この仕様書に沿ってアプリのデザインを進めてください」と指示しました。

こうしておくと、WebからiPhone、Androidへと横展開するときの作業がぐっと楽になります。仕様書を作って進めていくアプローチも、ぜひ試してみてください。この考え方はバイブコーディングの進め方とも通じる部分があります。

まとめ

  1. GoogleのStitchがアップデートされ、AIとチャットで会話するようにデザインを進められるようになった
  2. デザインタスクを比較した結果はClaude、Gemini、ChatGPTの順。デザインに関してはClaudeがおすすめ
  3. 精度を上げるコツは、英語のプロンプトを使う、ClaudeやChatGPTが公開するデザインプロンプトを使う、デザインの仕様書を作って進める

WebサイトのデザインはAIが比較的高い精度で仕上げてくれますが、iOSアプリのデザインになるとガクッと精度が落ちるケースがあります。これはChatGPTに限らずClaudeやGeminiでも言えることです。そうしたケースでも、英語で指示してデザインプロンプトを活用すると、いい感じに仕上がります。これからデザインにAIを使う人は、ぜひ試してみてください。