AIとチャットしながらUIデザインが作れる！？ Galileo AIとは？

Writer： otsubo　更新日：2024/12/18

こんにちは、デジナーレ福岡オフィスの大坪です。
前回、前々回はUizardについて解説をしていきました。

まだ読んでいない方はこちらからぜひご覧ください！

デザイナーでなくてもUIデザインが作れる！?　Uizardとは？

UizardのHandoff機能とは？

今回ご紹介するのは、Uizardと似たような機能を持つ「Galileo AI」というツールをご紹介します。Galileo AIはテキストや画像から簡単にUIデザインを自動生成でき、デザインの経験がなくてもプロ並みの仕上がりが期待できるということで、とても注目されています。
具体的にはどんなサービスなのか、一緒に見ていきましょう！

Galileo AIってどんなツール？

Galileo AIは、テキストプロンプトや画像を基に、専門的なスキルがなくてもウェブやモバイル向けのUIデザインをAIによって簡単に自動生成できるツールです。
2022年にアメリカ・カリフォルニア州サンフランシスコで設立され、AI技術を活用してUIデザインのプロセスをもっと効率的でスピーディーにすることを目指しています。

共同設立者であるヘレン・チョウは、デザイナーが業務の中で「本来注力すべき重要なスキル」を発揮する時間が不足しているという課題を感じていました。当時を振り返りGalileo AIを創設するきっかけについてこう話します。

2022年に大規模言語モデルの進化を見て、デザイナーが繰り返し行っている作業の一部を自動化できる可能性があると感じました。それにより、デザイナーがビジネスや戦略的スキルにもっと時間を割けるようになれば、彼らは本当に輝ける場所で力を発揮できると思いました。
Helen Zhou
Diveによるインタビューより抜粋

2024年2月に公式リリースされたGalileo AIは公開後、わずか3日で100,000以上のデザインが生成され、750,000インプレッションを記録するなど大きな注目を集めました。このツールはデザイナーだけでなく、エンジニアやデザインに詳しくないユーザーにも広く利用されており、その使いやすさと高品質な成果物が評価されています。

Galileo AIの主要機能

Galileo AIには、「Explore」と２つの主要機能「Text to UI」「Image to UI」があります。これらの機能を活用することで、テキストや画像から直感的にUIデザインを自動生成し、Figma形式での出力も可能です。それぞれの機能について順番に見ていきましょう。

Explore

Exploreは、ユーザーが他のユーザーによって生成された実際のUIデザインを閲覧・使用できる機能です。単なるテンプレート選びではなく、実際に使用されているデザインを参考にすることで、より実践的なインスピレーションを得るだけでなく、どんなプロンプトを入れてUIを生成したのかも閲覧することができます。また、必要に応じて閲覧したUIをFigmaにエクスポートしたり、HTMLでコードの書き出しすることも可能です。これにより、デザインのカスタマイズや実装がスムーズに行えます。

Text to UI

Text to UIは、ユーザーがデザイン要件を入力すると、AIがUIデザインを自動的に生成します。これにより、ユーザーはアイデアを迅速に視覚化できます。これまでデザイナーが時間をかけて検討し、ツールを使いこなして実現していたプロセスの多くを、Galileo AIがサポートしてくれます。

使い方

ログイン後、画面中央のテキストフィールドで生成したいデザインの指示を入力するか、左端のメニューから「Text to UI」をクリックします。今回は「Text to UI」からデザインを作成したいと思います。

すると下のような画面に遷移します。前回にUizardでUIを生成した時と同じプロンプトを入れてみたいと思います。
Uizardでの生成結果が気になる方はこちらからご覧ください。

前回同様まずはdesktopのUIを作っていきますので、まずは「Web」を選択します。
以下のようなプロンプトを入力し「Generate」ボタンをクリックします。

従業員を管理できるアプリケーション。勤怠管理、休憩時間管理、従業員のスケジュール確認などの機能があります。

了解しました！
デスクトップ向けのインターフェースを想定すると、以下の画面構成を提案します。

・ダッシュボード：従業員のステータス、出勤状況、スケジュールの概要を確認できる画面。
・出勤管理：従業員の出勤状況を記録し、モニタリングするためのインターフェース。
・休憩時間の管理：従業員の休憩時間を追跡・管理する画面。
・従業員スケジュール：従業員のスケジュールをカレンダー形式で確認・管理する画面。
・従業員プロフィール：スケジュール、出勤状況、休憩記録を含む各従業員の詳細情報を表示する画面。
・レポート：出勤状況やスケジュールの遵守率など、様々なメトリクスのレポートを生成する画面。

これらの画面構成は、必要な要件に合っていますでしょうか？また、追加したい機能や変更したい点があれば教えてください。

Uizardの時はこのような最初の生成の段階で会話ではなく、決められたフォームに入力をしていく形式でした。驚いたのがシンプルな指示に対して、内容を理解し誤解がないように仕様を確認してきたことです。
これ回答に対し、Uizardと同様にスタイルに対しての指示を与えていきます。

はい、その通りです！それに加えて、以下の点も考慮したいです！

・シンプルでモダンなデザイン
・淡い色合い
・モバイルフレンドリーなレイアウト

この方向で進めてもらえますか？

数分ほど待つと、Galileo BotがUIデザインを６画面生成してくれました。

こちらがリクエストいただいたデザインです。
従業員管理デスクトップアプリケーションのデザインが生成されました。

・ダッシュボード概要：従業員の状況、出勤状況、スケジュールを一目で確認できる、ユーザーフレンドリーでモダンなインターフェース。

・出勤管理：出勤を記録・確認するためのシンプルで使いやすいインターフェース。

・休憩時間管理：休憩時間を管理するための明快で効率的な画面。

・従業員スケジュール：従業員スケジュールを管理するためのカレンダーインターフェース。視認性と使いやすさを重視。

・従業員プロフィール：従業員のスケジュール、出勤状況、休憩記録をビジュアル的に見やすく整理したプロフィール画面。

・レポート：さまざまな従業員関連のレポートを簡単に作成・理解できる、ナビゲーションが直感的なレポート画面。

ご希望の変更や、これらの画面に関する追加の詳細が必要な場合はお知らせください！

生成されたUIをFimgaにエクスポートしていきます。

Fimga(デスクトップ)

よく見るとカレンダーの日付であったり、ヘッダーがサイドメニューに途中変わっていたりとありますが、全体的なトーンは全体を通して統一感があるように見られます。
また、各コンポーネントはオートレイアウトになっており、デザインの修正もストレスなく出来そうな印象です。

Galileo AIに戻り、「Code」モードに切り替え、書き出しも同時に行ってみます。

コードをコピーし、codesandboxで描画してみます。
見たところ表示崩れなどなさそうです。画面内にボタンやタグがありますが、それらはあくまで静的な表示に過ぎないので、クリックしても画面の切り替えや要素の表示・非表示などの動作は起こりません。
しかし、動的な振る舞いを実現するためには、別途JavaScriptを使ってイベント処理や動作のロジックを追加する必要があります。

余談ですが、同じチャット内でモバイル用のUIの生成もお願いしましたが、Uizard同様、違うデバイスを生成するためには新しいスレッドでなければいけないようです。

ご迷惑をおかけして申し訳ありませんが、このスレッドではデスクトップ用のデザインしかお手伝いできません。
モバイル・プラットフォーム向けのデザインをご希望の場合は、新しいスレッドを立ててリクエストしてください。 デスクトップ・インターフェースのさらなる改良や機能追加を進めたい場合や、デスクトップ・デザインに関するその他の要望がある場合は、私にお知らせください。

Fimga(モバイル)

Image to UI

続いてImage to UIについて見ていきましょう。こちらはユーザーがアップロードした画像を参照し、AIがそれに基づいたUIデザインを作成します。この機能により、既存のビジュアルを活用してデザインを進めることができます。
こちらもUizardの時に使用した手書きのワイヤーフレームをして生成させてみたいと思います。

使い方

「Text to UI」の時と同じようにサイドメニューから「Image to UI」をクリックします。
画面左にある「Add Image」に弊社のコンタクトページの画面をスクリーンショットし、アップロードを行います。
その下にあるテーマはフッターで使用されている色を指定し、バリアントは１にしました。こちらもデスクトップとモバイルは同時に生成することが出来ないので、２回に分けて生成してみます。

生成したものがこちらです。

デスクトップ

モバイル

こちらの機能もFigmaにエクスポートができるので行います。出力したのがこちらです。

指定したカラーは踏襲してはいるのですが、デザイン自体は画像を元に新たに作成したといった印象が強いです。デスクトップ画面にいたってはフッターそのものが無いなど情報も欠如しています。
これをAI修正してもらおうと思ったのですが、こちらの機能ではスレッド形式ではなく、新たに１から画像をアップロードし生成し直す必要がありました。あくまで画像からUIデザインに生成する機能に特化しているようです。

では次にcodeの書き出しも行っていきましょう。こちらもcodesandboxで描画を行いました。

デスクトップ

モバイル

こちらはどちらも生成されたものと全く同じに描画できています。エクスポートしたコードを使うときの注意点として、コードをそのままコピーしても日本語が文字化けしてしまうので、<meta charset="UTF-8"> タグを <head> セクションに入れる必要がありますので気を付けましょう。
また、レスポンシブには対応していないので、もしレスポンシブが欲しいのであれば書き出されたコードを適宜修正する必要がありそうです。

まとめ

いかがだったでしょうか。Galileo AIはテキストやイメージからUIデザインを自動生成し、仕事の効率化をサポートすることができるツールでしたね。

特筆すべき点として、Text to UIではChatGPTのようにチャット形式で対話しながらデザインの要件を詰められる事や、生成されたUIデザインの統一感の高さが挙げられます。また、現場で広く使用されているFigmaへのエクスポートに対応していることは、実務での活用可能性を高める重要な特徴といえます。生成されたデザインがオートレイアウトで作成される点も作業効率の面で魅力的です。

しかしながら、いくつかの制約や注意点も存在します。デバイスごとに別スレッドでの生成が必要な点や、Image to UIでの修正には、再度画像をアップロードする必要があるといった制約があります。また、有料版であってもクレジット制が採用されており、1画面の生成に10クレジットを消費する仕組みとなっています。デザインの修正を行う際にもクレジットが要るため、計画的に使用していく必要があるでしょう。クレジットを１か月以内にすべて使い切ってしまった場合、翌月まで待つか、追加でクレジットを購入しなければなりません。

Figmaへのエクスポート時には、すべてのレイヤー名が同一になってしまう点も、実務での使用時には注意が必要です。
コード書き出しについては、静的なHTMLとCSSが生成され、基本的なレイアウトは再現できますが、動的な機能の実装やレスポンシブ対応には追加の開発が必要です。

このように、Galileo AIはデザインの専門知識がなくてもプロフェッショナルなUIデザインを生成できるツールとして非常に魅力的ですが、実務での活用においては、その特徴と制約を十分に理解した上で使用することが重要といえるでしょう。今後のUIデザイン制作の効率化に大きく貢献する可能性を秘めたツールとして、さらなる進化が期待されます。

弊社では、最新ツールの利点を最大限に活用しつつ、UI/UXデザインから開発、ビジネスサポートに至るまで、プロフェッショナルな視点でプロセス全体をトータルにサポートしています。特に、人間ならではのクリエイティビティや細部への徹底したこだわりを大切にすることで、クライアントに寄り添った本当に価値あるITストレスフリーなサービスを提供しています。

今後も最新のデザインツールや開発手法について、引き続き情報を発信してまいりますので、ぜひお楽しみに！

引用元：Galileo AI