ワイヤーフレームとはWebページのどこにどのような情報を配置するかを表す設計図、Web制作の基盤になる重要な資料です。
ワイヤーフレームの作り方に明確な決まりはなく、フォーマットや作り込みの度合は会社や案件によって異なります。
「Webページの設計図としての役割を果たしていれば、それがワイヤーフレーム」ということになるのですが、作り慣れないうちは迷ってきてワイヤーフレーム作成途中で手が止まってしまうこともあるでしょう。
「どうやってワイヤーフレームを作ればいいのかわからない！」
「ワイヤーフレームって、どこまで作り込むのが正解なの？」
「ワイヤーフレームを作るのに時間がかかってしまう…」
そんなお悩みを解消するため、この記事ではワイヤーフレームの作り方とともに、ワイヤーフレーム作成で抑えておくべきポイントやオススメの作成ツールについて解説していきます。
先輩の丁寧な指導で未経験から着実にスキルアップ！
C&R社のWebディレクター育成プロジェクト>>
Webサイト制作におけるワイヤーフレームとは
Web制作におけるワイヤーフレームとは、「Webページの設計図」のことを指します。
フレームは「枠」を意味する単語ですが、実際にWebページを見てみると、複数の枠組みで構成されていることがわかります。
Webページによって枠組みの方法は異なりますが、大まかな枠組みとしてはページの上部にあたる「ヘッダー」、ページの中央部分にあたる「コンテンツ」、ページ右側の細長い枠の部分にあたる「サイドバー」、ページ下部にあたる「フッター」などがあります。
Webページを制作するにあたって枠組みをうまく活用すると、多くの情報がわかりやすく、見やすい形で配置されます。
ワイヤーフレームを作る上でのポイント
ワイヤーフレームを作る上で重要なポイントは、誰が見てもわかりやすいことです。
Webページを制作する場合、クライアントや社内のチームメンバーなど多くの人が関わります。その中でワイヤーフレームは言わばコミュニケーションツールのような役割を果たしてくれます。そのため、Webページの企画者が考えたイメージと実際のページの仕上がり具合が同じになるかどうかは、ワイヤーフレームの内容がわかりやすいかどうかにかかっています。
Webページの制作者がワイヤーフレームの内容を十分に理解できれば、制作者同士で作業の方向性が一致するため、企画者のイメージに近いページができあがりやすくなります。そのため、ワイヤフレームを作る上では「わかりやすさ」を意識するといいでしょう。
ワイヤーフレームの作り方
ワイヤーフレームの作り方の流れを大まかに説明すると以下の通りとなります。
1. Webサイトに載せる情報を整理する
2. レイアウトを決める
3. ツールで清書する
ここでは、流れに沿ってそれぞれについて説明します。
1. Webサイトに載せる情報を整理する
ワイヤーフレームの制作において最初に行う作業は、Webサイトに載せる情報を整理することです。情報整理は以下の流れで行います。
情報をピックアップする
Webサイトに載せたい情報をできる限り書き出します。思いついた内容は箇条書きでも差し支えありません。載せたい情報に漏れが生じないようにするためには、他のサイトを参考にしながら載せたい情報をピックアップすることも1つの方法です。
情報をグループ分けする（グルーピング）
Webサイトに載せたい情報をすべて書き出したら情報をグループ分けします。グループ分けのことを「グルーピング」と呼びます。
たとえば、会社関連の内容として「会社概要」「会社の沿革」「社長メッセージ」を1つのグループにしたり、Webサイトに載せる広告として「バナー画像」と「広告リンク」を1つのグループにまとめたりする方法があります。
グルーピングを行うことによって、ピックアップした情報の整理が進みます。
情報の優先順位を決める（ランキング）
最後に、Webサイトに載せる情報の優先順位を決めます。優先度が高いと判断した内容はフレームワークの上部に、優先度がさほど高くないものについてはフレームワークの下部に配置します。
なお、優先順位が低い内容についてはWebサイトに掲載せず、優先順位が高い内容を充実させることも検討してみましょう。
2. レイアウトを決める
情報の整理が終了したらレイアウトを決めます。レイアウトとは、Webページの画面の分け方を指し、主に使用されているレイアウトとしては「マルチカラム」と「タイル」があります。
マルチカラム
Webページの上部にヘッダー、下部にフッターが配置され、ページの中央部分にはコンテンツ、ページ右端または左端にサイドバーが配置される構成のことです。
カラムとはもともと「円柱」を意味する単語であり、それが転じて「縦の列」という意味に使われるようになりました。
つまり、マルチカラムとは「複数の縦の列で構成されるページ」を指します。コンテンツと1本のサイドバーで構成されるWebページは「2カラム」であり、コンテンツの両脇にそれぞれ1本ずつ、合わせて2本のサイドバーが配置されるWebページは「3カラム」となります。
多くのWebサイトでは2カラムのレイアウトが使用されています。
タイル
一方でタイルとは、Webページ上にたくさんの四角い枠が並んでいて、レイアウトがタイルのように見える状態を指します。
画面上に四角い枠がたくさん並んでいることによって、Webサイトの情報がきれいに整理されている印象を受けます。そのため、探したい情報が簡単に見つけられる点がメリットといえます。
その反面、画面上に情報がまんべんなく掲載されている形となるため、特定のコンテンツを強調することが難しくなります。特に強調したい内容については目につきやすい画面上部に配置するなど、レイアウトの工夫も必要です。
3. ツールで清書する
レイアウトが決まったら、ツールを使ってワイヤーフレームを清書します。
清書を行う前に、紙に下書きしておくとワイヤーフレームを制作する作業がスムーズに行えます。下書きの際には、必要に応じてページに記載する内容を追加したり、あるいは削除したりしておきます。
ワイヤーフレームの制作は紙に手書きで行うことも可能ではありますが、Webページの制作を複数のメンバーで行うことを踏まえると、ワイヤーフレームは清書しておいた方がいいでしょう。
ツールを使ってワイヤーフレームの内容をわかりやすくしておけば、Webサイト制作がスムーズに進行します。
ワイヤーフレーム作成におすすめのツール
最後に、ワイヤーフレームを作成する際のおすすめツールについて紹介します。
Cacoo
オンライン作図ツールの「Cacoo」は、ワイヤーフレームのほか、フローチャートやプレゼン資料も作成できるオンライン作図ツールです。
パソコン向け、スマートフォン向けのワイヤーフレームのテンプレートが豊富に用意されているので、ワイヤーフレームを簡単に制作できます。自分で自由にワイヤーフレームを作成することも可能です。
また、オンラインで共有できる機能も利用できるので、共同で作業を進める場合に適しています。
Cacooは、ワイヤーフレームの制作が6ページ以内であれば無料で利用できますが、7ページ以上制作する場合は有料のプランを利用する形となります。
Excel
ワイヤーフレームはExcelでも制作できます。Microsoft Officeがパソコンにインストールされていれば無料で利用できます。
Excelの画面を見ると縦横の罫線がたくさん引かれており、多くの枠で区切られていることがわかります。罫線の幅を自由に変えられることや、枠の中に文字を入れられるのもExcelならではの特徴となっており、ワイヤーフレームを制作するのに適した機能を備えています。
Excelで制作したワイヤーフレームはシンプルなものになりやすいので、簡単にわかりやすく仕上げたい場合におすすめです。
PowerPoint
ワイヤーフレームはPowerPointでも制作可能です。Excelと同様、パソコンにMicrosoft Officeがインストールされていれば無料で利用できます。
参考にしたいWebページのスクリーンショットを撮り、それをPowerPointの画面上に貼り付けます。そしてWebページ内の枠の大きさを調整し、スクリーンショット画像を削除するとフレームのみの状態になります。
最後に、フレーム内に記載するコンテンツの内容をメモすることでワイヤーフレームができあがります。
まとめ
ワイヤーフレームは、ユーザービリティの高いWebページを制作するためには欠かせないツールです。
ワイヤーフレームがわかりやすい形に仕上がっていれば、制作に関わっている人たちが理解しやすくなるため、Webページがスムーズに仕上がります。
ワイヤーフレームを制作するならツールを使うと簡単です。多くのユーザーに親しまれるWebページを制作するためにも、ワイヤーフレームの制作方法は確実に習得しておきましょう。
