WEBデザインを行う上でワイヤーフレームワーク・プロトタイプ制作がなぜ重要なのか

Web制作のデザインを行う際には打ち合わせで得たクライアントの情報や要望をもとにワイヤーフレーム（構成表）を制作します。今回はこのワイヤーフレームについて様々な角度から制作過程の重要性についてまた制作時に気を付けるポイントを押さえていきたいと思います。

ワイヤーフレームについて

ワイヤーフレームとはいったいなんでしょうか。一言でズバリ設計図のことです。WEBサイトを表示する上でどこに画像やテキストをどのように配置するかというデザインの基礎を描くものです。このワイヤーフレームを作る事で、円滑なコミュケーションツールとして重宝されます。

デザインを決定する前に相互に考え方の行き違いがないようにすることは制作時間をいたずらに伸ばさないためにとても重要です。大まかな配置を言葉の通りフレームや簡易な文字のみで表現することから短時間で制作可能なため、まずワイヤーフレームを制作し、本格的なデザインに入る前準備を行います。

プロトタイプについて

一方でプロトタイプと呼ばれるインタラクティブな体験を構築することでデザインのアイデアを探求する方法があります。これはいったいどのようなモノでしょうか？プロトタイプは比較的完成物に近い見た目を持ってます。どの程度のクオリティで制作するかによってその制作意図が変化します。

ワイヤーフレームの情報が形状をとりボタン等の形状や文字間、サイズ、など複数ページの関係性についても記述されます。また高度に作りこむプロトタイプは完成品と同程度のデザイン案として制作され、操作性や動きなど視覚的な変化について情報を共有し共有するために制作されます。

プロトタイプを制作する目的は

これは実際にユーザーがそのサイトを使用する感覚や使いやすさ、デザインイメージ、企業イメージ、伝えたい情報やコンセプトと合致しているかどうかなどを確認し、ブラッシュアップさせるために非常に重要な制作プロセスの一つです。

何度も制作の過程においてそのデザインの変更がないようにするために精度の高いプロトタイプを早期に完成させることは極めて重要な作業といえます。特にクライアントに納得して喜んでいただけるデザインにするためにはコミュニケーションは欠かせません。コミュニケーションツールとして活用されます。

また制作において昨今重要なデザインとされるのがレスポンシブデザインです。ワイヤーフレームの段階でレスポンシブに対応するためのデザイン案も検討する必要があります。

ワイヤーフレーム・プロトタイプを制作するためのツールをご紹介

まずはアナログに手書きで書きだす方法が有効です。なんといっても誰もがなじみのある紙とペンですから、書いて消してが容易ですよね。これを使わない手はないです。そして今この瞬間から作業を開始できます。

そしてデジタルツール

Justinmind Prototyper

Wireframe.cc

PowerMockup

MockFlow

Prott

mockingbird

CACOO

Moqups

ここでは一部の紹介ですがこのほかにも様々なツールが存在し、それぞれに特徴の異なるデジタルツールではありますが無料で使用できるものも多く可能性にあふれています。またAdobeではXDを使用してワイヤーフレームを制作することもあります。こちらも重宝されるでしょう。特にXDはadobeがWEBデザインを行うために開発しているソフトのため、汎用性がありスキルとして認められる可能性もあります。

クライアントには勘違いされることも！？

デザインを進めるために非常に重要になるワイヤーフレームですが、まれに製作者の意図とは違った思わぬ誤解を受ける場合があります。それはワイヤーフレームをデザイン案と誤解されるということです。WEB、ホームページあるいはデザインに対する知識がない方は特にラフ案であるワイヤーフレームに対する知見がありません。ですのでこのような行き違いが発生する可能性があります。デザイン案とは異なるという点を明確に示す必要があるかもしれませんね。

まとめ

WEBデザインを行う上で必要なワイヤーフレーム、プロトタイプについて簡単にご説明いたしました。やはりここで大切なことはユーザーの気持ちに立ったユーザーがわくわくする、使いやすい気持ちになるためのデザインを心がける必要があるということ、そしてクライアントの要求が同時に満たされるちょうどよいところを探していくために必要な作業ではないかと考えます。

すなわち直接の成果物として世に出回ることがないものではあるけれど、侮ることはできない作業といえますね。ぜひ機会があればデザイン案を考えてみてはいかがでしょうか？オリジナルなうwebサイト制作の第一歩となるかもしれませんね。