はじめに
概要
本ドキュメントは、Figmaで扱えるサイトマップの作り方と、AIやツールを組み合わせた効率化手法をやさしく解説します。具体的には、AIツール「Relume」によるサイトマップ自動生成からFigmaへの連携、さらにFigma内でのワイヤーフレーム作成までを一気通貫で扱います。
本書で学べること
- サイト設計の基本とサイトマップの役割を実務目線で理解できます。
- Relumeを使って短時間でサイト構成を作る手順がわかります。
- RelumeからFigmaへ連携する際のポイントや注意点を押さえられます。
- Figmaでワイヤーフレームを作るときの、サイトマップの使い方が身に付きます。
対象読者
- Webデザイン初心者から中級者
- Figmaユーザーや制作速度を上げたいデザイナー、ディレクター
- サイト設計の効率化に関心がある方
前提と準備
- 基本的なブラウザ操作とFigmaの基礎操作があると進めやすいです。
- Relumeなどのツールはアカウント作成が必要な場合があります。
読み方のヒント
章ごとに実務で使える手順を示します。まずは流れをつかんでから、各章の手順を実際に試してみると効果的です。
2. 記事内容の調査・整理（ブログ用構成）
目的
- 「サイトマップをAIで作ってFigmaに持っていく方法」と「Figmaでのサイトマップ〜ワイヤーフレーム作成の基本」を分かりやすく伝えるための構成案です。読者が短時間で実践できる手順を提示します。
読者ターゲット
- Webデザイナー、フロントエンド担当、個人開発者。AIやFigmaの基礎は知っているが、連携や効率化を学びたい人向けです。
主要メッセージ
- AIでサイトマップを自動生成してFigmaへ連携すると、設計の速度と精度が上がることを示します。
タイトル案
- メイン：「AI × Figmaで爆速サイト設計：サイトマップを自動生成してワイヤーフレームまで一気に作る方法」
- 補助：短時間で設計を終える実践ガイド、初心者向けステップ解説
調査ポイント
- RelumeなどAIツールの使い方実例、Figmaへのインポート手順、注意点（命名規則や階層構造）を調べます。
記事構成（章ごとの見出しと要点）
- 第1章：導入（目的と全体像）
- 第2章：AIでのサイトマップ自動生成（具体手順と入力例）
- 第3章：生成したサイトマップをFigmaに連携する手順
- 第4章：Figmaでワイヤーフレームに落とす実践ポイント
SEOキーワード
- サイトマップ 自動生成、Relume、Figma 連携、ワイヤーフレーム 作成
参考ツールと素材
- Relume（例）、Figma、CSV/JSONエクスポート、テンプレート画面
執筆上の注意点
- 専門用語は最小限にし、手順を具体例で示します。画面キャプチャやサンプルデータを入れると親切です。
第1章 なぜ「サイトマップ × Figma」が重要なのか
サイトマップは設計図です
サイトマップはページの一覧と遷移を示す設計図です。例えば、オンラインショップなら「トップ→カテゴリ→商品→購入」という流れを可視化します。ページの抜け漏れを防ぎ、目的に沿った導線を作れます。
Figmaが得意なこと
Figmaは画面設計と共有に強いツールです。ワイヤーフレームやプロトタイプを素早く作り、コメントでチームとやり取りできます。レイヤーやオートレイアウトで要素を整理し、再利用も簡単です。
両者を組み合わせる利点
サイトマップで決めた構成をそのままFigmaに落とし込めば、設計とデザインの整合性が高まります。情報構造が崩れにくく、修正も局所的に済みます。チーム間の認識合わせや開発への引き渡しもスムーズになります。
簡単な実例フロー
- サイトマップでページと導線を決定
- Figmaでページごとのワイヤーを作成
- プロトタイプで遷移を確認し、関係者とレビュー
この流れで無駄な手戻りを減らせます。
第2章 AIツール「Relume」でサイトマップを一瞬で作る
Relumeとは
Relumeは、Webサイトの説明文（プロンプト）を入力するだけで、サイトマップやワイヤーフレームの下書きを自動生成するAIツールです。日本語プロンプトに対応し、FigmaやWebflowと連携できる点が便利です。初期案を短時間で作りたいときに特に役立ちます。
主な特徴
- 日本語で入力できるため、設計のハードルが下がります。
- Figma・Webflowとの連携でデザインや実装までスムーズに進みます。
- セクション単位で生成・追加でき、人による調整がしやすい設計です。
サイトマップ生成の基本ステップ
- 新規プロジェクト作成：テンプレート選択で目的に近い雛形を選びます。
- プロンプト入力：サイトの目的、対象ユーザー、必要なページを簡潔に書きます。
- AIによる生成：数秒〜数分でページ構成やセクション案が出ます。
- セクション追加・調整：AIのたたき台を見ながら、人が順に微調整します。
プロンプトの書き方のコツ
- 目的を先に書く（例：「ECサイトで初回購入を促す」）。
- 主要なページ名や機能を列挙する（例：「トップ、商品一覧、決済、マイページ」）。
- トーンや想定ユーザーを一文で添えると精度が上がります。
注意点と微調整のコツ
AIが提案する構成は万能ではありません。重複ページや不要なセクションが出ることがあるため、目的達成につながるかを一つずつ確認して削除・統合してください。Figmaに受け渡す前に、ページ階層とナビゲーションの流れを必ず見直すと制作がスムーズです。
第3章 Relumeで作ったサイトマップをFigmaに連携する
概要
Relumeで作成したサイトマップやワイヤーフレームをFigmaへスムーズに移す手順を丁寧に解説します。プラグインを使えばコピー・貼り付けより速く、編集しやすい状態で取り込めます。設計から公開までの流れが短くなり、チーム共有も容易になります。
ステップ1：Figmaプラグインの追加
- Figmaを開き、プラグインの検索から「Relume」を探します。
- インストールをクリックしてFigmaに追加します。アカウント連携が必要な場合は指示に従ってください。
ステップ2：Relume側の準備とエクスポート
- Relumeでサイトマップを完成させます。
- エクスポート機能で「Figma用エクスポート」を選ぶか、クリップボード経由で出力します。プロジェクト単位で出力すると構造が保たれます。
ステップ3：Figmaでの取り込み方法
- Figmaで先ほどインストールしたRelumeプラグインを起動します。
- エクスポートファイルを読み込むか、Relumeからの直接転送を受け付けます。
- ページ単位、フレーム単位など配置方法を選んでインポートします。
インポート後のレイヤー構造と編集性
- サイトマップは階層化されたレイヤーで取り込まれます。見出し→ページ→セクションといった順で構成され、探しやすくなります。
- 各フレームにはオートレイアウトが適用されることが多く、幅や間隔の微調整が簡単です。
ポイントと注意点
- コンポーネント名やテキストが正しく反映されているか確認してください。
- 大きなサイトは分割してインポートすると作業が軽くなります。
- その後のワイヤーフレーム作成やプロトタイプ作成にすぐ移れるため、設計から公開までの一気通貫が実現します。
第4章 Figmaでのワイヤーフレーム作成とサイトマップの位置づけ
1. 新規ファイル作成と初期セットアップ
Figmaで新規ファイルを作り、最初にページを分けます。例：Sitemap、Wireframes、Components。最小限のグリッドやフレームサイズ（PC・SP）を決めると作業が早くなります。
2. サイトマップの情報整理で得られる効果
サイトマップは構造の地図です。大規模サイトでは階層や導線が見え、ページ間の関係を整理できます。小規模サイトではページ一覧やラフスケッチだけでも十分に機能します。
3. ラフスケッチからワイヤーフレームへ
紙やホワイトボードのラフを基に、Figmaでブロックごとに配置します。まずレイアウトの骨組み、次に主要コンポーネントを配置して詳細化します。これにより無駄な手戻りを減らせます。
4. ページ・フレーム構成の整理法
フレーム名は規則を決めて付けます（例：01_Home_desktop、01_Home_mobile）。ページごとにセクションを分け、Componentsページで再利用可能なパーツをまとめます。
5. チーム共有と後工程を見据えた工夫
レイヤー命名、コンポーネント化、プロトタイプリンクを整えます。コメントやバージョン履歴を使い、デザイン→開発の受け渡しをスムーズにします。
