ワイヤーフレームとは？作成の目的や手順についてわかりやすく解説！

「ワイヤーフレームって何だろう？」

「ワイヤーフレームを作るときに気を付けることは？」

設計図の役割を持つワイヤーフレームは、ホームページ制作などのWebデザインを行ううえで欠かせない存在とされています。

しかし、ワイヤーフレームの意味や目的を知らなかったり、正しい作り方を知らないまま作っていたりしては、ワイヤーフレームがデザインの土台としての十分な役割を果たすことができなくなる恐れがあります。

そこでこの記事では、ワイヤーフレームとは何かや作成する目的や手順、ポイントなどについて詳しく解説します。

ワイヤーフレームについての知識を身に着け、Webデザインで活用できるようになりましょう。

１．ワイヤーフレームとは

ワイヤーフレームとは、Webページのコンテンツの配置を決めるページ単位の設計図のことを指します。

ワイヤーフレームをもとにしてデザインを設計していくため、ワイヤーフレームはデザインの土台ということができ、Webページをデザインする前段階で何をどこに配置するのかを決めるために作るものです。

ワイヤーフレームと混同されがちなWeb制作用語として、ラフやデザインカンプ、プロトタイプがあります。

ラフはアイデアを描き出すこと、デザインカンプはワイヤーフレームに色や画像などのデザイン要素を加えること、プロトタイプは操作性を評価するのに用いる試作品であるという点でそれぞれ持つ意味が異なります。

プロトタイプは早い段階でラフ的なものを作ることもあれば、かなり作り込んで細部の確認に活用する場合もあります。

これらを必要に応じて段階ごとに作っていくことにより、デザインを制作していきます。

２．ワイヤーフレームを作る目的

ワイヤーフレームを作る目的は大きく分けて3つあります。

• 情報を整理するため
• 顧客体験を向上させるため
• イメージや認識を揃えるため

1つずつ解説していきます。

（１）情報を整理するため

ワイヤーフレームを作ることで、Webページに載せるべき情報が何なのかをはっきりとさせ、それらの優先順位をつけることができます。

ワイヤーフレームを作成する中でWebページに載せるべき情報を精査することができるため、正しいワイヤーフレームをもとにして完成したWebページは、自社が提供したい情報がターゲットにより伝わりやすいWebページになるでしょう。

また、これはユーザーにとっても必要な情報が揃っており、過度な情報からほしい情報を探すという無駄な労力を使う必要がないため、顧客視点で見ても良いWebページとなることが見込まれます。

（２）顧客体験を向上させるため

ワイヤーフレームを作ることで、顧客がスムーズに使用できるようなUIを設計することができ、顧客体験の向上に繋げることができます。

UIとは、ユーザーとWebサイトとの接点のことであり、具体的にはボタン、リンク、ナビゲーションなどを指し、これらをユーザーが使いやすいような配置で設置することで、顧客は快適にWebページを利用できることが見込まれます。

快適に利用でき不満の少ない設計のWebページは、顧客に満足感を与え、結果として顧客体験を向上させることができるでしょう。

（３）イメージや認識を揃えるため

ワイヤーフレームを作ることは、特に何人かで作業を行う場合において、チーム内で仕上がりのイメージや認識を揃えるのに役立ちます。

ワイヤーフレームを通してWebページのどこに何を設置するのか、載せる情報に過不足がないかの共通認識を持つことで、個々の認識によるずれが生じることを防ぎ、その後の作業をスムーズに進められます。

３．ワイヤーフレームを作る手順

ワイヤーフレームを作るときは以下の手順に沿って作成しましょう。

1. 目的の明確化
2. コンテンツの設計
3. サイトマップの作成
4. ワイヤーフレームを作成

順番に解説していきます。

（１）目的の明確化

どのようなWebページを作成するのかを考えるために、まずはじめにWebページを作る目的を明確にします。

目的の例としては、「契約率をUPさせる」「新卒採用に力を入れる」などが挙げられ、Webページを通してどのような成果を求めるのかを考えておくことが大切です。

この際に、目的に合わせたターゲットユーザーや機能要件などの情報も合わせて整理しておくとよいでしょう。

（２）コンテンツの設計

目的が決まったら、それに合わせてどういった情報を載せるかを決め、その情報をターゲットに届けるにはどのようなコンテンツを選択するのが適切かを検討します。

先ほどの目的の例で考えると、「契約率をUPさせる」という目的であれば自社サービスや関連情報について詳しく紹介したお役立ち資料やコラム、「新卒採用に力を入れる」という目的であれば採用情報に加え社員の1日のスケジュールやインタビューなどがコンテンツとして考えられます。

（３）サイトマップの作成

サイトの情報構造を可視化したサイトマップを作成し、サイト全体の骨組みを作ります。

サイトマップは間取り図のようなものであり、トップページを頂点としてWebサイト全体を俯瞰してみることができるような段階構造になったツリー型で作成されることが多く、ワイヤーフレームを作るもととなります。

サイトマップを作成し、Webサイト全体の構造を先に決めておくことで、Webサイト全体のまとまりを担保することができ、詳細ページを作る際にもサイトの全体像を意識しながら制作することができます。

（４）ワイヤーフレームの作成

サイトマップを作成したら、FigmaやXDなどのツールを使用して実際にワイヤーフレームを作成します。

競合他社や類似のサイトやプロダクトで参考となる要素をリサーチしながら、どこにどの情報を置くのかというレイアウトやターゲットが使いやすいUIなどを考え、ワイヤーフレームを完成させます。

４．ワイヤーフレームを作る際の７つのポイント

ワイヤーフレームを作る際には以下のような7つのポイントがあります。

• 必要なコンテンツが漏れなく含まれているかを確認する
• 全体としての統一性があるか確認する
• 見た目にこだわらない
• デザインで何文字入るかを意識する
• テキストはダミーテキストではなく具体的な内容にする
• 図形に何が入るのかイメージできるようにする
• デバイスごとに分けて作る

1つずつ詳しく解説していきます。

（１）必要なコンテンツが漏れなく含まれているかを確認する

はじめに必要なコンテンツは何かを明確にし、抜け漏れのないようにします。

情報に優先順位を付けたり取捨選択を行ったりすることによって、どんな情報が必要となるかを考え、ユーザーに伝えたい情報を伝えるのに必要となるコンテンツに漏れがないかを確認するようにしましょう。

（２）全体としての統一性があるか確認する

ワイヤーフレームを作成する際、各ページ内でテキストの大きさや配列に統一性があるだけではなく、サイト全体としての統一性が担保されているかを確認します。

ホームページなどのWebサイトは、基本的にトップページを頂点として階層的に詳細のWebページが表示されるようになっています。

それぞれのページでレイアウトなどが全く異なる場合、ユーザーにとって分かりにくく使いにくいWebサイトになってしまいます。

ワイヤーフレーム作成の手順で解説したようにサイトマップを作りはじめに全体の構造を組み立てておき、Webサイト全体としてのまとまりを意識するようにしましょう。

（３）見た目にこだわらない

ワイヤーフレームはあくまでコンテンツやテキストをどこにどのような形で配置するかというレイアウトを示すものであるため、見た目に関してはこだわらないことがポイントです。

見栄えをよくしようとデザイン性を求める必要はないため、シンプルかつ分かりやすいワイヤーフレームを作ることを意識しましょう。

（４）デザインで何文字入るかを意識する

ワイヤーフレームを作成する際には、見出しやテキストで、大体どのくらいの文字量が入るのかや何項目あるのが適切なのかを考えるようにしましょう。

文字の大体の大きさを考えたうえでデザインで何文字入るかをあらかじめワイヤーフレームの段階から意識しておくことで、デザイン作成の際に枠が足りなくなったり余白が生まれたりするのを防ぎ、レイアウトを組み直す必要がなくなります。

（５）テキストはダミーテキストではなく具体的な内容にする

配置するテキストをコンセプトに沿って作成し、本番のテキストに近いものにしておきます。

「〇〇〇〇」や「テキストテキストテキスト」のようなダミーテキストで配置しておくのも一つの手ではありますが、実際にどのくらいの量の文字が入るかによって文章の配置が変わるため、あまりおすすめできません。

本番のWebページに載せる予定のテキストに近いものを使うことで、仕上がりのイメージが持ちやすくなったり、大体どのくらいの量のテキストが入るのかが想像しやすくなったりするため、テキストはできるだけ具体的なものにしておくとよいでしょう。

（６）図形に何が入るのかイメージできるようにする

ワイヤーフレームでは、のちに写真や画像を配置するところに図形を仮で入れることが一般的ですが、それらの図形に「写真」「アイコン」など、何が入るのかを記載し明確にわかるようにしておきましょう。

何が入るのかを明記しておくことで、認識のずれが生まれるのを防いだり、完成のイメージがつきやすくなったりするなどの効果が期待できます。

（７）デバイスごとに分けて作る

Webページはスマートフォンやパソコン、タブレットなど大きさや比率の違った画面で表示されるため、それぞれ合わせたレイアウトを考えることが必要です。

例えば、パソコンのディスプレイ用に制作したWebページがそのままスマートフォンの画面に表示されてしまうと、画像の縮尺がおかしくなってしまったり、テキストの大きさが小さすぎて読みにくくなってしまうなどの可能性があります。

よって、デバイスごとに分けてワイヤーフレームを作成し、それぞれに合わせたレイアウトを考えるようにしましょう。