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つのステップに沿って作っていきます。
「ワイヤーフレームをどう作ればいいのかわからない…」と悩んでいるあなたもまずはこのステップに沿って考えてみましょう。
このステップに沿って考えていくとスムーズに作れるようになるはずです。
最後まで読んでいただき、ありがとうございました。
オンラインマンツーマンならCodeCamp
CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。
プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。
オンラインテキストを自習形式ならTechAcademy
基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。
TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。
