Webサイトのワイヤーフレーム｜作り方や注意点など初心者向けにわかりやすく解説
ワイヤーフレームとは、Webサイトの設計図のようなものです。この記事では、Webサイトにおけるワイヤーフレームの基礎から作り方までわかりやすく解説します。また、ワイヤーフレーム作成時の注意点やおすすめのツールなども紹介しているため、Webサイトのワイヤーフレームを作成する際の参考にしてください。
1. ワイヤーフレームとは？
ワイヤーフレームとは、Webサイトを作成するために用いられる設計図です。Webページのレイアウトや、ユーザーに届けたいコンテンツの配置を決める役割を担っています。
2. ワイヤーフレームを作成するべき理由
Webページのレイアウトなどを決める際に、ワイヤーフレームを作成する必要性について解説します。
2-1. レイアウトに必要なコンテンツを盛り込むため
ワイヤーフレームは、Webサイトにおいて重要なコンテンツを適切に盛り込むために不可欠です。レイアウトやコンテンツの設置を後回しにしてデザインを優先すると、必要なコンテンツが不足する恐れがあります。必要なコンテンツをリストアップしたうえで、Webサイトのレイアウトを決めましょう。
2-2. 制作者間で共有するため
ワイヤーフレームは複数の制作者と情報を共有するために必要です。ワイヤーフレームを作成することで、Webページのレイアウトや搭載させる機能の種類を可視化できるため、制作者間でWebサイトの完成イメージを共有できます。また、ワイヤーフレームをもとに意思疎通を図りやすくなり、見直しや改善などもスムーズに行えます。
2-3. アイデアや議論を促進するため
ワイヤーフレームがあると、関係者間でアイデアを出す際に便利です。Webページの作成前の段階で完成を具体的に想像しやすく、コンテンツの過不足を指摘することも可能です。関係者が同じ認識のもとで意見を出しあうことで、より高品質なWebサイトを作成できるようになります。
3. ワイヤーフレームを作成する担当者は？
一般的にWebディレクターは、自社やクライアントの要望をもとにWebサイト制作の進行を任されており、全体像を把握していることからワイヤーフレームの作成担当者に適任です。Webデザインの経験がない人でも担当者になれます。
4. Webサイト制作でワイヤーフレームと混同されやすいもの
ワイヤーフレームは、Webサイトの制作で別のものと混同してしまう場合があります。ワイヤーフレームとの違いを解説します。
4-1. サイトマップ
サイトマップはWebサイトの地図のようなもので、一目見るだけでどのようなWebページがあるのか確認できます。一方で、ワイヤーフレームはWebページのレイアウトを決める際に用いられます。
4-2. ディレクトリマップ
ディレクトリマップは、Webページの名称や階層を確認できる一覧表のようなものです。ワイヤーフレームはWebページの構成を把握するためのもので、ディレクトリマップはWebサイト上のすべてのWebページが、どこに配置されているのかを把握できます。
4-3. デザインカンプ
デザインカンプとは、Webデザインの完成形を示す見本です。制作の前段階で複数のデザインカンプを比較検討し、適したものをもとに制作を始めるのが一般的です。デザインカンプは、Webページの設計図であるワイヤーフレームに基づいて作成します。
5. ワイヤーフレームの作り方
ワイヤーフレームはどのように作成すればいいのか、以下で手順を詳しく解説します。
5-1. Webサイトの概要を把握する
ワイヤーフレームを作成する前に、制作するWebサイトの全体像を把握しておきましょう。たとえば、Webサイトの概要はもちろん、どのような目的でどのような内容のWebサイトにするのかを検討します。Webサイトの全体像を把握することは、掲載するコンテンツの内容や優先順位を見極めるうえで重要な作業です。
5-2. サイトマップを作成する
Webサイトの概要を把握した後に、サイトマップを作成しましょう。ワイヤーフレームを作る前にサイトマップを明確にしておくことで、Webページ間の関連性などを把握でき、Webページやコンテンツの過不足や重なりなどを防げます。また、Webサイトの構成を可視化できるため、制作するWebサイトの全体像を固めることができます。
5-3. 情報を整理する
次に、情報の整理を行います。具体的な手順は、ピックアップ、グルーピング、ランキングの順に情報を整理していきましょう。まずは、Webページに掲載する情報を洗い出し、似た要素を持つ情報をグループごとに分けます。さらに、グループ分けした情報の優先順位をつけ、優先度の高いグループを決めていきます。
5-4. レイアウトを決める
情報を整理した後に、Webページのレイアウトを決めましょう。具体的には、Webページに掲載する情報をどこに配置するのか検討します。ユーザー目線で操作がしやすいかどうかも考慮したうえで、優先度の高い情報から配置することが大切です。Webサイトの作成目的や機能性などを整理しておくと、スムーズにレイアウトを決められます。
5-5. ワイヤーフレームを清書する
Webページ上に配置する情報を決めた後に、レイアウトに基づいてワイヤーフレームの清書を行います。ワイヤーフレームを作成する際は手書きでも可能ですが、効率よく行うならツールの活用がおすすめです。ワイヤーフレームを清書する時点では、デザイン要素は考えずに構成を意識するようにしましょう。
5-6. レビューしてもらう
ワイヤーフレームの作成に慣れていない場合は、作成経験のある人やWebデザイナーなどに見てもらい、フィードバックをもらいましょう。とくに、Webページを閲覧したユーザーがアクションを起こしやすい配置か、具体的なレビューをもらうことが重要です。
6. ワイヤーフレームの作成に役立つツール5選
ここでは、ワイヤーフレームを作成する際におすすめのツールを5種類紹介します。
6-1. Microsoft PowerPoint
Microsoft PowerPointは、プレゼンや会議などの資料作成で広く用いられているツールです。直感的な操作が可能なうえに使用できる図形の種類が豊富なため、ワイヤーフレームを初めて作成する人でも使いやすい特徴があります。
6-2. Microsoft Excel
Microsoft Excelでもワイヤーフレームを作成できます。Excelを利用するメリットは、シンプルなワイヤーフレームを作成できる点です。Excelには図形描画の機能があり、線や図形、文字のみでワイヤーフレームを作れます。
6-3. Cacoo
Cacooは、ワイヤーフレーム作成に特化したクラウド作図ツールです。Webサイトだけでなく、アプリのワイヤーフレームにも対応しています。テンプレートを利用して作成することも可能で、ワイヤーフレーム作成の初心者に向いています。
6-4. Adobe XD
Adobe XDは、Web制作会社などのプロも利用するワイヤーフレーム作成ツールです。用途はワイヤーフレームだけでなく、UIやUXのデザインの作成やクラウド上での共有も可能です。
6-5. Adobe Photoshop
Adobe Photoshopは、画像の編集やイラストの作成など、Web制作で利用されることの多いツールです。テキストの挿入や装飾なども行えます。ワイヤーフレームはもちろん、デザインカンプの作成に便利です。
7. ワイヤーフレームを作る際の注意点
ワイヤーフレームの作成時に気をつけたい注意点について、以下で解説します。
7-1. サイトマップ・ディレクトリマップを作成する
ワイヤーフレームの作り方でも解説したとおり、サイトマップやディレクトリマップを事前に作っておくことが大切です。サイトマップやディレクトリマップを作成することで、Webサイトに必要なWebページやコンテンツを把握しておけるため、制作後の追加や修正作業の手間を減らせます。
7-2. 作成するべきワイヤーフレームの優先順位を決める
ワイヤーフレームを作成する際は、洗い出した情報をグループ分けしたうえで優先順位をつけておきましょう。優先順位が明確であれば判断基準として利用できるため、ワイヤーフレームを作成したほうがよいWebページを見極めやすくなります。
また、Web制作に時間をかけられない場合は、メインとなるWebページを優先して、ワイヤーフレームを作成することも可能です。
7-3. PC版とスマホ版のワイヤーフレームは別々に作る
ワイヤーフレームは、PC版とスマホ版の2種類に分けて作成する必要があります。画面のサイズが異なるPC版をスマホ版に読み込むとレイアウトが崩れてしまうため、ワイヤーフレームを別々に作成しましょう。
7-4. ワイヤーフレームの作成は凝りすぎないようにする
ワイヤーフレームを作成する段階で、デザインなどを作り込みすぎないようにしましょう。ワイヤーフレームは、情報を整理してWebページのレイアウトを把握するためのものです。細かいデザインなどに凝って作成すれば、デザイン作成時にワイヤーフレームのデザインに固執しやすくなるため、注意が必要です。
7-5. 競合サイトを分析したうえ作成する
ワイヤーフレームを作成する際に、競合サイトを分析することも重要なポイントです。検索結果で上位にある競合サイトのレイアウトを分析することで、ワイヤーフレームを具体的にイメージしやすくなります。特に、ワイヤーフレームの作成に悩んだときの対策として、競合サイトをチェックしてみるのもおすすめです。
8. まとめ
Webサイトを制作するうえで、ワイヤーフレームの作成が欠かせません。サイトマップやディレクトリマップを作ってから、ワイヤーフレームの作成を始めることが大切です。ただし、ワイヤーフレーム作成経験がない人は、Web初心者でも簡単に作成できるオールインワンのツールがおすすめです。
BiNDupは国産のCMSで、カスタマイズ性に強みのあるサービスです。PCとスマホの両方に対応する「レスポンシブWeb」機能も搭載されています。有料コースには専用サポートがついているため、充実したサポートのあるツールをお探しの人は、新規申込からお問合みせください。
