【2025年版】 Relumeとは？Webデザイナーが注目すべきAIサイト構築ツールを徹底解説！

Webデザインの現場は、日々進化しています。
近年では、AIを活用してワイヤーフレームやUIを自動生成するツールが
急速に注目されるようになりました。
その中でも特に話題なのが 「Relume」 です。

この記事では、WebデザイナーにとってRelumeがどれほど役立つのか、
無料でどこまで使えるのかを詳しくご紹介します。

Relumeとは？｜AIでWebサイト構成を自動生成

Relume（リリューム）は、オーストラリア発のAIベースのWebデザインツール。
FigmaやWebflowと連携し、WebサイトのワイヤーフレームやUIコンポーネントを自動で生成できるのが最大の特徴です。

主な機能

• AI Site Builder
  キーワードを入力するだけで、ページ構成・テキスト・コンポーネントを自動作成。
• UIコンポーネントライブラリ
  何千もの再利用可能なデザインパーツを提供。
• Figma連携
  生成したレイアウトをワンクリックでFigmaにインポート。
• Webflowエクスポート
  ノーコードで直接Webflowに組み込み可能。
• ブランディング適用
  カラーやトーンをAIが自動で反映。

ワイヤーフレームからデザインへの移行が爆速で完了！
提案資料やプロトタイプの作成もラクに。

無料でどこまで使える？ Relumeの料金プラン

Relumeは無料プランありのモデル。以下が2025年6月時点の内容です。

無料プラン（Free）

• 1プロジェクト / 1ページ のみ生成
• Figmaのみ出力可能
• シェア / コメント不可
• コンポーネント数に制限あり

有料プラン（Pro / Team）

プラン名	概要
Starter（$18 / 月1人あたり）	1つのプロジェクト、5ページまで作成が可能。 シェア、コメントができるようになる。 作れるコンポーネント数が格段に増えます。
Pro（$40 / 月1人あたり）	Startereの機能 + プロジェクト・ページの作成が無制限に
Team（$36 / 月 3アカウント）	Proの機能 + チームワークスペースやブランド共有が可能に

無料でも機能の基礎は十分に体験可能！
制作本番やクライアントワークにはProがおすすめ。

RelumeはWebデザイナーに必要か？

向いている人

• ✅ サイト構成・ラフ作成を効率化したい
• ✅ Figmaでデザインしている
• ✅ Webflowでの構築に慣れている
• ✅ スピーディーに提案資料を作りたい
• ✅ コンポーネント設計の時間を短縮したい

向いていない人

• ❌ 完全オリジナルデザインをゼロから作りたい
• ❌ コード主導でサイトを組みたい
• ❌ 決まったワイヤーフレームしか使わない

Relumeを使う3つのメリット

① 爆速ワイヤーフレーム生成

キーワードを打つだけで、ページ構成＋テキストが自動で出力。
アイデア出しにも最適です。

---

② Figmaとの連携でそのままデザインに活用

デザイン案をすぐFigmaに取り込めるので、余計な操作は不要。
デザイン業務とスムーズに連携します。

---

③ 提案資料やプロトタイプに強い

1日で何パターンもモックを出せるので、クライアント提案の質とスピードが両立できます。

Relumeの日本語対応状況

Relume自体は 現時点（2025年6月）では公式に日本語対応していません が、
以下のような形で部分的に日本語化して使うことは可能です。

項目	日本語対応状況
ユーザーインターフェース（UI）	❌ 英語のみ（日本語表記なし）
AIが生成するテキスト	❌ 英語のみ（プロンプトが日本語でも英語出力）
Figmaへの出力	⭕ 日本語入力は可能（Figma側で編集）
Webflowへのエクスポート	⭕ 日本語入力は可能（要手動調整）
コンポーネント名やラベル	❌ 英語（後で編集可能）

1. 日本語で使うための運用方法

方法1｜AI出力をあとから日本語に書き換える

• 英語で構成を自動生成
• テキスト部分を手動で日本語に翻訳
• FigmaやWebflowで微調整

---

方法2｜日本語のテキストで再構成（Figma内で作業）

1. コンポーネントだけをRelumeで生成
2. テキスト部分はFigma上で自分で日本語入力
3. デザインはそのまま活用可能

---

方法3｜Google Chromeの翻訳機能を活用

• RelumeのUIをChromeの自動翻訳機能で日本語に変換
• 操作しやすくなる（完全ではないが十分に実用的）

2. Relumeの日本語対応が進む可能性は？

2024年後半に入り、FigmaやWebflowなど海外のデザインツールも徐々に日本語対応・多言語対応が進行しているため、Relumeも将来的に日本語UIや日本語出力に対応する可能性は十分あります。

公式のアップデート情報は以下から確認可能：
👉 https://www.relume.io/changelog

Relumeでワイヤーフレームを作ってみよう!

① 新規プロジェクトを作成

メールアドレスまたはGoogleアカウントで簡単にアカウントを作成できます。

ログイン後、画面右上の「New Project」を選択してプロジェクトを作成できます!

② プロンプト / 作成ページ数 / 言語 を設定してサイトマップを作成

AI生成に必要な3つの項目を設定して「Generate Sitemap」をクリックすることで
自動で適当なサイトマップとワイヤーフレームが作成されます🧐

③ サイトマップとワイヤーフレームを確認

④ Figmaにワイヤーフレームを出力

FigmaにRelumeのプラグインを追加することで、エクスポートすることができます。
Figmaでプラグインの追加先プロジェクトを指定する必要があるので、先にワイヤーフレームの出力先は用意しておきましょう!

⑤ デザインを作成してクライアントに提案!

FigmaにRelumeのワイヤーフレームを追加することができました。
あとはいつもの工程でデザインの制作に入りましょう。
複数のワイヤーフレームを用意して、別パターンを提案するのもいいですね!

まとめ｜Relumeは“Webデザイナーの相棒”になる

Relumeは、Webデザイナーにとって時間を生み出す強力な武器です。

「ワイヤーを組むのに時間がかかる…」「AIの力で効率化したい」と思っている方は、
まず無料プランで試してみるのが◎。
FigmaやWebflowと組み合わせれば、さらに強力なワークフローを構築できます。

関連リンク

• Relume公式サイト：https://www.relume.io/
• Figma公式：https://www.figma.com/
• Webflow公式：https://webflow.com/