プロトタイピングで変わるWebサイトの戦略設計

Webサイトを通じての企業とユーザーのコミュニケーションが当たり前になってきている近年。日々どのような設計にしようか悩んでいる設計者も多いのではないでしょうか。

ロフトワークでは、Webプロトタイピングを用いたロフトワークの事例をもとに、ロフトワークが大切にする要件定義・手法などを紹介するイベント「プロトタイピングで変わるWebサイトの戦略設計」を開催しました。

前半はプロトタイピングを用いて要件定義を行ったサービスサイトとコーポレートサイトの事例紹介、後半はグループワークショップを実施。全体約二時間半の模様をレポートします。

テキスト=宮﨑有里

まず登壇したのは、ロフトワーククリエイティブディレクターの青木。青木はプロジェクトマネジメントやディレクションの視点を用いながら、Web、映像、プロダクト、サイネージ、紙ものなど様々な制作物に携わるほか、UX、ブランディング、プロモーションなどのデザインにも携わっています。

ここからは青木が実際に関わった事例をもとに、プロトタイピングの効用を解説します。

まずはじめに行ったのは、デスクトップリサーチ。世の中に既にあるWebサイトのなかで、どういったものが参考になるのか、またそのなかでのキャッチコピーの扱われ方や、共感・安心をどのように体現しているのか調査していきます。
また実際のユーザーになりうる経営者9名にライトインタビューを実施。その結果、「常に予測できないような不安と戦っている」「身近で信頼できる人が重要」など、経営者に共通する価値観や行動パターンが浮かび上がってきました。

青木　ここで意識したいことは、仮説検証ではなく仮説から拡張していくという視点で考えることです。最初に仮説検証と言うと、決まったことしか調査しないように考えてしまいがちですが、先入観で方向性を決めつけずに、少し視野を広げていろんな視点でユーザーとの多角的な接点の可能性を探ることを意識しながら、最初の段階では検証をしています。

次に、プロトタイプ検証も含めた、デプスインタビューを実施。ライトインタビューの結果を元に作成した、サービスを利用しているストーリーやキャッチコピー、画面イメージをインタビュイーに提示し、どのような印象を抱くか調査します。

インタビューが終わる度に得られたインサイトをチームでまとめ、更にユーザーのペルソナやメンタルモデル、このサービスを使用する機械領域をストーリーやビジュアルに落とし込みます。

青木　この作業の目的はユーザーの思考の流れを理解するためだけではありません。言語化の基になっているのはインタビューで収集したその事実ですが、ストーリーを用いて言語化すると、単にユーザーに伝えるだけでなく、プロジェクトの関係者の合意形成が取りやすくなると思います。

このプロジェクトでは、ユーザーがどういうタイプでどういう使い方をすれば良いのかをイメージしてもらいやすくなる「経営者タイプ診断」というアイデアがユーザーインタビューから生まれました。このように「”ユーザーならでは”のアイデア」が得られることもあると、青木は言います。

こちらの事例でもインタビューを行いましたが、「ALTOA」の事例と違い、ユーザーとJミルクにおける情報の需要のギャップを埋めることを目的として行いました。

需要のギャップを把握するため、リニューアル画面を2種類作成し、カテゴリーのトップ画面も複数パターン作成。実際に使っている方々が新旧を見比べたときに、どのような反応するのか検証します。

青木　できるだけ具体的な場面イメージを複数パターン制作することによって温度感を探り、業界ユーザーの持つWebリテラシーをしっかり把握することを狙いとしています。なので、業界内のリテラシーや情報ニーズを把握して、チーム内での共通認識を形成しながら、制作ペースの合意形成や実装を加速することに効果的です。

結果、業界ユーザーに特徴的な行動特性として、メールから情報を得たり、SNSをあまり使用していない、またブックマークからサイトに飛んでいることが多いなどが見えてきました。

青木　Web以外の接点も含めて網羅的にユーザーのストーリーを言語化することで、今後の業務全体の広報計画も検討することができると思います。実際、今回Web案件として要件定義を行っていますが、恐らく、紙媒体やいろんな情報発信をするときに、こういったユーザーが存在することを考慮しながら、今後進めていけるのではと思います。

このプロジェクトは現在進行中。一体どんなWebが完成するのか楽しみです。

最後に青木は、プロトタイピングを実施する効用を以下の4点にまとめました。

・ユーザーの属する”文脈”を再認識する ・インタビューでは言語化しづらい温度感を把握する ・”ユーザーならでは”のアイデアが得られる ・制作フェーズのプロジェクト進行を加速する

青木　ユーザー調査やそのプロトタイピングを実施することで、プロジェクトメンバーが妄想だけで会話をすることを防ぎ、議論の確実な収束や、時間短縮に繋がります。
ユーザーとビジネスの欲しい情報と与えたい情報にずれがないか、ユーザーの情報に合わせた情報提供がしっかりできているのかが、今後プロトタイプだけではなく、インタビューや、ユーザーに寄り添うデザインを行っていくときに重要だと考えます。

司会がクリエイティブディレクターの室に代わり、来場者は班に分かれて実際にファッションECサイトのプロトタイプを作るワークに挑戦しました。
4種類のユーザーから1つ選び、ユーザーに合わせたワイヤーフレームの優先度を検討していきます。そして実際に紙を切り貼りし、レイアウトも考えました。

買いたい物が既に決まっているユーザーを想定した班では検索機能が上にきていたり、セールに目がないユーザーに対してはセールアイテムを目立たせるなど、どの班もユーザーのニーズを見極めて戦略を練っていました。

室　実際にプロトタイプを作ろうとしてみると、同じユーザーを想定していても人によって意見の差異があると感じられたと思います。ワイヤーフレームがあっても差異が生じるのに、言葉だけで作ろうとすると更に大変です。ですので最近は、私たちもプロジェクトメンバーで一気に作ってみるということも試しています。

会はここで終了。この会を通じて、プロトタイピングを用いるとプロジェクト内での共通認識を持ちやすかったり、ユーザーインタビュー時により具体的なイメージを共有できることなど、プロトタイピングの効用が実感を伴って理解できたのではないでしょうか。

「プロトタイピングって何から始めたら良いのだろう…」と思っていた方は、頭で考えているよりも、実際に手を動かしてみた方がより速く、より良いプロトタイプが生まれるのかもしれません。今からぜひ活かしてみてください。