この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
コース３の流れ
いよいよコース３ ワイヤーフレーム、ローフィデリティプロトタイプ作成の段階に入ります。前回のコース２ではユーザーのニーズや問題提起の方法を探り、そのニーズをデザインで解決するためのアイデアを考えました。コース３では低労力、低コストでアイデアを出し、解決策を探る方法を学びます。そのためにストーリーボードやワイヤーフレームを作成します。ツールは紙そしてデジタルデザインツールFigmaです。
コース３の学びは課題を共有しながらシェアします
コース3での学びを説明するにあたり、今回からは具体例を用います。実際の教材も、とあるアプリ制作を例に進行しており、具体例を出して説明した方がUXデザインの流れを理解しやすいかと思ったためです。教材をそのまま流用はできないので、私が提出した課題を事例にご紹介していきます。
実はコース２からコース７にかけて取り組む大課題を与えられていて、その大課題を制作するための学習をし、学習後につど小課題を提出しています。
（小課題は全世界の受講生からピアレビューを受けるために英語で提出します。なるべく日本語に戻した状態でこちらに共有しますが、たまに英語の箇所が残っていることがあります。また、英語は堪能でないために翻訳ツールを活用しております。そのため英語圏の方にも違和感が残るかもしれません。ご了承ください。）
私はコースを通じてテーマパークのスナックショップで注文ができる、モバイルアプリを制作しております。
この課題は、デザインプロジェクト課題生成サイトSharpenにてランダムに提示された課題です。（提示された課題と異なる課題に取り組みたい場合は、選び直すことが可能です）コース２の段階でこの課題を選択しました。このアプリ制作にあたってインタビューを行い、ペルソナを作成し、ユーザーストーリーマッピングを行った上でコース３まで至りました。コース２の振り返りはこちらから。少し追記しています。
ストーリーボード
まずストーリーボードを作りました。ビッグピクチャーとクローズアップの２タイプです。
ビッグピクチャー（全体像）のストーリーボード
ビッグピクチャーストーリーボードはユーザーがアプリや製品に対して抱く感情的な部分を理解するために作成します。 ビッグピクチャーのストーリーボードでは、人がどのようにこのアプリを使うのか、そしてなぜこのアプリが役に立つのかに焦点を当てます。そしてユーザーが製品に対して抱く感情も記すことで、ユーザーが製品を使用する時に、どう感じるかの理解にもつながります。
私の課題に向けたビッグピクチャーストーリーボードは、テーマパーク内にいてホットスナック店で注文するシチュエーションを描きました。
ペルソナは幼い子供とテーマパークを訪れてホットスナック店を購入検討していたが、待ち時間の長さに不満を抱く父親ケンです。そこでケンが実際に子供を連れてホットスナック店を訪れたものの長蛇の列で注文を躊躇している画面から始まり、アプリで注文をすることで行列に並ぶことなく注文できて親子共々ハッピーになる場面を描いています。
クローズアップのストーリーボード
クローズアップストーリーボードはプロダクトを改善するための実用的なアイデアを考えるのに役立ちます。 ここではユーザーではなく製品に焦点を当てます。クローズアップすると、画面では「何」が起こっているのか、ユーザーはどのようにして画面を切り替えているのか、そして製品仕様の流れの中で問題になりそうなことは何かに注目します。
クローズアップのストーリーボードではホットスナック店アプリを入手し、ユーザーが商品を注文し、無事に注文を終えるところまでが描かれています。
ワイヤーフレーム
今度はワイヤーフレームの作成です。 まずは紙のワイヤーフレームを描き、素早くアイデアを出しました。 今回、クローズアップのストーリーボード機能を全て網羅すると膨大なので、主要機能「商品を選んで注文する」流れにフォーカスしてワイヤーフレームを作成しました。 紙のワイヤーフレームを基にデジタルのワイヤーフレームを作成します。必ずしも紙のワイヤーフレームを忠実に再現する必要はなく、デジタル化にあたって変更は可能です。 デジタルのワイヤーフレームを作成することによって構造を正確に把握し、より情報の流れを分かりやすく視覚化します。
プロトタイプ
ワイヤーフレームができたら、プロトタイプ制作の段階です。今回のプロトタイプはローフィデリティ プロトタイプ（低忠実度のプロトタイプ）というもので、アプリの主要な機能の一連の画面遷移を示したワイヤーフレームに動きを持たせたものです。今回は商品を選んで注文→一度Homeに戻る→カートをクリック→注文完了→座席予約を完了までの流れをFigmaで作成しました。
画面内をクリックすると、次にクリックすべき場所が点滅します。
ローフィデリティプロトタイプを作成することで、主要な機能の導線が明確かを考えます。
さいごに
次回からはこのローフィデリティプロトタイプを使って、果たしてユーザーが本当に問題なくタスクを完了させられるのか？を検証していきます。私のプロジェクトもどうなるのかお楽しみに～。