サイトマップを瞬時に作れる「Relume」の使い方とは｜料金プランも解説！

サイト制作にあたって、避けては通れないのが「サイトマップ」と「ワイヤーフレーム」の作成です。

サイトマップはサイト全体の骨格であり、ワイヤーフレームは各ページの内装レイアウトです。本格的にサイトを作ろうと思えば、一番時間がかかってしまう部分です。

そこで今回は、プロンプトを入力するだけで自動的にサイトマップとワイヤーフレームが生成できる「Relume」という生成AIに関して紹介します。

ワイヤーフレーム制作後は、基本的にノーコードやWordPressのようなCMSを用いて、サイトを制作するのが一般的です。

初心者におすすめのホームページ制作ツールに関しては、以下の記事にまとめていますので、ぜひ参考にしてみてください。

Relumeとは

Relumeとは、サイトマップとワイヤーフレームを瞬時に作れる生成AIです。

サイト制作の手順をおおまかに分けると、下記のとおりです。

つまり、Relumeを使えば「サイトマップ作成」と「ワイヤーフレーム作成」の手順を簡略化できるということです。

ただし、一点注意すべきこととしては、Relumeを使えば素人でもサイトを作れるわけではないということです。あくまでサイト制作の補佐的なツールであり、ワイヤーフレーム完成後はご自身でサイトデザインを作っていく必要があります。

一方で、Web制作を生業にしている方は、有効活用することでサイト制作にかける時間的コストを削減できる可能性があります。ぜひ一度ご活用してみてください。

Relumeで実現できること

Relumeで実現できることは多くありますが、メイン機能は下記のとおりです。

それぞれ具体的に説明します。

サイトマップを瞬時に生成できる

どのようなサイトを作りたいのか指示を出せば、サイトマップを瞬時に生成してくれます。

指示を明確に出せば出すほど、よりニーズに合ったサイトマップを生成してくれます。またページ数も指定できるので、小規模サイトを作りたいのであれば「2-5」や「5-10」などを選択するのがおすすめです。

またサイトマップでは、ページごとの大枠の構成が載っています。

例えば、会社概要ページであればナビゲーションバー、ヘッダーセクション、紹介セクション、チームセクション（代表紹介）、ロゴリストセクション（法人のパートナーロゴ）などの構成となっています。

また自動生成された構成だけでなく、「〇〇のセクションを追加したい」などのニーズがあれば、手動で構成を追加することもできます。

このサイトマップの構成に応じてワイヤーフレームが作成されますので、サイトマップに納得いっていない場合は、この段階で変更を加えるようにしましょう。

ワイヤーフレームを瞬時に生成できる

作成したサイトマップに応じて、ワイヤーフレームも作成できます。

作成されたワイヤーフレームに関しても、レイアウトが気に入らなければ、違うレイアウトを選択することもできます。例えば、よくある質問の1カラム（1列のみ）が嫌であれば、2カラム（2列）に変更することも可能です。

またワイヤーフレームを確認してみて、「必要なさそう」と感じたセクションは削除もできます。逆にこのセクションを追加したいとなった場合も、セクションを追加することも可能です。

変更できない部分も所々あるので、そのようなケースはFigmaにエクスポートしてから編集するのがおすすめです。

FigmaやWebflowにエクスポートできる

無料プランでエクスポートできるのは「Figma」のみです。Webflowは有料プランに移行しないと、エクスポートができないので注意しましょう。

Relumeはワイヤーフレームを制作できるだけでなく、作ったデータを「Figma」や「Webflow」に連携できるといった強みがあります。

Relumeで制作したワイヤーフレームをFigmaにエクスポートできるようになれば、ラフデザイン→高精度デザインに移行するまでのスピードが圧倒的に短くなります。

Figmaで作ったデータをすぐにサイト化したい場合は、ぜひ「Studio」というノーコードWeb制作ツールを検討してみてください。プラグインの「Figma to Studio」を利用することで、非エンジニアでもデザイン通りにサイトを制作することができます。

またWebflowに連携できるようになれば、Relumeで作ったデザインをコピー&ペーストで移行できるようになります。

Webflowとはノーコードで本格的なサイトを作れるツールです。どのようなツールなのか詳しく知りたい方は、ぜひ以下の記事をご覧ください。

Relumeの料金プランについて

Relumeの料金プランは、無料プランを含めて4つあります。

下記は年間プランに契約した場合の、月額料金になりますので注意しましょう。

英語でわかりにくいと思うので、簡単に表にまとめてみます。

	Free	Starter	Pro	Team
ユーザー数	1人のみ	1人のみ	1人のみ	3人
プロジェクト数	1個まで	1個まで	無制限	無制限
ワイヤーフレームページ数	1ページ	5ページ	無制限	無制限
AIコピーライティング	制限あり	利用可能	利用可能	利用可能
エクスポート（Figma・Webflow）	Figmaのみ	両方可能	両方可能	両方可能
共同編集	なし	なし	なし	あり

無料プランだと、ワイヤーフレームが1ページまでしか制作できないため、1ページ型ホームページもしくはLPのボリューム感しかワイヤーフレームが作成できません。

無料プランで1ページ分のワイヤーフレームを作成して、Figmaにデータをエクスポートするという使い方が一般的になります。

各プランのおすすめな人の特徴もまとめているので、気になる方はぜひ参考にしてみてください。

プラン	おすすめな人	不十分なケース
Free	・小さなサイト（1 ページまたはLP）を作る人 ・コストをかけたくない個人 ・お試しで使ってみたい方	・ページ数が多いサイト ・複数案件・複数クライアントを扱う
Starter	・WebflowやFigmaへのエクスポートが必要なケース ・ワイヤーフレームページ数が5ページ以内で十分なプロジェクト ・小規模な案件を複数同時に進めたい方	・ページ数が5ページを超える中規模サイト ・プロジェクトを無制限に持ちたい
Pro	・自分だけで複数案件を並行して運用したいフリーランス ・中～大規模サイト制作を扱う人 ・将来的にチームを拡張する可能性があるが、今は個人運用している段階	・複数人でリアルタイム共同編集が必要なチーム ・ユーザー管理やアクセス権管理などを必要とする大規模組織案件
Team	・複数人で共同制作を行うデザイン事務所や制作会社 ・チーム体制でプロジェクトを扱いたい人	・個人運用・1人で案件を回せる規模の場合

どれくらい役立つツールなのか、無料プランで一度試してから有料プランを検討するのがおすすめです。

Relumeの使い方

Relumeの使い方については、下記のとおりです。

それぞれ画像を用いながら、解説します。

①：Relumeに登録する

「Relume」にアクセスして、「無料で始める」をクリックします。

次に、メールアドレスを入力して会員登録をします。

Freeプラン（無料プラン）の「Get started」をクリックします。

アンケートが出てきますが、わかる範囲で答えます。答え終わると、Relumeのダッシュボードに自動でアクセスします。

②：プロジェクトを作成する

ダッシュボードにアクセスできたら、画面右上の「New Project」をクリックします。

無料プランだと、プロジェクトの上限数は1個までとなっています。2個目以降のプロジェクト作成は、有料プランへの移行が必要になるので注意しましょう。

③：サイトマップを作成する

サイトマップを制作するために、下記の項目を記入します。

イメージしづらいと思うので、実際の記入例を載せておきます。

項目	入力内容
Description	Teraceは神奈川県を拠点にしているWeb制作事務所です。中小企業や個人事業主をターゲットにしたコーポレートサイト制作を強みとしています。
Number of pages	1（無料プランの場合）
Language	日本語

記入できたら、「Generate sitemap」をクリックします。

下記のように、サイトマップを制作してくれます。

追加したいセクション・不要なセクションがあれば、追加削除は簡単にできるので調整しておきましょう。

ちなみにセクションの追加は、セクション間の「＋」マークをクリックすることで可能です。

④：ワイヤーフレームを作成する

サイトマップが完成したら、次にワイヤーフレームを作成していきます。

上部パネルの「Wireframe」をクリックします。

すると、自動的にワイヤーフレームが作成されます。

無料プランの場合、ワイヤーフレームは1ページまでしか作成できないので注意しましょう。Starterプランになれば5ページまで、Proプラン以上になれば無制限で作成することができます。

レイアウトを変更したい場合は、該当セクションをクリックして、画面左の操作パネルをクリックします。

レイアウト候補が複数出てくるので、好みのレイアウトを選択します。

各セクションを好みのレイアウトに変更したら、ワイヤーフレームの完成です。

FigmaとRelumeを連携させる手順

Relumeで作成したワイヤーフレームを、Figmaに移行するのは簡単です。

具体的な手順は、下記のとおりです。

①Relumeの画面右上にある「Export」のボタンをクリックします。

②「Get Figma Kit」をクリックします。

③「Open In Figma」をクリックします。

④Figmaにログインできたら、「Relume」というプラグインを追加します。

⑤Relumeをクリックすると、FigmaとRelumeの連携の案内がされるので、案内にしたがって進めていきます。連携が完了したら、下記のような画面になるはずです。

⑥プラグインを起動して、ワイヤーフレームを選択します。

ボリューム感によりますが数秒〜数分待っておけば、自動でFigmaにワイヤーフレームが移行されます。

まとめ

今回は、「Relume」を使ったサイト制作について紹介してきました。

サイトマップとワイヤーフレームの作成を誰でも簡単にできるため、有効活用することで非デザイナーの方でもWebサイトを制作できるようになりました。

上記の手順でたしかに大枠サイトは作れますが、細部までこだわったサイトを制作するには、Figmaの操作スキルやStudioの操作スキルが必須になってきます。

もし本格的なWebサイトを作りたい場合は、ぜひ弊社のStudio制作代行サービスをご検討ください。