AIとデザインタスクの現状とGoogle Stitchのアップデート
みなさんこんにちは、矢野 哲平です。この番組は、耳で学ぶAIをコンセプトに、 初心者・中級者向けにAIを分かりやすく解説する番組です。
今回のテーマは、どのAIがデザインタスクに優れているのかについて話していきます。 はい、ということで今日は、AIとデザインについて話していきます。
みなさん、デザインのタスクにAIは使っていますでしょうか。 ここで言うデザインというのは、ウェブサイトのデザインであったり、あとはアプリのデザインのようなタスクとなります。
で、最近AIを使ってプログラミングする人増えていますけど、その中で自分のホームページをAIに作ってもらったと。
そういった話もよく聞きます。 で、今日はデザインタスクにAIをどのように活用するのかという点について話していきます。
今日話すポイントは主に3つです。 1つ目に、直近でアップデートされたGoogleのデザインツールStitchについて。
2つ目に、ChatGPTやGemini、Cloud、どのAIモデルがデザインタスクに優れているのかについて。 これを私の実際の体験を交えて話したいと思います。
そして3つ目に、AIのデザインの精度を向上してくれるデザインプロンプトについて。 これら3点を中心に話していきます。
はい、では早速話していきましょう。 まず先に直近のニュース関連の話を行っていきます。
直近でGoogleのStitchというデザインツールのアップデートが発表されました。 で、このツールは以前このポッドキャストでも話したことがあるツールとなります。
で、そのデザインツールのStitchが今回アップデートしたとGoogleは発表しました。 で、このStitch何ができるのかっていうと、あのAIのチャット欄があるんですけど
そこのチャットにこういったデザインをして欲しいとAIに指示をすると、もうAIが勝手にどんどんウェブサイトのデザインやアプリのデザインを作ってくれる。
そういったツールとなります。イメージとしては、そうですね、 あのデザインのタスクに特化したAIエージェント、こういったイメージとなります。
で、出来上がったデザインに対して人間とAIで対話を重ねてデザインの修正を行っていくこともできます。
ここの部分、色を変えてくださいとか、ここの文字、フォントの大きさをちょっと変えましょうとか、そういった感じです。
イメージ的には、そうですね、あのデザインツールとAIチャット、こういったものが合体したようなツールとなります。
で、開発元のGoogleはStitchについてこのように説明をしています。 Stitchの画面を全面的にリニューアルしました。
AIネイティブな新しい無限のキャンパスを搭載し、 アイデアの初期段階から実用的なプロトタイプまでアイデアを自由に展開できますと。
ちなみにこのStitchは誰でも無料で利用することができます。 で、今回のこのアップデートに伴ってGoogleはこのStitchを使ったデザインタスクを
バイブデザインとそう表現しています。 あのバイブコーディングっていう雰囲気やノリでプログラミングを行うという、そういったアプローチがありますよね。
で、その名前をもじってバイブデザインと。 つまり雰囲気やノリに身を任せてデザインを行っていく。
Stitchではそういったバイブデザインのようなアプローチを取れますよとGoogleは話しています。で、一応補足するとこのStitchベータ版になるので、まだ正式に提供はされていません。
まだベータ版の段階です。 ただ以前このStitchが初めて公開された時に比べると、あの様々な機能や画面の使いやすさ
そういったものがどんどんアップデートされています。 なので近い将来正式版がリリースされて、より
AIを使ったデザイン関連のタスクがやりやすくなるのかなと思ったりします。 Stitchのリンク概要欄に添付しておきますので、興味のある方はぜひ試してみてください。
主要AIモデルのデザインタスク比較
無料で誰でも利用することができます。 こんな感じでAIを使ってデザインのタスクを行なっていく
こういった領域もどんどん進化しています。 ただここでこう疑問に思う人もいると思います。
AIを使ってデザインのタスクを行えるのはわかったと。 じゃあChatGPTやGemini、Cloud、いろいろなAIモデルがあるけど、どのAIモデルが一番デザインの
タスクを精度高く行ってくれるのかと。 実際デザインタスクもいろいろあるので一概に比較するのはなかなか難しいと思います。
デザインといってもウェブサイトのデザイン、アプリのデザイン、あとは広告バナーのデザインとかいろいろありますよね。
ただ私が試した範囲になるんですけど、どのAIモデルが一番デザインタスク使いやすいのかという点をちょっと今から話していきます。
まず前提として私が試したデザインタスクはウェブサイトのデザインとアプリのデザインとなります。
具体的にはiOS、iPhoneアプリのデザインとなります。 先に結論をお伝えすると、現時点で私が試した範囲だと精度が高い順に
Cloud、Gemini、ChatGPTの順番だと感じました。 ウェブサイトやアプリのデザイン、そういったデザインタスクにおいては
Cloudが一番精度が高くて、ChatGPTが精度が振るわなかったと、そう感じました。
もともとCloudはデザインタスクに優れているっていうのは以前から言われています。 なので順位が変わらずに引き続き
Cloudが1位を維持している、そういった印象です。 でChatGPTがちょっと意外にもあまり精度が振るわなかったと、そういった結果になりました。
今回行った比較の実験、全く同じプロンプトを各AIに渡してウェブサイトを作成してもらう
iOSアプリのデザインを作成してもらう、そういった比較を行いました。 例えばタスク管理アプリ、そういったもののデザインを作ってもらったり
会社のコーポレートサイトのデザインをしてもらったり、そういった様々なデザイン案を各AIに提出してもらって、その中から人間が目視でデザインを評価する
そういった内容を行いました。そういった比較の結果が、Cloud、Gemini、ChatGPTの順番だと感じました。
なのでデザインタスクに関しては、今のところCloudが使いやすいんだなと、そしてGeminiも悪くないんだなと、そういったことをちょっと頭の片隅に覚えていただければと思います。
デザインタスクの精度を向上させるテクニック
こうした実験を行っていく中で、このアプローチを採用するとデザインタスクの精度が上がるなと、そう感じた部分があったので、
それをちょっといくつか紹介したいと思います。まず一つ目が、日本語のプロンプトではなくて英語のプロンプトを使うということ。
これちょっといろいろ実験したんですけど、デザインタスクに関しては日本語のプロンプトで指示を出すよりも、英語のプロンプトの方がデザインが良くなるケースが多いです。
なので戦略としては、日本語のプロンプトを一度英語に翻訳して、それをAIに渡すと。 正直ちょっと面倒なんですけど、
英語で指示をした場合、ウェブサイトやアプリのデザイン、これも英語で出力されます。
見出しとか本文とか、アプリのメニュー名とか、そういった英語の部分を日本語に差し替えていくと。
手間はかかるんですけど、こういったアプローチがお勧めです。 もう一つリスナーの皆さんに特にお勧めしたいのが、デザインプロンプトを活用するということです。
これどういうことかというと、デザインに関しての全体的な指示やルール、そういったものをあらかじめプロンプトでまとめておいて、それをAIに渡すと。
で、あとはそこからデザインの細かい指示を都度飛ばしていくと。 こういったデザインの全体的な指示、ルールを記載したデザインプロンプト、
実はアンソロピックがクロード向けに公開しているものがあります。 これを使ってデザインタスクを行っていくと、明らかに成果物に違いが出てくるのでお勧めです。
このデザインプロンプトが書かれているページのリンク、こちらも概要欄にリンクを貼っておきますので、興味のある方は是非チェックしてみてください。
今日もちょっとリンクが多いですね。 まぁただこのデザインプロンプトものすごくお勧めです。
このデザインプロンプト、英語のプロンプトなんですけど、実際に使うときはそのまま英語でプロンプトを渡して、英語でデザイン指示をして進めていくのがお勧めです。
このデザインプロンプトの一部を日本語で紹介すると、冒頭に興味深い指示が記載されているのでちょっと紹介します。
ちょっと読んでいきますね。 あなたはしばしば一般的で分布の平均的な出力に収束する傾向があります。
フロントエンドデザインでは、これはユーザーがAIっぽい雑なデザイン、AIスロップと呼ぶような見た目を生み出します。
これを避けてください。代わりに驚きや楽しさを与える想像的で個性のあるフロントエンドを作りましょう。
特に次の点に注力してください。で指示が続いていきます。 この指示の何が面白いのかっていうと、指示の冒頭でAIに自覚を促している点です。
あなたのデザインの成果物は一般的で平均的なデザインに陥る傾向がありますと、これを避けてくださいと。
AIを使ってデザインのタスクを行った方、心当たりあると思うんですけど AIが出力したデザインってどこかAIっぽいデザインになりがちですよね。
これ文章でイメージするとわかりやすいと思うんですけど AIが書いた文章ってちょっとこうなんて言いますか
AIっぽさが出てきてしまうじゃないですか。 あれと同じでデザインタスクでもAIが作ったデザインぽさというのがどうしても出てきてしまいます。
こうしたAIっぽいデザインになりがちですよっていうことをAIにまず自覚させて、そうならないための回避策をプロンプトで指示しているわけです。
例えばタイポグラフィーは美しくユニークで興味深いフォントを選びましょうとか、カラーは主役となる色にシャープなアクセントを加える方が効果的です。
退屈なデザインにならないようにアニメーションを追加しましょう。 こんな感じで具体的な回避策指示を出しています。
こうしたデザインプロンプトを渡すだけでもかなり仕上がりが変わってくるのでオススメです。
実験した感じだとクロードもともとデザインの精度は非常に高いんですけど、こういったデザインプロンプトを使うことでより良いデザインを生み出してくれるようになります。
もちろんこのデザインプロンプトはクロード以外でも使うことができます。 このデザインプロンプトの有無でビフォーアフターが一番変わったのはジェミニでした。
デザインプロンプトの有無でガラッとデザインの精度が変わってくるので、ジェミニはもちろんチャットGPTにもオススメです。
実はチャットGPTもデザインプロンプトを公開しています。 これも英語のプロンプトなんですけど結構長めのプロンプトがあります。
こういったチャットGPTのデザインプロンプトも使った場合と使わない場合でデザインの仕上がりはかなり変わってきます。
このチャットGPTのデザインプロンプト、これはGPTのモデル用にチューニングされているので、チャットGPTでデザインタスクを行いたい
そういった人はこちらのプロンプトを試してみることをお勧めします。 こちらのチャットGPTのデザインプロンプトも概要欄にリンクを貼っておきます。
デザイン案の複数提示とデザイン仕様書の活用
その他のポイントで言うと、あとはデザイン案を複数AIに作成してもらう こういったアプローチもお勧めです。
例えば私が会社のホームページのデザインをAIにやってもらいたいとします。 この時にAIに一つだけデザイン案を出してもらうのではなくてちょっとタイプの
違うデザイン案を3つ、もしくは5つぐらい出してくださいと、こんな感じで指示をします。 そしてAIが出してくれたデザイン案を見て、Bのデザイン案がいいですねと
じゃあこれをもっと掘り下げていきましょう。 こんな感じで複数のデザイン案をAIに出してもらって、その後は人間が判断していく
こういった流れもお勧めです。 これはデザインタスク以外でも使えるテクニックとなります。
とりあえずAIに複数の案を出してもらって、人間がその案を判断していくと。 こういったアプローチって人間相手だとなかなか難しいじゃないですか。
矢野くん、ウェブサイトのデザイン案ちょっと今から5つぐらい出してよと。 こんなこと急に言われても困りますよね。
でもAIはデザイン案を5個でも10個でも、それこそ100個でもすぐ出してくれるので、 こうしたアプローチが取れるのもAIを使ったデザインタスクならではだと思います。
以上、AIとデザインのタスクについて話しました。 ちょっと一旦まとめましょうか。
デザインタスクを行う上でどのAIモデルがおすすめか。 これについては私が実験した範囲では、クロード、ジェミニ、チャットGPTの順番だと感じました。
そしてデザインタスクにおいては、プロンプトは日本語ではなく英語を使っていくと。 あとはクロードやチャットGPTで公開されているデザインプロンプトを使うのがおすすめです。
結構ウェブサイトのデザインって、どのAIも割と精度高く仕上げてくれるんですけど、iOS、iPhoneアプリとかになるとガクッと精度が落ちてしまうケースが結構あります。
これはクロードに限らずチャットGPTでもジェミニでも言えることです。 こうしたケースでも英語で指示を出してデザインプロンプトを活用していくと。
こうすることで結構いい感じのデザインを出力してくれます。 今まさにAIを使ってデザインを行っている人。
あとはこれからデザインを行っていこうと思っている人。 そういった方はぜひ試してみてはいかがでしょうか。
ちなみにデザイン関連のタスクでも、デザインの仕様書 そういったものを作って進めていくと作業がしやすいです。
これつまりどういうことかというと、AIとデザインのやり取りを進めていきますよね。 こんな感じのデザインにしていこうと。
カラーコードは何色で、フォントはこのフォントを使おうと思っているとか。 そういったAIとのやり取りを通じて固まってきたデザインの仕様をデザインの仕様書として保存をしていくと。
デザインの変更があったり作業を再開するときには、人間もAIもこのデザインの仕様書をベースに作業を進めていくと。 こういった進め方がおすすめです。
こういったデザインの仕様書を作っておくと、結構横の展開もやりやすいんですよね。 例えば私最近ニュースアプリをWebとiPhoneアプリでリリースしました。
Webから先に作ったんですけど、Webで作業をするときにこのデザインの仕様書というのを作成していました。
それからiPhoneアプリを作るときにこのデザインの仕様書をAIに渡して、 この仕様書に沿ってアプリのデザインを進めてくださいというように指示をしました。
こうすることでWebのデザインをそのままスムーズにiPhoneアプリに持っていくことができました。
こんな感じでデザインの仕様書を一つ作っておくと、WebやiPhone、あとはAndroid、 こういった横の展開をするときに作業が楽になります。
デザインの仕様書を作って作業を進めていく。 こちらのアプローチもおすすめです。ぜひ試してみてください。
まとめと今後の展望
はい、それでは今日のポイントをまとめます。
一つ目に、直近でGoogleのデザインツールStitchがアップデートされました。
AIとチャットで会話をするようにデザインタスクを実行することができます。
二つ目に、デザインタスクの比較を行った結果、Cloud、Gemini、ChatGPTの順番となりました。
デザインタスクに関してはCloudがおすすめです。
最後3点目、デザインタスクの精度を上げるチップスとして、日本語ではなく英語のプロンプトを使用する。
Cloud、もしくはChatGPTが公開しているデザインプロンプトを使用する。
デザインの仕様書を作成して進めていく。 こういったアプローチがおすすめです。
はい、今日はこのへんということで、本日もお付き合いいただきありがとうございました。
番組ではこのように、耳で学べるAIを毎週発信しています。
通勤中や家事の合間にAI情報をキャッチアップできます。
毎週水曜朝に更新しています。ぜひフォローをお願いします。
そして、おすすめの生成AIツールをまとめた資料も配布しています。
興味のある方はこちらもぜひ、概要欄にリンクを貼っておきます。
お相手は、耳で学ぶAIの矢野てっぺいでした。
また次の配信でお会いしましょう。
