ワイヤーフレームとは？サイトマップとの違いと作り方

ワイヤーフレームは、Webページやアプリの画面に何をどの順番で配置するかを示す設計図です。色や装飾を作り込む前に、必要な情報と操作の流れを検討します。

PixsoのUIデザイン機能を使う場合も、最初は文字と簡単な図形で構成を表し、情報の抜けや読み順を確認してから見た目を作り込みます。

この記事では、ワイヤーフレームの役割、サイトマップとの違い、作成時の考え方を解説します。初めて画面を設計する方にも分かるよう、具体的な作業に沿って紹介します。

後半では、Pixsoで画面を作り、チームと共有して修正する方法も紹介します。

1. ワイヤーフレームの役割と作り方

1.1 そもそもワイヤーフレームとは？

ワイヤーフレームは、一つの画面に必要な情報と操作要素を整理するために使います。見出し、本文、画像、入力欄、ボタンなどの位置と優先順位を決めます。

サイトマップは、サイト全体のページ構成と階層を示すものです。公開後だけでなく、制作前の計画にも使います。個々の画面の中身を考えるワイヤーフレームとは、扱う範囲が異なります。

サイトマップで必要なページを整理した後、ワイヤーフレームで各ページの構成を具体化すると、全体と詳細を行き来しながら設計できます。

画面の目的を配置に落とし込む

初期段階では、図形と短い文字で画面の構成を表します。装飾を抑えると、色の好みではなく情報の不足や順序について話し合いやすくなります。

たとえば問い合わせページなら、説明、入力項目、送信ボタン、個人情報の扱いを示す案内が必要です。まずは、それらをどの順で読んでもらうか考えます。

入力の途中で迷いそうな項目には、補足や例を置きます。送信に失敗した場合の案内も同時に検討すると、通常時だけでは見えない課題が分かります。

ワイヤーフレームは完成形を約束する資料ではなく、構成を検討するための作業用データです。疑問点が見つかれば、少ない手間で変更できます。

情報の優先順位を決める

画面で達成してほしい行動を一つ決め、その判断に必要な情報を配置します。情報を増やす前に、読む人が何を知りたいかを整理しましょう。

レイアウトの選択は、流行だけでなく、内容の量、端末、利用状況に左右されます。長い見出しや狭い画面でも順序が伝わるか確認します。

すべての画面にサイドバーが必要なわけではありません。主な操作への導線を分かりやすくし、補足情報がその操作を妨げない配置にします。

1.2 代表的なワイヤーフレームの作り方

問い合わせサイトを一つの画面に落とし込む

小さな制作会社のサイトを例にします。サイトマップには「サービス」「制作事例」「料金の目安」「問い合わせ」というページを置きます。この段階で決めるのはページ同士の関係です。問い合わせページに入力欄をどう並べるかは、ワイヤーフレームで考えます。

問い合わせる人が知りたいのは、どのような相談を送れるか、何を書けばよいか、いつ頃返事が来るかです。フォームだけを大きく置く前に、次の材料を用意します。

返信日数などの案内は、実際に運用できる条件を使います。未確定の条件を完成した文言のように入れると、そのまま実装されるおそれがあります。

配置案Aは、説明の後にフォームを縦に並べる構成です。案Bは、パソコンでは説明を左、フォームを右に並べます。入力項目の少なさだけで決めず、相談内容の説明を読まずに入力を始めても迷わないかで比べましょう。スマートフォンではどちらも縦に並ぶため、説明が長すぎて入力欄が遠くならないかを確かめます。

通常の画面に加えて、連絡先の入力に問題がある状態と、送信に失敗した状態も作ります。前者では該当する項目の近くに修正方法を示し、後者では入力済みの相談内容を残して再送できるようにします。単に赤い枠を描くより、どの情報を残し、どの操作を可能にするかを先に決めることが重要です。

作成は、目的と材料をそろえる段階と、案を比較して絞り込む段階に分けると進めやすくなります。

最初から細部を完成させる必要はありません。代表的な画面を作り、足りない情報を確認しながら広げていきましょう。

目的と必要な情報を共有する

対象のユーザー、画面の目的、必要な情報、制約条件を整理します。文章や画像が未定でも、どの程度の量が入るかは見積もっておきます。

作り手が伝えたい内容だけでなく、利用者が判断するために必要な情報を考えます。問い合わせの前に料金を知りたいなど、行動の前提になる情報も確認します。

企画、デザイン、開発など、判断に関わる担当者で構成をレビューします。意見を集める範囲と最終的に決める人を明確にしておくと、修正を進めやすくなります。

意見を求める際は「どう思うか」だけでなく、「申し込み前に必要な情報がそろっているか」のように、確認したい点を伝えます。

複数の案を作って比較する

問い合わせの例なら、説明とフォームの順序が違う二案をPixsoの別フレームに置きます。実際に近い長さの相談文やメールアドレスを入れ、入力前の案内とエラー時の説明が読めるかを比べます。フォームの項目名や送信ボタンをそろえておけば、レイアウトだけの違いについて話し合えます。

情報の順序や操作の位置が異なる案を、簡単な図でいくつか作ります。一案を細かく仕上げる前に比べると、構成の違いに集中できます。

判断に迷ったら、実際の利用場面や観察した行動に戻りましょう。推測だけで理由を積み重ねず、何が分かっていて何を確認する必要があるかを分けます。

候補を比較するときは、画面の目的、必要な情報、操作の分かりやすさを同じ基準にします。採用した理由も短く残しておくと、その後の修正に役立ちます。

主要な流れを決めたら、空の状態や入力エラーなどの例外を補います。内容がまとまったところで、詳細なUIやプロトタイプへ進めます。

2. Pixsoでワイヤーフレームを作成・共有する

Pixsoでは、図形、テキスト、コンポーネントを配置して画面を作れます。同じファイルを共有して、チームと構成を検討できます。

まず対象端末のフレームを作り、見出し、本文、画像枠、操作要素を置きましょう。繰り返し使う部品はコンポーネントにすると、変更を管理しやすくなります。

作成した画面は、次の方法で共有とレビューに活用できます。

2.1 リアルタイムで共同作業が可能

編集画面の共有ボタンからリンクを作成し、メンバーに渡せます。共有前に、閲覧と編集のどちらを許可するか設定してください。

メンバーは同じ画面を見ながらコメントできます。修正する位置に意見を残せば、文章だけで場所を説明する手間を減らせます。

構成を確認する人には閲覧権限、実際に修正する人には編集権限を設定するなど、役割に合わせて共有範囲を選びましょう。

画面数や画像が増えたら、ページやレイヤーに分かりやすい名前を付けます。誰が開いても対象画面を見つけやすい構成にしておくと、共同作業が進めやすくなります。

2.2 レビューと修正を同じファイルで進める

レビュー前に、確認対象の画面と判断してほしい内容を伝えます。コメントが付いたら、対応する項目と追加の確認が必要な項目を分けます。

同時に集まれないメンバーにも、共有リンクと説明を渡して意見をもらえます。決定事項をファイル上に残しておくと、後から参加した人も経緯を確認できます。

複数の画面を比較する場合は、案ごとに名前を付けて整理します。採用案と検討中の案を区別し、誤って古い画面を参照しないようにします。

大きな変更を加える前には作業の節目を保存します。レビューの結果に応じて画面を修正し、次に確認する点をチームと共有しましょう。

2.3 日本語の画面で操作を確認する

日本語のインターフェースを使い、フレームや図形、テキストの基本操作を確認できます。最初は少数の画面で、配置と共有に慣れると進めやすくなります。

パソコンにインストールされたフォントをブラウザで利用する場合は、Font Assistantの接続が必要です。チームで使うフォントは、利用可能な範囲も確認してください。

無料プランから基本的な画面作成を試せます。共同編集や共有の使い方も確認し、日常の作業に合うかを判断しましょう。

ファイル数、利用人数、ライブラリ、管理機能などの条件はプランによって異なります。チームで必要な範囲を整理し、現在の料金プランで提供内容を確認してください。

画面の構成を早い段階で確かめよう

ワイヤーフレームは、画面の目的、情報の優先順位、必要な操作を具体的にするための道具です。構成を共有し、疑問を見つけた段階で修正することに価値があります。

Pixsoで主要な画面を一つ作り、チームと共有してみましょう。必要な情報が伝わるかを確認しながら、UIとプロトタイプへ発展させられます。