UIデザイン生成AIを使ってみる – ｢Galileo AI｣編

こんにちは。UIデザイナーのカヒブンです。

前回の「AIとUIデザインについて」記事では、いくつかのAIを利用したUIデザインツールの紹介と、AIがUIデザイナーの仕事に与える影響についてでした。その後、実際にUIデザイン生成AIツールである「Galileo AI」を使ってみました。今回は、「Galileo AI」を使用した感想についてご紹介したいと思います。

まず、｢Galileo AI｣とは？

Galileo AIは、インターフェースデザインに特化した生成AIツールです。テンプレートから生成、またはテキストや画像を入力するだけで、モバイルやWebのUIを生成してくれます。特に魅力的なのは、Figmaで編集可能なデザインデータを出力できたり、実装可能なコードをエクスポートできる点で、実際の業務でも活用できそうです。

｢Galileo AI｣を実際に触ってみた

Galileo AIでは、下記3つの方法でUI画面が生成できます。

テンプレートと素材ライブラリの活用（Explore）

「Explore」というメニューから、Galileo AIは多くのデザインテンプレートを提供しており、プロジェクトに適したテンプレートを選び、必要に応じてカスタマイズできます。
参考にしたいデザインを見つけた後は、画面の右側の「Try it」をクリックすると、Text to UIの画面に移動します。そこで、デザインを変更して要求を満たすための対話ができます。また、「Code」や「Figma」をクリックすることで、編集データをクリップボードにコピーすることができます。

テキストからUIデザインの自動生成（Text to UI）

Galileo AIのインターフェースに、どのようなUI要素やページをデザインしたいかを自然言語で入力します。AIがその説明に基づいて、レイアウト、カラー、フォントなど、要件に合ったデザインを自動で生成できそうです。

やってみよう
このソフトウェアが日本語入力をサポートしているかどうか確信が持てなかったので、まずは英語で試してみました。具体的には、日本のユーザーを対象とした飲食業界向けの求人アプリを生成してほしいという内容です。

生成結果
感想
いかがでしょうか。まずは、良い点について話します。良い点の一つ目は、非常にシンプルなリクエストを与えただけでも、このツールは二つのバージョンを提案してくれたことです。このツールが「思考」していると感じさせてくれて、とっても感動しました。そして、全体のデザインスタイルがシンプルで、多くのユーザーに好まれるデザインであると感じました。一方で、欠点も明らかだと思います。まず、日本語のサポートがまだ不十分な点です。おそらく、英語から直接翻訳されているため、表現が非常にぎこちなく感じられました。また、内容の面では、無関係な機能が一つのページに混在していて、ユーザーが少し迷ってしまう可能性があると感じました。

イメージからUIデザインの自動生成（Image to UI）

こちらで参考にしたいサイトの画像や任意の画像からUIを生成することができるものです。またこの機能によって、既に作成したPC画面のUIを読み込ませてSP画面版のUIに変換する使い方もできます。 こちらもText to UIと同様にFigmaファイルとして出力が可能です。「Image to UI」では、UIページが生成される前に色やフォント、さらには角の丸みを指定することができます。また、最大で4つのデザイン案を生成させることもできます。

やってみよう
前回の「Text to UI」では日本語版のデザインをよく提供してくれなかったので、今回は英語で試してみることにしました。Indeedの求人情報一覧ページを参考にして、赤をテーマにした飲食業界向けの求人情報一覧ページのデザインを依頼しました。さて今回はいかがでしょうか。

生成結果

感想
やはり英語のUIの表現は日本語の文言より自然に見えますね。そして、赤をメインカラーとして指定したにもかかわらず、灰白色を基調として赤をアクセントカラーにしたデザインが提案されました。全体的なデザインスタイルは非常にさっぱりとした印象です。ただ、求職者が必要とする求人情報が少し簡単すぎる感じがして、ページの余白が多くなってしまっています。

Figmaとの連携

上記三つの方法で生成されたUI画面の右下に表示されている「Figma」ボタンをクリックすると、Figma用の編集データをクリップボードにコピーすることができます。生成されたFigmaデータはAuto Layoutで組んであり、もちろんテキストもテキストとして生成されています。生成されたAuto Layoutが本当にきれいに整理されていますね。

コンポーネントライブラリに関して、ページ内の似たようなコンポーネントが自動的にコンポーネントライブラリに生成されていないようです。そのため、生成されたページを活用するには、デザイナーが改めてコンポーネントライブラリをデザインし、ページに反映する必要があります。この点については、将来的にAI生成ツールが継続的に改善される可能性がありますね。

最後に

現時点では、Galileo AIから生成したUIのクオリティはそこまで助けにはならないかもしれませんが、Image to UIの機能がワイヤーフレームからUIデザインへの出力のクオリティを向上させれば、初期段階のラフデザインを迅速に生成するのには適しているかもしれません。現状、多くのプロダクトはUIコンポーネントライブラリやカラーテーマが事前にFigmaに設定されており、そのような情報を基にデザインが行われています。もしこの機能がこれらの要素をインプットできるようになれば、業務の実際の場面でもかなり役立つのではないかと考えています。今後の進展がとっても楽しみですね。

今回の記事では、UIデザイン生成AIツール「Galileo AI」で三つの方法で実際にUI生成した後の感想を紹介しました。最後までお読みいただきありがとうございました！