Webサイトを作るとき、いきなりデザインから手をつけてしまうと、後になってページの抜け漏れや情報の重複に気づき、作り直しに追われることがあります。
そうした手戻りを防ぐために活躍するのが、サイト全体の構造を可視化する「サイト構成案」です。
この記事では、Figmaを使ってサイト構成案を作成する際に、何ができるのか、どんな準備をすればよいのか、そして実際の手順やつまずきやすいポイントまでを順を追ってご紹介します。
これからFigmaでの構成案作成に取り組みたい方は、ぜひ最後まで読み進めてみてください。

■Figmaでできること

Figmaは単なる画像作成ツールではなく、ページ同士のつながりを整理し、チームで共有しながら編集できる設計ツールです。
サイト構成案の作成という観点から、まずは基本的な機能や活用場面を見ていきましょう。

主な機能

Figmaにはフレームと呼ばれる領域を使って、トップページやサービス紹介ページなど、複数のページを1つのファイル内に並べて配置できる機能があります。
さらに、フレーム同士を矢印でつなぐコネクター機能を使うことで、ユーザーがどのページからどのページへ遷移するのかを視覚的に表現できます。
テキストや図形、付箋のような役割を果たす付せんツールも用意されているため、各ページに必要な要素や補足メモを書き添えながら構成を練ることが可能です。
加えて、テンプレート機能を使えば、サイトマップやワイヤーフレームの雛形をゼロから作らずに済むため、作業の入り口をぐっと軽くできます。

向いている用途

サイト構成案の作成以外にも、Figmaはワイヤーフレームの設計、デザインカンプの作成、さらにはプロトタイプを使った画面遷移の検証まで幅広く対応できます。
特にサイト構成案の段階では、ページ数が多いコーポレートサイトや、カテゴリー分岐が複雑になりやすいECサイトのように、情報設計を丁寧に整理したい案件との相性が良いといえます。
デザイナーだけでなく、ディレクターやクライアントを交えた打ち合わせの場で、画面を見せながら説明できる点も大きな強みです。

初心者が使うメリット

Figmaはブラウザ上で動作するため、専用ソフトのインストールに手間取ることがなく、初めて触る方でも比較的スムーズに始められます。
操作画面もシンプルにまとまっており、四角形や線を配置する感覚で構成案を組み立てられるので、デザインツールに不慣れな方でも直感的に扱いやすいのが特徴です。
また、作成したファイルをURL一つで共有できるため、チームメンバーへの確認や修正依頼のやり取りが格段にスムーズになります。

■Figmaを始める前の準備

実際に構成案の作成に入る前に、いくつか整えておきたい環境や情報があります。
準備を丁寧に行うことで、後の作業がぐっとスムーズになります。

必要なもの

Figmaを利用するにあたって最低限必要になるのは、インターネットに接続されたパソコンとブラウザ、そしてFigmaのアカウントです。
アカウントはメールアドレスがあれば数分で作成できます。
加えて、サイト構成案を作る場合は、対象となるサイトの目的やターゲットユーザー、掲載したいコンテンツの候補などを事前にまとめたメモがあると、作業がぐっと進めやすくなります。
既存サイトのリニューアルであれば、現状のページ一覧やアクセス解析のデータも手元に用意しておくと参考になります。

事前設定

Figmaを開いたら、まずは新規ファイルを作成し、プロジェクトごとにわかりやすい名前をつけておきましょう。
チームで共有する場合は、ファイルの共有設定を確認し、閲覧のみにするのか、編集も可能にするのかをあらかじめ決めておくと、後々のトラブルを避けられます。
また、構成案作成用のページとデザイン作成用のページを分けておくと、後から見返したときに情報が整理されていて把握しやすくなります。
フォントや色の設定は構成案の段階ではそれほど重視する必要はありませんが、見やすさを意識して背景色やテキストサイズを統一しておくと、完成後の見た目も整います。

確認したいポイント

作業を始める前に、サイトの目的とゴールが関係者の間でずれていないかを確認しておくことが大切です。
構成案はあくまで骨組みであるため、この段階で目的が曖昧なまま進めてしまうと、後になってページ構成そのものを見直す必要が出てくることがあります。
また、必要なページ数やカテゴリーの粒度についても、事前にある程度の方向性を持っておくと、Figma上での作業がぶれにくくなります。

■Figmaの基本的な使い方

ここからは、実際にFigma上でサイト構成案を組み立てていく流れを、手順ごとに見ていきます。
全体の流れをつかんでおくと、初めてでも迷わず進められます。

手順1

まずは新規ファイルを開き、サイト全体のトップとなるフレームを1つ配置します。
このフレームには「トップページ」といった名前をつけ、そこから枝分かれするページ群の起点として扱います。
続けて、サイトに必要と考えられる主要カテゴリーごとにフレームを追加していきます。
この段階では細かいデザインを気にせず、ページの数と役割を洗い出すことに集中するのがポイントです。全体像が見えてくると、後の作業で迷いにくくなります。

手順2

主要フレームを配置し終えたら、それぞれのフレームの下に、より詳細なページに対応するフレームを追加していきます。
たとえば「サービス紹介」というカテゴリーの下に、個別サービスごとの詳細ページを並べるといった具合です。
この階層構造を作ることで、サイト全体がどのような深さで構成されているのかが一目でわかるようになります。
フレームの配置は左から右、または上から下へと一定の規則を持たせておくと、後から見返したときの理解のしやすさが変わってきます。

手順3

フレーム同士の関係が整理できたら、コネクター機能を使ってページ間の遷移を線でつないでいきます。
どのページからどのページへ移動できるのかを矢印で示すことで、ユーザーの動線がイメージしやすくなります。
あわせて、各フレームに簡単な説明文やメモを添えておくと、構成案を見た関係者が意図をくみ取りやすくなります。
ここまでできたら、一度全体を俯瞰し、抜けているページや重複しているカテゴリーがないかを見直しておきましょう。

Figma

■よくあるつまずきポイント

Figmaでの構成案作成に慣れないうちは、いくつかの場面でつまずきやすい傾向があります。
ここでは代表的なつまずきどころと、その乗り越え方を紹介します。

設定で迷いやすい点

初めてFigmaを使う方の多くが戸惑うのが、ファイルやフレームの命名ルールを決めないまま作業を進めてしまうことです。
名前がバラバラのままフレームを増やしていくと、後から見返した際にどのフレームが何を表しているのか分からなくなり、修正作業に余計な時間がかかってしまいます。
また、共有設定を確認しないまま作業を進めてしまい、意図しない相手に編集権限を与えてしまうケースも見られます。

操作で止まりやすい点

フレームの入れ子構造を理解しないまま作業を進めると、フレームの中に別のフレームが意図せず入り込んでしまい、思うように配置を調整できなくなることがあります。
また、コネクターで線をつなごうとした際に、対象となるフレームをうまく選択できず、線が思った場所に接続されないという場面もよく見られます。
こうした操作の引っかかりは、慣れないうちは誰もが経験するものです。

解決方法

命名ルールに迷った場合は、あらかじめ「カテゴリー名+ページ名」のようなシンプルな形式を決めておくと、後から見返したときの混乱を防げます。
フレームの入れ子で困った際は、レイヤーパネルを開いて階層構造を確認しながら操作すると、意図しない配置になっていないかを把握しやすくなります。
コネクターの接続がうまくいかないときは、一度ズームインしてフレームの端を正確にクリックすることで、狙った位置に線をつなげられるようになります。
焦らず一つずつ確認しながら進めることが、結果的に近道になります。

■Figmaを使いこなすコツ

基本的な操作に慣れてきたら、次はより効率よく、そして表現力豊かに構成案を作るためのコツを押さえていきましょう。

時短になる使い方

同じ形式のフレームを繰り返し使う場合は、一つ作ったフレームを複製して活用すると、ゼロから作り直すよりも短時間で作業を進められます。
また、よく使う配置パターンをコンポーネントとして登録しておけば、複数のページで同じ構造を使い回す際に統一感を保ちながら作業時間を短縮できます。
ショートカットキーを覚えておくことも、地味ながら作業全体の速度に大きく影響します。

初心者が最初に覚えたい操作

最初に覚えておきたいのは、フレームの複製とコネクターの接続、そしてレイヤーパネルでの階層確認です。
この3つの操作を押さえておくだけでも、サイト構成案の基本的な作成作業には十分対応できます。
焦って高度な機能に手を伸ばすよりも、まずはこれらの操作を繰り返し使い、指に馴染ませていくことをおすすめします。
慣れてくると、フレームの配置や整理にかかる時間が自然と短くなっていきます。

慣れたら試したい機能

基本操作に慣れてきたら、プラグイン機能を活用してみるのも一つの方法です。
サイトマップ作成を補助するプラグインを使うと、既存のページ一覧から自動でフレームを生成できる場合があり、大規模なサイトの構成案作成でも作業の負担を大きく減らせます。
また、コメント機能を使えば、構成案を共有した相手からフィードバックをフレーム単位で受け取ることができ、修正のやり取りがより明確になります。

■よくある質問

ここでは、Figmaでサイト構成案を作る際によく寄せられる質問について、順番にお答えしていきます。

無料で使える？

Figmaには無料プランが用意されており、個人での利用や小規模なプロジェクトであれば、費用をかけずにサイト構成案の作成を始めることができます。
ファイル数やチームメンバーの上限など一部制限はありますが、まずは無料プランで操作感を確かめてみるのが良い進め方です。

スマホでも使える？

Figmaは基本的にパソコンでの作業を前提としたツールですが、専用アプリを使えばスマートフォンやタブレットからでも閲覧やコメントの追加が可能です。
ただし、フレームの作成やコネクターの接続といった本格的な編集作業は、画面の大きいパソコンで行う方が快適に進められます。

初心者でも大丈夫？

Figmaは直感的な操作性を意識して設計されているため、デザインツールに触れたことがない方でも、基本的な使い方を押さえれば構成案の作成に取り組めます。
最初はうまくいかない場面もあるかもしれませんが、フレームの配置とコネクターの接続という基本を繰り返すうちに、自然と手が動くようになっていきます。

■まとめ

Figmaを使ったサイト構成案の作成は、フレームとコネクターという基本機能を理解するだけで、誰でも取り組みやすい作業です。
事前に目的やページ構成の方向性を整理し、命名ルールや共有設定を決めておくことで、作業中の混乱を大きく減らせます。
つまずきやすい点は多くの人が通る道でもあるため、焦らず一つずつ操作を確認しながら進めていけば、着実に構成案を組み立てられるようになります。
基本操作に慣れてきたら、複製やコンポーネント、プラグインといった時短につながる機能にも挑戦し、より効率的な構成案作成を目指してみてください。

Figma Web制作 サイト構成案 ワイヤーフレーム 初心者向け