早期にフィードバックを収集することは、どんな開発プロジェクトにとっても重要です。関連するステークホルダーと関心のある人たちからタイムリーなフィードバックが得られなければ、彼らの要求と期待をすべて満足する納得のいくソリューションを見つけるのは、ほとんど不可能でしょう。ステークホルダーからコメントをもらうのに一番よい方法のひとつは、「何も言わずに、ただ見せる」という基本的なルールに従うことです。文字だらけの何百ページもの仕様書を読んでくれる人がいるなんて、期待してはいけません。代わりに、もっとよいアプローチがあります。それは彼らが触れて、目に見えるものを提供することです。ただ、このアプローチの一番の問題は、開発プロセスの初期段階で、まだ何ひとつ具体的にプログラムしていないときに、見せられるものを見つけなくてはならないことです。ワイヤーフレームは、この問題に対するすばらしいソリューションになります。
ワイヤーフレームはシンプルなブロックダイアグラムで、ユーザインターフェイス要素の配置を示し、どんなレイアウトや機能を意図しているかを見せることができます。通常、色やタイポグラフィ、実際の画像といったグラフィックスデザインはなく、次のような問いに答えようとするものです。
- どんな要素がUI上に表示されるのか？
- それら要素はどう整理されるのか？
- そのインターフェイスはどう機能するのか？
- ユーザはそのアプリケーション/Webサイトとどうインタラクションするのか？
ワイヤーフレームと他のUIデザインツール（スクリーンモックアップなど）との違いは、詳細を意図的になくしていることです。スクリーンモックアップはスクリーンショットのようにユーザインターフェイスのルック＆フィールをシミュレートしますが、ワイヤーフレームは最初に解決されるべき概念的な問いに議論をフォーカスするのに役立ちます。
だれがワイヤーフレームを使うのか？
ワイヤーフレームは全員が開発プロセスに参加できる効果的なコミュニケーションツールであり、次のような利点があります。
- クライアント - クライアントは何が開発されているかをもっと理解できるようになり、そのソリューションが自分たちのニーズを適切に解決しているか判断できます。ユーザインターフェイスに欠けているものがないか、どんなアクションができるのか、インターフェイス要素がどう置かれるのかをチェックできます。ワイヤーフレームをビジネスステークホルダーに見せことで、これまで検討してこなかった重要なところが見えてくることもよくあります。また、コードになってから後で修正するよりも、ワイヤーフレーム段階で問題を修正する方がずっと簡単でコストもかかりません。
- プロジェクトマネージャー - プロジェクトマネージャーはワイヤーフレームを使うことで、すべてのステークホルダーが同じ考えをもち、構築しようとするものに合意しているか確認できます。プロジェクトの進行に合わせて、ワイヤーフレームをチェックリストとして進捗を確認し、重要なものがすべて検討、実装されているか検証できます。
- デザイナー - デザイナーはユーザインターフェイスのビジュアルデザインの青写真としてワイヤーフレームを頼りにできます。ワイヤーフレームはデザイナーに、色、フォント、その他デザイン要素の入ったモックアップに変えるための骨格となる構造を提供します。
- 開発者 - 開発者はソリューションの機能や技術要件を理解するのにワイヤーフレームを利用できます。ワイヤーフレームの束をストーリーボードに並べることで、開発者は一連のユーザインタラクションがどう連携するか決めるのに役立てることができます。
ワイヤーフレームの作り方
ワイヤーフレームを作るのに、必ずしもソフトウェアは必要ありません。個人的には、まず紙にラフスケッチすることからクリエイティブなプロセスを始めるのが気に入っています。レイアウトのバリエーションを走り書きし、それらを競い合わせ、うまくいかないスケッチは捨ててしまいます。私は通常、先の尖った鉛筆や先の細いペンではなく、シャーピーマーカーを使って、最初のワイヤーフレームをスケッチします。その太いペン先のおかげで、本当に重要なユーザインターフェイス構成要素に専念でき、重要でない関連の薄い詳細に立ち入ってしまうのを防げます。
インターフェイスをどう構成するか、基本となるアイデアが得られたら、そのワイヤーフレームをスクリーン上で改善していきます。紙ベースのアプローチと比べて、ワイヤーフレーム用のツールを使うのには、いくつかの利点があります。
- 既存のワイヤーフレームの再構成とその反復が、すばやく楽になります。
- ボタン、グリッド、ドロップダウンメニューなど、典型的なUI要素のテンプレートを提供してくれます。
- デジタルのワイヤーフレームであれば他の人と簡単にシェアでき、共同作業やチーム内での一貫性の維持が可能です。
- 多くのワイヤーフレームツールには、ワイヤーフレームをインタラクティブなプロトタイプに変換する機能が備わっています。
私が選んだワイヤーフレームツールは、Microsoft PowerPointです。ワイヤーフレーム作成に特化した専用ツールがたくさんあることを考えると、この選択には驚くかもしれません。それでもPowerPointを使うことには、いくつか利点があると思っています。
- もともとPowerPointはプレゼンテーションソフトウェアです。そのため、ナビゲーションフローを示して、クリック可能なプロトタイプを作るのに最適なツールです。
- PowerPointを使うと、ビジネスユーザや技術に疎いステークホルダーがデザインプロセスに参加しやすくなります。PowerPointは彼らになじみの環境で動かせるためです。
- 完全に編集可能にしたまま、PowerPointスライドをWordドキュメントに埋め込めます。これはささいなことですが役に立つ機能で、要件をドキュメント化したり、その他仕様を書いたりするときに重宝します。
とはいえ、PowerPointだと不十分なところもあります。それはすぐに使えるワイヤーフレーム要素やアイコンがないことです。この溝を埋めるため、私の会社と私は、PowerPoint向けワイヤーフレーム・アドオン、PowerMockupを開発することにしました。PowerMockupはPowerPointのウィンドウに統合されており、スライドに直接ドラッグ＆ドロップできる約200のUI要素とアイコンのライブラリを提供します。PowerMockupで特に役立つ機能は、ライブラリにカスタム要素を追加して、ほかのチームメンバーと交換できることです。
PowerPointとPowerMockupは、ワイヤーフレームを作るのにすばらしい組合せだと思っています。しかし、ツールを使うことが目的ではありません。ワイヤーフレームの目的は、アイデアを探索して、コミュニケーションを促すことです。したがって、あなたは常に、自分が最も心地良く、最高の仕事ができるツールを使うべきです。
アジャイルプロジェクトにおけるワイヤーフレーム
ワイヤーフレームはアジャイルの考え方にぴったりです。
- チームメンバーが各自の領域を超えて積極的にコミュニケーションし協業することを促します。
- 冗長で総合的なドキュメントとは違い、ワイヤーフレームダイアグラムは軽量で要点を絞りやすくなります。
- ユーザと顧客からの早期で継続的なフィードバックを促します。
- ラフスケッチから始めて最終デザインへと進化していく、イテレーティブなアプローチが可能になります。
私の経験上、「イテレーション0」でビジョンづくりとそのビジョンに至る道のアウトラインづくりをすることで、アジャイルプロジェクトを活性化させるのがよい考えだと思っています。これがチームで最初のワイヤーフレームを作るタイミングになります。まだ非常に基本的なレベルで、チーム内部、そして想定ユーザとともに議論します。ここでの目標は、事前にプロダクト全体をデザインすることではなく、プロジェクト目標についての理解を明確にし、ステークホルダー全員から賛同を得ることです。そうすることで、あとに続くイテレーションで、全体像を徐々に詳細化し、実装していけるようになります。イテレーションnの成果物としてワイヤーフレームを定義し、イテレーションn+1の成果物としてその実装を定義するというアイデアは検討に値します。
9つの実践的なワイヤーフレームづくりのコツ
以下にあげた効果的なワイヤーフレームづくりのコツは、私が何年もかけて学んだ実践的なアドバイスと近道です。
1) ワイヤーフレームをきれいにするという誘惑に耐える
もっと見栄えをよくしようと、ワイヤーフレームをグラフィックスデザインを入れて飾りたくなりますが、あなたはこの衝動に耐えなくてはなりません。代わりに、機能的な面に集中しましょう。グラデーションやしゃれたシャドーエフェクトを追加すると、十中八九、クライアントとの議論はこのちょっとしたデザインに集中してしまうでしょう。もっと重要な構造的問題は置き去りにされてしまいます。
2) フィードバックを早期に頻繁に得る
共同作業者やクライアントに見せる前に、ワイヤーフレームに時間をかけすぎたり、詳細に深く入り込んではいけません。ワイヤーフレームはコラボレーティブでイテレーティブな、3つのステップで構成されるべきです。
- 基本的なアイデアを伝えるラフスケッチから始める
- すべてのステークホルダーからフィードバックを求める
- すべての要件が満足できるまで、ワイヤーフレームを繰り返し改善する
ワイヤーフレームをプロジェクトに直接参加していない人に見せることがよい場合もあります。彼らのフィードバックは新鮮な視点をもたらし、簡単なユーザビリティテストにもなります。
3) 自分のワイヤーフレームに固執しすぎない
あなたのワイヤーフレームに対してフィードバックを求めたとき、ある程度の批判を受けるのは避けられません。これを個人的なものとして受け取ってはいけません。他人からのインプットに門戸を開いておきましょう。ワイヤーフレームの一番の目的は、議論を促し、新しいアイデアを作り出すことなのです。
4) ユーザ視点をもつ
新機能のアイデアに夢中になって、ユーザ体験をすっかり忘れてしまうのは驚くほど簡単です。したがって、ワイヤーフレームを作るときには、常にターゲットユーザのことを頭に置かなくてはなりません。誰のためにデザインしているか忘れないようにする簡単なテクニックは、ユーザの「ペルソナ」を定義することです。これは詳細なプロファイルをもった架空のキャラクタで、それぞれがそのソリューションの典型的ターゲットユーザを表します。
5) 実験をためらわない
たとえユーザインターフェイスの構成方法に明確なアイデアがあっても、別のレイアウトによる実験も検討すべきです。もともとのアイデアよりもすぐれたソリューションになることがよくあります。
6) 必要に応じて注釈やメモを使う
ワイヤーフレームを見るだけではすぐにわからない重要な機能には、注釈や別のメモで説明をしておくべきです。たとえば、リンクやボタンがクリックされたときに何が起こるのか、ドロップダウンボックスにはどんな項目が含まれるのか、コンタクトフォームのフィールドはどう検証されるのか、といったことを書いておきましょう。
7) ストーリーボードを作ってインタラクションを可視化する
複雑なワークフローには、ストーリーボード形式で必要なステップを全部書いておくのはよいアイデアです。ストーリーボードは単にワイヤーフレームをまとめたもので、それぞれのワイヤーフレームがユーザのシステムとのインタラクションの一部を表現します。ツールによっては、一連のワイヤーフレームをクリック可能なプロトタイプに変換できるものもあります。
8) 適切な説明なしにワイヤーフレームを渡してはいけない
ワイヤーフレームはクライアントにとって理解しにくい場合もあります。適切な説明がないと、あなたがこれで何を達成しようとしているのか理解するのは難しいかもしれません。ワイヤーフレームをクライアントに渡して、そのままにしないようにしましょう。代わりにワイヤーフレームを使いながら、彼らと会話を進めていきましょう。ワイヤーフレームをたどりながらクライアントに説明して、疑問があればすぐに解決しましょう。「アーキテクチャの青写真」というメタファを使うと、ワイヤーフレームが何を目的としているのか、技術に疎い人にも理解できると思います。
9) 終わりのときを知る
ワイヤーフレームは目的のための手段であって、それ自体が目的ではありません。ワイヤーフレームづくりのポイントはコミュニケーションすることであり、ワイヤーフレームによって重要な情報を伝えることができてしまえば、以後それを改善しつづけても意味はありません。また、あまり事前に計画、設計しすぎないよう注意しましょう。開発プロセスを通して、要件を変更できる余地を残しておきましょう。
まとめ
ワイヤーフレームは、開発プロジェクトを開始して、そのプロジェクトが何を成し遂げるのかコンセンサスを得るためのすぐれた方法です。ワイヤーフレームを使うことで、人々からアイデアを引き出し、それをチーム内で議論し、必要に応じて改善したり破棄できる、具体的な形に変換できます。グラフィックデザインの詳細を省略することによって、ワイヤーフレームは作成や変更がすばやく簡単なだけでなく、フォントや色などの決定に迷うことなく、構造や機能の「全体像」に関する問いにフォーカスするのにも役立ちます。おかげでワイヤーフレームは、シンプルだけれども、プロジェクトを通して開発者からデザイナー、マネージャーまで全員がかかわれる、非常に効果的なリファレンスになります。
ワイヤーフレームを始めるのは簡単です。紙とペンがあれば、あなたはワイヤーフレームを描くとこができます。また、利用できる数多くのソフトウェアパッケージからひとつ選んでもよいでしょう。あなたのニーズに適した、あなたとチームが非常に心地良いと思うモノやツールであれば、何を選んでも構いません。やり始めたら、ワイヤーフレームがとてもおもしろいことに気づくでしょう。これはアイデアをもたらし、チームメイトといっしょに仕事をしやすくする、楽しくて魅力のある方法です。抽象的な文字だらけの仕様を書くのとは正反対に、ワイヤーフレームはみんなのやりとりを促し、すばやく具体的な結果を得るためのものです。もしまだ試したことがなければ、是非挑戦してみてください!
著者について
Andreas Wulf氏はドイツの美しい町ミュンスターにあるソフトウェア会社、Wulfsoftの創業者でオーナーだ。情報システムの修士号をもち、ファイナンシャル業界向けの大規模ソフトウェアシステムの設計、開発経験がある。