はじめに

個人開発をしていると、Webデザインや UI/UX の重要性を強く感じます。個人開発で有名な方の中には、UIの細部にまでこだわり、ボタンの位置や文字サイズの微調整にも気を配る方がいたり、デザインがユーザーの期待する水準を下回ったり、使い勝手が悪かったりすると、たとえ機能面で優れていても敬遠されてしまうと指摘する方もいます。

しかし、私自身はデザインが苦手で、考えてもなかなかうまくいきません。テンプレートを使っても、どれが最適なのか判断に迷ってしまい、時間ばかりかかってしまいます。

そんな時、昨今のAIブームに乗って登場した、対話ベースでWebデザインを生成してくれるサービス「Galileo AI」と出会いました。これなら、苦手なデザインもAIに任せることができるのではないかと思い、早速試してみることにしたのです。

Galileo AIのText to UI機能の概要

Text to UIはプロンプトベースでWeb/Mobileのデザインを行うことができる機能です。

「Public」となっている箇所についてはトップページの生成されたデザイン一覧(explore)に表示するか、しないかを選択する箇所です。

ただし、Standardプランの場合強制的にPublicになるため、デザインを非公開で生成したい場合は上位プランのProを選ぶ必要があります。

プランについて(2024/4月時点)

プラン	価格	概要
スタンダード	$19/月	- パーソナルプロジェクト向け - 月1200クレジット - 約120回のデザイン生成と編集 - モバイル＆ウェブUI生成 - 無制限のFigmaエクスポート
プロ	$39/月	- デザインを非公開にしたいプロフェッショナル向け - プライベートモード - 月3000クレジット - 約300回のデザイン生成と編集 - モバイル＆ウェブUI生成 - 無制限のFigmaエクスポート
エンタープライズ	お問い合わせ	- 組織やチーム向けのカスタマイズされた安全なソリューション - プロプランのすべての機能に加え、無制限の生成 - 最速の生成スピード - 高度なデータプライバシーとプライベートモード - 優先サポート

クレジットの消費イメージですが、新規生成で60クレジットを消費して、そこからの修正毎に10クレジットを消費します。

個人開発サービスのデザイン改善プロセス

1. Text to UI機能を使ったデザイン生成の手順

今回は既存サービスのデザイン改修を行うため、現在のページ構成をプロンプトとして伝え、デザインの改良を指示しました。Galileo AIへの指示は英語のプロンプトで行うのがよいでしょう。

ページ構成が決まっている場合、最大6ページまで一括でデザイン出力が可能です。それ以上の場合は、再度ページ作成依頼を送る必要があります。

2. チャットボットとのやり取り

以下は実際のプロンプト例です。


You
"Design a new interface for the musubi app. The top page should have a key message displayed prominently..."


Galileo Bot

Based on your description, here's what I understand for the design of "musubi":
Top Page: 
Key message displayed prominently...

Pin Creation Page:
Simple form with a title field...

Pin Detail Page: 

Shows pin title and list of bookmarks...

Please confirm if this understanding is correct so I can proceed with the design.

3. 生成されたデザインの評価と修正

生成されたデザインは以下の画像のようになります。

出力されたデザインに不備がある場合は、画像の"Edit"をクリックして、再度プロンプトを入力することでデザインを修正できます。

隣の"Figma"ボタンを使えば、Figmaにデザインをコピーすることもできるため、デザイン修正の際に便利です。

また、以下の画像のようにカラーパレットやフォント、ダークモードなどの設定も可能です。

注意点として、一括で複数の画面を生成する際、ヘッダー項目に差異が生じる場合もあるので気をつけましょう。

Galileo AIの他の機能について

今回のデザイン改善では既存のWebデザインを元に行いましたが、新規でデザインを作成する場合は、exploreページから気になるデザインをクリックすることで、そのデザインを生成した際のプロンプトを確認できます。

また、今回は使用しませんでしたが、Image to UI機能も試してみる価値があります。特に、手書きのワイヤーフレームをスキャンしたり、写真に撮ったりして画像としてアップロードすることで、それをベースにしたUIデザインを生成することができます。

Galileo AIには、Text to UI以外にも様々な機能があるので、プロジェクトの目的や状況に合わせて適切な機能を選択することをおすすめします。

まとめ

今回、個人開発サービスのWebデザインを改善するために、対話ベースでデザインを生成してくれるサービス「Galileo AI」を使ってみました。デザインが苦手な私でも、Galileo AIのText to UI機能を使うことで、プロンプトベースで簡単にデザインを生成し、修正することができました。

また、Galileo AIにはText to UI以外にもExplorerやImage to UIなどの機能があり、プロジェクトの目的や状況に合わせて適切な機能を選択することで、より効率的にデザインを生成・改善できることができます。

個人開発者にとって、Galileo AIのようなAIデザインツールは、デザインスキルが乏しくても高品質なUIを作れる強力な味方になります。デザインの生成や修正にかかる時間を大幅に短縮できるため、アイデア出しや試作のスピードを格段に上げることができるでしょう。

今回Galileo AIを使ってデザインを改善したサービス「musubi」は、シンプルで使いやすいリンク集共有サービスです。
アカウント登録不要で、最大10個のURLを保存でき、ワンクリックで簡単にリンク集を共有できます。
ぜひ一度、musubiを試してみてください。