デザイン素人がAIを使用して1日でFigmaのモバイルアプリ画面デザインを作成してみた感想【Builder.io】

こんにちは。私はデザイン未経験者でCSSを少し書いたことがある程度のITエンジニアです。今回は素人でもFigmaでデザインを作成してみたいと思ったので、AIを使用して作成してみることにしました。

結論

Builder.ioを実際に触ってみた感想として、文字を入力するだけでFigma上に綺麗な画面デザインをすぐに作ることができ、特にイメージをすぐに出力してみたい人におすすめできると思いました。

ただしデザイン上級者の方や長期的な運用をしたい場合には向かないかもしれません。

Builder.ioとは

Builder.ioは、ドラッグ＆ドロップの直感的なビジュアルエディタを提供するプラットフォームです。エンジニアリングの知識がなくても、ウェブサイトやアプリのコンテンツを迅速に作成・編集できるサービスです。

Figmaにプラグインが存在し、FigmaとBuilder.io間でデータの移行ができたりAI生成ができたりします。

今回は、学習コストがかかるのでBuilder.io自体は使用しません。Builder.ioのFigmaプラグインにあるAI生成機能のみを使用します。

導入方法

Builder.ioは会員登録こそ必要ですが、プラグイン自体のダウンロードは不要でFigma上から簡単に導入することができます。

まずはFigmaのDraftからデザインファイルを作成し、編集画面に移動します。

編集画面の中央下にあるアイコンからプラグインを開きます。検索ボックスが出るので「Builder.io」と入力すれば出てきますのでクリックします。

初回はここからBuilder.ioの会員登録をしてください。無料で使用することが可能です。

Figma上でBuilder.ioにログインできたら、「Design with AI」のタブを選択して開きます。

この画面上でプロンプトを入力するとFigmaでデザインが自動生成されます。

ただしこの入力ボックスはエンターキーで実行してしまうので、日本語だと変換をエンターしただけで送信されてしまいます。別のメモ帳にプロンプトを書いてから貼り付ける形で利用するのがおすすめです。

実際にBuilder.ioを触ってみる

勉強系アプリのモバイル画面デザインというテーマで作成してみたいと思います。

使用したプロンプト

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


**モバイルアプリトップページのデザイン**

**前提条件:**
- テーマカラーは水色
- 洗練された印象のデザイン
- 全体の言語は日本語

**画面構成:**
1. **ヘッダー**
   - タイトル表示「情報Iマスター」
   - 設定ボタン
2. **メインコンテンツ**
   - カウンター表示（例: 「2026年度大学共通テストまであと…100日」）
   - 3つの主要ボタン
     - 「分野別学習」
     - 「共通テスト対策」
     - 「クイック復習」
3. **フッター**
   - バナー広告の配置

生成結果

一回の生成でだいぶ綺麗なデザイン画面が生成されたという印象です。

「分野別学習」などの項目には、指定していませんがサブタイトルが挿入されています。

また生成結果に「大学共通テストまで307日」と表示されていますが、実際にこの日はあと305日でした。プロンプトでは100日と仮定して書きましたが現実に近い値に書き換えてるのがすごいなと思いました。

Builder.io導入からプロンプト入力まで10分もかからないので、驚異的な早さでデザインを作成できます。

追加生成してみる

では、今度は同じアプリの設定画面を作成してみたいと思います。

再度Builder.ioのポップアップを開き、Design with AIからデザインを生成します。

今度はデザインの参考にしたい範囲をFigma上で選択した状態でプロンプトを入力します。画像にあるようにTOPページ丸ごとを選択します。こうすることでTOPページと似通ったデザインを作成することができます。

生成結果は以下です。TOPページと共通したデザインになっていますし、とても綺麗で良質な見た目ではないでしょうか。

ただ難点としては、パーツを作成したい時も別フレームとして作成されてしまうことが挙げられます。

例えば、学習ボタンにプログレスバーを追加したものに変更したいと思い追加生成したのですが、下記画像のように別フレームに書き出されているので、自分でTOPページのフレームに移動してあげる必要があります。

さらに面倒なことに、Builder.ioで生成したデザインはレイヤーが綺麗にまとまっていませんでした。ファイル名は大抵「Rectancgle」などのデフォルトの名前でありわかりづらく、またグルーピングやコンポーネントは作成されていません。

各要素のPositionもAuto Flexを使用しておらず全て絶対値で指定されている状態で、画面幅を調整したり要素を移動させたりするとぐちゃぐちゃに崩れてしまいます。これは非常に厄介です。

また生成されたデザインも似たようなマテリアルデザインやフラットデザインの印象です。

こちらは新規ファイルを作成し、前述したプロンプトに「グラスモーフィズムで作成して」を追加して生成させた結果です。

グラスモーフィズムというと磨りガラスのようなデザインのポップアップに、淡い配色のグラデーション背景というイメージなのですが、そのようなデザインで生成されていません。

成果物

一回で綺麗なデザインを生成することができ感動しましたが、レイヤーがまとまっておらず、結局その後カスタマイズするために3~4時間ファイルをこねくり回すことになりました。

結果、素人が1日かけてそこそこ綺麗にまとまったTOP画面を作ることができました。

まとめ

メリット

日本語対応ができている。プロンプトに日本語が使用できるのはさながら、生成後のデザインもちゃんと日本語が使われる。
一回の生成で実用に足りうる見た目を作成することができる。
モダンかつシンプルで万人ウケするデザインを生成することが可能。

デメリット

階層構造やファイル名がが綺麗にまとまっていない。ファイル名はほとんどがデフォルトの名前であり、またグルーピングやコンポーネントは作成されない。
Auto Flexが使用されていない。各要素のPositionが絶対値の状態。
ボタンやカラムなどのパーツを生成しても、インポートすると毎回新規フレームが作成される。コピペして埋め込めばいいのだが、Positionが絶対値なので埋め込むのが面倒。
フォントが必ずRobotoになる。Noto Sans JPを使用するようプロンプトに含めても無視される。
既存のデザインに従わせるようにしても、カラーコードが微妙に異なることがある。
- これはカラーコードをプロンプトに含めれば解決するかも？
だいたい似たようなフラットデザインやマテリアルデザインが生成される。おしゃれで洗練された独創性のあるデザインは難しそう。

感想

Builder.ioは何より導入が簡単でサクッとデザイン生成できる点が魅力なので、ワイヤーフレームだけあってイメージ図が欲しい場合やモックアップを作りたい場合に適していると思います。

ただプロトタイプ作成となると、レイヤーをちゃんとまとめ直す必要があり手間がかかります。Figmaに慣れている人ならBuilder.ioに作らせるより、自分でやった方が早いのかもしれません。

Figma初心者の方も、レイヤーまとめは難しいのでAI生成したものをまとめ直すより、よくまとまっているテンプレートを改変する方が楽かもしれません。

今後に期待すること

今回試していませんが、レイヤー構造をプロンプトに指定するなどもっと詳細に記載すれば一回で運用に適したデータが生成される可能性もあります。

ユーザにできることとしてはプロンプト改良が重要だと思いました。

また今後、以下の2点が実現されればかなり実用性が高いサービスになると思いました。

運用に適したレイヤー構造のデータが生成される
洗練された多様なデザインも生成可能

これからのアップデートに期待です。

おまけ：Figma AIについて

https://help.figma.com/hc/en-us/articles/4406787442711-What-Figma-features-are-in-beta#h_01J071T8RKD9E5P2RGC632F4V2

現在Figma公式が「Figma AI」と言うAIツールの開発を進めており、数ヶ月以内に提供される予定だそうです。

現在は一部の限定ベータ版ユーザのみに開放されています。

今後のリリースに期待です✨