Wireframe Designerとは？

Wireframe Designer は、AIを活用して素早くワイヤーフレームを作成できるデザインツールです。直感的な操作でレイアウトを設計でき、初心者でも簡単に作成可能。自動デザイン提案やリアルタイム編集機能を備え、効率的なWebサイト設計をサポートしてくれます。

実際にAIでランディングページを作成する

早速人材系のランニングページのWFを作ってみましょう。

1.Wireframe Designerを開く

以下のURLからWireframe Designerを開き「Open In…」をクリック

URL：https://www.figma.com/community/plugin/1228969298040149016/wireframe-designer

2.Figma ファイルを選択

「新しいファイル」→「Figma ファイル」を選択

3.Figmaの画面から「実行」をクリック

4.パソコンとスマホの選択

パソコンとスマホのどちらのワイヤーフレームを作成するか選択します。この記事では「パソコン」を選びます。

5.プロンプトを記入します。

作りたいワイヤーフレームの内容を英語で記入します。この記事では「Please create a well-designed landing page for a staffing service.(人材派遣サービスの良い感じのランディングページを作ってください。)」と入力しています。

6.ワイヤーフレームが出力される

数十秒ほど待てば、WFが出力されます。

たった数秒でワイヤーフレームが作れる、Figmaのプラグイン「Wireframe Designer」https://t.co/S5hOcv8fKN

構成案が一瞬でできるので、
・打合せ中のイメージ共有などに
・ディレクター⇔デザイナー間の認識合わせに
・複数案を爆速で出したいときにも便利。

参考動画のプロンプト⇩ pic.twitter.com/mkr16Qknu8

— KOHIMOTO LABO (@kohimotolabo) April 4, 2025

完成したランディングページの評価

いかがでしたでしょうか。資料作成には他にもさまざまなツールを併用する方法もありますが、 ひとつのツールで完結できることは何よりの効率化だと思います。

WireframeDesignerでランディングページを作成するメリットには以下が挙げられます。

Wireframe Designerの4つの特徴

①誰でも簡単に使える

Wireframe Designerは簡単な文章を入力するだけで使えるため、誰でも簡単に使えます。英語で入力する必要はありますが、日本語をGoogle翻訳などで英語にすればよいだけですので、特に問題はないでしょう。

②無料で試すことができる

Wireframe Designerは無料で10回までワイヤーフレームを作成可能です。十分に試すことができるため、迷っている方はまずは無料で使ってみてください。

③数十秒という速さで作成できる

Wireframe Designerはワイヤーフレームの作成をたった数十秒で完成させられます。非常に速いため「ミーティング時に叩き台として使う」といった利用方法もあります。

④クオリティが高いため効率化に使える

Wireframe Designerは要件にもよりますが、実際の案件でも使えるくらいにクオリティは高いです。もちろんすべてを代替できるわけではないですが、効率化には十分に使えます。

また、課題展としては、細かい調整の難しさ、カスタマイズ性 などが挙げられます。

KOHIMOTO LABOのXアカウントでは、WebサイトのTipsやAI共創の最新動向や魅力を紹介しています。制作現場でのノウハウや実践例を日々更新しているので、よければのぞいてみてください🙌