POINTワイヤーフレームとは

ワイヤーフレームとは、ホームページ作成のときに作る設計図のことをいいます。ワイヤーフレームは、webページのレイアウトの決定に役立ちます。「何をどこに置くか・どのように表示するのか」ということを一目見て把握することが可能となるため、作業をスムーズに進めることができます。

「チームで大掛かりなwebページを作る」「制作会社にwebページの作成を依頼する」など、複数人で制作する場合や、制作を依頼するときにはワイヤーフレームがあると便利です。

ワイヤーフレーム作成のメリット

ワイヤーフレームのメリットとしては、以下の3つがあげられます。

①情報の整理ができて工数の削減に繋がる

ホームページ制作には、数多くのコンテンツ（テキスト・画像など）が必要となります。そのため、ワイヤーフレームを作らずに制作を始めると、作業途中での修正の数が多くなってしまう可能性が高いです。ワイヤーフレーム作成には多少の時間がかかりますが、結果的には全体の作業時間を少なくしてくれます。

②新たなアイデア出し・チームでの議論の材料になる

ワイヤーフレームを作成することで、webページ全体を客観的にみることができます。全体像を捉えることで、掲載するコンテンツを個別で考えていたときにはなかった新しいアイデアが生まれることがあります。また、全体を把握し、実際のイメージを捉えることで、チームでの議論を行いやすくします。

③依頼者と製作者の間での認識のズレをなくす

制作会社にwebページの制作を依頼する場合は、ワイヤーフレームは非常に重要となります。ワイヤーフレームなしに制作を行うと、webページが完成した後に「依頼者が望んだものと大きくズレていた」なんてことが起こり得ます。しかし、ワイヤーフレームを作成しておくことでこういった事態を防ぐことができます。

ワイヤーフレーム作成時に使えるツール

ワイヤーフレーム作成には、以下のツールが利用できます。

①Excel・Power Point

「Excel・Power Point」はMicrosoft社が開発・販売している表計算ソフトとプレゼンテーションソフトです。Excel・Power Point をインストールしている人であれば、作ったファイルは誰でも閲覧・編集できます。ネットに接続されていない環境でも使用することが可能で、動作も軽いです。しかし、OSの違いによる文字化けの問題や、情報量が多い複雑なワイヤーフレームを作成することが難しいというデメリットがあります。

②cacoo

「cacoo(カクー)」は、株式会社ヌーラボが開発したオンラインで使える作図ツールです。チームでの同時編集ができることに加えて、ワイヤーフレームのテンプレートが利用できます。また、ボタンやフォームなどのwebサイト用のパーツも多いため、使いこなすことができれば、非常に効率的にワイヤーフレームの作成を行えます。大人数での使用は有料となってしまうことや、ネット回線がない場所では使えないことには注意してください。

ワイヤーフレームの作成の流れ

ワイヤーフレームの作成は、以下の手順で行ってください。

①掲載するべき情報を決める

まずは「何をwebページに掲載するか」を決定します。webページで伝えたいこと（コンセプト）を伝えるには、どのような情報が必要となるのかを考えます。

②情報を配置する場所（レイアウト）を決める

webページの基本的なフォーマットをもとに、レイアウトを決定します。サイトの目的やターゲット層、機能性などを考えて決めていきます。

③作成ツールを使って作る

レイアウトが決定した後は、作成ツール（Excel・Power Point・cacooなど）を用いてワイヤーフレームを作成します。手書きで作成する場合と違い、データ化できるので、ワイヤーフレームの共有が手軽にできます。

ワイヤーフレーム作成の注意点

ワイヤーフレームの作成の際は3つのことに注意してください。

1つ目は「PC版とスマホ版のワイヤーフレームは別に作る」ということです。画面幅の違いによって、見やすいレイアウトは異なるため、それぞれ分けて作る必要があります。

2つ目は「デザインを凝りすぎない」ということです。デザインを凝りすぎると、デザイナーがページの制作を行う際に引きずられてしまう恐れがあります。ワイヤーフレームはあくまで全体像を掴むための設計図であることを意識しましょう。

3つ目は「優先順位をつける」ということです。1サイトの全ページにワイヤーフレームを作るのには、多くの時間がかかります。時間が十分にない場合は、重要なページのみにワイヤーフレームを作り効率的に作業を進めましょう。

ワイヤーフレームに関係した気になる話題

ディレクトリマップとの違い

ディレクトリマップとは、webページの構成要素となる情報全体をまとめて一覧にしたもののことをいいます。そのため、ディレクトリマップは「サイト内の構造」を理解するときに役立ちます。

ディレクトリマップは「webサイト全体におけるレイアウトの決定を行うもの」ワイヤーフレームは「1webページ単体のレイアウトを決定するもの」というのが2つの大きな違いです。他方で「どこにどの情報が配置されているのか」ということを示すといった意味では、ディレクトリマップとワイヤーフレームは共通しています。

サイトマップとの違い

サイトマップとは、「webサイトの全体像」を表し、「制作後のwebサイト運用時」に使用するものです。ワイヤーフレームは「webページ単体」を「制作作業中」に使用するものです。そのため「対象範囲」と「使用のタイミング」が異なっています。

また、サイトマップは「webサイトの繋がりを視覚的に捉えることを得意とした資料」であって、「webサイトの構成要素の情報全体の一覧表」であるディレクトリマップとは異なります。とはいえ、小規模なサイトでは、サイトマップがディレクトリマップの役割を果たすこともあります。

デザインカンプとの違い

デザインカンプとは、クライアントに完成イメージを伝えるための「デザイン完成見本」のことをいいます。いくつかのデザインカンプを作成し、クライアントにその中から選んでもらうのが一般的な利用方法です。「webページ制作の関係者全体」に、構成要素となる情報とレイアウトを伝える設計図であるワイヤーフレームと、「クライアント」に提示する完成見本であるデザインカンプとでは、対象者と目的が異なります。