ワイヤーフレームのエクスペリエンスを考えてみる
インフォメーションアーキテクト 谷田
紙のワイヤーフレームを見ても、クライアントはピンときていないのでは？
ページの構成要素や、仕様を固めるための資料として作るワイヤーフレーム。私の場合は、マイクロソフト社のPowerPointやExcelで作成したワイヤーフレームを、紙に印刷してクライアントに説明しています。しかし、この「紙に印刷して確認してもらう」という行為が、色々な問題を引き起こしています。
それは「ワイヤーフレームでクライアント承認を得ても、ビジュアルデザインができてきたり、コーディングして最終形に近づいたりしたときに、イメージが違うので（大幅な）修正が入ることがある」ということです。ワイヤーフレームを作っているディレクターさんやIAさん、ワイヤーを元にビジュアルデザインをするデザイナーさんにとっては、ワイヤーフレームあるあるではないでしょうか。
こうした経験を繰り返すうち、私は「紙のワイヤーフレームのエクスペリエンスが悪いのではないか？」と捉えることで、より良い方法が見つかるのではないかと考えるようになりました。
なぜ紙だと手戻りが生じやすいのか？
紙で確認する方法で手戻りが生じやすい原因を考えてみました。
- 画面遷移がイメージしにくい
- 1画面で収まらない
- ブラウザでの見た目や動きが想像できない
- 実寸で確認できない
Webサイトは、リンクをクリックしてページを進めていきます。紙で確認する場合、リンク先のページは別の紙に印刷してあるため、ペラペラめくっていく必要があり、手間がかかります。
縦に長いページのワイヤーフレームを印刷した場合、紙が何枚にもまたがってしまいます。ワイヤーフレームを確認する人は何ページもまたいで見ないといけませんし、そのためページの全容がイメージしにくくなります。また、PowerPointでワイヤーフレームを書く人はスライドをまたいで書かないといけないので非常に手間がかかりますし、1スライドにまとめようとして中身をギュッと詰め込んでしまった結果、見難くなるという本末転倒なことが起きるときがあります。
メガドロップダウンメニューやタブなどのインタラクションが発生する場合、動きがイメージできるように仕様をワイヤーフレームに記しますが、読まないとイメージできないため直感的には分かりにくくなります。
WebサイトはPCやスマートフォンのスクリーン上で見るものですが、紙に印刷するとこぢんまりとした印象になり本物感が薄れます。
ワイヤーフレームは、ビジュアルデザインを除外した状態で構成要素や仕様を固めるための資料ですので、作り込む必要はないと考えていますが、これらの原因によって最終的にクライアントが見てピンときていない点につながっているのではないかと感じています。
プロトタイピングツールを活用するとうまくいくのでは？
では、「ワイヤーフレームのエクスペリエンスを高める＝クライアントに伝わるワイヤーフレーム」には何が必要なのでしょうか？
紙のワイヤーフレームでは最終形がイメージしにくいと考えると、早い段階で本物感のあるものを作る必要がありそうです。つまり普段Webページを見ているようにブラウザで動かしながら直感的に確認できるようにしなければいけません。
そのためには、理想とかけ離れている紙のワイヤーフレームの問題点をクリアしないといけません。
つまり、「画面遷移が分かりやすい」、「ブラウザ上で実寸に近い形で見られる」、「簡単なインタラクションは体感できる」などのことを実現する必要があります。また、最終形がイメージできるようにデザインされた状態にできるとさらに良いです。
そして、これらを解決するためには、プロトタイピングツールが活用できそうです。
プロトタイピングツールとは、手にとって触れる試作品を手軽に作ることができるツールのことです。
ディテールを作り込む前に試作品を作り使い勝手の検証をしたり、機能やアイデアを試作品というカタチにして早い段階でユーザーからフィードバックをもらったりと、試作品を作ることで後工程の作業の無駄や手戻りを削減できます。Webサイトやアプリ開発のシーンでは実機で触りながら確認でき、関係者間のイメージの認識合わせがしやすくなるので重宝されています。
国内外で多くのプロトタイピングツールが開発されており、Prott、Invisionなどが有名です。最近ではAdobeもAdobe XDというツールを発表しており非常に盛り上がっている分野でもあります。
このプロトタイピングツールをいくつか試してみたところ、次のような良さが分かりました。
- 画面遷移が分かりやすい
- 実機で実寸に近い形で見られる
- 簡単なインタラクションが体感できる
- ビジュアルデザイン案も動かせる
- 点ではなく線でサイトを確認できる
プロトタイピングツールは、ページとページをつなぐリンク設定が簡単にできます。そのため、リンクやボタンを押下すれば次のページに遷移する、というブラウジングにおける通常の体験ができます。紙の場合はページをペラペラめくらないといけませんが、その手間が省けます。
プロトタイピングツールで作ったものは実機でチェックできる機能がついています。実機で実寸に近い形で見られるということは紙と比べて直感的に分かるため、キチンと確認しようという意識が働きます。1画面内にどれくらいの情報量があるのか、この要素は本当に必要なのかといった判断もしやすくなります。
プロトタイピングツールではプルダウン、タブ、トグル、メニュー、モーダルウィンドウといったインタラクションが簡単に設定できるため、ボタンを押下したときのイメージがすぐに分かります。
プロトタイピングツールではビジュアルデザインを簡単に組み込むことができます。動きがついたビジュアルデザインは完成形にかなり近く、とても確認作業がはかどります。始めはワイヤーフレームだったページに途中からビジュアルデザインを組み込める点は制作サイドとしても嬉しい機能です。
これらを総合してできることは「点」という1ページを確認するだけでなく、「線」というページのつながりや流れを意識してサイトを確認することができることです。こうなることで全体像が理解しやすくなり、より広い視点からサイトを確認することができ、木を見て森を見ずといったことも避けられるようになります。
実際に、ある案件でトライアル的に使用していますが、紙より確認しやすいという声をクライアントからいただけたり、動かして初めて分かる点でフィードバックがいただけたりと、手応えを感じています。
プロトタイピングツールを使えば全てOKというわけではありませんが、クライアントとともに、より品質の高いWebサイトをよりスピーディーに開発していけるように色々試してきたいと思います。
今後、その試行錯誤の結果から、「ワイヤーフレームのエクスペリエンスを高めるために必要なコト」をご紹介できればと考えています。