ワイヤーフレームの価値に異議をとなえる人もいますが、デザイナーの多くはワイヤーフレームを便利なツールだと考えています。しかし、あなたはワイヤーフレームの価値を100％享受しているでしょうか？
全員が同意するとは思いませんが、私のプロセスの中では、ワイヤーフレームの作成は欠かすことのできないパートです。『7 wonders of wireframes』という記事で説明しましたが、ワイヤーフレームはプロジェクトを劇的に改善します。洗練されたワイヤーフレームがどうあるべきかという問いは、議論の種になるでしょう。ただ、私はワイヤーフレームはツールキットの中で重要な部分を占めると考えています。
しかし、ひとりでワイヤーフレームを作る場合、その長所の多くを失ってしまいます。ワイヤーフレームは、他者と協力して使うツールとして活用されるときにこそポテンシャルを最大限に発揮します。ワイヤーフレームとは、アイデアを共有してディスカッションを開始するためのツールなのです。
誰がワイヤーフレームに関わるべきか？
ワイヤーフレームは、最低限プロジェクトチーム全体で実行されるべきです。以下のような人に共有される必要があります。
- デザイナー
- コピーライター
- UXの専門家
- エンジニア
- プロジェクトマネージャー
- クライアント
特に最後のクライアントが重要です。クライアントがプロジェクトチームのメンバーだと考えない人は多いですが、クライアントもメンバーとして見なす必要があります。ワイヤーフレーム作成に彼らが参加することは大事です。
また、プロジェクトチームだけで完結させるべきではありません。ステークホルダーを参加させたり、ユーザーも参加する機会を考えたりすることも必要です。ここまで拡張して初めて、ワイヤーフレームの本当の利点がわかるでしょう。
協力してワイヤーフレームを作成すべき理由
ワイヤーフレームにプロジェクトチームを参加させる理由はとても明確です。エンジニアがワイヤーフレームのプロセスに参加していれば、技術的な課題を早くから特定し、問題に対処することができます。同様に、コピーライターやデザイナー、プロジェクトマネージャーなどのチームメンバーが参加していれば、全員が「同じ譜面を見ながら歌うことができ」、それぞれの専門性を活かすことができるのです。
クライアントを含めることにもたくさんの意味があります。クライアントは彼らの部門やビジネス、聴衆に対して、ほかのチームメンバーとは一致しないユニークな理解をしています。ワイヤーフレームの作成にクライアントを参加させることで、彼らの知識を活用できるでしょう。
また、クライアントが参加すると、プロセスの中で彼らに教え、関わる機会が生まれます。クライアントがワイヤーフレームに関われば、彼らはデザインに関してより詳しく知ることができ、制作に貢献した感覚を得ることができるでしょう。つまり、のちにデザインを拒絶される可能性が低くなるのです。
同様のことがステークホルダーにも言えます。彼らもそれぞれが制作に対して独自の貢献をします。しかし、より重要なのは、プロセスに関与することで、ステークホルダーは話を聞いてもらえて参加しているという実感を得られる点です。彼らはデザインの方向性を掌握している感覚を得られるので、のちに支持してくれる可能性が高まります。
要するに、グループでワイヤーフレームを作ることで、意見を求められていると感じ、一緒に進む方向性に自信を持つことができるのです。サイトがこれから向かう先について全員が明確にイメージを持つことができます。
とは言え、このように多くの人が関わる中で、あらゆるディテールをワイヤーフレームで作成することは期待できません。そのため、協力してワイヤーフレームのセッションを実施することが重要になります。
協力してワイヤフレーミングを実施する方法
では、どのように実践すればよいでしょうか？ まず、現実的になることが必要です。丸１日ワークショップでワイヤーフレームを行えば、疲労困憊で参加者の頭も働かなくなるでしょう。私の経験では、１回のセッションには３時間が限度です。
セッションの時間を比較的に短くすることの長所は、勢いを保ち続けられる点です。ここでの目的は、あらゆる詳細部分を解き明かすことではなく、むしろセッションのあとで洗練させられるように合意を取ることです。
いくつかの短いエクササイズを行うことで、勢いを維持することができます。それぞれのエクササイズは、完成形に近づく前に、１つ１つが着実に実行されなければなりません。
確認になりますが、セッションの目的は次のようなものです。
- 進みたい方向性についての課題を立てる
- プロセスへの参加意識をうながす
- クライアントやその他のステークホルダーに知識を伝える
- 同じビジョンを共有していることを確認する
ワイヤーフレームを作りたいメインページのリストを作成してからワークショップを実施すると便利です。このリストには、トップページやランディングページなどのより複雑なページが含まれることが多いです。優先順位を決めることで、すべてのページに手を付けられない場合に、最低限の重要なものから取り組めるようにしましょう。
リストが用意できたら、ここからはエクササイズをいくつか紹介します。それぞれのページに対処するのに、私が何度も利用しているものです。
１. 門戸を開くことから始める
私は門戸を開き、ページに表示すべきすべての要素を皆に提案してもらうことから始めます。ここで重要なのは、アイデアにどれだけ関連性があるかを心配することなく、すべてを提示することです。
早期からできるだけ多くのアイデアをシェアするようにしましょう。Gamestormingでは、アイデア収集のためのエクササイズを数多く紹介しています。
少人数のグループでは、全員にアイデアを出し合ってもらい、私はそれをホワイトボードに書いています。人数が多すぎると思ったら、小さなグループに分けましょう。たとえば営業とマーケティングの人だけで集まるなど、専門分野ごとにグループ分けするのも興味深いかもしれません。Webサイトの役割をどのように見るかに対する見解の違いが強調されることもあるでしょう。
どのようなケースであれ、このエクササイズは最終的に、スクリーンに表示すべきだと参加者が思った要素の巨大なリストを完成させる必要があります。このリストには、ロゴやニュースエリアだけでなく、その間にあるすべてのものも含まれるでしょう。
次は優先順位をつける段階です。優先順位を決めるのに役立つ２つのアクティビティがあります。両方行っても、どちらか１つだけ行ってもいいでしょう。それは、ブックカバー・エクササイズと、ユーザーアテンション・エクササイズです。
２. ブックカバー・エクササイズ
Webのこととなると、多くのステークホルダーはコンテンツの優先順位づけに驚くほど乗り気ではありません。無限スクロールのページを作成する能力が、彼らがすべての要素を平等に扱おうとするのを助長しているようです。
この問題に対処する方法の１つは、Webサイトについて話すことではなく、ブックカバーのように物理的な制約があるものから話を始めることです。
グループに（大人数の場合は小さなグループに）対して、リストにある要素を使ってブックカバーをデザインするように求めましょう。彼らは、ブックカバーの表紙、裏表紙、背表紙、表紙の裏側に何を使うか考えなければなりません。
Webサイトよりもブックカバーをデザインするように求めることで、重要なメッセージは何なのかに焦点を当てることができるでしょう。
何を採用して何を捨てるのか、それぞれの要素をどのように配置するのかを決定するためのエクササイズは、優先順位をつけるのに役立つでしょう。もっとも重要なものが自然と前面に置かれ、重要でないものは表紙の裏側になるはずです。
ブックカバー・エクササイズは、セッションのスタート地点としては優れています。しかし、遅かれ早かれ、実際のWebページのビジュアルヒエラルキーに焦点を移さなければなりません。そのときに、ユーザーアテンション・エクササイズが役立ちます。
３. ユーザーアテンション・エクササイズ
ユーザーアテンション・エクササイズはシンプルです。ユーザーが関心を持つものには制限があることを参加者に説明しましょう。ワイヤーフレームするページに対して、17点のユーザー関心ポイントを割り当てます（この数字は必要があれば増えるかもしれません）。グループがページに加える要素には、それぞれ１点のコストがかかります。特定のアイテムにより多くの関心を寄せたければ、そのアイテムに対してより多くのユーザー関心ポイントを払わなければなりません。
グループは基本的にできるだけ多くのアイテムをページに詰め込もうとするので、それぞれのコンテンツに対して１点か２点を費やします。結果として、恐ろしく煩雑なデザインができ上がります。
そこで、私はこのエクササイズを行うとき、Yahoo!とGoogleではどちらのWebサイトがより便利だと思うか聞くようにしています。選ばれるのは決まって後者のGoogleです。
Yahoo!はユーザーの関心を集中させず、トップページ全体に広げています。
それから私は、２つのサイトを並べて提示し、Googleはユーザー関心ポイントの大部分を検索ボックスに費やしていることを指摘します。大抵の場合この指摘に助けられて、グループは点数を費やす場所を絞るようになります。
Googleはユーザーの関心を、ページの最重要目的である検索ボックスに集中させています。
このエクササイズの終わりまでに、それぞれのページで優先すべき場所がどこなのか明確に示されるでしょう。しかし、これはほかのアプローチを追及すべきでないという意味ではありません。、シックスアップ・エクササイズを紹介します。
４. シックスアップ・エクササイズ
このエクササイズは、実験を奨励するものです。小さなグループでも利用できますが、基本は１人ずつ各人で行うエクササイズです。
紙を１枚用意しましょう。縦半分に折り、さらに横に３つ折りにして６つのボックスを作ります。
それぞれの参加者（またはグループ）は、ページのバージョンを６つ考えることを要求されます。それぞれのスケッチは小さくシンプルですが、ページをデザインする別の方法を模索するものです。
シックスアップ・エクササイズは詳細なワイヤーフレームを作るものではありませんが、別のアプローチを模索するには優れたものです。
参加者は、１つか２つのバージョンまではとても簡単に作ります。しかし、そのあとから参加者は悩み始めます。６の提案を思いつくのには労力が必要です。異なる閲覧者を対象としたページのバージョンや、さまざまなバリュープロポジションを重視したバージョンを作りたいなどと、アドバイスを求める人もいるでしょう。
このエクササイズの結果は、以下のどちらかになります。１つは、エクササイズを実施しなければ見逃していただろう別のアプローチが見つかる結果です。そうでない場合は、明らかになっていたアプローチが、たとえ完璧でなくとも、唯一のオプションであることが実証されるでしょう。
以上のエクササイズは多くのケースで行われるでしょう。しかし、トップページなどの重要なページは、さらに洗練させる価値があるかもしれません。
５. 洗練と議論
これらのエクササイズで集められたデータをすべて使えば、自身でワイヤーフレームを完成させることも十分可能です。しかし、ときには参加者からより具体的な部分まで合意を得たほうが良いこともあります。
提供されたすべてのフィードバックに基づいて、あるページのアプローチを描き出し、それについてグループと議論したいと思うこともあるでしょう。前出のエクササイズはすべて、参加者の中ではまだ新鮮な記憶として残っていることが多いです。そのため、なぜ議論すべきかを参加者は理解しているので、彼らはアプローチに快く賛同してくれます。これこそが協力するワイヤーフレームの真骨頂であり、反復が繰り返されるのを防ぎます。
反復の繰り返しを防ぐ
個人でワイヤーフレーム（もっと悪いとデザインカンプ）を作り了承を得ようとすると、調整と修正でいつまでも行ったり来たりすることになります。電話会議を準備しなければならず、またメールでの会話も形式的になり、何度も誤解が生まるでしょう。
全員を１つの部屋に呼んで一緒にワイヤーフレームを実施することで、これらの不具合すべてを解消できます。たくさんの詳細部分まで詰めることはできないでしょう。しかし、一般的な方向性を決めることで、長期的に見れば、多くの時間を節約することができます。何よりも重要なのは、クライアントがデザインを最終的に進める方向性について知れることです。
