NIJIBOX
【初心者でも分かる】制作に欠かせないワイヤーフレームとは?意味や役割、作り方まで解説

【初心者でも分かる】制作に欠かせないワイヤーフレームとは?意味や役割、作り方まで解説

2021.2.19
50views

ワイヤーフレームとは、Webページやアプリの「設計図」のことです。
ページを構成する画像やテキストなど、「何を」「どこに」「どのように」配置するかを可視化して、具体的なデザインとして形にするための指針となるものです。

この記事では、Web制作では欠かせないワイヤーフレームの意味や役割、作り方を、初心者の方にも分かりやすく解説します。

ワイヤーフレームとは?

ワイヤーは「線」、フレームは「枠」を意味します。
ワイヤーフレームとは、どの情報を/ページ内のどこに/どのように配置するかという骨組みと共に、情報の設計意図を記載したものです。

Webページ全体の構成や配置がどのようになるかが分かることが重要なので、ワイヤーフレームの段階では色やフォントなどの要素に意味を持たせないよう注意します
ワイヤーフレームはビジュアルデザインを伝える目的ではなく、あくまでページの設計図として作成し利用するためです。

家を建てるときに必ず設計図を用意するのと同じように、Web制作においても実際のページのデザイン前にワイヤーフレームを必ず用意します。

ワイヤーフレームの目的

ワイヤーフレームを作成する目的は、Webページの情報設計をすることです。
そのためには、ページに必要な情報や機能に抜け漏れはないか、どのような優先順位で配置するかを明確にしなければなりません。

ワイヤーフレーム作成の後工程である、デザインやコーディングの段階で要素の追加や変更などが発生すると、修正に多くの工数がかかってしまいます。
一方ワイヤーフレームの段階で認識を揃えておけば、後工程で設計に関わる部分が大きく変更になるリスクを減らすことが可能です。
そのため、ワイヤーフレームを用いて、ページのレイアウトや掲載する情報をFIXさせることが重要です。

ワイヤーフレームはいつ・誰が作る?

ワイヤーフレームを作る主なタイミングは、要件確定の後です。
※案件の特性によっては、ワイヤーフレームを用いて要件定義を行うこともあるため、要件定義期間に作成することもあります。

ワイヤーフレームを作成したら、次にデザイン作成という流れになります。
ホームページの制作やリニューアルであれば、サイト目的などの全体像を元に、サイトマップや機能要件を定めた後、各ページのワイヤーフレームを作成するという流れになります。
単ページ制作となるランディングページの場合でも、要件確定後にワイヤーフレームで情報設計を行います。

また、ワイヤーフレームの作成はニジボックスではディレクター主導で行うことが多いです。
クライアントと直接コミュニケーションを取り、ヒアリングしたことを元に情報設計するディレクターが担当するのが効率的だからです。

ただし、ディレクターが「一人で」ワイヤーフレームを作ると考えるのは危険です。
ワイヤーフレームはページを形にするために欠かせない設計図なので、デザイナーやエンジニアなどチーム全体を巻き込んで作るという意識で進めましょう。

そして、ここでのチームとは「クライアント」も含まれる(受託案件の場合)ということが重要です。
例えば新しい商品のランディングページを作る場合、その商品の特徴や魅力を最も知っているのはクライアントです。
だからこそ、クライアントへのヒアリングをしっかり行い、随時確認しながらワイヤーフレームを固めていくことで、良いページの制作ができるといえます。

ワイヤーフレームの役割

ワイヤーフレームに関する大枠を理解できたところで、ここからは実際の現場でワイヤーフレームがどのような役割を果たすのかを見ていきましょう。

クライアントとの情報設計の確認

Web制作においてクライアントに確認してもらうことは「目的に沿った情報が過不足なく入っているか」「ターゲットに合ったデザインになっているか」「機能が問題なく動作するか」など、一度では確認できないほど多岐に渡ります。

仮に、サイトを公開するまで一度も確認をせずに進めたとしましょう。
公開後のタイミングで「情報を増やしたい」「デザインが思っていたものと違う」「機能を変更したい」と指摘が入ったら、大変な時間とコストが発生してしまいます。
そんなトラブルを避けるために、順を追って確認する必要があります。

ワイヤーフレームは、さまざまな確認事項の中でも情報設計の確認という役割を果たします
これを用いて、必要な情報は入っているか、優先順位に問題はないか、機能要件を満たしているかといった観点で認識合わせをします。

デザイナーへの指示書として利用

一方で、ワイヤーフレームは後工程であるデザインの指示書としての役割も有しています
ワイヤーフレームによって、デザインを進めていくための必要な情報の骨組みとその設計意図を共有できるためです。

前述の通り、色・フォントなどのデザイン要素はワイヤーフレーム上には反映せず、別途補足情報をデザイナーに共有するようにしましょう。
ワイヤーフレームと一緒に、下記のような情報を提示すれば、デザイナーはデザインを考えやすくなります。

  • ページの目的
  • ターゲットペルソナ
  • トーンイメージが分かるキーワード
  • 参考サイト
  • その他、クライアントからのマスト要件

経験豊富なデザイナーなら大まかなイメージを伝えるだけでもデザインに落とし込んでくれることがありますが、基本的には補足情報をもれなく伝えるようにしましょう。

開発チームへの指示書として利用

ワイヤーフレームはエンジニアへのコーディング指示書としても活用します
検索機能や問合せフォームなどの機能要件、リンクの遷移先を説明するのに、視覚的に情報設計されたワイヤーフレームは有用です。

また、設計意図を共有するためにもワイヤーフレームが役立ちます。
前述のデザイナーへの指示出しと同じく、ページの目的やペルソナといった情報も併せて伝えることが必要です。
設計意図やページの目的などの情報を伝えることで、開発チームも制作対象についての理解を深めることができ、制作プロセスの後半で修正や作り直しが発生する可能性を低減できるでしょう。

ワイヤーフレームの作り方

ワイヤーフレームの作り方について4つのSTEPで解説します。

【STEP1】Webサイト全体の理解と整理

ワイヤーフレームはページ単体の設計図なので、まずはそのページが含まれるWebサイトについて理解を深めましょう
サイト全体の制作やリニューアルをするような大型案件はもちろん、サイト内の一部ページのみを制作するケースでもこの理解は必要です。

ワイヤーフレームを作成するページに必要な情報や優先順位を明確にするため、まず下記2点を理解し整理しましょう。

  • サイトの目的やサイトマップなど、全体像の把握
  • ページのサイト内での立ち位置や役割を認識

【STEP2】掲載する情報のリストアップと整理

次に、ページに掲載する情報と、その優先順位・ボリュームを決定します。

まずは、「キャッチコピー」「製品名」「製品説明」「製品の強み」など、掲載するべき情報を全て書き出します。
抜け漏れがないように、事前にクライアントから十分なヒアリングをしておくことが重要です。

次に、書き出した情報の優先順位を決めて、エクセルやスプレッドシートにまとめます。
ここでもクライアントからのヒアリングを元にしつつ、ユーザー視点で最適なUX(※)を提供するにはどの情報を優先させるべきか考えていきましょう。

また、この時点で画像や文字のボリュームも決めておくと、以降の工程がスムーズになります。

■参考記事:UX(ユーザー体験)とは何かに関しては、こちらの記事をご参照ください!
ユーザーエクスペリエンス(UX)とは?〜UIとの違いから具体事例まで〜

【STEP3】レイアウトの決定

ここでは、ページのレイアウト、つまり「情報をどのように配置するか」を決めていきます
この際重要なのが、ページの目的に合うレイアウトを採用することです。

代表的なレイアウトパターンを目的別に紹介します。
こちらでご紹介するのはあくまで一例ですが、ぜひ参考にしてみてください。

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

1つのカラム(列)を縦に並べたレイアウト。
→企業や店舗の情報をシンプル伝えるためのページに適している。

マルチカラムレイアウト

複数の列に分割されたレイアウト。列が2つなら2カラム、3つなら3カラムと呼称する。
→ECサイトなど、商品を販売するためのページに適している。

グリッドレイアウト

格子状にカードを並べたように配置されたレイアウト。
→ブログサイトのTOPページなど、多くの情報を一覧にして見せたいページに適している。

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

画面全体を写真や動画が覆うように映し出されたレイアウト。
→ブランドサイトなど世界観を訴求したい際に適している。

【STEP4】ツールを使って清書

STEP2で整理した情報を、STEP3で決めたレイアウトに沿って配置していきます。
ここまで来たら、あまり考え込み過ぎずに手を動かして、一旦作り切ることを目指すようにしましょう。

作ってみたら一度自分で見直して、ページの目的や情報の優先順位と齟齬がないかを確認します。
その後、チーム内やクライアントからレビューしてもらい、フィードバックを受けてブラッシュアップを重ね、最終FIXさせます。

さまざまなタイプのツールがありますが、ワイヤーフレームを作るおすすめのツールは、「Adobe XD」です
Adobe XDは、テンプレートが豊富で操作しやすいだけではなく、プロトタイプ(プロダクト評価に用いる試作品)を簡単に作れるので大変便利です。
また、より作業効率を高めてくれるプラグイン(機能拡張用のソフトウェア)が豊富な点も魅力です。

クライアントや制作メンバーに説明する際は、Adobe XD で描画したデータをPowerPointに貼り付けましょう。

AdobeXDは設計の骨組みを作成する際に非常に便利ですが、設計意図を伝えるためにはPowerPointがより便利です。

設計図と共に、PowerPointでは全体の設計意図、そして各要素の配置意図などを記載しましょう。

初心者が陥りがちなワイヤーフレームNG集5選

最後に、ワイヤーフレームを作った経験が少ない人の「NGあるある」を紹介するので、失敗しないための参考にしてください。

1.要素を埋めることが目的になってしまう

自身で作ったワイヤーフレームは、その意図を説明できなければ意味がないということを覚えておきましょう。
「なぜこの情報が入っているのか」「なぜこのような優先順位なのか」「なぜこのレイアウトなのか」を明確に答えられるようにしておかなければなりません。

しかし、初心者の方の場合「ページに要素を埋めて、なんとなく成立させる」ことに向かってワイヤーフレームを作りがちです。
そうならないためには、常にサイトやページの目的と、ユーザーの視点を念頭に置いてワイヤーフレーム作成に臨むことが重要です。

2.作った後にレビューしない

特にワイヤーフレーム作成に慣れていない段階では、とにかく何度もレビューを入れるべきです。
単に共有するのではなく、「作っていて迷っていること」「意見を聞きたいこと」を添えてフィードバックをもらうようにしましょう。

フィードバックをもらったら、その内容に納得している、していないに関わらず、一旦受け入れてブラッシュアップしてみましょう。
多角的な意見を取り入れて、どんどん手を動かすのが上達のコツです。

3.色やレイアウトに凝ってしまう

画像やナビゲーションなどを複数の色を使って表現したり、レイアウトを実際のサイトに近い形で再現しようとしたり、とにかく凝りすぎてしまうのは初心者が陥りがちなことです。

見た目まで細かく作ってしまうと、本来ワイヤーフレームで議論すべき情報設計ではなくデザインの議論となってしまい、本末転倒となるリスクが高くなります。
また、デザイン要素の入ったワイヤーフレームでデザイナーに指示を出してしまうと、それに引っ張られて余計な制限が生じ、デザイナー本来の力を発揮できなくなってしまうこともあります。

ワイヤーフレームはあくまで設計図で、デザインとは別物と考えるようにしましょう。

4.テキストと画像を「仮」で入れてしまいがち

テキストが入る箇所に「テキストが入りますテキストが入ります~」といったアタリの文言を使うのは極力避けるようにしましょう。
ある程度内容が決まったテキストがあれば入れておいた方が、具体的にどんな情報が入るか分かりやすいので、レビューがスムーズにでき、クライアントへの説明もスムーズになります。
また、テキストのボリュームが把握できるため、ワイヤーフレームの精度が上がるメリットもあります。

画像も同様で、どんな画像が入るのか分かるよう記載しておくといいでしょう。

5.全ページのワイヤーフレームを作ろうとする

例えば5店舗を有する飲食店のホームページを制作することになり、各店舗1ページずつ使って紹介するサイト構成になったとします。
ここで、5店舗分のページ全てにワイヤーフレームを作ってしまうと大変非効率です。

よほど特殊なケースではない限り、店舗情報のページは同じレイアウトで展開します。
同じレイアウトであれば、ワイヤーフレームは1つ作れば十分です。
後工程であるデザインやコーディングの効率化の観点からも、固有のパーツやページを作るのは避けた方がいいでしょう。

全ページ分のワイヤーフレームを作ることで何か大きな失敗につながる訳ではないですが、効率性の観点でNG行動と言えます。

まとめ

ワイヤーフレームについて解説してきましたが、いかがでしたか?

Web制作初心者の方にとっては、ワイヤーフレームは何か難しそうなものに見えていたかもしれません。
しかし、Webサイトの設計図であると捉えれば、その意味や目的も分かりやすいのではないでしょうか?

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

ニジボックスではサイト制作や開発における情報・ビジュアル設計といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も可能です。
これまでも、クライアントの課題に寄り添ったデザインプロセスを実際にリクルートや大手クライアント様の新規、既存事業でも数多く実践し、検証と改善を続けてきました。
下記資料にて、ニジボックスがクライアント課題に伴走する中で、磨き上げてきたUXデザインのプロセスや支援事例の一端を資料として一部ご紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください!