改めて考えるワイヤーフレームの重要性と作り方

webサイトを作る時に必ずと言っていいほど作るのが「ワイヤーフレーム」です。中にはワイヤーフレームを使わずに作っちゃう!なんて方も居るかもしれませんが、webサイト制作をスムーズに進めるために必要不可欠なものです。ここでは改めてワイヤーフレームの重要性や作る利点などをまとめます。

ワイヤーフレームとは?

ワイヤーフレームとは、サイト全体の構成・配置を簡単な線画で表したもので、機能やレイアウトなどを検討する際に使い、サイトの「設計図」になるものです。

例えば、建築の現場や製造の現場で「設計図」が無い場合どうなるでしょうか?
作業する立場からすれば、何を作ればいいのか分からず、
依頼する立場からすれば、何が出来上がってくるか分からない・・・という状態になり、まともに作ることが出来ないことが想像できるかと思います。

webサイトにおけるワイヤーフレームの役割と重要性

webサイト制作では、通常クライアントや制作者など複数の人が関わる事が多く、それぞれの「完成イメージの共有」をする為にもワイヤーフレームは重要です。

クライアントが考えている完成イメージと、制作者が考えている完成イメージが違っていると、ビジュアルデザインを確認する段階でクライアントから「何か違う」と言われたり、「メニューは右じゃなくて左がいい」みたいな、今更言うなよ感がある修正依頼が来たりします。

また「あのボタンを付け忘れていた」「どうも使いづらい」など、機能面での漏れや使い勝手の良し悪しに関わる問題が後から出てきて、その度に修正と確認を繰り返すような事態になる事もあります。ワイヤーフレームはこのようなトラブルを事前に防ぎ、プロジェクトの進行をスムーズにするために必要不可欠です。

ワイヤーフレームを作るのに時間がかかるのではないか?

案件の規模やクライアントのwebリテラシーによって多少は差がありますが、ワイヤーフレームを作る時間よりも、その後トラブルに見舞われて対応する時間の方が大きくなります。

自分の経験上、ワイヤーフレームを軽視しているプロジェクトは大抵が途中で炎上します(笑)
作るのは確かに面倒な部分もありますが、最初にキチッと詰めておく事により、その後の進行がスムーズに行くため、必要な手間と言えるでしょう。

ワイヤーフレームを作るのは誰か?

基本的にはディレクションを行う人、一般的にはディレクターが作ります。 ディレクターはクライアントと打ち合わせをして、ヒアリング内容を基に情報を整理してワイヤーに落とし込みます。 クライアントに言われた事をそのまま右から左へ流すだけではディレクションとは呼べず、情報整理、サイトの基本設計が出来て初めてディレクターと呼べるでしょう。

ワイヤーフレームの作り方

それでは、実際にワイヤーフレームを作る工程を見ていきます。まずは、サイト上に掲載したい要素の洗い出しから始めます。

掲載したい要素の洗い出し

サイト上に載せたい要素を全て洗い出します。要素とは、例えば「ロゴ」「電話番号」「住所」「お知らせ」「ナビゲーション」「告知バナー」「お問い合わせボタン」などです。ヒアリング時にクライアントから載せたい要素の要望があれば、それも加味してまずは全てを洗い出していきましょう。

洗い出した要素に優先順位をつけていく

洗い出した要素を眺め、優先順位をつけていきます。優先順位はサイトの目的やターゲットによって異なります。

例えばコーポレートサイトで、問い合わせを多くしたいという目的の場合「お問い合わせボタン」や「電話番号」などが優先順位が高くなりますが、雰囲気を重視したいレストランの場合は「店内写真」などの優先順位が高くなるかもしれません。

このように案件ごとに優先順位は異なるので、クライアントの意向も反映しつつ、最適な答えを見つけていきます。

優先順位を元にレイアウトを考える

優先順位を元にレイアウトを考えていきます。

よくある企業サイトの場合、上の図のような形が一般的ではないでしょうか。左上にロゴ、右上にはお問い合わせ先、その下にナビゲーション、その下にはメインビジュアル、ニュースなどのコンテンツ、サイドバー、一番下の領域にはフッターといった感じでしょうか。

もちろんこの形以外にも、画面全体に動画や写真などを配置するなどインパクト重視のレイアウトもあります。サイトの役割や目的を考えながらレイアウトを決めていきます。

スマホ用のレイアウトも考えておこう

この時にスマホ用のレイアウトも合わせて考えておきましょう。スマホの場合表示領域が狭いので、要素全てを表示するのが困難な場合もあります。その際はどの要素を残すのか、どうまとめるのかを予め考えておくことにより、後々のトラブル回避に繋がります。

どのツールでワイヤーフレームを作るか

人それぞれ使いやすいツールも違うと思いますが、今まで自分が使ったことのあるものや、有名どころを幾つかご紹介。

手書き

アナログですが紙とペンがあれば描き始める事ができ、消すのも容易です。個人的意見ですが、手で実際に書いているうちに思考が整理されてまとまりやすくなる・・・気がしています。

とはいえ、自分自身や近い人に見せるだけであれば手書きでも良いですが、クライアントとの確認資料として使いたい場合、手書きではちょっと・・・という事もあるかもしれませんので、ツールを使って清書してあげると良いかもしれません。

オンラインツール

ブラウザ上でワイヤーフレームを作ることができます。ウェブサイトに必要なボタンやフォームなどパーツが予め用意されているので、ドラッグ・アンド・ドロップするだけでサクサクと作れるのが特徴です。

また、複数人が同じワイヤーフレームを共有や編集できるので、チームでの共同作業ツールとしても強力です。

オンラインツールの場合、無料でも使えますが、作れるプロジェクト数や枚数に制限がかかっている事が多いです。個人で使う分には無料の範囲内でも収まるかもしれませんが、チームで使う場合は有料プランを検討してみると良いでしょう。

・Cacoo

日本語なのでツールが初めての方でも分かりやすく、すぐに触れるのが特徴です。ワイヤーフレーム用のステンシルが用意されているので、ドラッグアンドドロップですぐにワイヤーフレームが作れます。ワイヤーフレーム以外にも、マインドマップ、フローチャート、オフィスレイアウト図の作成もできます。

https://cacoo.com/lang/ja/home
・Moqups

サイト自体は英語ですが、ワイヤーフレーム制作に特化したサービスのため、使いやすいのが特徴です。 英語と言えども、ワイヤーフレーム内に配置するテキストなんかでは日本語が使えるので、特に不自由はしません。 以前は無料プランでもかなり制限がゆるかった記憶がありますが、現在では無料プランだと1プロジェクトしか作れず、配置できる要素の数も制限がつくようになったみたいです。

https://moqups.com/
・wireframe.cc

こちらも英語のサービスですが、Moqupsよりも更にシンプルに削ぎ落としたデザインとなっています。シンプルとは言え、ワイヤーフレームを作るには十分な機能を備えています。

保存するとユニークなURLが生成され、そこにアクセスすると誰でもワイヤーフレームを確認できるので、クライアントとのやり取りに便利かもしれません。

https://wireframe.cc/
・Googleスライド(Googleドライブ内のツール)

オンラインで編集できるGoogle製のパワーポイントみたいなツールです。複数人で共同編集でき、共有も簡単なのでパワーポイント系のツールを使いたい場合おすすめです。

https://www.google.com/intl/ja_ALL/drive/

オフラインツール

・パワーポイント

大抵の会社PCにはオフィスが入っているので、パワーポイントを普段から使っている方も多いと思います。もちろんパワーポイントでもワイヤーフレームは作れます。

・イラストレーター

デザイナーさんなら使い慣れているイラストレーターで作りたいと思うかもしれません。もちろん作れますがソフトが重いので個人的にはワイヤーフレームを作るためだけには使いません。

しかし、イラストレーターでwebのデザインもされている方なら、ワイヤーフレームからそのままビジュアルデザインに移行できるので良いかもしれませんね。

ワイヤーフレームを作るときの注意点

ワイヤーフレームを作る時に注意したい点があります。

ワイヤーフレーム上でデザインをしない

ワイヤーフレームは、あくまで「どこに何を置くか」という要素の配置を示すものです。 色や装飾を盛り込みデザインをしてしまうと、そのイメージに引っ張られてしまい、いざビジュアルデザインをした段階でワイヤーフレームと何か印象が違うという事が起こります。 なので、装飾は本当に最小限に抑え、色も無彩色(グレーなど)以外は使わない方が望ましいと思います。

テキストの最大・最小文字数を想定しておく

テキストはダミーテキストを入れる事も多いと思いますが、最大・最小文字数をある程度想定しておきましょう。 想定していないと、実際の文章を入れた時に、崩れや変な余白が発生するなどのトラブルに繋がります。 また、長いテキストの場合どう処理するのか(省略するのか、そもそも文字数制限をするのかなど)を取り決めておくと良いと思います。

ワイヤーフレームを作る時に参考にしたいサイト

ワイヤーフレームを作る時に参考になるのが以下のようなサイトです。
http://wireframes.tumblr.com/
http://www.wireframeshowcase.com/
https://dribbble.com/search?q=wireframe

また、google検索でも秀逸なワイヤーフレームを紹介しているブログが出てくるので、そちらを参考にしても良さそうです。
https://www.google.co.jp/search?q=wireframe+examples

まとめ

以上、ワイヤーフレームの重要性と作り方を改めてまとめてみました。 「ワイヤーフレームなんて無くてもなんとかなるでしょ」と軽視した結果、プロジェクトの進行が滞る、プロジェクト自体が炎上するなどトラブルに繋がる・・・なんてケースが多くあります。 たかがワイヤーフレームなどと思わず、スムーズに進行するためにしっかりとしたワイヤーフレーム作りをしていきたいものです。