とりあえず要件を“形”にしたい
Web制作の現場では、「まずワイヤーフレームを出して方向性を確認する」という場面が少なくありません。
しかし実際には、ヒアリング不足や前提の曖昧さから、その“とりあえず”が想像以上に難しいこともあります。
クライアントも、構成表だけではイメージを掴みにくく、具体的な意見が出にくい。
一方で、デザイナーはワイヤーフレームで合意を取ったはずなのに、デザイン段階で「骨組みが違う」と指摘されることがあります。本来は認識を合わせるためのワイヤーフレームが、十分にその役割を果たしていないケースも少なくありません。
要件は満たしているのに納得されない――その背景の一つには、“形が見えない状態で議論している”ことがあります。
Relume（リリューム）は、そうした曖昧な部分をAIが仮に埋めてくれるため、まず“形”を出すことができます。
結果として、手戻りの多い初期議論を早めに可視化し、建設的な検討がしやすくなります。
本記事では、Relumeへの登録から最初のワイヤーフレームを生成するまでの手順を解説します。
Relumeとは
Relumeは、簡単なテキスト入力だけでWebサイトの構成やワイヤーフレームを作成できるプラットフォームです。
さらに、作成した構成はそのまま編集でき、FigmaやWebflow、React向けにエクスポートも可能です。
1,000以上のコンポーネントライブラリを備えており、ページ構成からビジュアルレイアウトまでを一気に可視化できます。
デザイナーやマーケター、ディレクターなど、“まず形を出して考えたい人”にとって、作業の初動を大きく短縮できるツールです。
出典： Relume - 公式サイト
出典： 日本語表記はこちら
サインアップ〜プロジェクトの立ち上げ
１. relume公式サイト（relume.io）にアクセス。
２. 「無料で始める」ボタンをクリックし、Googleアカウント連携もしくはメール登録でアカウントを作成。
３. ログイン後のダッシュボード画面にて「Projects」「Library」などのワークスペース構成を確認できます。
４. 「New Project（新規プロジェクト）」からプロジェクトを立ち上げることができます。
サイト構成案を生成する
生成までの流れ
① 任意のプロジェクト名を入力します。
② 空のキャンバスが表示されています。
③ プロジェクト概要（Webサイトの説明 / 必要なページ数 / 言語）を入力します。
④ 既存サイトのサイトマップが必要な場合、ここにURLを入れます。
⑤ 必要な情報を入力したら「Generate sitemap」をクリックして生成を開始します。
例えば以下のように入力し生成をすると、数秒で結果が出力されます。
プロジェクト名：Hikari Tech株式会社
Description：Hikari Tech株式会社は、産業用センサーや計測機器を開発・製造する精密機器メーカーです。高い技術力と信頼性で、製造業の自動化と品質向上を支えています。
Number of pages：5-10
Language：日本語
ページ内構成からサイト全体の構成まで一気に出力されます。
各セクションは編集・削除・並べ替えが可能です。
使い方のコツ
- 具体的な目的（例：「採用サイト」「商品紹介」「問い合わせ誘導」など）を入力すると構成の精度が上がります。
- AIはあくまで“構成を考えるきっかけ”を作るツール。完璧を求めるより、議論の材料として使うのがおすすめです。
ワイヤーフレームを生成する
プレビュー〜エクスポート
① 生成された構成が整ったら、「Wireframe」タブをクリックするとワイヤーフレームの生成が開始します。
② 各セクションのUIパーツが自動で配置されます。各UIは編集・削除・並べ替えが可能です。
※無料プランの場合、生成できるページ数に制限があります。複数ページ生成する必要がある場合にアップグレードが必要になります。
③ 要素が不足している場合、Relumeで用意しているたくさんのパーツの中から追加したい要素を選んで追加することができます。
④ 完成したワイヤーフレームは形式を選んでエクスポートをすることができます。
エクスポート（figma）
figmaでエクスポートをする場合、以下をセットする必要があります。
- Relume Figma Kit
- Relume Figma Plugin
「Relume Figma Kit」をクリックするとfigmaのライブラリ画面にリンクしますのでここからキットを使用します。（figmaアカウントへのログインが必要です）
プラグインについてはアクションボタン等からRelumeなどで検索をかけるとヒットします。
プラグインでエクスポートできる プロジェクト＞Wireframes＞ページ が表示されますので、必要なものを選択します。
Relumeで“まずは形にする”
Vol.1では、登録から最初の構成生成まで――つまり「Relumeを触ってみる」ことを目的にしました。
今回はサイト構成/ワイヤーフレームの出力にフォーカスしましたが、スタイルガイドやデザイン作成（Beta版）まで可能な幅広いツールです。
Reactでの出力も可能なので、UI検証可能なモックがかなり短い時間で作成できるようになります。
現状使い所を選ぶようなところもあるので、次回以降で触れていきたいと思います。