aptpod Advent Calendar 2025 12月22日の記事を担当しますデザインチームの高森です。
デザインチームでは普段Figmaを使用してデザインを行なっておりますが、先日Figma Makeというプロンプトを書くだけでAIがアプリケーションのデザインを作成してくれる機能が発表されました。
これまでのデザインプロセスが劇的に変わるのではないかと感じ、現時点で実際のデザインワークフローにどこまで活用できるかを探るため使ってみたので、その内容をまとめました。
現在のデザインプロセス
案件によって内容やボリュームは異なりますが、デザインの依頼を受けてから提出するまでに、ざっくりと以下のようなプロセスがあります。
- 要件・仕様のインプット
- ワイヤーフレームの作成（画面構成、遷移、レイアウトの検討）
- プロトタイプの作成
- デザイン検討
- デザイン適用
- プレゼンテーション
- デザイン調整
- コンポーネント整理
新規に画面デザインしながら仕様を詰めていくようなケースでは、「ワイヤーフレームの作成」と「デザイン検討」を同時に進め、必要に応じて「プロトタイプ作成」という流れが多く、それぞれのプロセスに集中しきれないことが多くなります。既存アプリに機能を追加したり、ワイヤーに既存のデザインを落としんでいくようなケースでは上流の工程は省略されますが、デザインライブラリーを参照し他のアプリケーションでの使われ方も確認しながら作業する必要があります。いずれのケースでもそれなりに手間がかかっております。
Figma Makeにはプロトタイプ作成、ライブラリ連携というこれらの不満を解決してくれそうな機能がまさにありました。実際のデザインワークでどのように使っていけそうか試してみます。
仮タスクでデザインワークをやってみる
「既存のユーティリティアプリに問い合わせ機能を追加する」という仮タスクを設定し、以下のワークフローでFigma Makeを使ってみました。
- ワイヤーフレームの作成とプロトタイプの作成
- デザイン適用
- デザイン調整とコンポーネント整理
1. ワイヤーフレームの作成とプロトタイプの作成
まず、問い合わせ画面のデザインを検討していきます。以下のようにプロンプトを記載します
問い合わせフォームを作成してください。内容は以下
- 氏名入力
- メールアドレス入力
- 問い合わせカテゴリーは計測に関する問い合わせ、取得データに関する問い合わせ、操作に関する質問、その他
- 詳細はテキストの自由記入
- 対応期限は日付入力とカレンダー入力の２種類の入力方法
「問い合わせフォームを作成」だけでも良いですが、作成したい内容が決まっているときは「〇〇をするための〜」や「以下の項目で〜」といった具体的な記述をした方が、イメージに合った画面に辿り着く回数が早いです。今回はデザイン作成後にライブラリ適用について検証したかったので、既存のライブラリ内にあるコンポーネント（テキストフィールドやカレンダー）を用いて作成されるよう記入しました。
出来上がった画面がこちらです。
出来上がった画面にプロンプトを追記して、意図していた箇所と異なる部分の修正やクリック後の表示なども指定していきました。
プロンプト例：
"カレンダーアイコンをボックスの左端に移動してください"
"送信ボタンクリック後、「送信が完了しました」というメッセージをトーストで表示してください"
上手く動かない箇所は、"氏名を入力しているのにエラーが表示されます"といった書き方でも修正してくれました。 出来上がったものがこちらです。
お問い合わせフォームのデザイン検討とプロトタイプ作成があっという間に完了しました。Figmaのプロトタイプ機能では任意のテキストや日付入力を再現することはむずかしく、細かな追加修正も時間がかかっていましたが、Figma Makeだと格段に早く作成できました。実際に操作しながら必要に感じたものをすぐに追加していけるので、操作感のブラッシュアップという目的も十分満たせていると感じました。以下の点も便利だと感じました
- 細かな指示なしに必要な機能がちゃんと考慮されてる（レスポンシブ対応、バリデーションチェック、初期状態やデータが０の時の状態作成など）
- ◯◯してください、クリックできません等のプロンプトでも修正してくれる
- 改善案を提示してもらって抜け漏れがないかの確認もできる
2. デザイン適用
既存のユーティリティアプリに追加できるよう、アプトポッドのライブラリを適用していきます。
プロンプトの入力エリアから、ライブラリやイメージファイルが取り込めます。
アプトポッドのライブラリを読み込むと以下のようになりました。
ダークトーン、フォント、プライマリーカラーが適用されている様です。
全体的に目標のデザインと違っているので、以下のFigmaデータを追加してみました
ダイアログの背景色やテキストフィールドのフレームカラーが調整され、なんとなく近しい雰囲気になってきました。
カレンダーのデザインが異なっているので、カレンダーを直接選択、以下ライブラリ内のカレンダーコンポーネントを追加して、添付のデザインを参照するよう記入してみました。
結果はこちらです。
近しいデザインに変更してくれました。 正確なデザインにしていくには細かくやりとりしていく必要がありそうです。
ライブラリの構成に指定があるのではないかと思いFigmaが公開しているdesign system、appleが公開しているmacOS 26 UI kitをライブラリとして取り込みそちらも適用してみましたが、いずれもフォントやカラーは適用されるもオブジェクトのRやシャドウといった効果は１度では反映されず、何度か手直ししていく必要がありました。 ライブラリだけでは100%意図した通りのデザイン適用は難しそうでした。ライブラリの適用に関しては、Guidelinesにデザインルールを記載していくことで適用精度があがるそうなので、こちらの機能についても今後調べてみたいと思います。
3. デザイン調整とコンポーネント整理
Figma Makeで作成したデザインは画面右上のアイコンでコピー&ペーストしFigmaに移行できます。
コンポーネントのレイヤー構成を確認すると元のものと異なっておりました。 そのまま既存のデザインと同じように管理していると気が付きにくいため、変更が必要な際に注意が必要です。
使ってみた結果
現時点で実際のワークフローに取り込んでみたところ
- ワイヤーフレームの作成とプロトタイプの作成 →◎
- デザイン適用 → 難しい
- デザイン調整とコンポーネント整理 → 難しい
1に関しては驚くほど簡単に素早く作成できました。アプリの目的を伝えておけば、クリック後の遷移画面も自動で作成してくれ、グラフやマップも直接触れるものが確認できます。テキスト入力、ドラッグ＆ドロップで並べ替えなど、Figmaのプロトタイプ機能では難しかった操作も簡単に作成でき、すぐにプロトタイプとして利用可能なクオリティのものを提示してくれました。
2と3に関しては、現時点ですぐに実利用することは難しそうでしたが、作成したプロトタイプにそのままライブラリを適用するというフローは、実現されればそれはそれは便利になりそうです。ライブラリが反映されるように構成を整理していく方法もあるかと思いますが、それよりも早くライブラリの取り込み機能がアップデートされるかもしれません。いずれにしろものすごい速さでAIの生成機能が進化しているため、実用的になる日は近いと思えます。
おわりに
Figma Makeを使うと、アプリのデザインが誰でも簡単にできます。（無料アカウントで誰でも使えますのでぜひ使ってみてください！）数行のプロンプトを書くだけでハイレベルなデザインプロトタイプを簡単に、短時間で、デザイナーなしで作れます。
Figma MakeのようなAI機能が自動で作成してくれるデザインを前に、今後人間のデザイナーには今まで以上に審美眼が問われるのではないでしょうか。AI活用でデザインワークの自動化が進むことで、「機能が成立している」段階から「美しく」細部への配慮が行き届いたデザインを提供するための時間に費やすことができます。
AIを使って取れるようになった時間で審美眼を磨いていくことが、これからのデザイナーに必要な能力になってくるのではないかと思いました。
