Banani

1. 自然言語によるUI生成
   プロダクト、ページ構成、ビジュアル方向を説明すると、AIが複数ページを含むUIプロトタイプを直接生成します。
2. クリック可能なプロトタイプ
   生成されたページには基本的なインタラクションと画面遷移が含まれます。静止した完成イメージを見るだけでなく、ボタンをクリックして主要なユーザーフローを体験できます。
3. 対話形式の編集
   画面上の要素を選択し、テキストでコピー、色、フォントサイズ、レイアウト、そのほかの属性を変更できます。デザインパネルを何度も確認する必要がありません。
4. 参考資料からの生成
   テキストによる説明に加えて、スクリーンショットやPRDなどの資料を追加できます。AIが既存のプロダクト情報をもとにインターフェースをデザインします。
5. Figmaへの書き出し
   有料プランでは、編集可能な構造を維持したままデザインをFigmaへ書き出せます。その後の細かな調整やチームでの共同作業に利用できます。
6. コードの書き出し
   HTML/CSSなどのフロントエンドコンテンツを書き出し、開発者がプロトタイプの処理を続けられます。
7. プロジェクト共有
   生成したプロトタイプをリンクでチームへ共有し、レビュー、コミュニケーション、初期段階のプロダクトテストに利用できます。

Bananiを開くと、AIチャットツールのように見えます。

私は、比較的具体的な要件を入力しました。

「ペット預かりサービスのアプリのホーム画面をデザインしてください。上部に検索欄を配置し、中央には近くでペットを預かれる家庭を表示します。各カードにはプロフィール画像、評価、距離を入れ、下部には『ホーム』『見つける』『メッセージ』『マイページ』の4つのタブを配置してください。」

数秒後、確かに説明に近いインターフェースが生成されました。

ホーム画面だけではありません。

リストのカードをクリックすると詳細ページへ移動でき、基本的なページ間の関係も一緒に作成されていました。

これは、AIでUI画像を1枚生成するだけの場合より、はるかに実用的です。

画像がどれほど美しくても、ボタンをクリックできず、ページ間の関係もなければ、プロダクトフローを議論する用途には限界があります。

Bananiは少なくとも、それを「プロトタイプ」として作成します。

次に、タイトルを変更してみました。

対象の領域を選択し、次のように入力しました。

「タイトルを『信頼できるペットシッターを探す』に変更し、色を暖かいオレンジにしてください。」

該当する要素だけが変更され、そのほかのレイアウトには明らかな変化がありませんでした。

この編集方法は、Figmaに慣れていない人に適しています。

特定のレイヤーを探したり、右側のプロパティパネルを調べたりする必要はありません。変更したい内容を明確に伝えるだけです。

ただし、AIによる要件の理解は、常に安定しているわけではありません。

その後、健康的な食生活を記録するアプリを作らせたところ、一度は明らかにECアプリのような画面が生成されました。「毎日の食事、カロリー、栄養データを記録するアプリであり、ショッピングアプリではない」と明確に書き直すと、意図した方向へ戻りました。

説明が曖昧であるほど、AIが不足部分を独自に補いやすくなります。

複雑な業務ロジックでは、この傾向がさらに明確になります。

Bananiが得意なのは画面構造であり、プロダクトロジックの設計ではありません。

ログイン、ホーム、一覧、詳細などの一般的なフローは比較的簡単に生成できます。しかし、複雑な権限、複数のユーザー役割や状態、例外分岐、多数の条件付きインタラクションについては、人が確認する必要があります。

クレジットも現実的な問題です。

無料版で複数のページ案を生成し、その後十数回修正を続けると、すぐに上限へ近づきます。

初めて試す場合は、最初のPromptをできるだけ具体的に書き、意味のない再生成を減らすとよいでしょう。

Figmaへの書き出しにも注意が必要です。

無料版で満足できる結果を作成しても、既存のデザインファイルへ移して作業を続けたい場合、書き出しは有料機能であることが分かります。

プロダクトマネージャーが作成後にリンクを共有して議論するだけなら、この制限の影響はそれほど大きくありません。

デザインチームの場合は異なります。

Bananiの結果をFigmaへスムーズに移せるかどうかが、正式なワークフローに導入できるかを大きく左右します。

良いところ

• アイデアを素早くインターフェースへ変えられる： デザインソフトを使えなくても、最初のプロダクトプロトタイプを作成できます。
• 生成されるのは画像ではなくプロトタイプ： ページをクリックでき、ユーザーフローの議論に利用できます。
• テキストによる編集が分かりやすい： 文言や一般的なビジュアル属性を変更するために、レイヤーを何度も探す必要がありません。
• Figmaへ引き継げる： 有料プランでは、デザイナーが使用している既存のワークフローへ移行できます。
• 初期段階の方向性検討に適している： 白紙のキャンバスから始めるより、複数案を素早く作成できます。

気になるところ

• クレジットの消費が速い： 複数ページの生成や連続した修正で、利用枠を使い切りやすくなります。
• 無料版ではFigmaやコードへ書き出せない： 正式なワークフローを評価するうえで、一定の制限になります。
• 複雑な業務を誤解しやすい： AIが存在しないページやロジックを独自に追加する場合があります。
• 生成結果にランダム性がある： 同じ要件を再生成しても、レイアウトが大きく異なる可能性があります。
• 精密なデザインには限界がある： 経験豊富なデザイナーが作成した最終成果物との間には、まだ差があります。

向いている人 / あまり向いていない人

向いている人

• プロダクトマネージャー： 要件を素早くレビュー可能な画面へ変換できます。
• 起業家： デザイナーを探す前に、プロダクトの方向性と中心画面を作成できます。
• 個人開発者： デザインリソースが不足しているSide Projectで、プロトタイプを素早く作れます。
• デザイナー： 初期段階で複数のレイアウトを検討し、利用できる方向性をFigmaへ持ち込んで仕上げられます。
• ユーザーテストが必要なチーム： 低コストのクリック可能なプロトタイプを、より速く作成できます。

あまり向いていない人

• ピクセル単位の最終デザインが必要な人： Bananiは初期プロトタイプ向けであり、専門的なUIデザインを完全には置き換えません。
• インタラクションロジックが非常に複雑な製品： 複数状態、複数役割、例外フローは、引き続き人が設計する必要があります。
• 高度なモーションが必要な人： ページと基本的なクリック操作が中心であり、専門的なモーションデザインツールではありません。
• 無料のFigmaワークフローへ完全に依存している人： 書き出し機能には有料プランが必要です。
• AIのランダムな結果を扱いたくない人： 一部のページでは、要件を何度も書き直す必要があります。

Bananiが最も役立つのは、プロダクトがまだアイデアの段階にあるときです。

デザイナーの作業開始を待つ必要も、自分でFigmaを開いて長方形から描き始める必要もありません。

まず、どのようなプロダクトなのか、ホーム画面に何を配置するのか、ユーザーがどのように次のステップへ進むのかを明確に伝えます。すると、議論を続けられる最初のバージョンを素早く生成できます。

正しくない部分があれば、テキストで修正を指示できます。

この方法は、プロダクトマネージャー、起業家、個人開発者に特に適しています。最初のプロトタイプは、必ずしもピクセル単位で美しく仕上げる必要がありません。まず構造とフローを明確にすることのほうが重要です。

ただし、その後の専門的なデザイン作業を置き換えるものではありません。

複雑なビジネスロジック、精密なビジュアル、完全なデザインシステム、高度なインタラクションは、最終的に人が引き続き処理する必要があります。

初めて使う場合は、自分がよく理解している小規模なプロダクトで試すことをおすすめします。

3～4つの中心画面と主要なフローを明確に記述し、生成後にどの程度の修正が必要になるかを確認してください。

構造の大部分をそのまま利用できるなら、Plusを検討できます。

すべての画面を最初から作り直す必要があるなら、生成速度がどれほど速くても、大きな時間短縮にはなりません。