「これからWebデザインの勉強を始めたい・Webデザイナーとして、仕事をしてみたい」という方、多いのではないでしょうか？
Webデザインは、伝えたい情報やサービスを発信するためにする作業。
Webサイトを訪れた人が、快適で見やすい情報の伝わりやすさを意識しないといけません。
そのため、「ワイヤーフレームの制作」というプロセスがあります。
本記事では、Webデザイン初心者でも理解できるように、ワイヤーフレームについてわかりやすく解説します。
ワイヤーフレームとは
ワイヤーフレームを一言でいうと、「Webページ制作の設計図」。
Webデザインにおいて、ページの構成を決める大切なプロセスです。
ワイヤーフレームを制作することで、どのようなWebページを制作するのか一目で把握できます。
家や車などの複雑なものや、DIYで作るシンプルなものでも設計図は準備しますよね。
ワイヤーフレームに基づき段取りを決めることで、スムーズな作業が可能になります。
大切なことなので繰り返しますが、「Webデザインを行う上で、ワイヤーフレームの制作は絶対に必要で重要なもの」です。
それでは、ワイヤーフレーム作成の目的から見ていきましょう。
Webデザインにおけるワイヤーフレーム作成の目的
ワイヤーフレームの主な目的は、Webページの構成とレイアウトを決めることです。
もう一つ重要な機能として、クライアントやチーム全員と、制作するWebページのイメージを共有するツールでもあります。
Webサイト制作に関わる全員が、同じイメージを共有することのメリットは以下2つです。
- 制作物のブレがなくなり、余計な修正が減る
- プロセス全体を把握しやすく、効率的に作業ができる
Webデザインには、多くのプロセスがあります。
クオリティの高いサイトを、効率的に作成することはとても重要ですよね。
ワイヤーフレーム作成時もこの点を意識しましょう。
ワイヤーフレームはいつ作る？
ワイヤーフレームは、Webデザインのプロセスでは初期段階で作成します。
制作するWebサイトのコンセプトや、内容が確定した後に行う作業としてワイヤーフレーム作成があるのです。
ワイヤーフレームを初期段階で作成するメリットをまとめると、以下2つになります。
- 最初からチーム全員で目標を共有できる
- 後工程のデザイン作業や、コーディングの効率化
ワイヤーフレームと似たものに、モックアップとプロトタイプがあります。
モックアップは、実際に表示される見た目のページ見本で、実際の色使いやコンテンツの配置をイメージするために作成します。
モックアップの注意点は、あくまで見た目の見本であり、ページの動作機能はありません。
プロトタイプは、モックアップに動作機能を追加した完成品に近い見本です。
公開前にユーザビリティや実際の動作確認を実施する際、プロトタイプが使用されます。
ワイヤーフレームの作り方4ステップ（Webデザイン）
初めてワイヤーフレームを作る場合、どうやって作るのかわからないのではないでしょうか。
プロセスを段階に分けることで、作業がわかりやすくなります。
ここでは、以下4ステップに分けて、ワイヤーフレームを作る手順を紹介します。
- Webデザインの事前準備
- サイトマップを作る
- ワイヤーフレームを作るページの決定
- ワイヤーフレーム作成
それでは、各段階をみていきましょう。
ステップ1.Webデザインの事前準備
Webデザインをする時は、まず制作するWebサイト全体のコンセプトを決めます。
クライアントも含めたチーム全員で、明確にしておきましょう。
Webサイトのコンセプトが決まったら、トップページ以外にどのようなページが必要なのかを洗い出してください。
洗い出したページは、ジャンルに分けてグループ分けしておきます。
事前準備の段階では、チーム全員で方針を明確にしておくことが重要です。
全員が同じ目標を共有できるようにコミュニケーションを取りましょう。
ステップ2.サイトマップを作る
サイトマップは、Webサイト全体の構造を俯瞰して把握できるもの。
事前準備で洗い出し、グループ分けしたページをサイトマップにしましょう。
サイトマップは、ツリー構造で作成するのが一般的でわかりやすいです。
サイトマップを作成するツールとして、PowerPointに代表されるプレゼンテーションソフトや、Excelなどの表計算ソフトで作成できます。
サイトマップ作成は、ご自身で使いやすいツールを選んで作成してください。
ステップ3.ワイヤーフレームを作るページの決定
作成するページが決まったら、ワイヤーフレームが必要なページを決めます。
ワイヤーフレームは全てのページを作成する必要はありません。
同じ構造のページであれば、一つで対応可能です。
トップページから優先順位にしたがって決めるとスムーズに進みます。
また、ワイヤーフレームを作るページを決める時に考える必要がある要素は以下です。
- どのようなコンテンツを配置するか？
- どのくらいのボリュームを載せるのか？
- どのようなレイアウトのページにするか？
上記を考えた上で、ワイヤーフレームを作るページを決めましょう。
ステップ4.ワイヤーフレーム作成
作成するページが決まった後は、いよいよワイヤーフレームの作成です。
詳細はすでに決まっているので、その通りにコンテンツを配置していきます。
実際のレイアウトを作成してみると、イメージに合わないことはよくあることです。
ワイヤーフレーム作成の段階では、大幅な変更もしやすいので、納得いくように修正してください。
また、Webサイトを訪れる人の視線移動にも留意しましょう。
人の視線は上から下、左から右に移動するのが一般的です。
これを見ている皆さんも、Webページを開いたときに、まず左上に視線が行くのではないでしょうか。
このように、重要なコンテンツは、左上に配置するなどユーザービリティを考えながら作成します。
Webデザインでワイヤーフレームを作る際の3つの注意点
ワイヤーフレームを作る時の注意点を、3つ紹介します。
初めて作る場合にありがちなことなので、しっかり確認しておきましょう。
これを押さえておくだけでも、良いワイヤーフレームが出来上がります。
注意点1.ワイヤーフレームは作りこみすぎない
最もよくあるケースとして「ワイヤーフレームが、Webサイトの完成イメージになってしまっている」ということがあります。
ワイヤーフレームはあくまで、構成を把握するための物です。
実際の色合いや装飾は、後工程のデザイン段階で行います。
ワイヤーフレームにデザインの要素を入れると、余計なイメージを与えかねません。
ページの構成を確認するためのものとして、掲載するコンテンツとレイアウトのみを入れましょう。
注意点2.Webデザインはデバイスごとにわけて作る
現代は、スマートフォンでWebサイトを閲覧することが多くなっています。
そのため、Webデザインをする時は、レスポンシブ対応が基本です。
PCとスマートフォンでは画面サイズが大きく違いますよね。
どちらかに特化したデザインだと正しく表示されず、ページが見切れるなどの可能性があります。
これではサイトの快適性が損なわれて、訪問してくれたユーザーの離脱を招きかねません。
Webデザインをする時は、PCやスマートフォンなど、使用されるデバイスに合わせて作成しましょう。
注意点3.困ったときは他サイトを参考にする
ワイヤーフレームを作成しているときに、煮詰まってしまうことは多くあります。
レイアウトや掲載するコンテンツに悩んでしまうことはよくあることです。
そんな時は、制作しているWebサイトのジャンルで他のサイトを参考にしてみましょう。
競合や他社のサイトを見るのは、スランプ脱出の有効な手段です。
他サイトを探すときのコツとして、そのジャンルで大手のサイトを見るのがおすすめです。
例えば、クラウドサービスを販売するWebサイトを制作するのであれば、そのクラウドサービスの業界内で大手のサイト構成を確認してみましょう。
- 視線を誘導するために、どのようにコンテンツを配置しているのか
- 快適性や操作性上げるために、どのようにユーザービリティを考えているか
上記を注目してみると、非常に参考になります。
ワイヤーフレーム作成おすすめツール（無料＆有料）
ワイヤーフレームの作成で、一番手軽な方法は紙とペンで手書きです。
ただし、手書きは変更が入ると修正が難しいのと、チーム全員との共有もしづらいのでおすすめできません。
ワイヤーフレームを作成できるツールは多くあります。
使用するツールの選択をする時のポイントは、以下2つです。
- 使い慣れているか
- 共同で作業することがあるのか
上記を考慮し、ワイヤーフレーム作成ツールを決定しましょう。
【無料ツール3選】ワイヤーフレーム作成ツール
無料でワイヤーフレームを作成できるおすすめツールは、以下3つです。
- Googleスライド
- Googleスプレッドシート
- Cacoo
各ツールの特徴をみていきましょう。
・Googleスライド
Googleが提供するスライド作成ツールです。
Microsoft PwerPointと似た操作感で、使い慣れている人が多いツール。
Googleドライブ上に保管して作業できるので、URLの連絡と権限付与で共同作業がしやすいメリットがあります。
・Googleスプレッドシート
Googleが提供するスプレッドシート作成ツールです。
Microsoft Excelと似た操作感で、使い慣れている人が多いツール。
Googleスライドと同じく、ドライブ上に保管して作業できるので、URLの連絡と権限付与で共同作業がしやすいメリットがあります。
・Cacoo
Cacooはオンライン作図ツールです。
作図に特化しているので、ワイヤーフレームを効率的に作成できます。
テンプレートも備えており、クラウド上で共同作業も可能。
無料プランでは6枚まで作成可能です。
【有料ツール3選】ワイヤーフレーム作成ツール
有料でワイヤーフレームを作成できるおすすめツールは、以下3つです。
- Microsft PowerPoint
- Microsft Excel
- Adobe XD
各ツールの特徴をみていきましょう。
・Microsft PowerPoint
Microsoft社が提供するプレゼンテーションソフトです。
プレゼンテーションソフトですが、シンプルな構造のWebサイトのワイヤーフレームの作成もできます。
逆に、多数のページが存在するWebサイトのワイヤーフレームには向きません。
作成したワイヤーフレームを、そのままプレゼンテーションできるメリットもあります。
・Microsft Excel
PowerPointに続き、Microsoft社が提供する表計算ソフトです。
使用経験が最も多いソフトの一つではないでしょうか。
標準で画面がグリッドになっており、ツリー構造の表が効率的に作成出来ます。
・Adobe XD
Adobe社が提供するデザインソフトです。
Webサイトやアプリのデザインに特化したツール。
これ一つでプロトタイプの作成までが可能で、共同作業もできるようになっています。
最もおすすめのツールの一つです。
Webデザイン初心者で、ワイヤーフレーム作成が不安な方へ
本記事では、ワイヤーフレームの作り方を解説しました。
ワイヤーフレームは、数あるWebサイト制作のプロセスの一部ですが、設計図という重要な役割を持っています。
ワイヤーフレーム作成では、以下3つの大切なポイントがあります。
- ページに載せるコンテンツやレイアウトをしっかりと決めること
- チーム全員で制作するWebサイトのイメージを共有すること
- ユーザビリティもしっかり考えること
上記のポイントを押さえて、ワイヤーフレームを作成してみてください。
Webデザイナーとして、素敵なサイトを制作する第一歩になります。
