はじめに
こんにちは！フリューでデータ分析をしております、上原です。
これは フリュー Advent Calendar 2025 の14日目の記事です。
最近流行りの生成AIを使って何かやってみたいな～ということで、
適当に思いついたアイディアからプロトタイプ作成までを実践してみました。
今回作るのは、自分が元々温めていたご飯版アキネイター、名付けて
🌟メーシネイター🌟 です！
FigmaのAI機能(※)を駆使して、爆速で形にしていきたいと思います。
※プロンプトや画像を入力するとそれを使ってUI要素を自動生成してくれる機能
無料版だと利用回数上限がありますが、今回レベルであれば問題なし
1. Figmaでプロトタイプ生成
Figmaに生成AIを使ったプロトタイプ作成の機能が搭載されたという情報を聞きつけたので、
早速試そうということで以下のような雑なフリをFigmaに投げてみました。
プロンプト：
ご飯版のアーキネイターを考えています。
いくつかの質問に答えると気分に沿ったご飯を提案してくれるものです。
メーシネイターと名付けました。
良い感じのプロトタイプを考えてください
すると、以下のような回答が返ってきました。
Figmaの回答：
メーシネイターのプロトタイプを作成します！アキネイター風の雰囲気で、
いくつかの質問に答えるとぴったりのご飯を提案するアプリを作りますね。主な特徴：
- 質問形式のUI（温度、量、辛さ、気分、料理スタイル）で段階的に進行
- グラデーション背景とアニメーションで楽しい雰囲気を演出
- 回答に基づいて12種類の料理から最適なものを提案
おお、良い感じです。しばらく待つと、、、
画面が出てきた！
ただ、内容は良いんですが……
あまりにもケバケバしい!!!!!!!!ドラゴンフルーツかよ!!!!!!!!!!!
2. テイストの変更（Copilot × Figma）
見た目を変更するため、再度Copilotに相談してテイストの方向性を決め、
Figmaに指示を出します。
Copilotへの依頼：
ご飯版のアーキネイターであるメーシネイターを考えています。
イメージ画像を作ってください。
食欲をそそるデザインにしたいです。
提案されたデザインがこちら
うーん！なかなかよい！
ということでFigmaで再生成しました。
いいじゃんいいじゃん。でも、
ちょっとこれじゃない感あるよね??????
3. Stitchで素材生成＆ブラッシュアップ
ここで Stitch というサービスを使って、それっぽいイメージ画像を作ってみます。
翻訳はCopilotにお任せです。
※Stitch:Googleが出しているUIデザイン生成ツール
再生成して
おおっ、かなり本格的になってきた！
このテイストをFigmaに取り込み、さらに日本語化と調整を加えます。
Figmaへの指示：
画面のテイストをもっと食欲がわきそうな感じにして。あと日本語でお願い。
出来上がったのがこちら！
やるやんけ!!!!!!!!!これぞ「メーシネイター」!!!!!!!!!!!!!!!!!!
まとめ
ここまででおおよそ30分。
アイディア出しから、それっぽいプロトタイプの作成まで爆速で完了しました。
大学時代には必死に素材を集め、紙芝居形式で操作性の確認をしていたことを考えると、
ほぼ一瞬でアイディアを形にできる今の環境には驚きです。
画面遷移も作ってくれるので、操作性の確認までスムーズに行えました。
今後もアイディアの検証や、ちょっとしたプロトタイプ作りには
積極的にAIを活用していきたいと思います。