「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」
私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。
ワイヤーフレームはどのように生き残ってきたのでしょうか？ 実はワイヤーフレームは進化し続けています。
ワイヤーフレームは静的な制作物かもしれませんが、決して静的な技術ではありません。
MicrosoftのVisioやExcelのスプレッドシートで、白黒の枠組みを制作していた時代から随分と経ちました。私も以前に、スプレッドシートでワイヤーフレームを作るプロジェクトマネージャーと仕事をしたことがあります。
ワイヤーフレームは進化している
現在のワイヤーフレームは、異なる目的やプロジェクト、またはデザイナーの好みによって、いくつかの技術に分割されています。
デザイナーの中には、軽量のインタラクティブなワイヤーフレームを作成して、早い段階でフィードバックを集めるのが好きな人もいます。インタラクティブなワイヤーフレームは、完成形に近いアーキテクチャと、もっとも基本的なインタラクションを表現するデザインの成果物です。
インタラクティブなワイヤーフレームの制作には何日もかかるわけではなく、数時間のうちに制作することができるので、早い段階でのユーザーテストや、ステークホルダーからの賛同を得る際に役立ちます。
インタラクティブなワイヤーフレームは、完成してもすぐに壊されたり、まったく異なるものになることが多いでしょう。しかし、ワイヤフレームの制作はコンセプト全体の一部です。
ワイヤーフレームは通常短命なスケッチとして制作されます。その役目を果たしたら容赦なく壊すべきです。
もう１つ従来のワイヤーフレームで優れているものが、コンテンツのワイヤーフレームです。この静的なワイヤーフレームの形式は、残りのインターフェイスデザインに資金や時間を投じる前に、コンテンツや情報を組み立てる計画を立てるのに使用されます。
この手法は、コンテンツ量が多いWebサイトにおいて特に有効です。そのようなサイトでは、デザイナーがワイヤーフレームや美しいビジュアルを用いてクリエイティビティを発揮するよりも先にコンテンツ戦略が必用となります。結局のところ、コンテンツこそが王様と言えるでしょう。
最終的に、ワイヤーフレームはより忠実度が低い形式へと進化しました。ワイヤーフレームのフォーマットを最小化し、テキストは図形に置き換え、インターフェイスのあらゆる部分をできる限り単純にします。
このマイクロフレームこそが私が好きな、ワイヤーフレームの新しい形です。
マイクロフレームの時代へ
マイクロフレーム、またはマイクロワイヤーフレームは、ワイヤフレームの縮小版です。制作の労力を最小化し、制作速度を速め、完成品に対する忠実度を抑えることで、マイクロフレームはワイヤーフレームでの利点を増やすと同時にほとんどの欠点を排除しました。
マイクロフレームはワイヤーフレームの縮小強化版です。
マイクロフレームの利点とは何でしょうか？
- スピード：マイクロフレームは、スケッチと同じくらい早く作ることができるのにも関わらず、簡単に作業を繰り返すことができ、またどこにいてもすぐに結果を共有することが可能です。
- わかりやすさ：マイクロフレームではプランや要件をわかりやすく伝えることができます。デザイナーは顧客と協力して、同じ視点で作業を反復することが可能になります。また、ワイヤーフレームのように捨ててしまう作品に投資しすぎることもありません。
- 忠実性が低い分混乱が少ない：マイクロフレームのフォームは劇的に最小化されているので、完成品との違いに戸惑うことがありません。
またマイクロフレームはきわめて汎用性が高いです。単体で用いることもあれば、ドキュメントとして使用することも、ユーザージャーニーの表や、プロジェクトの計画表の一部として用いることもあります。マイクロフレームは、簡単なイラストとしての役割やデザイン思考を促進するためのツールとしての役割を果たします。
実はあなたは知らないうちに何年間もマイクロフレームを作成してきているのです。というのもなんと同じ作業を、ホワイトボードで行っていたのです。マイクロフレームは、私たちデザイナーが同僚や顧客とブレインストーミングを行うときにいつも使っていた、ホワイトボードのデジタル版です。しかし、ホワイトボードでのスケッチと違ってマイクロフレームには以下の２点があります。
- 共有が簡単
- より早く制作でき、再利用しやすい
そう、マイクロフレームはホワイトボードでの作図を、より早く制作でき、簡単に共有でき、再利用しやすくしたものです。
どのようにマイクロフレームを作るか？
これはとても直感的な作業です。200px × 300pxの枠にアイデアを当てはめようとするなら、マイクロフレームを自然に活用できます。より見やすいものにするためには以下の点にも配慮しましょう。
- テキストを一切使用してはいけません。異なる階層のタイポグラフィを表す図形に置き換えましょう。
- 異なる色を使用してインターフェイスの論理的な部分を表現しましょう。色はグレースケールが望ましいです。たとえばコールトゥアクション（CTA）やナビゲーションのリンク、テキストのブロックに、異なりつつも一貫性がある背景色を使って、それらを区別できるようにしましょう。
- ほかのものと混同しやすい要素をアイコンで表しましょう。たとえば画像を表す古典的なアイコンを使って、どこに画像を配置しようと考えているかを示します。
- 詳細な情報は省いてください。忠実度の高いコンセプトさえ固まってしまえば、あとで詳細を加える時間はたっぷりあります。
基本的なスケッチが準備できたら、ユーザーに伝える価値をもっと高めるためには何を加えるべきかを考えましょう。テキストの描写でも良いですし、流れを考えるのも良いでしょう。この段階において、従うべき原則はありません。伝える価値を高めるという目的に則っていれば何でも構いません。
ここで私が作ったマイクロフレームのドキュメントとフローの例を紹介します。
マイクロデザイン言語とは？
マイクロフレームのプロセスにおいて、よりスピードを上げて再利用しやすくするためには、マイクロデザイン言語を作らなければなりません。自分と作品を受けとる人に通じるものを考えて、それをドキュメントにします。
完成品をデザインするのと同様に、マイクロフレームでも、基礎の部分から始めて徐々に高度な構造へと移行していかなければいけません。もし完成品のデザインシステムを最初から構築するほうが良いなら、私はこの記事でそのような経験を共有しています。すべてのテキストブロックや、細かいパターンをシンボルに変換してください。それらをマイクロフレームの中に組み込み、マイクロフレームも同様にシンボルにしましょう。
ここでUXPinのデザインシステムのライブラリやシンボルを使って私が行っているマイクロフレームのプロセスを、少しだけお見せします。
UXPinのシンボルはマイクロワイヤフレームに活用できます。
ワイヤーフレームは終わったのか？
決してワイヤーフレームは終わっていません。
デジタルのスケッチを素早く作成して共有する方法が必要とされる限り、ワイヤーフレームが失われることはないでしょう。マイクロワイヤーフレームを作成することで、作業スピードを犠牲にすることなく、コミュニケーションをうながし、クリエイティビティを高めることができます。
私たちは最近、先程紹介したUXPinの作品を特に気に入って使っています。今週だけでも、マウンテンビューのチームがポーランドのチームに新しいランディングページのコンセプトを伝えるのに役立ちました。
あなたにもこの便利さが伝われば幸いです！