こんにちは。タクシです。
最近、社内でAIを活用した知識共有や開発に対して議論が活発になっており、時代の流れを感じている今日この頃でございます。
私はよくUI仕様を作成したりするのですが、
ワイヤーフレームや、プロトタイピングこそAIを活用してより加速できるといいな〜と思ったのでさっくり調べてみました。
First Draftでワイヤー作成をしよう
FigmaではいくつかのAI機能が提供されています。
- ビジュアル検索
- 画像背景除去
- 翻訳
- テキストの書き換え / 要約 / 翻訳
- （開発連携に特化）Dev Mode MCP Server
などなど、結構面白そうな機能があります。
その中で今回は、First Draftという機能を使って、ワイヤーフレームを作成してみます。
First Draftとは、テキストプロンプトからUIデザインを自動生成する機能です。アイデアの初期段階での素早いプロトタイプ作成に役立ちます。
https://help.figma.com/hc/en-us/articles/23955143044247-Use-First-Draft-with-Figma-AI
今回はとある架空の管理画面を作ってもらうことにします。 とりあえず、ログイン画面とダッシュボード画面の２画面を作ってもらいましょう。
Figmaメニュー＞Actions（星みたいなボタン）＞First Draft
を選択すると、プロンプトの入力画面が出てきます。 入力欄の上から作成したい「Basic site」という部分は以下の四つから選べるようです。
- Basic app
- App wireframe
- Basic site
- Site wireframe
appとつくものがモバイルアプリで、siteがwebサイトです。 今回はwireframeを作りたいのでSite wireframeを選択します。
プロンプトにはとりあえずシンプルに、
・物件管理サイトのログイン画面
・物件管理サイトのダッシュボード
を打ち込んで実行してみます。
（一回のプロンプトで一気にログイン画面とダッシュボードと入力して同時に作成することも可能でした）
結果は以下
プロンプトのテキストがそのままフレーム名になるようです。 Auto Layoutなどのレスポンシブ対応設定もよしなにやってくれます。
ダッシュボード画面を見ると、タイトル部分はプロンプトから予測して日本語になっているようなのですが、他の箇所は英語になっていたので、こちらもFigmaのAI翻訳で日本語に直してみます。
文章の書き換え機能を使ってもう少しわかりやすくできるかやってみます。 プロンプトはざっくりな指示と少し具体的な指示でそれぞれやってみました。
ざっくりプロンプト
- 日本向けに修正してください
- わかりやすい日本語にしてください
実行結果↓
わかりやすいというか、タブなどの文言が少し追加されてました。
細かめプロンプト
- 人物名は日本人
- 通貨は円
実行結果↓
ちゃんと日本人の名前と、円に変換されますが、 120K円というのがなんとなく洋風な空気を醸し出してますね笑
（ちなみに） 画像はないのですが、プロンプト例に、「more professional」みたいな結構ざっくりしたものがあったので、試しにそれを頼んでみたら、なんか、全体的に色が薄くなっただけでした。笑
やはりできるだけ的確に、具体的な指示でないと難しいようです。
ページ全体のフレームに対して指示も出せますが、
フレーム自体も細かい単位から指示を出した方が良さそうです。
プロンプトとデザインシステムの併用で、独自のデザインを生成できるのかな〜
と期待してみたのですが、Figma公式上では曰く現段階では不可能と記載されていました。
It’s not possible to generate designs using your own design system, although we hope to make that functionality available soon.
独自のデザイン・システムを使用してデザインを生成することはできませんが、近いうちにその機能を利用できるようにしたいと考えています。
なので、おそらく既存のデザインシートはコンテキストには含まれないのかな、と思い試しに、 「このワイヤーを元にデザインを作って」 とお願いしても全く関係ないデザインが出来上がりました。（なんかかっこいいですが笑） やはり、少なくともプロンプト上から実際のデザインを使用して新たなデザインを作成をすることは難しいみたいです。 （画像検索などで類似デザインを検索などはできますが）
まとめ
AI機能か〜ふーん程度でうすーく知っていることはあってもあまり使えてはなかったので試しつつ色々知れていい感じでした。 まだベータ版なので本格的に業務に活用できるかと言われればなんともですが、 初期段階のアイディア作成、共有などには十分使えるのではないかと思いました！ 早々に視覚的なイメージを作成できるので、仕様などの議論がより早い段階でしやすいかもしれません。
そこから、より重要なユーザー体験や、実際の開発現場との議論といった部分に時間を投入できる といったところに繋がるといいのかな〜と思います。
他にも様々なAIツールはあるので、色々引き続きみていこうと思います！ デザインを犠牲にせずに機能開発までのプロセスをより効率化できる手段を模索していきます。
