NIJIBOX
【初心者向け】ワイヤーフレームの作り方を丁寧にガイド!おすすめツールもご紹介

【初心者向け】ワイヤーフレームの作り方を丁寧にガイド!おすすめツールもご紹介

Web制作では欠かせないワイヤーフレームの作り方を解説します。
初心者の方でも分かりやすいように具体例を交えながら、またこの記事を見ながらすぐに作れるようにガイドしていきます。
「ワイヤーフレームの作り方を勉強したい」「ワイヤーフレームを初めて作る」そんな方はぜひ参考にしてみてください!

ワイヤーフレームとは?

ワイヤーフレームとは、一言で説明するとWebページ制作をする上での設計図です。
雑誌のページを作るとき、まずは写真やコラム、テキストの配置を考えてラフを作成します。
みなさんが今読んでいるこの記事も、いきなり書き始めるのではなく、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。

Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要です。

■参考記事:ワイヤーフレームについて基本をさらに詳しく知りたい方は以下の記事を参考にしてみてください!
【初心者でも分かる】制作に欠かせないワイヤーフレームとは?意味や役割、作り方まで解説

ワイヤーフレームを作る前に知っておきたいこと

ワイヤーフレームの作り方を学ぶ上で、前提として知っておきたいことがあります。
それは、Web制作において、成果物はもちろん、過程が非常に大事だということです。
Web制作ではサイトの目的が達成される設計になっているか、ユーザー視点で考えられているかなど、その意図が問われるものだからです。

だからこそ、ワイヤーフレームの作り方には、正しく進めるための「段取り」が存在します。
今回の記事では、大きく【事前準備編】【作成編】に分け、さらに各編いくつかのSTEPに分けて解説します。
この段取りに沿って作れば、初めての人でもしっかりと情報設計されたワイヤーフレームを作ることができますので、順を追って読み進めてください。

また、ワイヤーフレームと一口に言っても、大規模なサイト制作の中で各ページを作成するものから、1ページのみ作成するランディングページまでさまざまです。
本記事では、コーポレートサイト(企業の公式Webサイト)制作の案件を想定したケースで紹介します。

ワイヤーフレームの作り方【事前準備編】

事前準備編では、サイト全体を把握するために、以下の2STEPで進めていきます。

ワイヤーフレーム作り方ステップ画像1

STEP1:Webサイト全体のコンセプトと概要を理解する

まずは、ワイヤーフレームを作るページが含まれるサイトがどのようなコンセプトで、どんな内容を掲載する予定なのかを把握することから始めましょう。
「そもそも、どんなサイトを作るのか」によって、掲載する情報や優先順位も変わります。

例えば、どのような製品があるかを認知してもらうことを目的としたコーポレートサイトであれば、製品に関するコンテンツが充実したサイトを目指すことになるでしょう。
商品の販促のためのサイトなら、商品に関する情報を広く・深く掲載する必要があります。
顧客からの信頼を向上させるためのサイトであれば、ペルソナ(※)が興味を引くようなコンテンツを充実させるべきでしょう。
サイトをリニューアルする際は、事前準備として現状分析が必要になります。競合調査やペルソナ設定、SEO分析などを通して「今の情報からどのような変更をするか」を分析しましょう。

■参考記事:ペルソナについて詳しく知りたい方は下記記事を参考にしてみてください!
「ペルソナ」とは?ターゲットとの違いやペルソナ設定の重要性までやさしく解説

ワイヤーフレーム作成におけるサイト全体理解の重要性

ワイヤーフレームは1つのページにおける設計図ですが、なぜサイト全体の理解が必要なのでしょうか?
それは、サイトを俯瞰して、その中に含まれる「ページの立ち位置」を知るためです。
ページの集まりがサイトであり、各ページにはサイト内における役割があります。
そのページのサイト内での役割がすなわちページのコンセプトであり、設計図を作る上での方向性となるのです。

ワイヤーフレーム作成は「サイト全体の制作の一部である、ページ制作における、一つのフェーズ」です。
特に、ワイヤーフレームについて学ぼうとしているであろう読者の皆さんは、ディレクターなど全体を俯瞰する職種であることが多いでしょう。
ワイヤーフレームは全体を俯瞰しながら設計するものなので、Web制作全体の流れと一緒にワイヤーフレームの作り方を学ぶ必要があります。
サイト制作初心者の方は、全体のフローがどうなっているかも、ワイヤーフレームの作成の前に理解しておきましょう。
細かく分けるともっとたくさんのタスクが発生しますが、大まかに以下のフローで制作を進めていきます。

【サイト制作のフロー】

  1. サイトのゴールやペルソナ、コンセプトの策定
  2. 要件(必要なコンテンツや機能)の確定
  3. サイトマップ(サイト全体の構成)作成
  4. ワイヤーフレーム(ページごとの設計図)作成
  5. デザイン作成
  6. コーディング
  7. サイト公開

STEP2:サイトマップを作成する

全体像を理解したら、サイトマップを作ってサイトの構成を可視化します。
サイトマップとは、そのサイトに掲載するページと、ページ間の関連性を示す図のことです。
例えば以下のように、TOPページからツリー状にページ内容が枝分かれしたものになります。

【第1階層】TOPページ

【第2階層】会社情報・商品情報・社員情報・採用情報など

【(会社情報に紐づく)第3階層】企業理念・会社概要・沿革・社長メッセージなど
※同様に、他の第2階層に紐づく第3階層のページも

基本的には、これらのページ全てのワイヤーフレームを作ります。
ただし、飲食チェーンの店舗情報ページなど複数のページを同じ構成で展開する場合は、全ページ分ワイヤーフレームを作る必要はありません。「店舗情報用のワイヤーフレーム」として1つだけ作ります。

サイトの構成をまとめることで、次に解説する【作成編】STEP1の情報整理がスムーズになります。
例えば「会社概要」ページのワイヤーフレームを作る場合、別のページに「沿革」を用意しているので、会社の歴史に関する内容は概要に入れる必要がないなどの判断が容易になるでしょう。

1ページ単位のみ制作するランディングページでは、当然のことながらサイトマップは作成しません。
ただし、制作の目的や訴求するコンセプトを明確にした上でワイヤーフレーム作成に進むようにしましょう。

ワイヤーフレームの作り方【作成編】

ここからいよいよ、各ページ単位で見ていきます。
以下4つのSTEPに沿って作成しましょう。

ワイヤーフレーム作り方ステップ画像2

STEP1:情報のリストアップと整理

このSTEPがワイヤーフレームを作る上での「肝」と言っていいでしょう。
ワイヤーフレームは、「どの情報を/ページ内のどこに/どのように」配置するかを定めるものです。
そのためには、いきなり作成ツールを開いて作り始めるのではなく、情報設計の意図を明確にすることが重要です。

具体的には、「情報をリストアップ」した後、「情報の優先順位」と「情報のボリューム」を整理します。
これが決まれば、自ずと配置する方向性が見えてきます。

情報のリストアップ

制作するページに関わる情報を洗い出します。
例えば「商品の紹介ページ」であれば、商品名・キャッチコピー・商品ビジュアル・特徴・作る上でのこだわり・顧客インタビューなどが挙げられるでしょう。
【事前準備編】で把握したサイトコンセプトやサイトマップを参考にしながら、必要な情報を思いつく限り出していきます。
また、抜け漏れをなくすためにも、事前にクライアントから必要な情報をしっかりとヒアリングしておきましょう。

情報の優先順位付け

情報の優先順位付けは、情報を取捨選択してから優先順位をつけていくとスムーズです。

  • 取捨選択
    まずはリストアップした情報の中から、どの情報を掲載するかを精査します。
    例えば商品の紹介ページ以外に、顧客インタビューだけのページを用意していたとしましょう。
    この場合、商品の紹介ページ内では特徴やこだわりに注力したいのでインタビューは掲載しないといったように、そのページに必要な情報かどうかを一つひとつ確認していきます。
  • 優先順位づけ
    掲載すると決めた情報を、優先度の高い順に並べていきます。
    どの情報を優先度高くするかは、サイト・ページの目的やペルソナから考えるといいでしょう。
    例えば「健康意識の高い40代男性に向けた販促」であれば、商品が健康に良いことが分かる「こだわり」に関する情報の優先度は高くなります。

優先順位が決められない/分からないときは、「優先順位を決めるための情報」が不足しているケースが多いです。
その場合、競合のサイトがどんな優先順位で作られているかを調査すると参考になります。
スケジュールやコストに余裕があれば、再度クライアントにヒアリングやユーザーインタビューを実施するなど、リサーチを重ねることで優先順位を決めやすくなるでしょう。

ここで決めた優先順位は、ワイヤーフレーム上での情報の並び順と相関します。
ユーザーはWebページを上から下に見ていくことがほとんどなので、優先順位が高いものをより上に配置すべきです。
※ただし、単純に「上下」に目線を動かすより、「Z型」(またはF型)を描いて動くことが多いです。
このことから、優先順位が同じ情報群は横に並べると効果的です。

また、優先順位を決めた段階でスプレッドシートなどに表としてまとめておきましょう。

情報のボリュームを整理

優先順位をまとめた表に、それぞれの情報をどの程度のボリュームで掲載するかも記載しておきましょう。
こだわりに関する情報は300字、顧客インタビューは各100字ずつといったように具体的に決めておけば、1ページあたりの情報量が分かりやすくなります。
また、画像の場合はどんな画像が入るかも記載しておきます。

STEP2:レイアウトや仕様を決める

STEP1で「どの情報を」「ページ内のどこに」配置するかを決める設計ができました。
残りの「どのように情報を配置するのか」に該当するのがこのSTEPです。

まずはレイアウトについて見ていきましょう。
レイアウトは一から考えるというより、代表的なパターンから選ぶのが一般的です。
ここで重要なのは、情報のレイアウトは「このページはどのような目的で作るのか」を鑑みて決めるということです。

以下、代表的なレイアウトパターンを4つ紹介します。

シングルカラムレイアウト

シングルカラムレイアウトは、縦長に1つのカラム(列)を並べた、シンプルなレイアウトです。
単純であるがゆえに、ユーザーにとってもストレスなく閲覧できるのが特徴です。
特にスクリーンサイズの小さなスマートフォンでは、その見やすさが大きなメリットとなります。

商品販促のためのランディングページで採用されることが多いです。
コーポレートサイトや飲食店などのHPにも向いています。

マルチカラムレイアウト

マルチカラムレイアウトは、複数の列に分割されたレイアウトです。
左右どちらかにサイドバーを配置した2カラムレイアウト、サイドバーが左右に配置された3カラムレイアウトなどが含まれます。
その特徴は、左右で別々の情報を表示できるため、ユーザーのアクションがスムーズになることです。
例えばECサイトや予約サイトで、サイドバーに購入画面を固定で表示させるといった使い方をします。

また、サイト内の回遊性(ユーザーがサイトをどれくらい閲覧したか)を促進できることも魅力です。
サイドバーにコンテンツのランキングや特集バナーを配置することで、ユーザーを「他のページも見てみよう」と誘導することができます。
ニュースサイトのように、色んな情報を見てもらいたいケースで採用されることも多いです。

グリッドレイアウト

グリッドレイアウトは、同じ大きさの正方形(または長方形)で構成し、格子状にカードを並べたように配置されたレイアウトです。
一度にたくさんの情報を見せることができ、またページ全体の統一感を出しやすいのがメリットといえます。

グリッドレイアウトは、ブログサイトのTOPページでよく見かけます。
また、コーポレートサイトの中でも高頻度でコンテンツを更新したい場合(毎週新商品が出るチェーン店のサイトなど)はこのレイアウトを検討してもいいかもしれません。

フルスクリーンレイアウト

フルスクリーンレイアウトは、スクリーンいっぱいに写真や動画を表示させるレイアウトです。
一点突破の訴求力が魅力で、良くも悪くもビジュアルのクオリティに大きく左右されます。

ハイブランドのサイトなど、世界観を伝えたいケースに採用されることが多いです。
「創業以来メニューは中華そばだけ」といったこだわりの専門店のサイトで使ってみても面白いかもしれません。

ここで挙げたレイアウトのどれがいいか迷うこともあるでしょう。
そんなときは、以下のようなサイトを参考にすると指針が得られます。

■参考サイト:レイアウトパターンを選べば、そのレイアウトを元に作られたデザインを検索できるサイト
■参考サイト:マウスを合わせることでワイヤーフレームと実際のページを比較できるサイト

レイアウトと同時に、細かい仕様に関しても検討します。
例えば、ページ上部の画像をスライド表示させる(カルーセル)、クリックすることで隠れた情報を展開させる(アコーディオン)、マウスオーバーでサブメニューを表示させる(ドロップダウンメニュー)などが挙げられます。
「掲載コンテンツが多くページが長くなりそうなので、すっきり見せるためにアコーディオンを採用する」といったように、目的に応じて検討していきましょう。

STEP3:ツールを使って清書する

情報整理を終えてレイアウトが決まったら、あとはそれを形にするだけです。
STEP1でまとめた優先順位に沿って、STEP2で決めたレイアウトでの設計情報を可視化します。
ユーザーが見たときに、伝えたい情報が分かりやすい配置になっているか、スムーズに目線を誘導できそうかを意識しながら作るようにしましょう。
まずは一度作ってみて、修正を繰り返しながらブラッシュアップするのがコツです。

ここで注意したいのは、ワイヤーフレーム上では色やフォントなどのデザイン要素を極力排除するということです。
清書したワイヤーフレームはクライアントへの成果物になるので、デザイン要素があると「情報設計の妥当性」という本来すべき議論の邪魔になるからです。

また、ワイヤーフレームはデザイナーへの指示書としても使われます。
指示書に個性的なフォントを使用していたり、色がたくさんついていたりすると、「この色やフォントはマストなのだろうか?」とデザイナーの誤解を招き、正しく意図が伝わらないかもしれません。

ちなみに、ワイヤーフレーム作成に慣れていない人は、ツールを使う前にまず紙に手書きで落とし込んで作るといいかもしれません。
PCに向かって作業するより、手書きの方が気軽に始めることができます。
これが心理的負担を少なくし、より俯瞰的に考えやすくなることにつながります。

STEP4:レビューしてもらう

一通りワイヤーフレームができたら、一度自分で確認するようにしましょう。
ページの目的や情報の優先順位に沿ったものになっているか、改めて見直します。

その後、社内のメンバーにレビューしてもらいます。
あなたより経験のあるディレクターやプロジェクトマネージャー、プロジェクトリーダー、エンジニア、あるいはデザイナーに見てもらって、フィードバックをもらいましょう。

初心者の方であれば、まず手書きで下書きをしたものをレビューしてもらい、清書したら再度見てもらうようにするとスムーズです。

ワイヤーフレームを作るのにおすすめのツール

ワイヤーフレームを作るツールはたくさんありますが、おすすめは「Adobe XD」「PowerPoint」です。

Adobe XD

ワイヤーフレーム作成だけではなく、UI/UXデザイン、プロトタイプ作成、共有までこれ1つで完結できるアプリケーションです。
直感的に操作しやすく、ダウンロードできるテンプレートも豊富なので、ワイヤーフレームの描画にはぴったりです。

作業効率向上に役立つプラグイン(機能拡張用のソフトウェア)も豊富で、自分が作業しやすいようにカスタマイズできるのも良いところです。

■参考記事:XDのおすすめのプラグインについて知りたい方は以下の記事を参考にしてみてください!
【現役UIデザイナーおすすめ!】Adobe XDの無料プラグイン9選

Microsoft PowerPoint

ワイヤーフレームは、情報設計の意図を説明できることが重要です。
PowerPointはプレゼン資料作成のためのソフトなので、情報設計の意図を伝えるために適したツールです。

まとめ

ワイヤーフレームの作り方について解説してきましたが、いかがでしたか?
ワイヤーフレームを初めて作る人にとっては、どこから手をつければ良いか分からないと悩むことも多いかもしれませんが、今回の記事を見ながら作ればやるべきことが明確になるはずです。
ぜひ参考にして、良いサイトやランディングページの制作に活かしてください。

また、制作においてワイヤーフレーム設計にお困りの方はぜひ以下よりお問い合わせください!
お問い合わせはこちら

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も可能です。

これまでも、クライアントの課題に寄り添ったデザインプロセスを、実際にリクルートや大手クライアント様の新規/既存事業でも数多く実践し、検証と改善を続けてきました。

下記資料にて、ニジボックスがクライアント課題に伴走する中で、磨き上げてきたUI/UXデザインのプロセスや支援事例の一端を資料として一部ご紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください!

UI/UXデザイン実績資料DLバナー