はじめまして。フリーランスWebデザイナー4年目のyukiと申します。
yukiテキストからワイヤーフレームを作成するのって結構時間かかりませんか？
Web制作を作成するにあたって欠かせないのがワイヤーフレームの作成。
でもテキストから構成を考えてまとめるって意外と時間もエネルギーも使いますよね。
しかも、クライアントやチームに共有するためには必須の過程なのに、完成デザインとは全然違うものになるから地味に苦痛…。
yuki正直もっと楽にならないかな
と思っていました。
そこで今回は、ワイヤーフレームを自動生成してくれるAIツール「Relume（リムール）」をご紹介します！
このRelumeワイヤーフレームは簡単にできるのですが、Figmaへのエクスポートする際に少し苦戦します…
ただ、このRelumeのFigmaコンポーネントがかなり使えると思いますので、是非使ってみてください！
手順を追って段階的にご紹介していきますのでワイヤーフレーム作成を一瞬で終わらせて「爆速Webデザイナー」への一歩を踏み出しましょう
ワイヤーフレーム作成AIツール「Relume」の概要
Relume（リルーム）は、ウェブサイトのワイヤーフレームやサイトマップの作成を効率化するAIサイトビルダーです。
テキストでサイトの目的や構成を入力するだけで、複数画面の構造を自動的に生成し、
Figma、Webflow、React用に各1,000以上の再利用可能なコンポーネントを提供。
Figma、Webflow、Reactへのワイヤーフレームやコンポーネントのコピー&ペーストが可能。
コメント機能、共有リンク機能により、クライアントやチームとのレビュー・フィードバックがスムーズに行えます。
Figmaでも作業できるのはFigmaユーザーとしては嬉しいです
そしてワイヤーフレームだけでなくコンポーネントも用意されてるのはレイアウトで悩む必要がなくかなり使えます。
コンポーネントについては最後にご紹介しています。
ワイヤーフレーム作成AIツール「Relume」の料金プラン
2025年9月1日現在での料金はこちらです。
無料プランもありますが1プロジェクト1ページまでとありますので一回試したら次は有料プランへの切り替えが必要です。
無料版では5ページ分のワイヤーフレームが作れても閲覧できるのはトップページのみ。
実戦で使うとなるとやはり有料版への以降は必須になります。
価格について気になる方は詳しくはこちらをご覧ください。
ワイヤーフレーム作成AI「Relume」の使い方
では早速使ってみましょう！ワイヤーフレームを作るのは3分ほどで出来ちゃいます！
①Relumeのアカウント登録
まずはトップページにアクセスします。
右上の「無料で始める」を押し、アカウントを作ります。
Googleアカウントがあるとすぐに始められるのは良いですね。
プランを選ぶ画面が出るのでFreeプランの「Get started」を押します。
簡単なアンケートを答えてスタートし、アカウント登録は完了です。
②ワイヤーフレームを作ってみる
こちらがダッシュボード（管理画面）です。
右上の「New Project」を押して作成スタートです！
プロンプト入力画面が出るのでこちらにプロンプトを入力してください。
こちらを入力してみました！
Description – Relumeについてのサイトを作ってください
Number of Pages – 1-5
language – 「日本語」を選択します。
最後に「Generate sitemap」を押すとサイトマップができました！
上側に出ているバーを押すとサイトマップの他にワイヤーフレーム、デザインを見ることができます。
無料版なので下層ページは見れないようになっています。
こちらはトップページのデザインです。写真はイメージと違うものが入っている気がします
簡単な編集ならRelume上で変更もできます。
さらにプロジェクトのチームを招待し、このワイヤーフレームを共有することができます。
これでワイヤーフレーム作業が爆速で終了です！
あとはチームのOKが出ればデザイン作業に入れるのでとても効率が良いですね！
「Relume」から「Figma」にエクスポートする方法
RelumeではFigmaエクスポートができる機能があるのでエクスポートの仕方をご紹介します。
ただ、最初に言ったようにここの作業が少し面倒ですので頑張ってFigmaにコピーしましょう！
①Exportする
プロジェクトの右上は既にFigmaマークになっているのでそのまま「Export」を押します。
ちなみにFigmaマークをWebfowやReact、HTMLコードなど選択肢が出てきます。
②Get Figma Kitを入れる
FigmaのRelume Kitを入れるため「Get Figma Kit」を押します。
【補足】日本語訳
この手順に従ってプロジェクトをFigmaにエクスポートしてください
- Relume Figma Kit をコピーしてください。
- Relume Figma Plugin を使って、そのFigma Kitにインポートしてください。
③Figmaを開く
次に「Figmaで開く」を押します。
開きました…が、何も出てきません。
このまま出てきてくれれば最高ツールなんですが
この作業で「RelumeとFigmaを繋げるファイルを作りました」というところでしょうか。
④Relumeの管理画面に戻る
一旦Relumeの管理画面に戻り、左列「Figmaライブラリ」を押します。
真ん中に「Relume Figma Plugin」のインストールボタンがありますのでこれをクリックしてください。
⑤Relume Figma Pluginをインストールする
⑥展開するファイルを選択
「場所を指定して開く」を押します。
展開したいページを選択できるので、先ほど「Relume Figma Kit」 で作成したファイルを指定します。
⑦「Relume」で作成したプロジェクトを選択する
先ほどRelumeで作成したプロジェクトを選択します。
⑧インポートする内容を選択する
今回はWireframes（ワイヤーフレーム）を選択します。
⑨Figmaにエクスポート完了
WORKSPACEのWireframeというところに出力されエクスポート完了です。
先に「Relume Figma Plugin」を入れておくという手段もあるかもしれませんが初めて使うのにはハードルが高いですね。。
UX改善を求めたい気もします…
ちなみにデザインもエクスポートしたいという場合は「Relume Figma Plugin」を起動させれば上記⑥まで飛ぶので簡単にインポートすることができます。
最初のハードルを越えればかなり使えるツールだと思います！
プラグインに関する詳しいヘルプページはこちらをご参照ください
ワイヤーフレームはFigmaでも編集可能
エクスポートしたワイヤーフレームはもちろんFigmaで編集ができます。
テキストも自由に変更可能です。
ただ、レイアウト変更はオートレイアウトがカッツリ組み込まれているので
解除しても解除してもレイアウトが崩れていき消耗してしまうのでレイアウト編集はしない方が良いかもしれません。
あくまでもチームでの認識合わせのワイヤーフレームとして使うのが良い気がします。
1000以上のFigmaコンポーネント
最後にコンポーネントについてご紹介です。
コンポーネントとは「ボタン」や「カード」など、繰り返し使う要素を「ひとつの元デザイン」として定義できる機能です。
左列ページの下に「MARKETING COMPONENTS」と各パーツのレイアウトがたくさん用意されています。
Nav32種類、Footer17種類、Featureにいたってはなんと631種類のレイアウトが用意されています！
このコンポーネントのレイアウトを参考に最終デザインもできますし、
このコンポーネントを取得するためだけにRelumeに無料で登録するのも良いかもしれません
ワイヤーフレーム作成AIツールRelumeのメリット・デメリット
長くなりましたがRelumeのメリット・デメリットをまとめてみました。
メリット
・無料版でも十分機能が試せる
・Googleアカウントで簡単に登録可能
・日本語のプロジェクトにも対応
・サイトマップ・ワイヤーフレーム・デザインまで一瞬で作れる
・Figmaへエクスポートできる
・無料で豊富なFigmaコンポーネントが取得できる
デメリット
・UIは基本的に英語
・初めてFigmaにエクスポートするには複雑
・Figma上でレイアウト編集は難しい
Figmaコンポーネントを取得するためにもRelumeを無料登録しよう
改善を期待したい部分があるとは言えかなり優秀。
そして何度も言いますがFigmaコンポーネントが豊富すぎるので無料で取得するためにもRelumeを試してみる価値はあると思います！
この記事の手順に沿ってぜひ試してみてください
