ブレないワイヤーフレームを作るコツ

すべてのワイヤーフレームは平等ではない

「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。

ワイヤーフレームを作る目的はなにか

作ることで何を達成させたいのかを明確にします

制作プロセスのどのフェイズで用いるのか

どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります

誰がワイヤーフレームを見るのか

クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります

誰がワイヤーフレームを活用するのか

ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか

ワイヤーフレームを作るということだけに考えを集中してしまうと、そもそもの目的が失われることがあります。どのアプリケーションで作れば効率的にワイヤーフレームが作れるのか選ぶのではなく、何をすれば上記の役割を果たすことが出来るのか検討し、それに応じてワイヤーフレームをつくる道具を変えるのが最適でしょう。私は主に OmniGraffle を利用していますが、時には HTML ベースですし、Photoshop や PowerPoint ということもあります。

HTMLベースで作るときの落とし穴

ここ数年注目されているのが HTML を使ってより本物に近いワイヤーフレーム (むしろプロトタイプといえる) を作るというアプローチ。コンテンツの量によってスクロールの仕方が異なりますし、ページとページの関連性や、インタラクションを理解するには HTML が最適です。制作者のリテラシがほぼ同等であれば、ちょっとした説明だけで伝わるのかもしれませんが、より効果的かつたくさんの方に理解してもらうことを目的とするのであれば、本物に近いモデルを作るのが最適です。

なんとなく時間がかかるイメージがありますが、はやく作るためのツールは今も増え続けています。CMS と各システムが提供しているテンプレートを活用すれば素早く大量のページを作ることが出来ますし、Blueprint CSS のようなフレームワークを利用すれば、基本的に HTML 記述するだけでレイアウトが組み上がって行きます。

他にもquploというサービスがあります。これは HTML ベースのプロトタイプを作成したり複数人と共同で作業をするのに最適な Web アプリケーションです。日本語入力がたまにおかしいことがありますが、使えないことはありません。一見単なる HTML エディタなのですが、flow というプロトタイプに特化した独自のタグを用意しており、これらを使いこなすことでページの組み立てがスピーディに行えるだけでなく、様々な条件に応じたインタラクションを加えることも可能です。フォームの動きも簡単に再現出来るのは嬉しいですね。もちろん、flow で記述したページもあとで、HTML として書き出すことが出来ます。

HTMLベースのワイヤーフレーム/プロトタイプで誤解されることのひとつに、コードの再利用があります。同じ HTML ですから、そのまま制作用に使えるだろうと考えるのは当然かもしれません。もちろん、ある程度は流用出来ますし、先ほど紹介した quplo のようなサービスもそのまま使えることを目的としています。しかし、ここで「HTML が流用しやすい方法」というふうに手段を考え始めると、目的が失われワイヤーフレームの役割が果たせなくなります。

「本物に近いプロトタイプをつくる」と「制作にも使える効率的なHTMLを書く」は異なる目的です。一石二鳥に出来たらそれは素晴らしいですが、それに拘るとかえってHTMLベースは時間がかかってしまいます。一見、時間がかかりそうですがメリットが幾つかありますし、効果的なものを作るコツもあります。

データとデータの関連性を明確に

HTMLベースだけの話ではないですが、そもそもの目的は失わないこと

インタラクションがデザイン出来る人が作る

これは時にはグラフィックを担当しているデザイナーではない場合があります

開発者とデザイナーの架け橋として捉える

開発者にとってはデザインプロセスを学ぶよい機会ですし、デザイナーはコードに触れて自分が作ったインターフェイスがどう動くのかみるのに良い機会です

変化に適応する

仕様が固まった設計図として作るのではなく、変化に適応してそれをすぐに反映出来る場として捉えると使うメリットは増すでしょう

今回の記事では HTML ベースのワイヤーフレーム (プロトタイプ) にスポットを当てましたが、他のタイプのワイヤーフレームでも使うことのメリットはありますし、上記に書いた効果的なものを作るコツは他のタイプにもいえます。私は、ワイヤーフレームは設計図というよりかはコミュニケーションツールとして捉えています。それゆえ、毎回違うツールや手段をつかってワイヤーフレームを作ることが自然だと考えれるのかもしれません。今後、ワイヤーフレームを作る際は、今回紹介したチェックポイントに着目してアプローチを変えていってほしいですし、一度諦めた方も HTML ベースに挑戦してみてはいかがでしょうか。

Photo is taken by James Keller.