Webサイト作成に必要なワイヤーフレームとは？目的と作り方を解説

訪問者の目を引く魅力的なWebサイトを構築するには、サイトの設計図であるワイヤーフレームの作成が欠かせません。

ワイヤーフレームが必要な理由と、具体的な作成手順を解説します。これからWeb制作の勉強をはじめる人は、ぜひ参考にしてください。

ワイヤーフレームとは何か？

まずはワイヤーフレームとは何か、基本的なところを押さえておきましょう。ワイヤーフレームを作成せずにWebサイトを制作している人もいますが、魅力的なWebページを作成するには必要不可欠な要素です。

Webページの設計図

ワイヤーフレームとはWebサイトのデザイン構成を示した設計図で、Webコンテンツをページ内のどこに配置するかを決めたものです。要はデザインの骨組みであり、Webサイトの各要素や機能などを配置する場所を決めておき、クライアントと完成図のイメージを共有するために作成されます。

設計図を作成しないまま建てられる家が存在しないように、Webサイトも設計図であるワイヤーフレームを作っておくことで、完成後に「イメージと違った」「必要な情報が入っていない」といったトラブルを未然に防ぐことができます。

混同されやすい用語との違い

Web制作の現場では、ワイヤーフレームのほかにもディレクトリマップや、サイトマップなど、混同されやすい用語がよく使われます。それぞれの違いを理解しておきましょう。

ディレクトリマップ

ディレクトリマップとは制作するWebサイトに必要な情報を網羅し、一覧化したものをいいます。どの情報をどこに配置するかをまとめたもので、これを元にレイアウト図であるワイヤーフレームが決められることも少なくありません。

Webサイトの構造を理解するのに便利な表であり、制作するWebページごとのURLやタイトルなども一目で分かるようになっているので、全体のページ構造が一目でわかるのが特徴です。

デザインカンプ

デザインカンプとは「Design Comprehensive Layout」を示す言葉で、Webサイトのデザイン設計案のことをいいます。つまり完成イメージであり、ワイヤーフレームでは確認できない細かいデザインまでチェックすることが可能です。

Web制作の現場では、複数のデザインカンプを作成してクライアントに確認してもらい、イメージに近いデザイン案を選んでもらう場合が多いです。

サイトマップ

サイトマップはWebサイト全体の構造をわかりやすくあらわしたものです。大きくわけて訪問者に全体像を理解してもらうためのHTMLサイトマップと、Webサイトの構造を検索エンジンに理解させるためのXMLサイトマップがあります。

ワイヤーフレームはサイトの制作前に作成されますが、サイトマップはWebサイトに実装され、訪問者の目に触れることになります。サイトマップの文字通り、Webサイトの地図のようなものです。

ワイヤーフレームが必要な理由

次に、Webサイトの作成においてワイヤーフレームが必要な理由を考えてみましょう。

個人のWebページの場合、ワイヤーフレームやデザインカンプなどを作成せずに、手っ取り早く作ってしまうケースも少なくないようですが、プロの制作者がクライアントに依頼されてWeb制作を行う場合、必ずワイヤーフレームを作成します。

完成イメージの「見える化」

ワイヤーフレームは、Webサイトの完成イメージをわかりやすく伝える役割があります。完成後に必要な要素が抜けていたり、機能が不足していたりしないように、全体の画面設計を「見える化」する必要があるわけです。

具体的には、ページのどの部分に何の要素を置き、どのような役割を持たせるかを示します。これらの情報をサイトの制作者全員が認識することで、一人ひとりがスムーズに作業を進めることが可能になります。

逆に、ワイヤーフレームがなければ、後から必要な要素を実装し直したり、デザインの変更を迫られたりするなど、さまざまな問題が出てくるかもしれません。

レイアウトに関する情報共有

クライアントとWebサイトのレイアウトに関する情報共有をする役割も持っています。ワイヤーフレームを作成しておけば、クライアントからWebページの内容に関する質問を受けた際にも、具体的な場所を示しながら説明が可能になります。

ページに盛り込むコンテンツや具体的なレイアウトについて、クライアントを交えて議論をしながら適宜、修正を加えることもできます。制作者側とクライアント側の認識の齟齬を防ぎ、クライアントの希望に添ってデザイン制作を進められるのがメリットです。

ワイヤーフレーム作成の基本

それでは、具体的にワイヤーフレームを作成する手順を確認しましょう。細かい工程の違いはあるものの、一般的に以下の手順でWebサイトのワイヤーフレームが作成されます。

情報の整理と配置

まずはWebサイトに掲載するべき情報をピックアップして、整理する作業から始めましょう。必要な情報をすべてリストアップし、その性質ごとにグルーピングしていきます。情報をカテゴリ分けして整理することで、Webサイトに落とし込む際にレイアウトを決めやすくなります。

情報をグループ分けしたら、次に情報に優先順位をつけていきましょう。どの情報を目立つ位置に配置すべきか、表示させる順番はどうするかなど、全体のイメージを考えながら配置場所を決めていきます。Webサイトのコンセプトに従って、どの情報を目立たせるべきかを考えましょう。

レイアウトの決定

整理した情報を元にレイアウトを決定します。Webサイトのレイアウトには一定の型が存在するので、基本的には型に沿ったレイアウトを考えますが、Webサイトのコンセプトや導線、その時代の流行なども考慮する必要があります。

訪問者が受ける印象や読みやすさ、機能性などのバランスを上手く取りながらコンテンツを配置しなければいけません。ヘッダーやフッター、ナビゲーションなどはWebサイトに共通の要素なので、まずは基本要素から決めていくとよいでしょう。

ワイヤーフレームの作成

レイアウトに従ってワイヤーフレームを作成していきます。はじめからツールを使って作成する場合もいれば、まず紙に手書きしてから清書するケースも少なくありません。色やフォントなどにこだわってしまう人もいるようですが、ワイヤーフレームの段階ではデザイン要素は極力排除すべきでしょう。

細かいデザインに関しては、デザインカンプを作成して検討することになるので、ここではWebサイトのコンセプトに沿った情報配置になっているか、訪問者がみやすい導線になっているかなどを意識しましょう。ワイヤーフレームの作成に使えるツールについては後述します。

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

次に、ワイヤーフレームを作成する際に注意すべきポイントを解説します。もっとも重要なのは訪問者視点で機能性や操作性を確認することです。

この時点でしっかりと確認しておかなければ、実際にWebサイトの制作に入ってから修正が必要になるかもしれません。そうなると時間とコストのむだになってしまうので、以下のポイントに留意しながら正確なワイヤーフレームを作成しましょう。

導線に注意する

訪問者にとってみやすいページ構成とコンテンツ配置になっているか、訪問者が必要な情報をみつけやすくなっているかを確認します。クライアントにも確認してもらいながら、ストレスなく閲覧できるページになっているかチェックしましょう。

導線の作り方がわからない場合は、制作しているWebサイトと似た分野のサイトが参考になります。とくに、多くの訪問者を抱える人気のWebサイトは導線がしっかりしているので、複数の人気サイトを比較しながら、取り入れられるところはないか探してみましょう。

情報共有を徹底する

制作者同士はもちろん、クライアントとも情報共有を徹底することが重要です。少しでも認識にズレがあると、後からコンテンツを追加したり、レイアウトの変更が必要になったりする可能性があります。

制作が進めば進むほど修正が大変になり、時間的なコストがむだになってしまうので、定期的に打ち合わせの機会を設けて完成イメージを共有しておきましょう。たとえ細かい部分の修正でも、しっかりと情報を共有しておくことが大事です。

ワイヤーフレームの作成に役立つツール

最後に、ワイヤーフレームの作成に役立つツールを紹介しておきます。PowerPointやExcelを使ってワイヤーフレームを作成する人も多いですが、次のツールもWeb制作の現場でよく使われています。

Adobe XD

Adobe XDはWebサイトのワイヤーフレームの作成はもちろん、UI・UXデザインの制作にも活用できるアプリケーションです。豊富なテンプレートを利用でき、誰でも簡単に操作できるので、初めてワイヤーフレームの作成に挑戦する人にもおすすめできます。無料のプラグインを利用して操作のカスタマイズも可能です。

CACOO

CACOOは直感的な操作でワイヤーフレームの作成が可能な作図ツールで、さまざまな図形や素材が利用できるのが特徴です。テンプレートに沿って作成すれば、初心者でも簡単にワイヤーフレームが作成できます。

特にPowerPointに操作性が似ているので、普段仕事で使っている人ならば、すぐに使いこなせるはずです。無料トライアル版が利用できるので、使い勝手を確認してみるとよいでしょう。

ワイヤーフレームの作り方を学ぼう

Webサイトの制作に欠かせないワイヤーフレームの作り方を解説しました。ワイヤーフレームはWebページの設計図であり、完成イメージを周囲と共有するのに便利です。作成する際には、訪問者の導線に注意して、制作チームでしっかりと情報共有を行いましょう。

はじめてWebサイトを制作する人は準備段階を疎かにしがちですが、できるだけ後から修正が必要にならないように、しっかりとワイヤーフレームを作成することが重要です。

ホームページ制作会社のプロを探すならミツモアがおすすめ