目次
1． Figma Makeとは何か？基本的な機能
Figma Makeは、Figmaが提供する新しいAI支援型のプロトタイピング機能で、自然言語の指示をもとに動くアプリやWebサイトのモックを自動生成できるのが最大の特徴です。
たとえば「シンプルな在庫管理アプリのモックを作って」と入力すれば、複数画面構成やボタン・入力フォームなどのUI部品が揃った動的プロトタイプを即座に生成します。スタイルや色味といったビジュアルデザインは後回しにし、まずは機能と情報構造にフォーカスできるため、クライアントとの初期すり合わせに非常に有効です。
さらに、生成したモックは後から自由に編集でき、プロンプトの追加入力によって新しい機能を差し込むことも可能。たとえば「検索バーを追加して」「ナビゲーションを3段階に分けて」など、仕様変更への対応もスピーディに行えます。
このプロセスは従来のFigmaのフレーム作成や手動コンポーネント配置に比べて格段に短時間で済むため、要件定義が固まっていない段階でのたたき台作成に特に適しています。
2． クライアントへのたたき台提示におけるメリット
曖昧な要件を言語化し、すぐに画面に落とし込む作業は、従来であればUXデザイナーやフロントエンドエンジニアが時間をかけて行う必要がありました。
Figma Makeでは、この「構造化」作業をAIに任せられるため、制作側はクライアントのヒアリングに集中できます。また、できあがった動くモックはクリックや画面遷移をシミュレートできるため、単なる静止画よりも理解度が高く、「イメージと違った」という齟齬を早い段階で減らせます。
具体的な例として、イベント予約アプリのプロジェクトで、初回ヒアリングの翌日にFigma Makeで作った動作付きモックを提示したところ、クライアント側が要件を即日修正し、開発開始までの期間を約半分に短縮できたというケースもあります。
また、プロトタイプが視覚的かつ触れる形で提示されることで、非IT系のクライアントや経営層にも仕様を理解してもらいやすくなり、意思決定のスピードが向上します。
3． より効果的に使うための運用ポイント
Figma Makeを最大限活用するには、初期プロンプトの質が重要です。
最初の指示はなるべく具体的に
例：「3画面構成で、トップは一覧、詳細画面には写真と説明文、最後に問い合わせフォームを配置」など、構造や要素の順序まで指定することで、完成度の高い骨組みが生成されます。後から微調整する前提で小さく作る
いきなり大規模なモックを作るより、小さめの機能単位で生成して統合する方が、不要部分の削除や修正が容易です。既存のデザインシステムを参照する
自社やクライアントがすでに持つUIガイドラインやコンポーネントライブラリをFigmaに取り込み、それを元に生成させると、一貫性のあるモックが得られます。チャット修正機能を積極活用する
レイアウト変更やラベル修正などは、チャットに「左寄せにして」「ボタン色を青にして」と書くだけで即反映されるため、操作に慣れれば非常に効率的です。
これらの工夫によって、単なる“お試しツール”ではなく、プロジェクト初期フェーズを加速させる実用的な武器になります。
4． その他の有用な連携・運用方法
Figma Make単体でも十分に有用ですが、以下のような他機能との組み合わせで活用の幅が広がります。
Figma Sitesとの併用
生成したモックをそのままWebページ化し、リンクを共有することで、クライアントがブラウザ上で自由に触れる動作デモとして提示可能です。MCPサーバー連携によるデータ反映
Model Context Protocolを介して、リアルタイムデータや外部システムの情報をモックに組み込むことで、より現実的な動作検証が行えます。コードエクスポートと開発移行
生成したモックのコードをエクスポートし、そのまま開発のベースとして利用すれば、デザインから実装までの移行がスムーズになります。
5． 運用事例と注意点
ある制作会社では、地方自治体向けの観光アプリプロジェクトでFigma Makeを使い、2日間でトップページ・施設詳細・イベントカレンダー画面を生成。動作確認付きのプロトタイプを提示した結果、クライアントの承認が一度で通り、開発準備を早期開始できたとの報告があります。
ただし、Figma Makeの生成内容は完璧ではなく、リンク構造やデータ表示部分に不整合が生じることもあります。特に商用案件では、必ず人的チェックを行い、不要な機能やUI崩れがないかを確認してからクライアントに提示することが重要です。
