Figmaプラグインでワイヤーフレームを生成してみた
自己紹介
みなとやです。PdM見習い、Webディレクターとして社内プロダクト改善の企画に携わり、生産性UPに努めています。
AIツールについて説明
使用したツール名： 今回使ってみるのは、以下2つのプラグインです。
WireGen - AI GPT wireframe generation https://www.figma.com/community/plugin/1221144015267698736
Wireframe Designer https://www.figma.com/community/plugin/1228969298040149016
利用料金：体験版の試用で、WireGenは25画面まで、Wireframe Designerは月8画面までトライアル利用できます。
活用方法
現在、社内のプロダクトリニューアルに伴い、UXの見直しとワイヤーフレームの作成を行っています。それに伴って、注目していたFigma/Figjamのプラグインを試してみました。
使ってみた
『WireGen』も『Wireframe Designer』も作成したい画面の概要を入力するだけで、ワイヤーフレームを自動生成してくれるプラグインです。
今回は広告代理店の営業管理システムをリニューアルするという架空の企画の想定で、フォローアップすべき顧客が一目で分かるようなユーザー体験のダッシュボード画面を作ってみます。
まずはFigjamで『WireGen』を起動し、画面の概要、提供したい体験、必要な要素を含む200文字程度のプロンプトを入力しました。画面の右上にあるトグルボタンで、スマホかデスクトップどちらのデバイスにするか選べました。
「Generate」ボタンをクリックし、数分待つと、ワイヤーフレームがモーダルの右側に表示されます。
残念ながら英語で生成されましたが、日本語のプロンプトにも適切に対応していました。Figjamにコピーすると、文言の編集が可能になります。
ワイヤーフレームの横には、各要素の説明も表示されていて、要求仕様書の作成にも活用できそうでした。
次に、『Wireframe Designer』を試用しました。『WireGen』と同じプロンプトで生成を行います。こちらもデバイスの画面を選択できる機能があります。
「Design」ボタンを押すと、Figjamのボードにワイヤーフレームがすぐに生成されました。こちらのワイヤーフレームは日本語で、文言の変更やアイコンのカスタマイズも可能です。
使ってみてどうだったか？
『WireGen』と『Wireframe Designer』はどちらも海外製のプラグインですが、日本語のプロンプトに基づいてワイヤーフレームを生成してくれました。そのまま使えるものではありませんが、アイデアを整理したり、参考にしたりするのに役立ちそうです。
それぞれFigmaでの試用も行いましたが、Figmaではコンポーネントの移動など、より広範な編集が可能でした。ワイヤーフレームの初期構想としては、Figmaでの使用が適しているようです。
プロダクト開発における生成AIは今が黎明期で、今後も便利なプラグインやサービスが登場することでしょう。
興味を惹かれたツールは積極的に試し、業務に取り入れていくことで、企画業務の効率化や業務改善を目指したいと思います。