Relume AI Webサイト設計 制作会社のサイト構成作成を80%時短する方法
「クライアントへのサイト構成案を作るのに毎回まる 2 日かかる」「ワイヤーフレームを手で並べているうちに、肝心のデザインに使う時間が削られる」 — Web 制作の現場でよく聞く悩みに応えるのが Relume です。
Relume は 会社概要を入力するだけでサイトマップとワイヤーフレームを AI が自動生成する Web サイト設計ツール。1,000 以上の実コンポーネントを Figma・Webflow・React にそのまま書き出せます (Relume AI Site Builder 参照)。提供は豪 Relume Library Pty Ltd。本記事では編集部が、制作会社・個人事業主が サイト構成づくりの工数を 8 割圧縮する使い方を中心に評価します。
この記事のポイント
- 会社説明を入力するだけで、AI がサイトマップ (ページ構成図) を数十秒で生成する
- サイトマップから 実コンテンツ入りのワイヤーフレームまで一気に作れ、初稿が「最初の 1 分」で出る (Relume AI Site Builder 参照)
- 料金は Free $0 / Starter $38 / Pro $48 / Team $52 (いずれもユーザー単位・月額) (Relume 料金ページ)。1 ドル ¥150 換算で Starter は月約 ¥5,700
- 1,000 以上の実コンポーネントを Figma / Webflow / React に直接エクスポートできる
- UI は 英語中心。仕上げ・実装は Figma / Webflow の知識が前提になる
編集長の見解
Relume の真価は「設計フェーズの初稿スピード」にあります。制作会社が最も時間を取られる「サイトマップ作成 → ワイヤーフレーム → クライアント提案」の前半工程を、数日から数十分に圧縮できるのが体験として大きい。一方、AI が出すのはあくまで 叩き台です。「AI に骨格を作らせ、人が独自性と仕上げを加える」 という二段構えで使うのが、編集部が推奨する現実的な使い方です。
こんな方におすすめ
- Web 制作会社・デザイン事務所で、提案・設計フェーズの工数を減らしたい方
- クライアントワークを 1 人でこなすフリーランスで、設計に時間を取られている方
- Webflow を使っており、コンポーネントを起点に高速で組みたい制作者
- 自社サイトのリニューアルで、たたき台の構成案を素早く用意したい社内 Web 担当
- Figma で設計するが、白紙からの構成検討に毎回つまずいている方
Relume の独自性 — なぜ制作会社の工数が減るのか
1. 会社説明からサイトマップを自動生成
通常、サイトマップ (ページ構成図) はヒアリングを基にデザイナーが手で組み立てます。Relume は 会社概要や事業内容を文章で入力するだけで、必要なページ構成を AI が即座に提案します (Relume AI Site Builder)。「どのページが必要か」 の検討漏れや、後からの構成変更による手戻りを抑えられます。
2. ワイヤーフレームまで一気通貫
生成したサイトマップは、ワンクリックで 実際のコンテンツが入ったワイヤーフレームに展開されます。公式は “your first draft in the first minute” (初稿が最初の 1 分で) と表現しています (Relume AI Site Builder)。空のボックスではなく、見出しや本文の当て込みまで含むため、提案の手応えが早い段階で得られます。
3. Figma / Webflow / React へ直接エクスポート
組み上げた構成は、Figma・Webflow・React に書き出せます (Relume 公式)。デザイナーは Figma で仕上げ、実装者は Webflow や React で続きを作る、という分業がそのまま成立します。設計ツールと制作ツールの間の「作り直し」 を減らせるのが効きます。
4. 1,000 以上の実コンポーネントライブラリ
ヒーロー、料金表、FAQ、フッターなど、1,000 以上の実コンポーネントが用意され、組み合わせるだけでページが完成します (Relume 公式)。毎回ゼロから要素を作る必要がなく、制作会社の「定型部分」の工数を直接削減します。
主な機能
A. AI サイトマップ生成
事業内容を入力するとページ構成を提案。範囲 (スコープ) が早期に固まり、クライアントとの認識ずれを防ぎます。
B. AI ワイヤーフレーム生成
サイトマップを実コンテンツ入りのワイヤーフレームへ展開。たたき台が即座に手に入ります。
C. コンポーネントライブラリ
1,000 以上の実コンポーネントから選んで配置。レスポンシブ対応の部品が揃っています。
D. スタイルガイド / エクスポート
配色やフォントの design system を適用し、Figma / Webflow / React へ書き出し (Relume 公式)。
E. チームワークスペース (Team プラン)
複数メンバーでプロジェクトを共有し、ブランド付きの共有リンクで提案できます (Relume 料金ページ)。
工数はどれだけ減るのか — 編集部の試算
以下は 編集部のシミュレーション です。実際の効果は案件規模・チーム習熟度により変動します。
- ヒアリング整理・構成検討 (半日)
- サイトマップ作成 (半日)
- ワイヤーフレーム作成 (1 日)
- 合計 約 2 日
- AI でサイトマップ生成 (数十分)
- AI でワイヤー初稿 (数十分)
- 人による調整・仕上げ (半日)
- 合計 約 0.5 日
編集部の試算では設計前半工程が約 8 割短縮
編集部の警告: 「AI が出した構成」をそのまま納品しない
AI が生成するサイトマップ・ワイヤーフレームは あくまで叩き台です。クライアント固有の強みや導線設計は、人の手で必ず見直してください。テンプレート由来の構成のまま納品すると、競合と似通った「どこかで見たサイト」 になりがちです。Relume は「速く作る」ためのツールであって、「考えなくてよい」 ツールではありません。
このように設計の前半を圧縮できる一方、費用はユーザー単位でかかります。次は料金プランを整理します。
💰 料金プラン
プランの選び方 (編集部の整理)
| 用途 | 推奨プラン | 月額目安 (1 ユーザー) |
|---|---|---|
| まず触ってみたい / 個人練習 | Free | $0 |
| フリーランス・個人事業主の本格活用 | Starter | $38 (約 ¥5,700) |
| 制作会社のデザイナー (継続案件) | Pro | $48 (約 ¥7,200) |
| 複数人のチームで共有運用 | Team | $52/ユーザー (約 ¥7,800、最低 3 名) |
※ 為替換算は 1USD ≒ ¥150 で本記事の参考値。Relume の請求は USD ベースかつユーザー単位のため、人数と為替で実支払額は変動します。年払いは約 15% 割引です (Relume 料金ページ)。最新の正確な金額は 公式料金ページ をご確認ください。
競合 (v0 / Framer AI / Gamma) との違い
| 観点 | Relume | Vercel v0 | Framer AI | Gamma |
|---|---|---|---|---|
| 主用途 | サイト設計・ワイヤー | UI コンポーネント生成 | サイト制作・公開 | スライド/簡易サイト |
| 出力の起点 | サイトマップ → ワイヤー | プロンプト → UI 部品 | プロンプト → 完成サイト | プロンプト → ページ |
| 書き出し先 | Figma / Webflow / React | React コード | Framer 内 / 公開 | Gamma 内 / 公開 |
| 制作会社の設計工程適合 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
| 月額 (推奨プラン) | $38〜 (約 ¥5,700) | $20 (約 ¥3,000) | $10〜 (約 ¥1,500) | $10〜 (約 ¥1,500) |
編集部の判断 「設計の骨格づくりを高速化したい制作会社・フリーランス」には Relume が最適。完成サイトを一気に作るなら Framer AI、コードで欲しいなら Vercel v0、資料寄りなら Gamma と使い分けが合理的です。
編集部の業種別 推奨ケース
以下は 編集部による試算・提案 です。実際の効果は事業特性により変動します。
Case 1: Web 制作フリーランス (個人事業主)
用途: 受注ごとのサイト構成案づくりに毎回 2 日かかっている
編集部の推奨: Free で試作 → Starter ($38/月) へ。サイトマップとワイヤーを AI に任せ、空いた時間をデザインの仕上げとクライアント対応に回す。設計前半が短縮できれば、同じ稼働で受注件数を増やせる可能性があります。
Case 2: 制作会社 (デザイナー 4 名)
用途: 提案フェーズの初稿を素早く揃え、複数案件を並行で進めたい
編集部の推奨: Pro ($48/ユーザー/月) を主力に。Figma 連携で各デザイナーが仕上げを担当。チームで提案リンクを共有したい場合は Team を検討。費用はユーザー数分かかる点を案件単価に織り込みましょう。
Case 3: 自社サイトをリニューアルしたい中小企業 (Web 担当 1 名)
用途: 制作会社に渡す「たたき台の構成案」を社内で用意したい
編集部の推奨: Free または Starter で構成案を生成し、それを基に制作会社と打ち合わせ。要件が明確になることで、外注の見積精度と進行スピードが上がります。
編集部の警告
課金はユーザー単位 — 人数で費用が膨らむ
Relume の料金は ユーザー (席) 単位です (Relume 料金ページ)。3 名で Pro を使えば月 $144 (約 ¥21,600)。「全員に席を配る」 のではなく、実際に設計を担当する人だけに絞るのが費用対効果のコツです。
仕上げ・実装には別ツールの知識が要る
Relume は設計の骨格を作るツールで、デザインの仕上げや本番実装は Figma / Webflow / React 側で行います。これらに不慣れな場合、Relume だけでは「公開できるサイト」 までは届きません。導入前に、自社の制作フローのどこに Relume を挟むかを決めておきましょう。
海外サービスゆえの注意点
Relume は海外 (豪州) 企業のサービスで、UI・ドキュメント・請求は英語ベース。日本語サポートは限定的です。法人カード決済やインボイス対応の段取り、為替変動による円換算額の変動を経理担当と事前に確認してください。
補助金活用 (編集部の提案)
IT 導入補助金 2026 の活用余地
Web サイト制作・改修にまつわるクラウドサービス (SaaS) は、事前登録された IT ツールに該当するかどうかで補助対象が変わります。Relume 単体ではなく、登録 IT ツールと組み合わせた業務改善計画として申請するのが現実的です。登録ツール一覧と条件は必ず公式情報を確認してください (中小企業庁 IT 導入補助金)。詳細は IT 導入補助金 2026 の解説 をご覧ください。
始め方 (3 ステップ)
Step 1: アカウント作成
relume.io にアクセスし、メールまたは Google アカウントでサインアップ。Free プランはクレジットカード不要で即利用できます。
Step 2: サイトマップを生成
AI Site Builder に 会社概要・事業内容を入力。例: 「地域密着の工務店。施工事例・料金・問い合わせを重視したコーポレートサイト」 と書けば、必要なページ構成が自動提案されます。
Step 3: ワイヤー化してエクスポート
生成したサイトマップをワイヤーフレームに展開し、コンポーネントを調整。仕上がったら Figma または Webflow に書き出して、デザイン・実装を続けます。
まとめ
Relume は 「Web 制作の設計フェーズを高速化する」 用途で、現時点でも完成度の高い選択肢の一つです。会社説明からサイトマップ、ワイヤーフレームまでを AI が一気に作り、Figma / Webflow / React への書き出しで制作フローにそのまま乗せられます。
一方、AI が出すのは 叩き台であり完成品ではありません。クライアント固有の強みや独自性は人の手で加える必要があり、仕上げと実装には別ツールの知識も前提になります。「骨格は AI、仕上げは人」 の二段構えで使えば、制作会社・フリーランスの設計前半の工数を編集部の試算で約 8 割圧縮できる、費用対効果の高いツールと言えるでしょう。
関連レビューは Framer AI レビュー、Vercel v0 レビュー、Bolt.new レビュー も併せてご覧ください。
出典・参考情報
- Relume 公式 — https://www.relume.io/
- Relume AI Site Builder — https://www.relume.io/ai-site-builder
- Relume 料金ページ — https://www.relume.io/pricing
- 中小企業庁 IT 導入補助金 — https://www.it-hojo.jp/
よくある質問
Q. デザイン未経験でも使える?
編集部の答え: サイトマップとワイヤーフレームの「たたき台を作る」 段階までは 未経験でも到達可能です。ただし仕上げや公開には Figma / Webflow の操作知識が必要になります。まず Free プランで操作感を試してください。
Q. 料金は?
編集部の答え: Free ($0)、Starter ($38/ユーザー/月、約 ¥5,700)、Pro ($48/ユーザー/月、約 ¥7,200)、Team ($52/ユーザー/月、約 ¥7,800、最低 3 名) の 4 プランです (1USD ≒ ¥150 編集部換算、年払い約 15% 割引)。最新は 公式料金ページ でご確認ください。
Q. Webflow を使っていないと意味がない?
編集部の答え: いいえ。書き出し先は Figma・Webflow・React から選べます (Relume 公式)。Figma で設計を仕上げる制作会社でも十分活用できます。
Q. 日本語で会社説明を入力しても大丈夫?
編集部の答え: UI は英語中心ですが、入力する会社説明は具体的に書くほど構成提案の精度が上がります。生成後の文言は日本語に置き換える前提で、構成 (骨格) の生成に使うのが現実的です。
本記事の数値・事例のうち、「編集部のシミュレーション」 「編集部の提案」 「編集部の試算」 と明示された箇所は編集部による試算・推論です。為替換算は記事執筆時点の参考値で、実際の請求額はユーザー数・為替により変動します。事実関係 (機能・料金) は各社公式情報源を確認のうえご判断ください。
編集長 Mira ／ AI経営ラボ 本記事は 2026-06-17 時点の情報です。料金・機能は各社公式情報を最新でご確認ください。
もっと深く学ぶための関連書籍
Relume はサイトマップとワイヤーフレームを高速で生成してくれますが、AI が出した骨格を「良い設計」に磨き上げるには、情報設計や UX の基礎が効いてきます。Web サイトの構成設計や UX デザインの考え方を解説書で押さえておくと、AI の叩き台を取捨選択する判断が格段に確かになります。
Amazon で Web サイト設計・UX 関連書籍を見る → ※ PR・アフィリエイトリンクを含みます
料金プラン
| プラン | 料金 (JPY) | 請求 |
|---|---|---|
| Free | ¥0 | 月額 |
| Starter | ¥5,700 | 月額 |
| Pro | ¥7,200 | 月額 |
| Team | ¥7,800 | 月額 |
👍 メリット
- 会社概要を入力するだけでサイトマップ全体を AI が数十秒で自動生成
- サイトマップから実コンテンツ入りのワイヤーフレームまで一気通貫で作成
- 1,000 以上の実コンポーネントを Figma / Webflow / React に直接書き出せる
- Free プランは AI 利用無制限、初期投資ゼロで試せる
- 制作会社の提案・初期設計フェーズの工数を大幅に圧縮できる
👎 デメリット
- UI とドキュメントが英語中心、日本語サポートは限定的
- 課金はユーザー単位、複数人運用では人数分の費用が発生
- デザインの仕上げや実装には別ツール (Figma/Webflow) の知識が前提
- テンプレート由来の構成になりやすく、独自性の作り込みは人の手が必要