ワイヤーフレームが秒で作成される、Figmaにすぐ取り込める！「Relume.io」でサイト設計を時短化する新時代のAIアシスタント

「Relume.io」

「ワイヤーフレームを考えるのに時間がかかる…」「とにかく構成だけでも早く仕上げたい」

そんな悩みを持つWebデザイナーや制作者にとって、心強い味方になってくれるのが、AIベースの設計ツール「Relume.io（リルーム）」です。

Relume.io（リルーム）

このツール、実はたった一言の入力（プロンプト）だけで、サイトマップや構成案を瞬時に生成してくれるんです。しかも、出来上がったワイヤーフレームはそのままFigmaにインポート可能。

この記事では、Relumeの基本的な使い方からFigmaとの連携方法、そして今後のアップデートに期待したい点まで、わかりやすく解説していきます。 デザイン初期の効率をグッと上げたい方は、ぜひ参考にしてみてください。

1. Relume.ioとは？プロンプト1つで構成案が完成！

Relume.ioは、AIの力を活用してWebサイトの設計段階を自動化できるオンラインツールです。シンプルな指示文（プロンプト）を入力するだけで、以下の要素を自動で生成してくれます。

• ページ構成（サイトマップ）

• 各ページのレイアウト案

• 仮の文章付きワイヤーフレーム

「ゼロから何かを考えるのがしんどい…」という人にとって、まさにアイデア出しのブースターのような存在です。

2. Relumeの基本的な使い方【5分で体験できる】

Relumeの利用はとてもシンプル。アカウントを作成してすぐに使い始められます。以下のステップで、すぐにAIの威力を体感できます。

ステップ1：ジャンルや業種を選択

Relumeを開いたら、どんなタイプのサイトを作りたいか選びます（例：美容系サービス、IT企業、カフェなど）。

ステップ2：プロンプトを入力 サイトの目的や雰囲気、ターゲットなどを簡単に入力すると、AIが構成案を出してくれます。

プロンプトは日本語でOK

ステップ3：自動生成されたサイト構成図をカスタマイズ

ページ構成と、それぞれのセクション（ヒーロー・サービス紹介・CTAなど）が表示され、文章も仮に生成されます。

サイト構成図

ステップ4：ワイヤーフレームに変換

ボタン一つで、構成案をワイヤーフレームに変換できます。要素の位置やバランスも整っていて、手直しも簡単です。すご過ごすぎる。。

ワイヤーフレームに変換

3. Figmaにそのまま連携できるのが便利すぎる！

Relumeの大きな魅力の一つが、Figmaファイルとしての出力ができる点です。生成したワイヤーフレームは、ボタン1つでFigma用データとして書き出し可能。実際のUI制作やクライアント共有にもそのまま使えます。

これにより、手書きのワイヤーをFigmaでトレースするような手間が不要に。構成作り→デザイン作業への移行が非常にスムーズになります。

FigmaにインポートしたRelumeのワイヤーフレーム

ワイヤーはセクション単位でパーツ化されているので、細かな編集も簡単。カラースキームやフォントを変更すれば、プロトタイプにぐっと近づきます。

4. 他ツールとの互換性は？Wix StudioやStudioやWordpressは今後に期待

現時点でRelumeがエクスポート対応しているのは主にFigmaとWebflow。特にWebflowとは高い親和性があり、そのままコーディングフェーズまで移行できるのが魅力です。

ただ、Wix StudioやStudio（旧STUDIO）Wordpressとの連携にはまだ非対応。 Relumeから直接エクスポートできるようになると、作業効率はさらにアップしそうです。

とはいえ、現時点でも「Relumeで構成をつくる → Figmaで仕上げる → ノーコード系で再構築する」という流れは実用的。今後のアップデートで連携範囲が広がることに期待したいですね。

5. Relumeを使うメリットはこれだけある！

Relumeを何度か使ってみて感じた利点を、改めてまとめてみます。

✅ ラフ構成が数分でできる

「とりあえず全体像を早く可視化したい」時にピッタリ。初回提案やコンペにも。

✅ 文章付きだから“コピーも考えやすい”

AIが仮の文章を生成してくれるため、見出しや紹介文のベース作りに使えます。

✅ デザインへの移行がラク

Figmaファイルとして取り込めば、あとは自分のスタイルに合わせてカスタムするだけ。

✅ 修正や再提案も手軽にできる

構成が気に入らなければ、すぐに別案をAIに出させることも可能。複数パターン作成にも向いています。

6. Relumeは「構成のプロトタイピング」に最適

Web制作の流れの中で、“構成設計”ってとても重要なのに、時間がかかる工程です。 Relumeを使えば、この部分をプロンプト入力という形で効率化できるのが最大の魅力です。

「とりあえずAIに任せて、あとで自分好みに手を加える」——そんな柔軟な設計スタイルが可能になります。

特にFigmaユーザーにとっては、ワイヤー設計からUI制作までの“橋渡し役”としてかなり心強い存在です。 これからWebデザインの効率化を進めたい方にとって、Relumeは一度試す価値アリです。 cnocs CREATIVE STUDIOでは、Webサイト制作や、既存のWixサイトのリニューアルにも対応しています。 移行やカスタマイズに関してご質問があれば、ぜひお気軽にお問い合わせください。 お客様のビジネスに合った理想的なWebサイトを実現するお手伝いをいたします。 cnocs CREATIVE STUDIO

お問い合わせはこちら