はじめまして。フリーランスWebデザイナー4年目のyukiと申します。
Web制作を作成するにあたって欠かせないのがワイヤーフレームの作成。
yuki正直少し面倒ですよね（小声）
チームでイメージを共有するために必要となるワイヤーフレーム。
最終的なデザインとは全然違うものになるから地味に面倒‥
ということで、以前ワイヤフレーム生成AI「Relume」についてご紹介しました。
RelumeもFigmaにエクスポートができる機能があって申し分ないとは思うのですが、
エクスポートさえ面倒くさい！ということで、今回はFigma内で完結する
Figmaプラグイン「Wireframe Designer」をご紹介したいと思います！
AIを使いこなして一緒に爆速デザイナーになっていきましょう！
Wireframe Designerについて
Wireframe Designerの概要
Figma Wireframe Designer は、Figma上で簡単にワイヤーフレームを作れる無料プラグインで、
プロンプトを入力するだけで短時間でページの骨組みをつくることができます。
「デザイン前の叩き台」としての役割に特化しているので、完成デザインをイメージさせすぎず、
構成の議論に集中できるのがありがたいところです。
【補足】Figmaについて
まず、Figma（フィグマ）についてですがクラウドベースのデザインツールです。
数年前までAdobe PhotoshopやIllustratorでの制作が主流でしたが、基本的にローカルで作業するためチームで進捗を確認しにくい、データが重いなどのデメリットがありました。
クラウドで作業するということでサクサク動くこと、チームメイトの作業がリアルタイムで反映されることから2020年ごろから急速に規模拡大していきました。
現在は有料プランがありますが、無料プランでも十分作業可能で、現在でもAdobe CCは年間約7,8万円かかるため、Figmaヘビーユーザーの方も多いのではないでしょうか。
私もFigmaユーザーの一人で構成・ワイヤーフレームからデザインまでほぼ全てFigmaで完結しています。
ディレクター・クライアント様がFigmaに慣れてない方もいらっしゃるので、Adobeも契約していますが
一般的に広がればFigma一本で作業したいなとも思います。（2024年末に値上がりしてから年間費が；）
Wireframe Designerの料金プラン
本題のWireframe Designerですが無料で月10デザインまで対応可能です。
月を跨ぐとアセットが復活するのは嬉しいですね。
無料プラン：月10デザインまで
Proプラン：無制限のデザイン生成とカスタマイズサポート
Wireframe Designerプラグインを追加する
Figmaの登録が完了していない方は登録から始めてください。
既にアカウントをお持ちの方はFigmaのデザインページでプラグインアイコンをクリックし、「wireframe」と入力するとヒットすると思います。
プラグインのポップアップが出力されますので「実行」をクリックします。
これでWireframe Designerプラグインの追加が完了です。
Wireframe Designerプロンプトの入力の仕方
では早速使ってみましょう！
左上のテキストアイコンをクリックします。
こちらにどんなサイトなのかを入力します。
Background Context：製品の背景
Background of your product & target users：あなたの製品の背景やターゲットユーザーを記入してください
今回は、「webデザイナー10日間カリキュラム講座のサイトでターゲットはこれからWebデザイナーを目指す初心者の方」と入れてみます。
入力したらOKをクリックします。
元のTOP画面に戻るので、サイトの種類を入力します。
今回はランディングページと入力します。
入力したら「Design」をクリックします。
10秒ほど待つと出来上がりました！
Wireframe Designerが作ったWFを修正依頼する方法
上記で作ったLPですがちょっとセクションが少ないのでセクションの追加依頼をしてみたいと思います！
・レビューセクションは横スライダーのアニメーションに変更
・Faqセクション追加
・キャンペーンセクション追加
・講座の進め方セクション追加
こちらをオーダーしてみます。
「Update Design」をクリックするとセクションを追加してくれました！
セクションは追加してくれましたが、レビューの横スライダーは変更できず、レイアウト変更のお願いは難しいようです；
また、追加されたセクションも他のセクションと同じで変わり映えないレイアウトが表示されました。
Wireframe Designerが作ったWFを手動で修正する方法
レイアウト変更したい場合
出来上がったワイヤーフレームはアートレイアウトがかかっているのでレイアウト変更する場合は
レイアウトを一番左の「自由形式」に変更します。
こちらは縦に並べてレイアウト変更した動画です。
行っている作業としては以下になります。
1.レイアウト：自由形式に変更
2.タイトルグループと質問グループをそれぞれセンターへ移動
3.テキストが見切れてしまったので大枠を広げる
4.タイトルグループが左寄せになっているので一旦グループ解除
5.テキストのレイアウトを「幅の自動調整」にします。
6.タイトルグループ3つのレイヤーを選択し、センター寄せにする
7.タイトルグループの3つのレイヤーをグループにして全幅のセンター寄せする
セクションの順序を変更したい場合
オートレイアウトがかかっているので持っていきたい位置にドラッグすれば簡単に移動できます。
テキストを変更したい場合
変更したいテキストレイヤーをクリックを続けていけば編集可能です。
改行してもオートレイアウトのおかげで崩れずに変更できました！
Wireframe Designerを使ってみたまとめ
FigmaプラグインなのでFigma内で完結できるは時短にもなってめちゃくちゃありがたいです！
ただ、文章を細かく指定できなかったり、同じようなレイアウトになりがちなので
ワイヤーフレームの叩き台として使うのが良さそうです。
実際に私は新規ページでは長いテキストが送られてきたり、
現状サイトのリニューアル案件が多いので出番としては多くはない気がします。。
気になる方は月10回は無料ですのでお試しで是非使ってみてください
