Relume×Figmaでワイヤーフレームを10分で自動生成する手順
Webサイト制作の初期フェーズにおいて、サイトマップの策定やワイヤーフレーム（画面設計書）の作成には多くの時間と工数がかかります。「クライアントへの初回提案を早く出したい」「構成案のたたき台を短時間で用意したい」と悩むデザイナーやディレクターも多いのではないでしょうか。
そこでおすすめなのが、AIを活用してサイトマップとワイヤーフレームを自動生成できるツール「Relume（Relume AI）」と、デザインツールの定番「Figma」の連携です。これらを組み合わせることで、プロンプト（指示文）を入力してからわずか10分程度で、実践的なワイヤーフレームをFigma上に展開できます。
本記事では、RelumeとFigmaを連携させた高速ワイヤーフレーム構築の具体的なステップを解説します。
Relumeとは？Web制作を爆速化するAIツール
Relumeは、Webサイトの要件やターゲット層などのプロンプトを入力するだけで、AIが最適なサイトマップとページごとのワイヤーフレーム構成案を自動生成してくれるサービスです。
生成されるワイヤーフレームは、Web制作のベストプラクティスに基づいたコンポーネントで構成されており、そのまま実務で活用できるクオリティを備えています。さらに、Figma用のプラグインが提供されているため、Relume上で作成したデータをワンクリックでFigmaへインポートできる点が大きな特徴です。
※利用プランや無料枠の仕様は変更される場合があるため、最新の料金体系は公式サイトで確認してください（執筆時点の情報に基づきます）。
事前準備：必要なアカウントとプラグインの導入
作業を始める前に、以下の準備を整えておきましょう。
- Relumeアカウントの作成: 公式サイト（relume.io）から無料登録を行います。
- Figmaアカウントの用意: 既存のアカウントで問題ありません。
- Figmaプラグインのインストール: FigmaのCommunityから「Relume」を検索し、プラグインをインストールまたは保存しておきます。
【実践】10分で完了！RelumeからFigmaへ連携する4ステップ
ステップ1：プロンプトを入力してサイトマップを生成する
Relumeのダッシュボードから新規プロジェクトを作成し、どのようなWebサイトを作りたいかをテキストで入力します。
- 入力例: 「中小企業向けのクラウド会計SaaSのコーポレートサイト。ターゲットは経理担当者。機能紹介、料金プラン、導入事例、お問い合わせフォームを含む構成。」
「Generate」をクリックすると、AIがサイト全体の階層構造（サイトマップ）と各ページのセクション構成を数秒で提案してくれます。
ステップ2：構成案とワイヤーフレームの調整
生成されたサイトマップを確認し、不要なページを削除したり、必要なセクション（FAQやCTAなど）を追加したりします。 ページ単位のワイヤーフレームプレビューに切り替えると、コピーライティング（見出しや説明文）も含んだレイアウトが自動配置されます。コンポーネントの入れ替えやテキストの微修正も直感的な操作で行えます。
ステップ3：RelumeからFigmaへデータをコピー
構成が固まったら、画面右上にある「Export」または「Figma」のアイコンをクリックします。クリップボードにデータがコピーされる、またはエクスポート用のリンクが発行されます。
ステップ4：Figmaプラグインでデザインを展開
Figmaで新規ファイルを開き、事前にインストールした「Relume」プラグインを起動します。 プラグインの画面上でペーストを実行すると、Relumeで構築したワイヤーフレームが、Auto Layout（オートレイアウト）が適用されたクリーンなFigmaデータとして一瞬で生成されます。コンポーネント化されているため、フォントやカラーの一括変更も容易です。
従来手法とRelume×Figma連携の比較
従来の制作フローと、Relume×Figmaを連携させたフローの主な違いは以下の通りです。
| 項目 | 従来の手作業 | Relume × Figma 連携 |
|---|---|---|
| サイトマップ作成 | 要件定義書を元に1〜2時間 | プロンプト入力で約1分 |
| ワイヤーフレーム構築 | パーツ配置・ライティングで半日〜数日 | AI生成＋微調整で約5〜10分 |
| Figmaデータ構造 | 手動でAuto Layout設定が必要 | 自動で最適化されたレイアウトが生成 |
| 初期提案までの時間 | 2〜3営業日 | 当日中（数十分以内） |
初期段階の「ゼロからイチを作る作業」をAIに任せることで、ディレクターやデザイナーは要件のブラッシュアップや独自性の高いUIデザインといった本質的な業務に集中できます。
まとめ
RelumeとFigmaを連携させることで、これまで数時間〜数日かかっていたワイヤーフレームと構成案の作成を、わずか10分程度まで短縮することが可能です。
クライアントへのスピーディーな初回提案はもちろん、社内ブレインストーミングや要件定義のたたき台作りにも強力な武器となります。無料トライアル枠も用意されているため、まずはご自身の案件やテストプロジェクトでそのスピード感を体験してみてください。