次世代のワイヤーフレームはマイクロフレーム!
(原文) The Next Generation Wireframes are Microframes
By Marcin Treder
ワイヤーフレームは終わった!インタラクティブなプロトタイプがすべてだ!
少なくともこの7年間は、このような声を耳にしてきました。このような議論の人気が何かを証明しているとすれば、それは逆のことであるということです。ワイヤーフレームが終わったとされる議論が続いているという事実だけでも、ワイヤーフレームがうまくいっていることを証明していますし、少なくとも、一部のプロジェクトや一部のデザイナーに合ったデザインプロセスの一部として存在し続けています。
なぜワイヤーフレームは生き残っているのか？それは、進化し続けているからです。
ワイヤーフレームは固定資産かもしれませんが、固定技術ではありません。
Microsoft VisioやExcelのスプレッドシートで白地に黒のワイヤーを描く時代は終わりました（実際、私はスプレッドシートにワイヤーフレームを配置するPMと仕事をしていました）。
ワイヤーフレームの進化
今日のワイヤーフレーム作成は、デザイナーの目的やプロジェクト、好みに合わせて様々なテクニックに分かれています。
デザイナーの中には、初期のフィードバックを集めるために、軽量のインタラクティブなワイヤーフレームを使うことを好む人もいます。インタラクティブなワイヤーフレームは、ハイレベルなアーキテクチャと最も基本的なインタラクティビティを表現するデザイン成果物です。日単位ではなく、数時間単位で作成されるため、ユーザーテストや関係者からの早期賛同を得るのに役立ちます。インタラクティブなワイヤーフレームは、誕生後すぐに破棄されたり、まったく別の資産に進化したりするかもしれませんが、それは全体的なコンセプトの一部です。
ワイヤーフレームは、短い時間で完成するスケッチのようなものです。仕事が終わったら、後悔することなく破棄されるべきなのです。
古き良きワイヤーフレームの別バージョンとして、コンテンツワイヤーフレームがあります。この静的なフォームは、残りのインターフェイスデザインに時間と費用をかける前に、コンテンツと情報アーキテクチャを計画するための構造として使用されます。この手法は、コンテンツの多いWebサイトでは、我々デザイナーがその形状や美しい外観を創造する前に、入念なコンテンツ戦略が必要な場合に有効です。やはり、コンテンツは王様ですから。
そして最後に、ワイヤーフレームは、さらに低いフィデリティの形へと進化しました。ワイヤーフレームのフォーマットは最小限に抑えられ、テキストは幾何学的な形に置き換えられ、インターフェイスのあらゆる部分が可能な限り単純化されます。
これが私の好きなワイヤーフレームの新しい形です。
マイクロフレームの登場
マイクロフレーム（マイクロワイヤーフレーム）とは、ワイヤーフレームを最小化したものです。マイクロフレームは、労力を最小限に抑え、スピードを最大にし、忠実度を下げることで、ワイヤーフレームの利点を最大限に引き出し、欠点のほとんどを取り除きます。
マイクロフレームは、ワイヤーフレームを最小化したステロイドのようなものです。
どのようなメリットがあるのでしょうか？
- スピード。マイクロフレームは、スケッチと同じくらい高速ですが、作業を簡単に繰り返すことができ、場所を問わず誰とでもすぐに結果を共有することができます。
- 明確さ。マイクロフレームは、プランや要件を明確に伝えることができ、デザイナーは、使い捨てのアセットに過剰な投資をすることなく、共通のビジョンに向かって顧客と一緒に繰り返し作業を行うことができます。
- 忠実度の混同がない。マイクロフレームの形状は最小限に抑えられているため、最終製品と混同することはありません。
マイクロフレームは、単体でも、ユーザージャーニーチャートやドキュメント、プロジェクトのロードマップの一部としても、非常に柔軟に使用することができます。マイクロフレームは、安価なイラストとして、またデザイン思考を高めるためのツールとしても役立ちます。
そして、どうでしょう？あなたは何年も前からマイクロフレーミングをしていたのです。ただ、ホワイトボード上でやっていただけなのです。マイクロフレームは、私たちデザイナーが同僚やクライアントとブレインストーミングするときにいつも使っていたホワイトボードのスケッチをデジタル化したものです。しかし、ホワイトボードに描かれたスケッチとは異なり、マイクロフレームには以下の特徴があります。
- 共有しやすい
- スピードと再利用性に最適化されている
そう、マイクロフレームは、スピード、共有性、再利用性のために最適化されたホワイトボード・ドローイングなのです。
マイクロフレームの使い方は？
それはとても直感的です。自分のアイデアを200px×300pxのコンテナに収めようとすれば、自然とマイクロフレームが生きてきます。読みやすさを高めるために、以下のことを考えてみてください。
- テキストは一切使わない。
- テキストを、タイポグラフィの異なる階層を象徴するブロックで置き換える。
インターフェイスの論理的な部分を象徴するために、異なる色（グレーの濃淡が望ましい）を使用する。例えば、CTA、ナビゲーションリンク、テキストブロックには、それぞれ異なる、しかし一貫性のある背景色を割り当てることで、それらを分離します。 - 他のものと混同しやすい要素を象徴するために、アイコンを使用する。例えば、イメージアイコン（クラシックな横長のアイコン）を使って、画像をどこに配置しようとしているかを示します。
- 詳細は省略する。細かい部分は省きます。コンセプトをより忠実に表現できるようになってから、時間をかけて追加していきましょう。
基本的な図面ができたら、コミュニケーションの価値を高めるために何を追加すべきかを考えます。テキストの説明？流れは？ここにルールはありません。目的に合ったものであれば何でもいいのです。
ここでは、マイクロフレームのドキュメントとフローの例をご紹介します。
マイクロデザイン言語？
マイクロフレーミングのプロセスをスピードと再利用性の面で最適化するには、マイクロデザイン言語を作成する必要があります。あなたとあなたの作品を受け取る人にとっての慣習を考えてみてください。それを文書化します。
実物大のデザインと同じように、まずは基礎から始めて、徐々に上位の構造に移行していくべきです（本格的なデザインシステムの構築に興味のある方は、この連載で私の経験を紹介しています）。テキストブロックや小さなパターンをすべてシンボルにして、マイクロフレームに入れ子にして、それもシンボルにします。
UXPinでデザインシステムライブラリやシンボルを使って遊んでいるときに、マイクロフレーム化のプロセスを垣間見ることができます。
UXPinシンボルは、マイクロワイヤーフレームに使用できます。
では、ワイヤーフレームは終わったのでしょうか？
そんなことはありません。
デジタルスケッチを素早く作成して共有する方法が必要である限り、ワイヤーフレームはなくならないでしょう。マイクロワイヤーフレームを作成することで、プロセスのスピードを犠牲にすることなく、チームのコミュニケーションと創造性を高めることができます。
UXPinでは最近、この小さな成果物をとても気に入っています。今週は、マウンテンビューのチームがポーランドのチームに新しいランディングページのコンセプトを伝えるのに役立ちました。
皆さんもぜひ使ってみてはいかがでしょうか？
Discussion