Smart Communication Design Company
ホーム > ナレッジ > Blog > UX Blog > 2016年10月 > ワイヤーフレームのエクスペリエンスを考えてみる

UX Blog

UXデザインの国内外の最新動向をお伝えすると共に、弊社内の日々の業務や勉強会/イベント等で得た学びや、考察したことについて共有して参ります。当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlc_uxをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

ワイヤーフレームのエクスペリエンスを考えてみる

インフォメーションアーキテクト 谷田

紙のワイヤーフレームを見ても、クライアントはピンときていないのでは?

ページの構成要素や、仕様を固めるための資料として作るワイヤーフレーム。私の場合は、マイクロソフト社のPowerPointやExcelで作成したワイヤーフレームを、紙に印刷してクライアントに説明しています。しかし、この「紙に印刷して確認してもらう」という行為が、色々な問題を引き起こしています。

それは「ワイヤーフレームでクライアント承認を得ても、ビジュアルデザインができてきたり、コーディングして最終形に近づいたりしたときに、イメージが違うので(大幅な)修正が入ることがある」ということです。ワイヤーフレームを作っているディレクターさんやIAさん、ワイヤーを元にビジュアルデザインをするデザイナーさんにとっては、ワイヤーフレームあるあるではないでしょうか。

こうした経験を繰り返すうち、私は「紙のワイヤーフレームのエクスペリエンスが悪いのではないか?」と捉えることで、より良い方法が見つかるのではないかと考えるようになりました。

なぜ紙だと手戻りが生じやすいのか?

紙で確認する方法で手戻りが生じやすい原因を考えてみました。

ワイヤーフレームは、ビジュアルデザインを除外した状態で構成要素や仕様を固めるための資料ですので、作り込む必要はないと考えていますが、これらの原因によって最終的にクライアントが見てピンときていない点につながっているのではないかと感じています。

プロトタイピングツールを活用するとうまくいくのでは?

では、「ワイヤーフレームのエクスペリエンスを高める=クライアントに伝わるワイヤーフレーム」には何が必要なのでしょうか?

紙のワイヤーフレームでは最終形がイメージしにくいと考えると、早い段階で本物感のあるものを作る必要がありそうです。つまり普段Webページを見ているようにブラウザで動かしながら直感的に確認できるようにしなければいけません。

そのためには、理想とかけ離れている紙のワイヤーフレームの問題点をクリアしないといけません。

つまり、「画面遷移が分かりやすい」、「ブラウザ上で実寸に近い形で見られる」、「簡単なインタラクションは体感できる」などのことを実現する必要があります。また、最終形がイメージできるようにデザインされた状態にできるとさらに良いです。

そして、これらを解決するためには、プロトタイピングツールが活用できそうです。

プロトタイピングツールとは、手にとって触れる試作品を手軽に作ることができるツールのことです。

ディテールを作り込む前に試作品を作り使い勝手の検証をしたり、機能やアイデアを試作品というカタチにして早い段階でユーザーからフィードバックをもらったりと、試作品を作ることで後工程の作業の無駄や手戻りを削減できます。Webサイトやアプリ開発のシーンでは実機で触りながら確認でき、関係者間のイメージの認識合わせがしやすくなるので重宝されています。

国内外で多くのプロトタイピングツールが開発されており、Prott、Invisionなどが有名です。最近ではAdobeもAdobe XDというツールを発表しており非常に盛り上がっている分野でもあります。

このプロトタイピングツールをいくつか試してみたところ、次のような良さが分かりました。

実際に、ある案件でトライアル的に使用していますが、紙より確認しやすいという声をクライアントからいただけたり、動かして初めて分かる点でフィードバックがいただけたりと、手応えを感じています。

プロトタイピングツールを使えば全てOKというわけではありませんが、クライアントとともに、より品質の高いWebサイトをよりスピーディーに開発していけるように色々試してきたいと思います。

今後、その試行錯誤の結果から、「ワイヤーフレームのエクスペリエンスを高めるために必要なコト」をご紹介できればと考えています。