はじめに
元々私はワイヤーフレームをFigmaで作成していましたが、最近はFrame0というAIを活用したツールで作成するようになりました。
「Figma疲れ」を感じていませんか？
「とりあえずワイヤー作って」
そう言われてFigmaを開いたものの、気づけばオートレイアウトの設定や、ボタンの角丸、配色の調整に時間を取られていませんか？
また、まだ仕様が固まっていない段階なのに、Figmaで綺麗なUIを作ってしまったがために、
「ここのボタンの色は青じゃないほうがいい」「フォントが少し小さい」
といった、本質ではないフィードバックをもらって議論が停滞した経験はないでしょうか。
解決策：あえて「ラフ」に作る
そんな悩みを解決するのが、今回紹介するFrame0です。
Frame0の最大の特徴は、あえて 「手書き風（Lo-Fi）」 なデザインで出力されること。
これにより、「これはまだラフです（仕様を詰める段階です）」 というメッセージを、説明せずとも視覚的に伝えることができます。
しかもAI搭載。テキストで指示するだけで、爆速でワイヤーフレームが完成します。
Frame0とは？
一言で言えば、「AIが搭載された現代版Balsamiq」 です。
主な特徴は以下の通りです。
- 手書き風（Lo-Fi）なUIコンポーネント: 詳細なデザイン議論を避け、構造の議論に集中できます。
- AIによる生成・修正: プロンプト（チャット）で画面を生成したり、要素を追加・修正できます。
- コード書き出し: 作成したワイヤーをもとに、HTMLなどのコードを出力することも可能です。
最新アップデート：AIエージェント機能の搭載（v1.1.0）
2025年9月17日にリリースされたバージョン1.1.0では、「Frame0 AI Agent」 が実験的に追加されました。
これにより、OpenAI、Anthropic、Google、xAIといった各社のAPIキーを使用して、より強力なエージェント機能を利用したワイヤーフレーム生成が可能になっています。
10分で「管理画面」のプロトタイプを作ってみる
今回は、実際にFrame0のAIエージェント機能を使って、SaaSの管理画面のプロトタイプを作ってみました。
Frame0では、ChatGPT、Claude、Geminiなどから好みのAIモデルを選択できます。
今回は、APIキーを設定してGemini 2.5 Pro使用しました。
驚くべきはそのスピード感です。
Step 1: ゼロからの生成（テキスト to UI）
まずはベースとなる画面を作ります。
プロンプト:
SaaSのユーザー一覧画面を作ってください。サイドバーメニュー、検索バー、データテーブル、右上に新規登録ボタンを配置して、UIは日本語表記にしてください
これだけで、レイアウトの8割が完成した状態のワイヤーフレームが生成されます。
配置をちまちまドラッグ＆ドロップする必要はありません。
Step 2: 別のページ作成
続いて、別のページも追加してみます。
プロンプト:
メニューに商品一覧を追加して、新たに商品一覧ページも作成してください
Frame0は単一の画面だけでなく、アプリケーション全体のページ構成も理解してくれます。
Step 3: AIによる修正（対話型編集）
生成された画面に少し足りない要素があった場合も、言葉で修正できます。
プロンプト:
商品一覧ページの商品一覧の下にページネーションを付けてください
GUIで要素を探して配置する手間がなく、チャット感覚で修正が進みます。
Step 4: コード出力
ワイヤーフレームができたら、コードとして出力してみましょう。
プロンプト:
HTMLで出力してください
ワイヤーフレームをベースにしたHTMLコードが生成されます。
プレビュー機能ですぐに動作確認も可能です。
実際のHTMLで確認すると、すごく崩れていますね...
Step 5: コード修正
出力されたコードの表示が崩れていたり、調整が必要な場合もAIに依頼します。
プロンプト:
表示が崩れているので修正してください。あと画面全体に管理画面が表示されるようにしてください。
エンジニアでなくとも、見た目の調整をAIとペアプログラミングするように進められます。
Step 6: ワイヤーをブラッシュアップ
最後に、ワイヤーフレーム自体の使い勝手を向上させます。
プロンプト:
メニューの並びを「ユーザー」「商品一覧」「設定」の順に変更してください。
メニューの一番下にログアウトボタンを配置してください。
ログインボタンは少し違う形のボタンしてください。
このように、箇条書きでまとめて指示を出しても理解してくれます。
指示するだけで配置やデザインがどんどんブラッシュアップされていく体験は、一度味わうと戻れません。
最終的な成果物
わずか10分ほどAIとやり取りをするだけで、チームですり合わせができるレベルのワイヤーフレームが完成しました。
Figmaとの棲み分け
Frame0が出たからといって、Figmaが不要になるわけではありません。適材適所です。
| ツール | 主な用途 | フェーズ |
|---|---|---|
| Frame0 | 要件定義、アイデア出し、初期ワイヤー、エンジニア・PM間のすり合わせ | 上流工程・初期 |
| Figma | デザインカンプ作成、デザインシステム構築、最終的な納品物作成 | 詳細設計・実装前 |
結論：いきなりFigmaを開くのではなく、Frame0で「構造」を決めてからFigmaに行くと手戻りが圧倒的に減ります。
まとめ
Frame0は、「めんどくさいワイヤー作り」を「楽しい設計作業」に変えてくれるツールです。
AIに指示するだけで、頭の中のイメージが具現化される喜びがあります。
ツール自体もシンプルで扱いやすく、学習コストも低いです。
「Figmaで消耗しているな...」と感じている方は、ぜひ一度Frame0の無料枠で、この爆速体験を味わってみてください。
Discussion