Home / AIツール / 【2026年最新版】Relume(リリューム・AIサイト設計)で生成・書き出しできない時の対処法

【2026年最新版】Relume(リリューム・AIサイト設計)で生成・書き出しできない時の対処法

※本ページにはプロモーション(広告)が含まれています

「Relume(リリューム)でサイトマップやワイヤーフレームが生成されない」「FigmaやWebflowへの書き出しでエラーになる」「コピーした部品が貼り付けると崩れる」——AIでWebサイトの設計を時短できるRelumeは便利な反面、生成・書き出し・連携でつまずく場面が少なくありません。

結論から言うと、多くのトラブルは「時間を置いて再試行」「通信とログインの確認」「指示(プロンプト)の具体化」「連携の再認証」「対応ブラウザ・プラグインの確認」「無料枠の残量とプランの確認」で解決します。まずはこの基本を順番に試すのが近道です。

この記事では、Relumeとは何かという基礎から、生成されない・書き出せない・崩れるといった症状別の対処法までを、できるだけ分かりやすく整理しました。仕様や料金は流動的なため、最終的な数値や対応状況はかならず公式の最新情報をご確認ください。

relume-not-working-fix step 1

📑 この記事の目次(タップで開く)
  1. この記事でわかること
  2. 症状別 早見表
  3. Relume(リリューム)とは
  4. サイトマップやワイヤーフレームが生成されない時
  5. FigmaやWebflowへの書き出し・連携でエラーになる時
  6. 貼り付け(ペースト)した部品が崩れる時
  7. 日本語の指示で精度が落ちる時
  8. 生成内容がイメージと違う時
  9. ライブラリの部品が読み込めない時
  10. Figma・Webflow・Reactそれぞれの連携の特徴
  11. 無料の範囲を超えた時
  12. それでもうまくいかない時の切り分け
  13. トラブルを減らすためのコツ
  14. よくある質問(FAQ)
  15. まとめ

この記事でわかること

  • Relume(リリューム)とは何か、どんな作業に使われるツールなのか
  • サイトマップやワイヤーフレームが生成されない主な原因と対処
  • FigmaやWebflowへの書き出し・連携でエラーになる時の確認ポイント
  • 貼り付けた部品(コンポーネント)が崩れる時の見直し方
  • 日本語の指示で精度が落ちる時、イメージと違う時の工夫
  • 無料の範囲を超えた時・部品が読み込めない時の確認方法
  • それでも直らない時の切り分けと、公式サポートへの相談のしかた

症状別 早見表

まずは自分の症状に近い行を探して、対処の方向性を把握してください。詳しい手順は各章で解説します。

症状 考えられる主な原因 まず試すこと
サイトマップが生成されない 混雑・通信不良・指示が曖昧・無料枠の残量切れ 時間を置く/通信確認/目的を具体化/残量とプラン確認
ワイヤーフレームが作れない サイトマップ未確定・処理の一時的な不調・残量切れ サイトマップを先に確定/再読み込み/残量確認
Figmaに書き出せない・空になる プラグイン未導入・手順の取り違え・ファイル容量 プラグイン導入を確認/手順を見直す/時間を置く
Webflowに取り込めない 連携の認証切れ・権限不足・対応環境の不一致 連携を再認証/権限確認/対応ブラウザで実行
貼り付けた部品が崩れる 貼り付け先の非対応・ブラウザ非対応・設定の差 対応アプリ・プラグイン確認/貼り付け方法を見直す
日本語指示で精度が落ちる 言語対応や精度が流動的・指示が抽象的 指示を具体化/英語も試す/生成後に手直し
生成内容がイメージと違う 目的やページ構成の前提が伝わっていない 目的とページ構成を具体化/部分採用で調整
部品ライブラリが読み込めない 通信・プラグイン・対応環境の問題 通信とプラグインを確認/対応ブラウザで実行
無料の範囲を超えた 無料枠の上限到達 残量を確認/必要ならプランを検討

Relume(リリューム)とは

Relume(リリューム・relume.io)は、Webサイトを「作り始める前の設計」を助けるAIツールとされています。サイトの目的や事業内容を文章で伝えると、サイトマップ(ページ構成の地図)やワイヤーフレーム(各ページの大まかなレイアウト)を自動で生成してくれる、という考え方のサービスです。デザインや実装に入る前の土台づくりを短時間で進められる点が特徴とされています。

さらにRelumeは、WebデザインツールのFigma(フィグマ)、ノーコードでサイトを作れるWebflow(ウェブフロー)、そしてReact(リアクト)向けに、再利用できる部品(コンポーネント)ライブラリを用意しているとされています。あらかじめ整えられた部品を組み合わせることで、デザイナーやWeb制作者の作業を時短する用途で使われることが多いツールです。

料金については、無料で使える範囲と、月額の有料プランが用意されているとされています。一般的には、無料プランでは利用できる部品数や同時に進められるプロジェクト数、AIの利用量に制限があり、有料プランにすると利用できる範囲が広がる、という構成が案内されています。ただし具体的なプラン名・金額・制限値はたびたび更新されるため、契約前にはかならず公式の料金ページで最新情報をご確認ください。

1. 基本的な使われ方の流れ

Relumeの一般的な使い方は、おおよそ次のような流れだとされています。お使いの環境やバージョンによって画面や名称が異なる場合があります。

  1. サイトの目的・事業内容・想定する読者などを、文章でRelumeに伝えます。
  2. AIがサイトマップ(必要なページ一覧と構成)を生成します。
  3. サイトマップを確認・編集し、必要なページや並びを整えます。
  4. 確定したサイトマップをもとに、ワイヤーフレーム(各ページのレイアウト案)を生成します。
  5. 気に入った部品や構成を、Figma・Webflow・React へ書き出したり、コピーして貼り付けたりします。

つまりRelumeは「最初の設計図を素早く用意し、そこから各ツールへ橋渡しする」役割を担うツールだと考えると理解しやすいでしょう。

2. UIが英語中心である点に注意

Relumeの画面(UI)は英語が中心とされています。ボタン名やメニュー名が英語のため、はじめは戸惑うかもしれません。本記事では英語表記をそのまま記載しつつ、意味を日本語で補足しています。画面の文言はアップデートで変わることがあるため、実際の表示と本記事の説明が異なる場合は、画面に表示されている英語の意味を手がかりに進めてください。

とくに「Site Builder(サイトビルダー)」「Sitemap(サイトマップ)」「Wireframe(ワイヤーフレーム)」「Export(書き出し)」「Style Guide(スタイルガイド)」といった単語は頻繁に出てきます。これらの意味をあらかじめ押さえておくと、操作で迷いにくくなります。英語が苦手な場合は、ブラウザの翻訳機能を併用するのも一つの方法ですが、翻訳によってボタンの場所が分かりにくくなることもあるため、原文と見比べながら使うとよいでしょう。

3. サイトマップ・ワイヤーフレーム・スタイルガイドの違い

Relumeでつまずかないためには、扱う3つの成果物の違いを理解しておくと役立ちます。役割を取り違えると、「思った結果が出ない」と感じる原因になります。

  • サイトマップ:サイト全体にどんなページが必要かを一覧・整理した「設計図の骨組み」です。まずここで全体像を決めます。
  • ワイヤーフレーム:各ページの中に、見出し・本文・画像・ボタンなどをどう配置するかを示した「ページの下書き」です。サイトマップを土台に作られます。
  • スタイルガイド:色やフォントなど、見た目のルールをまとめたものとされています。デザインの統一感を保つために使われます。

この順番(全体構成 → 各ページの配置 → 見た目のルール)を意識すると、どの段階でつまずいているのかを切り分けやすくなります。たとえば「ページ構成が違う」のはサイトマップの問題、「配置がしっくりこない」のはワイヤーフレームの問題、というように整理できます。

4. どんな人が使うと便利か

Relumeは、Webサイトの制作を仕事にしているデザイナーやコーダー、あるいは自分で事業サイトを用意したい人にとって、最初の設計を素早く進める手助けになるとされています。ゼロから白紙でページ構成を考えるのは時間がかかりますが、AIにたたき台を作ってもらい、そこから手を入れていくことで、作業のスタートを切りやすくなります。一方で、生成された内容をそのまま使うのではなく、最後は人の目で確認・調整することが前提となる点は、覚えておくと安心です。

relume-not-working-fix step 2

サイトマップやワイヤーフレームが生成されない時

「生成ボタンを押しても進まない」「途中で止まる」「何も出てこない」といった症状は、Relumeで最もよくあるつまずきのひとつです。原因は一つとは限らないため、影響の小さいものから順に切り分けていきます。

1. 時間を置いて再試行する

AIによる生成は、サービス側の混雑や一時的な負荷の影響を受けやすい処理です。アクセスが集中している時間帯は、生成に時間がかかったり、途中で止まったりすることがあります。まずは数分から数十分ほど時間を置いて、もう一度試してみてください。ブラウザのタブを一度閉じて開き直す、ページを再読み込みするだけで改善することもあります。

2. 通信環境を確認する

生成はインターネット経由で行われるため、通信が不安定だと処理が完了しないことがあります。次の点を確認してください。

  1. Wi-Fiやモバイル回線が安定して接続されているか確認します。
  2. 速度が遅い場合は、より安定した回線に切り替えます。
  3. VPNや拡張機能が通信をさまたげていないか、一時的にオフにして試します。
  4. 会社や学校のネットワークでは、一部の通信が制限されている場合があるため、別の回線でも試します。

3. 指示(プロンプト)を具体化する

サイトマップやワイヤーフレームの品質は、最初に伝える情報の具体性に大きく左右されます。指示が曖昧だと、生成がうまく進まなかったり、見当違いの結果になったりします。次のような要素を盛り込むと、結果が安定しやすくなります。

  • サイトの目的(集客、採用、商品紹介、予約受付 など)
  • 事業内容・取り扱う商品やサービスの概要
  • 想定する読者(誰に何を伝えたいか)
  • 必要だと思うページ(会社概要、料金、よくある質問 など)
  • サイト全体のトーン(信頼感、親しみやすさ など)

「カフェのサイト」よりも「都心で働く人向けの、落ち着いた雰囲気のカフェの集客サイト。メニュー・店舗情報・予約への導線を重視」のように、目的と読者を添えると伝わりやすくなります。

4. 無料枠の残量を確認する

無料プランでは、AIの利用量や生成できる範囲に上限が設けられているとされています。上限に達すると、新しい生成ができなくなることがあります。アカウントの利用状況や残量を示す表示を確認し、上限に達している場合は、リセットを待つか、プランの見直しを検討してください。残量の表示位置や上限値はアップデートで変わるため、最新は公式の料金・ヘルプページでご確認ください。

5. サイトマップを先に確定させる

ワイヤーフレームは、サイトマップ(ページ構成)を土台に生成される流れが基本とされています。サイトマップが未確定・不完全なままだと、ワイヤーフレームの生成がうまくいかないことがあります。まずはサイトマップ側でページ構成を整え、内容を確定してから、ワイヤーフレームの生成に進んでください。

6. ブラウザや拡張機能の影響を確認する

生成が進まない原因が、Relume側ではなくブラウザ側にあることもあります。古いキャッシュが残っていると、画面が正しく更新されず、生成ボタンが反応しないように見える場合があります。広告ブロックなどの拡張機能が、必要な通信をさまたげているケースもあります。次を試してみてください。

  1. ブラウザを最新の状態に更新します。
  2. キャッシュを削除してから、ページを再読み込みします。
  3. 拡張機能を一時的にすべてオフにして、症状が変わるか確認します。
  4. シークレットウィンドウ(プライベートモード)で同じ操作を試します。

シークレットウィンドウでは拡張機能が無効になることが多いため、これで改善するなら拡張機能が原因だと切り分けられます。

7. 一度にまとめて作りすぎない

非常に大規模なサイト構成を一度に生成しようとすると、処理が重くなり、時間がかかったり止まったりすることがあります。最初は主要なページに絞って生成し、後から必要なページを足していくと、安定しやすくなります。大きなサイトをいきなり完成形で出そうとせず、段階的に育てていく進め方がおすすめです。

FigmaやWebflowへの書き出し・連携でエラーになる時

Relumeで作った内容を、FigmaやWebflowへ持ち出すところでつまずくケースも多く報告されています。書き出しは「アプリ間の連携」が前提となるため、認証・対応環境・権限の3点を中心に確認します。

1. 連携を再認証する

外部サービスとの連携は、認証(ログインや接続の許可)の期限切れや、接続が外れたことが原因でエラーになることがあります。次の手順で接続をリセットしてみてください。

  1. Relumeと連携先(Figma・Webflow など)の両方に、正しいアカウントでログインできているか確認します。
  2. 一度ログアウトし、再度ログインし直します。
  3. 連携の接続を解除してから、もう一度つなぎ直します。
  4. 連携時に求められる許可(アクセス権限)を、すべて承認しているか確認します。

2. Figmaへの書き出しはプラグインの導入を確認する

Figmaへの取り込みでは、専用のプラグインやファイル(Figmaキットなど)を使う流れが案内されています。「Figmaがプラグインの導入を求め続ける」「取り込んだのにファイルが空のまま」「ワイヤーフレームがFigma上に表示されない」といった症状は、プラグイン未導入や手順の取り違えが原因のことがあります。次を確認してください。

  1. Relume側で「Export」など書き出しの操作を行います。
  2. 案内に沿って、Figma用のプラグインやキットを導入します。
  3. Figma側で指定された場所(作業用ページなど)を開き、そこへ取り込む操作を行います。
  4. うまく表示されない場合は、Figmaを再読み込みし、プラグインが有効になっているか確認します。

なお、Figmaのファイルは容量が大きくなると動作が重くなり、表示や読み込みに時間がかかることがあるとされています。表示されないと感じても、しばらく待つと反映される場合があります。

3. Webflowへの取り込みは対応環境と権限を確認する

Webflowへの取り込みでは、専用の取り込み機能やコピー&ペーストを使う流れがあります。エラーになる場合は、次の点を確認してください。

  1. Webflow側で、編集権限のあるプロジェクトを開いているか確認します。
  2. Relumeと連携している場合は、接続が有効か(再認証が必要でないか)を確認します。
  3. 対応しているブラウザで操作しているかを確認します。
  4. 取り込み先のプロジェクトに、貼り付け・取り込みを受け入れる準備ができているか確認します。

4. 対応バージョンの違いに注意する

連携先のアプリやプラグインは、バージョンによって挙動が変わることがあります。古いバージョンのままだと、新しい機能に対応できずエラーになる場合があります。Relume・連携先アプリ・プラグインそれぞれを最新の状態にしておくと、不具合を避けやすくなります。アップデートの有無は各サービス側で確認してください。

5. FigmaからWebflowへ直接持ち込む場合の注意

Figmaでスタイルを整えたRelumeのデザインを、そのままWebflowへ自動で取り込もうとすると、うまくいかないことがあるとされています。FigmaとWebflowをつなぐ仕組みが、Relumeの構成と完全には噛み合わない場合があるためです。Webflowに持ち込みたい時は、Relumeから直接Webflowへ取り込む流れや、コピー&ペーストの方法を使うほうが安定しやすい、という案内が見られます。最新の対応状況は公式情報でご確認ください。

6. 書き出し前に内容を確定しておく

書き出しは、Relume側で内容が固まっている状態で行うのが基本です。サイトマップやワイヤーフレームを編集している途中で書き出すと、意図しない状態のまま持ち出してしまい、連携先で「思っていたものと違う」と感じる原因になります。書き出す前に、ページ構成や各ページの中身をひととおり確認し、問題がない状態にしてから書き出すようにしてください。

7. エラーメッセージを手がかりにする

書き出しや連携でエラーが出た場合、画面に表示されるメッセージには原因のヒントが含まれていることがあります。英語のメッセージでも、翻訳しながら内容を読み取ると、「ログインが必要」「権限がない」「対応していない」など、どこに問題があるかが分かることがあります。メッセージを無視して何度も同じ操作を繰り返すより、内容を確認して対処したほうが解決は早くなります。意味が分からない場合は、メッセージの文面を控えておき、公式サポートやコミュニティへ相談する際に伝えると、的確な回答を得やすくなります。

貼り付け(ペースト)した部品が崩れる時

Relumeの部品(コンポーネント)をコピーして、Webflowなどのツールにペーストしたときにレイアウトやスタイルが崩れる——これも代表的なトラブルです。多くは「貼り付け先の対応状況」と「貼り付け方法」を見直すことで改善します。

1. 対応するアプリ・ブラウザを確認する

部品のコピー&ペーストは、対応しているアプリ・ブラウザでないと正しく機能しないことがあります。とくにブラウザの種類によっては、コピー機能がうまく働かない場合があるとされています。次を確認してください。

  • コピー&ペーストが対応しているブラウザ(一般にChrome・Firefox・Edge など)で操作しているか
  • Safariなど、コピーに対応していないとされるブラウザを使っていないか
  • 貼り付け先(Webflow など)が、その部品を受け入れられる状態になっているか

対応ブラウザは更新によって変わることがあるため、最新は公式のヘルプでご確認ください。

2. プラグイン・拡張機能を確認する

Relumeでは、ブラウザの拡張機能(Chrome拡張など)を使って部品をコピーする方法も案内されています。拡張機能が未導入だったり、無効になっていたりすると、コピーが正しく行えないことがあります。拡張機能やプラグインの導入状況・有効化の状態を確認し、必要なら入れ直してください。

3. 貼り付け方法を見直す

崩れの原因は、貼り付けの操作そのものにある場合もあります。次の手順で見直してみてください。

  1. コピーは、部品に用意された「コピー」操作(コピー用のボタンなど)を使います。
  2. 貼り付けは、貼り付け先で標準の貼り付け操作を使います(Macは command+V、Windowsは control+V)。
  3. 一度にたくさん貼り付けて崩れる場合は、部品を分けて少しずつ貼り付けます。
  4. 貼り付け先の既存のスタイル設定と競合していないか確認します。

4. 一部だけ採用して調整する

すべてをそのまま使おうとすると崩れる場合でも、必要な部分だけを取り込み、貼り付け先で微調整するほうがうまくいくことがあります。完璧な状態での貼り付けにこだわらず、土台として活用し、最後に手直しする前提で進めると安定します。

5. 貼り付け先のCSS設計と相性を確認する

Relumeの部品は、特定のCSSの命名ルールにそって作られているとされています。貼り付け先のプロジェクトが別のルールで作られていると、見た目が崩れたり、スタイルが意図どおりに当たらなかったりすることがあります。とくにWebflowのように既存のスタイル設定があるプロジェクトでは、もとの設定と部品の設定がぶつかることがあります。崩れる場合は、貼り付け先のスタイル設定を見直し、必要に応じて部品側か貼り付け先側のどちらかに合わせて調整してください。最初は空のページや新規プロジェクトで試し、挙動を確認してから本番に取り込むと、トラブルを減らせます。

6. ログイン状態と権限を確認する

コピー&ペーストや取り込みがうまくいかない時は、そもそもログインできていない、または必要な権限がないことが原因の場合もあります。Relume側・貼り付け先側の両方で、正しいアカウントでログインできているか、編集できる権限があるかを確認してください。無料プランで使える部品とそうでない部品が分かれている場合もあるため、利用しようとしている部品が、いまのプランで使える範囲かどうかも確認しておくと安心です。

relume-not-working-fix step 3

日本語の指示で精度が落ちる時

Relumeに日本語で指示を出すと、生成の精度や文章の自然さが思うように出ない、と感じることがあります。AIツールの言語対応や精度は流動的で、アップデートによって変わっていくため、現時点での挙動を前提に工夫するのが現実的です。

1. 指示を具体的にする

言語にかかわらず、指示が具体的なほど結果は安定します。前述のとおり、目的・読者・必要なページ・トーンを盛り込むと、生成の方向性がぶれにくくなります。抽象的な一言だけで済ませず、背景や条件を添えてください。

2. 英語での指示も試す

RelumeのUIは英語中心であり、英語での指示のほうが意図が伝わりやすい場合があります。日本語でうまくいかない時は、同じ内容を英語で書いて試してみるのも一つの方法です。翻訳ツールを使って、一度英語に直してから指示を入れるやり方も有効です。ただし、どちらが良いかはケースによるため、両方を試して比べてみてください。

3. 生成後に手直しする前提で使う

AIの生成結果は「完成品」ではなく「たたき台」と捉えると、ストレスが減ります。文章やページ構成に違和感があれば、生成後に自分で編集して仕上げましょう。生成→確認→手直し、という流れを前提にすると、言語による精度の差も吸収しやすくなります。

4. 専門用語や固有名詞は分かりやすく伝える

業界特有の用語や、社名・商品名などの固有名詞は、AIが正しく解釈できないことがあります。日本語であっても、略語や社内用語をそのまま使うと意図がずれやすくなります。可能であれば、用語を一般的な言葉に言い換えたり、簡単な説明を添えたりすると、生成の精度が上がりやすくなります。たとえば社名だけを伝えるより、「〇〇という、地域密着型のリフォーム会社」のように、業種や特徴を補足すると、AIが意図をつかみやすくなります。

生成内容がイメージと違う時

「出てきたサイトマップが想定と違う」「ワイヤーフレームのページ構成がしっくりこない」という場合、多くは前提となる情報がうまく伝わっていないことが原因です。

1. 目的とページ構成を具体的に伝える

サイトの目的(何のためのサイトか)と、欲しいページ構成を、できるだけ具体的に伝えてください。「料金ページが必要」「採用情報を独立させたい」など、外せない要件を明示すると、結果が近づきます。逆に何も指定しないと、AIが一般的な構成を当てはめてしまい、意図とずれることがあります。

2. 部分的に採用して調整する

全体が思い通りでなくても、使える部分は活かしましょう。気に入ったページや構成だけを残し、不要な部分は削除・編集して整えます。Relumeはサイトマップやワイヤーフレームを編集できる流れになっているため、生成結果をそのまま受け入れるのではなく、土台として手を入れていくのがおすすめです。

3. 何度か作り直して比較する

一度の生成で完璧を狙わず、指示を少しずつ変えて何度か生成し、比較するのも有効です。条件を変えると違う構成が出てくることがあるため、複数案を見比べて、良いところを組み合わせると満足度が上がります。ただし、無料プランでは生成できる回数や量に上限がある場合があります。何度も作り直す前に、残量を確認しておくと安心です。

4. 参考にしたい構成を具体的に示す

「こういう雰囲気にしたい」というイメージがある場合は、それを言葉で具体的に伝えると効果的です。たとえば「トップページの最初に大きな見出しと問い合わせボタンを置きたい」「料金は表で比較できるようにしたい」など、配置や見せ方の希望を添えると、生成結果が近づきます。漠然と「いい感じに」と伝えるより、具体的な要望のほうがAIには伝わりやすいことを意識してください。

ライブラリの部品が読み込めない時

部品(コンポーネント)ライブラリが表示されない、読み込み中のまま進まない、という時は、通信・プラグイン・対応環境のいずれかに原因があることが多いです。

1. 通信を確認する

ライブラリの読み込みもインターネット経由で行われます。通信が不安定だと、部品の一覧や画像が表示されないことがあります。回線の状態を確認し、安定した接続で再読み込みしてください。

2. プラグイン・拡張機能を確認する

ライブラリの利用に拡張機能やプラグインが関わっている場合、それらが無効・未導入だと正しく読み込めないことがあります。拡張機能・プラグインの有効化と最新化を確認してください。一度オフにして入れ直すと改善する場合もあります。

3. 対応環境で開く

ライブラリやコピー機能は、対応しているブラウザで使うことが前提とされています。非対応とされるブラウザを使っていないか確認し、対応ブラウザで開き直してください。キャッシュが影響していることもあるため、キャッシュの削除や別ブラウザでの確認も有効です。

4. 読み込みに時間がかかる場合は待つ

部品ライブラリには多数の部品が用意されているとされ、読み込みに時間がかかることがあります。とくに通信が遅い環境では、一覧や画像が表示されるまで待つ必要があります。「読み込めない」と感じても、実際にはまだ読み込み中というケースもあるため、少し時間をおいてから確認してください。それでも表示されない場合に、通信・プラグイン・対応環境の見直しに進むと、無駄な操作を減らせます。

Figma・Webflow・Reactそれぞれの連携の特徴

Relumeは複数のツールへ橋渡しできるのが強みですが、連携先によって使い方や注意点が異なります。自分が使うツールの特徴を知っておくと、トラブルの原因を見つけやすくなります。

1. Figmaとの連携

Figmaは、デザインを作り込んだり、関係者と共有したりするのに使われるデザインツールです。Relumeで作ったワイヤーフレームをFigmaへ取り込み、そこで見た目を仕上げていく流れが一般的とされています。取り込みには専用のプラグインやキットを使うため、これらが正しく導入されているかが、成否を分けるポイントになります。前述のとおり、ファイルが大きいと動作が重くなることがあるため、必要なページだけを扱うなど、容量を意識すると快適に使えます。

2. Webflowとの連携

Webflowは、コードを書かずにWebサイトを公開できるノーコードツールです。Relumeの部品をWebflowへ取り込むことで、デザインから公開までを一気に進めやすくなります。取り込みには、専用の取り込み機能やコピー&ペースト、ブラウザの拡張機能などが使われます。Webflow側のプロジェクトに編集権限があること、対応ブラウザで操作していることが前提となるため、エラー時はまずここを確認してください。

3. Reactとの連携

Reactは、Webアプリやサイトを作るための仕組み(フレームワーク)の一つで、エンジニア向けの選択肢です。Relumeは、ワイヤーフレームをReact向けのコードとして書き出せる機能を備えているとされています。書き出したコードを、自分の開発環境に取り込んで使う流れになります。コードの扱いには一定の知識が必要なため、エンジニア以外の方は、FigmaやWebflowとの連携を中心に使うほうが取り組みやすいでしょう。対応している書き出し形式や仕様は更新されることがあるため、最新は公式情報でご確認ください。

無料の範囲を超えた時

無料プランでは、利用できる部品数・プロジェクト数・AIの利用量などに上限が設けられているとされています。上限に達すると、新たな生成や一部の機能が使えなくなることがあります。

1. 残量・利用状況を確認する

まずはアカウントの利用状況を確認し、どの上限に達しているのかを把握します。AIの利用量なのか、プロジェクト数なのか、利用できる部品数なのかによって、取るべき対応が変わります。上限の種類や数値は更新されることがあるため、公式の料金・ヘルプページで最新を確認してください。

2. プランの見直しを検討する

無料枠で足りない場合は、有料プランへの切り替えを検討します。有料プランでは、利用できる部品数やプロジェクト数、AIの利用範囲が広がるとされています。プラン名・金額・含まれる内容は流動的なため、契約前にかならず公式の料金ページで最新情報を確認し、自分の用途に合うかを見極めてください。

3. 一時的に待つ・整理する

利用量がリセットされるまで待つ、不要なプロジェクトを整理して空きを作る、といった対応で当面しのげる場合もあります。すぐに有料化せず、まずは現状の枠内で工夫できないかも検討してみてください。

4. 自分の使い方に合うプランか見極める

有料プランを検討する際は、金額だけでなく、自分の使い方に合っているかを確認することが大切です。たくさんのプロジェクトを同時に進めたいのか、部品を幅広く使いたいのか、AIの生成をたくさん使いたいのかによって、必要なプランは変わります。プランごとに含まれる内容は更新されることがあるため、契約前に公式の料金ページで、各プランの違いをよく比べてください。無料で試せる範囲で使い勝手を確かめてから、必要に応じて有料へ切り替える進め方が無難です。

それでもうまくいかない時の切り分け

ここまでの対処で改善しない場合は、原因を一段ずつ切り分けていきます。やみくもに設定を変えるのではなく、一つずつ条件を変えて試すのがコツです。

1. 別の環境で試す

別のブラウザ、別の端末、別の通信回線で同じ操作を試してみてください。特定の環境だけで起きる問題なのか、どこでも起きる問題なのかが分かると、原因の見当がつきます。たとえば「自宅では起きないが会社では起きる」なら、ネットワーク側の制限が疑われます。

2. キャッシュや拡張機能を疑う

ブラウザのキャッシュが古い、拡張機能が干渉している、といった理由で不具合が起きることがあります。次を試してください。

  1. ブラウザのキャッシュを削除してから再読み込みします。
  2. 拡張機能を一時的にすべてオフにして、症状が変わるか確認します。
  3. シークレットウィンドウ(プライベートモード)で試します。

3. 公式の最新情報・サポートを確認する

仕様変更や一時的な障害が原因のこともあります。公式サイトのお知らせやヘルプ(リソース)、最新情報のページを確認してください。サービス側で障害が起きている場合は、復旧を待つしかありません。個別の不具合が解決しない時は、公式のサポートやコミュニティから、状況をできるだけ具体的に伝えて相談しましょう。問い合わせの際は、使っている環境(ブラウザ・端末)、どの操作で何が起きたか、表示されたメッセージなどをまとめておくと、やり取りがスムーズです。

トラブルを減らすためのコツ

最後に、つまずきを未然に防ぐための心構えをまとめます。

  • 最初の指示を具体的に:目的・読者・必要なページ・トーンを添える。
  • 段階を踏む:サイトマップを確定してからワイヤーフレームへ進む。
  • 対応環境で使う:コピーや連携は対応ブラウザ・最新プラグインで。
  • 連携は定期的に確認:認証切れを疑い、必要なら再接続する。
  • 生成は土台と考える:完璧を求めず、生成後に手直しする前提で使う。
  • 残量を意識する:無料枠の上限を把握し、足りなければプランを検討。
  • 困ったら公式へ:仕様や料金は変わるため、最新は公式情報で確認する。

よくある質問(FAQ)

Q1. Relumeは無料で使えますか?

無料で使える範囲と、月額の有料プランが用意されているとされています。一般的に、無料プランでは利用できる部品数やプロジェクト数、AIの利用量に上限があり、有料プランにすると利用範囲が広がる構成です。具体的なプラン名・金額・制限値は更新されることがあるため、最新は公式の料金ページでご確認ください。

Q2. サイトマップが生成されません。どうすればよいですか?

まずは時間を置いて再試行し、通信環境を確認してください。それでも改善しない場合は、サイトの目的や内容を具体的に伝え直す、無料枠の残量を確認する、ブラウザを再読み込みする、といった対処を順に試してください。混雑が原因のこともあるため、時間をおくと通る場合があります。

Q3. ワイヤーフレームが作れないのはなぜですか?

ワイヤーフレームはサイトマップを土台に生成される流れが基本とされています。サイトマップが未確定だとうまく進まないことがあるため、先にサイトマップを整えて確定してから進めてください。あわせて、通信や無料枠の残量も確認しましょう。

Q4. Figmaへの書き出しでファイルが空になります。

専用のプラグインやキットの導入状況、書き出し手順の取り違えが原因のことがあります。案内に沿ってプラグインを導入し、指定された場所へ取り込む操作を行ってください。ファイル容量が大きいと表示に時間がかかる場合もあるため、しばらく待ってから確認するのも有効です。

Q5. Webflowへ取り込めない時はどうすればよいですか?

連携の認証切れや権限不足、対応環境の不一致が考えられます。Relumeと連携を再認証し、Webflow側で編集権限のあるプロジェクトを開いているか、対応ブラウザで操作しているかを確認してください。

Q6. コピーした部品が貼り付けると崩れます。

貼り付け先の対応状況、ブラウザの対応、貼り付け方法を見直してください。コピー&ペーストに対応したブラウザを使い、必要な拡張機能を有効にし、少しずつ貼り付けると改善することがあります。崩れる場合は一部だけ採用して手直しする方法もおすすめです。

Q7. 日本語の指示だと精度が落ちる気がします。

言語対応や精度は流動的とされています。指示をできるだけ具体的にし、同じ内容を英語でも試してみてください。翻訳ツールで英語にしてから入力する方法もあります。いずれの場合も、生成結果は土台と考え、最後に手直しする前提で使うとよいでしょう。

Q8. 無料の上限に達したと表示されました。

まずアカウントの利用状況を確認し、どの上限に達したのかを把握してください。利用量のリセットを待つ、不要なプロジェクトを整理する、有料プランを検討する、といった対応があります。上限値やプラン内容は変わることがあるため、公式の料金・ヘルプページで最新を確認してください。

まとめ

Relume(リリューム)は、サイトマップやワイヤーフレームをAIで素早く用意し、Figma・Webflow・React へ橋渡しできる、設計段階の時短に役立つツールとされています。一方で、生成されない・書き出せない・貼り付けると崩れる、といったトラブルも起きやすいのが実情です。

困った時は、(1)時間を置いて再試行、(2)通信とログインの確認、(3)指示の具体化、(4)連携の再認証、(5)対応ブラウザ・プラグインの確認、(6)無料枠の残量とプランの確認、という基本を順番に試すのが近道です。生成結果は完成品ではなく土台と捉え、最後は自分で手直しする前提で使うと、ストレスが減ります。

仕様・UI・対応状況・料金は流動的で、アップデートのたびに変わる可能性があります。本記事の内容は一般的な対処の指針として活用し、最終的な詳細や最新の対応状況は、かならず公式の最新情報でご確認ください。

Check Also

Vidyo.aiで生成・書き出しできない時の対処法

【2026年最新版】Vidyo.ai(ビディオAI・AI動画クリップ/切り抜き)で生成・書き出しできない時の対処法

「Vidyo.ai(ビディオA …