Webサイトを制作する際には、ワイヤーフレームを作ることが多いです。
しかし、「ワイヤーフレームの書き方や作り方についてよくわからない…」という方も多いと思います。
そんなワイヤーフレームの作り方を、ここでしっかりと押さえていきましょう。
CONTENTS
そもそもワイヤーフレームとは？
まずは、「ワイヤーフレームとは何なのか」しっかりとおさえておきましょう。
ワイヤーフレームとは、
Webページの大まかなコンテンツやレイアウトを示した構成図（コトバンクより）
とあります。
つまり、Webサイトの設計図になります。
この設計図があることによって、「どのようなWebサイトを作るのか」という１つの共通認識ができ、どの立場の人でも同じように理解することができます。
また、完成時のイメージがしやすくなるため、仕様の変更やデザインの改善なども具体的に行うことができます。
ワイヤーフレームを作るステップとは？
ワイヤーフレームを作る際には、５つのステップを踏んで作っていくことをおすすめします。
このステップ通りに行っていくことで、要素や機能面での過不足を防ぐことができます。
Step1．最低限あるべき要素を整理する
ワイヤーフレームを作成する前に次の２つのことについて考えていきます。
１．１つのページのゴールを決める
Webサイトはスクロースさえすれば、無限に要素を配置することができます。
しかし、１つのページに要素を入れすぎてしまうと、ユーザにとって使いにくいサイトになってしまいます。
要素の入れすぎを防ぐために１つのページで１つの目的を満たすようにします。これに基づいて「このページではどのような情報を得られるのか」明確にしていきましょう。
２．ページに必要な要素を考える
１つのページのゴールを決めた上で、そこで必要になる要素について考えていきます。
ある企業のサイトを作ることになったとして考えてみましょう。
１ページの目的として「会社概要がわかるようにする」と挙げたとします。そこで必要になる要素としては、所在地や設立年月日、事業内容、取引先企業などが挙げられます。
このように必要となる要素を書き出してみましょう。これで、１つのページに載せるべき情報が整理できるはずです。
Step2．大枠の要素を書き出す
大枠の要素を書き出して、サイトの全体像をイメージしていきます。大枠の要素として必要になるのは、次のようなことが挙げられると思います。
- ヘッダー：メニューや検索フォームを配置する
- サイドバー：ナビゲーションや広告を含む
- コンテンツ：訪問者に伝えたい情報を入れる
- フッター：copyrightの表記やサイトマップを配置する
必要になる要素を書き出したところで、「どのように配置するのか」について議論します。
ワイヤーフレームのレイアウトとしては、大きく分けて3つが挙げられます。
ワイヤーフレームのレイアウトの種類
- マルチカラム型：ヘッダーやコンテンツ、サイドバー、フッターの要素から構成される（一般的に用いられているレイアウト）
- シングルページ型：ヘッダーとコンテンツの要素から構成される
- フルスクリーン型：全面を1つの要素で埋める
サイトの設計を考えるためのワイヤーフレームなので、色は付けずに考えていきましょう。
色を付けてしまうと、「どんな色にするのか」というデザイン面に気をとられてしまい、サイトの設計について考えることができなくなってしまいます。
ここで、やるべきことをもう一度整理しておきます。
- 必要となる要素を書き出す
- 要素の配置を考える
Step２では、この２つを中心に考えていきます。
Step3．要素ごとに掘り下げて考える
Step2までで必要になる要素について考えられたと思います。次に、必要とする要素に「どのような情報を組み込むのか」具体的にしていきます。
例えば、ヘッダーには「ロゴ」や「検索ボックス」などが必要になります。
また、ナビゲーションでは、「企業情報」や「その企業が提供しているサービス」などが必要になるでしょう。このように要素ごとに必要となる情報について考えていきます。
まずは、「要素ごとにどのような情報が必要になるのか」思い浮かんだ順に書き出してみましょう。
「人は左から右に視線を移動させる」という習性があるので、左から順に重要な内容を配置していきましょう。
Step4．要素に優先順位をつける
必要となる要素や要素の配置について考えたところで、優先順位をつけて考えていきます。
「優先順位をつけてどこを目立たせるべきか」考えていきます。
目立たせる部分としては、「アイキャッチ画像」や「CTA（Webサイトの訪問者に行動を誘導する）」が挙げられると思います。
目立たせる部分を明確にすることで、重点的に目立たせていくべきか明確になります。
Step5．色を付ける
いよいよ色を付けて、今までのイメージを形にしていきます。
色を付けていくことで、完成品をイメージできるようになります。完成品がイメージできるようになることでどの立場の人にも1つの共通認識を持てるようになります。
また、「このサイトをより良くするためにはどうすべきか」さらにブラッシュアップしていくこともできます。
ワイヤーフレームは何を使って作るの？
ワイヤーフレームは、紙とペンを使う場合とパソコンを使う場合の2つのパターンがあります。
紙とペンを使うことで、誰でも簡単に作ることができ、修正も簡単にできます。
パソコンのツールを使うことで、ワイヤーフレームの管理がしやすくなるだけでなく、用意されているテンプレートを使って作成することができます。
パソコンでのワイヤーフレーム作成ツールとしては、「Cacoo」や「Moqups」、「Adobe Comp」、「PowerPoint」などが挙げられます。
ワイヤーフレームの作成方法に関するまとめ
以上、いかがでしたか？
今回は、ワイヤーフレームの作成方法をメインにお伝えしました。
作成方法をもう一度おさらいしておきましょう。
Step1．最低限あるべき要素を書き出す
Step2．大枠の要素を書き出す
Step3．要素ごとに掘り下げて考える
Step4．要素に優先順位をつける
Step5．色を付ける
この5つのステップに沿って作っていきます。
「ワイヤーフレームをどう作ればいいのかわからない…」と悩んでいるあなたもまずはこのステップに沿って考えてみましょう。
このステップに沿って考えていくとスムーズに作れるようになるはずです。最後まで読んでいただき、ありがとうございました。
