ワイヤーフレームの役割とそのメリット

みなさんこんにちは。 甥っ子にお年玉をあげたいけど相場がわからないので、誰か教えてください！山砥です。

さて、今日は前回予告させていただいた通り、ワイヤーフレームについて書いてみたいと思います。ワイヤーフレームは、Webデザイン・制作においてとても重要な過程なのですが、あまり耳馴染みのない方もいらっしゃるかと思いますので、ワイヤーフレームとは何のためにあるのか、なぜ必要なのかについてご紹介していきます。

そもそもワイヤーフレームとは？

ワイヤーフレームとはホームページの簡単な構成（骨組み）を簡単な線画で表したもので、簡単な線画レベルの「Lo-Fiワイヤーフレーム」の他、最近では、ある程度実際の色やコンテンツを反映させたり、よりデザイン性を付け加えた「Hi-Fiワイヤーフレーム」などがあります。ノートに落書きする程度のものから個々の要素が整理されて書かれるものなど、作る人や会社の方針などによってワイヤーフレームの書き方は異なります（わたしが入社して戸惑ったところでもあります）。

ワイヤーフレームの役割

何のためのワイヤーフレーム？

ワイヤーフレームは、ホームページを制作する過程において、詳細なデザインの制作に入る前に、あらかじめ情報ブロックの配置を決めるために制作されます。
Webブラウザに標準的に指定されているCSSでは情報の区切りや見出しが大きく表示されるだけで、お世辞にも情報がわかりやすく取得できるとはいえません。Webブラウザを音声で読み上げる場合や、シンプルなテキストだけで役割を果たすホームページであればワイヤーフレームは必要ないかもしれませんが、多くの場合、CSSを使って綺麗にデザイン・レイアウトしたホームページの方がユーザーにとっては分かりやすく、伝えたいことが伝わりやすいホームページになります。
ワイヤーフレームを作成しホームページの目的に沿ったレイアウトを検討することは、より効果的なホームページ作りの第一歩といえるのです。

ワイヤーフレームのメリット

基本的にワイヤーフレームの時点では「デザインを作り込みすぎない」ことがポイントで、ビジュアルデザインに関する検討はワイヤーフレームが仕上がった後の最終工程で行います。
最初はちょっと面倒に感じる方もいらっしゃるかもしれませんが、結果的にはそれが効率的かつ効果的なホームページ制作へとつながります。
というのも、もし完成度の高いビジュアルを初期段階で作ってしまうと、発注者側やシステムの開発者といったビジュアルデザインの専門知識を持たないチームメンバーは見た目の良さに惑わされて意見を出しにくくなってしまったり、レイアウトの方向性など基本的な構成がまだ決まっていないにも関わらず、色や画像といったわかりやすい検討事項に話がそれてしまう恐れがあります。そういったビジュアル的な要素の検討は機能面や基本的な構成が確定してから行う方がスムーズです。例えば「画像をもう少し大きく表示させたいからナビゲーション（メニュー）の位置50pxだけ下に・・・」「写真はこれでなくあれで・・」という細かなビジュアル面での修正をしながら「いや〜、やっぱり、そもそもグローバルナビゲーションは横ではなく縦に配置だよね！」といった大枠の部分まで同時に調整していたら収拾がつかなくなり、とても効率的とは言えないですよね。
その点、視覚的表現を排除した簡単な線画レベルであるワイヤーフレームの段階で意見を出し合えば、見る側も余計な情報に惑わされることなくなりますので、様々な立場の方が「ホームページの設計」に的を絞って的確な意見を出しやすく、多角的な検討が可能となります。ラフなプロトタイプの期間を設けることによって「意見を出し合う余地」を作ることができるのが、ワイヤーフレームの最大のメリットですね。
また、ワイヤーフレームの段階でしっかりした骨組みが確定すれば、その後にビジュアル表現を検討する際も「表現」に的を絞って集中することができますので、デザイナーにとってもメリットは大きいのではないでしょうか。

ワイヤーフレームはどこまで描けばよい？

ワイヤーフレームをどこまで描けばよいか？という点も頭を悩ませるところです。ですが、これは担当者や会社の方針によっても変わります。少し実務的な話になりますが、例えば、HTMLに含まれる情報の意味やタグの名前までを書き込んで、それがどういう意味を持っているかを指定しなければ作業を進められない場合もあります。その逆で、その必要は全くなく、大まかなレイアウトだけで済む場合もあるのです。 デザイン表現はできるだけ排除した方が良いと前章では述べましたが、そのホームページを作る目的を達成する上で「デザイン面からのアプローチ」が大きな役割を担っている場合はビジュアル面での戦略もある程度考慮しながらワイヤーフレームを作成する必要があるでしょう。 またフロントページだけで十分な場合もあれば、下層ページの特に重要なページも作っておいた方が良い場合もあります。
「ワイヤーフレームはこういうもの」と固定観念にとらわれすぎないで、ホームページを作る目的をきちんと理解した上で、どのようなワイヤーフレームを作ればプロジェクトがスムーズに進行できそうかを考えて、ケースバイケースで判断するのが良いでしょう。

ワイヤーフレームの事例

では、ここでワイヤーフレームの事例が見られるサイトをいくつかご紹介します！

I ♥ wireframes

I ♥ wireframes
よくお世話になっているのがこちら。手書きからソフトを使ったものまで、サンプルがたくさん見られます。

Wireframes on Pinterest

Wireframes on Pinterest
数はそれほど多くはないのですが、ブックマーク感覚で気に入ったワイヤーフレームを集められます。

Flickr: I ♥ wireframes

Flickr: I ♥ wireframes
言わずと知れたFlickr。数が豊富です。

ワイヤーフレーム制作ツール

私はその後のデザインの過程も考慮してFireworksでワイヤーフレームを作成しますが、最近ではオンラインですぐにワイヤーフレームが作成できるツールが多数あります。使ったことはほとんどないのですが、参考になりそうなものを少しだけピックアップしてみます。

Cacoo

Cacoo
使ったことはありませんが、有名ですね。ワイヤーフレームだけでなくサイトマップやマインドマップ、フローチャートといった図の作成にも適しているようです。使用には無料のアカウント登録が必要になります。有料版だとPDFやPPTでのエクスポートやユーザー管理などが行えます。

Mockup Designer

Mockup Designer
とにかくシンプルで、直感的に操作できるのが特徴です。使いたいパーツを選択してドラッグ&ドロップで配置させます。日本語テキストも使用可能です。

wireframe.cc

wireframe.cc
シンプルな見た目のツールですが機能が豊富で、フレームのサイズ変更も簡単にできたり、iPhoneやiPad向けのフレームに変更することもできます。日本語テキスト問題なく使うことができ、作成したものを保存するのも簡単で、URLが発行されるので共有することも可能です。

さいごに

いかがでしたでしょうか？
今後ますます様々な種類の端末を対象としたWebサイトを作る必要が出てくることが予想されます。各デバイスごとにデザインを起こすにしても、話題のレスポンシブウェブデザインを用いるにしても、複数の画面サイズを対象にする場合は従来の固定レイアウトのみでは対応しきれなくなってきています。こういった場合は、単一のワイヤーフレームではなく複数のワイヤーフレームを作ることも必要です。
今後さらに新しい端末が登場するにつれて、ワイヤーフレームだけでなくWebデザインの制作フロー自体も多様化してくるかもしれません。変化が著しいWebの分野だからこそケースに応じて柔軟に対応していきたいですね。