0120-900-587
ワイヤーフレームとは？～初心者のための基本解説～
ワイヤーフレームとは、Webページの作成においてレイアウトを決めるための設計時のこと指します。ワイヤーフレームの役割から具体的な作成方法、作成のポイントまで解説していきます。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
1.ワイヤーフレームとは？
ワイヤーフレームは、Webページのレイアウトを定める設計図です。
Webページを表示する際に、「どこに」「何を」配置するのかを決めるために作成します。
ワイヤーフレームは、構成の異なるページの数だけ作成します。
たとえば、トップページと記事ページでは、Webページのレイアウトが異なるため、別々のワイヤーフレームを制作することが多いものです。
Webサイトを制作する際には、記事のディレクトリ構造を決める「ディレクトリマップ」や、ディレクトリマップを視覚的にわかりやすくした「サイトマップ」を作成します。
ワイヤーフレームは、ディレクトリマップやサイトマップをもとに、実際にWebページ上でどのように見せるのかを視覚的にわかりやすくした設計図となります。
2.ワイヤーフレームの役割
ワイヤーフレームを作成する理由は、ワイヤーフレームが持つ役割にあります。
ワイヤーフレームの目的について解説します。
1.Webページの完成イメージを共有する
ワイヤーフレームを作成することで、Webページの完成イメージを持つことができます。
Web制作は一人で行うことよりも、複数人で分担して作業することが多いものです。
複数の人の間で、同一の完成イメージを持っていないと、統一性のないWebサイトになるでしょう。
Webページの完成イメージを共有することが、ワイヤーフレームを作成する一番の理由です。
2.Web制作の作業効率化
Webページの完成イメージを共有することにも繋がりますが、1つの完成イメージを複数人の間で持つことができれば、スムーズに作業を進めることができます。
ワイヤーフレームを作ることでWeb製作者の間だけでなく、クライアントとも完成イメージの共有ができます。
Web制作に関わるすべての人の間で完成イメージを共有することで、手戻りのリスクが減り、ワイヤーフレームを通して意思疎通を行いやすくなります。
3.ワイヤーフレームの作成方法
ワイヤーフレームの有用性はわかりましたが、具体的にどのように作成するべきなのでしょうか。
ここでは、ワイヤーフレームの作成方法を1つずつ解説していきます。
1.情報をまとめる
最初にWebサイトに掲載する情報をまとめましょう。
まずは、掲載しようと考えているすべての情報を書き出すことから始めます。
書き出した情報は、ジャンルや内容が似たものをグループ化します。
ワイヤーフレームでは、同じようなジャンルや内容は近くに配置したり、同じような配置にしたりとすることが基本です。
グループ化したあとに、書き出した情報の中から必要となる情報だけを取捨選択します。
掲載する情報が多すぎると、ユーザーにとって分かりづらいサイトになってしまうため、必要な情報のみを残すようにします。
2.レイアウトを考える
グループ化した情報をWebページにどのように配置するのか、大雑把なレイアウトを考えます。
1カラムのページにするのか、ヘッダーやフッター、サイドバーなどがあるページとするのか、大枠のレイアウトを考えましょう。
大まかなレイアウトでは、Webページに掲載する情報の量に応じて、最適なレイアウトとなるように意識します。
3.下書きを作成する
大雑把なレイアウトを決めたら、具体的な情報の配置を決めていきます。
いきなりツールなどを使って清書しようとすると、かえって時間がかかってしまうものです。
最初は紙に手書きでワイヤーフレームを書いていくことをおすすめします。
情報を配置する場合は、重要度の高いものから配置を考えましょう。
Webページを見る人の視線は左上から右下へと動きます。イメージとしては「Z」を描くような視線の動きです。
そのため、見て欲しい・重要度が高い情報は左上に配置するように意識します。
4.ツールを使って清書する
ワイヤーフレームの清書は紙でも構いませんが、ツールを使うことをおすすめします。
その理由としては、完成したワイヤーフレームを多くの人に簡単に共有できるからです。
ワイヤーフレームを作成するツールとしては、「PowerPoint」と「Cacoo」がおすすめです。
PowerPointは、Microsoft Office製品の中の一つで、本来はプレゼンテーションを行うためのソフトウェアとなりますが、多くの人が使い慣れていて、閲覧・編集を行いやすいというメリットがあります。
Cacooはクラウドサービスの一つで、ソフトウェアのインストールは不要です。
インターネットに繋がっていれば、いつでもどこでも利用できます。リアルタイムで共有でき、複数人が同時に編集できる点がメリットです。
4.ワイヤーフレーム作成のポイント
ワイヤーフレームの具体的な作成方法を紹介しましたが、作成にあたって覚えておきたいポイントについて解説します。
1.デザインは考えない
ワイヤーフレームを作成する際は、デザインのことを考えないようにします。
ワイヤーフレームはあくまでも「設計図」であり、デザインを考えるのはデザイナーです。
個人のWebサイトを作成するときでも、ワイヤーフレームを作成するときにはデザインは意識しないようにしましょう。
ワイヤーフレームは、ユーザーにどのように情報を見てもらうのか、を決めるための設計図であるため、色付けなどの余計なことは考えないようにします。
2.0から生み出そうとしない
ワイヤーフレームで作成するレイアウトを0から生み出そうと考えないようにします。
「今までに斬新なレイアウト」が必要となる場面は、そうそうありません。
あなたが普段見ているWebサイトを研究し、ワイヤーフレームの参考としましょう。
ワイヤーフレームは情報の見せ方を設計するものであるため、アクセスの多いWebサイトなどは非常に参考となるでしょう。
3.競合サイトを研究する
これからWebサイトを制作する場合、ほとんどの場面で競合サイトが存在しています。
競合サイトは同様のジャンルであり、似たような情報を発信しているため、直接的なライバルになる存在です。
ライバルとなる競合サイトの情報の見せ方を研究し、どうすれば競合サイトに勝つことができるのかを研究しましょう。
競合サイトを研究することで、自身のサイトに足りない情報を確認できます。また、競合サイトが公開していない情報を公開することができれば、競合サイトとの差別化も図れます。
4.ワイヤーフレームの内容をすべて説明できるようにする
ワイヤーフレーム自体を作成することは簡単で、慣れれば誰にでもできることです。
しかし、ワイヤーフレームはユーザーにどのように情報を見せるのか、といった情報設計を視覚化したものです。
そのため、ワイヤーフレームで構成したすべての情報の配置には、意味がなければなりません。
1つの情報の配置に対し、「何のために」「なぜ」という疑問には、意味を持って回答することができるようにします。
5.まとめ
ワイヤーフレームは、Webページのレイアウトを定める設計書です。
ワイヤーフレームを用いることで、複数人で作業する場合には、1つの完成イメージを共有することができ、Web制作において作業の効率化が見込めます。
Webページを作成する場合には、この記事で紹介した作成方法と作成のポイントを参考にワイヤーフレームを作成してみてください。
