ストーリーボード
Storyboard

ユーザーの体験をストーリーにして視覚的に表現する手法

ユーザー体験をストーリー・物語にしたストーリーテーリングをビジュアル化して表現したものがストーリーボードである。ストーリーボードを活用すると、ユーザーのニーズやコンテキストを具体化できるほか、チームの共通理解やユーザー利用シーンの過不足を発見しやすくなる。
映画製作において実際の撮影前に全体像を検討するために用いられていた手法に由来する。

ストーリーボードを作る3つの要素

ストーリーボードには、「シナリオ」「ビジュアル」「キャプション」の3つの要素で構成されている。

シナリオ

ストーリーボードの一番上に、シナリオを記載する。シナリオには、登場人物となるペルソナも合わせて記載する。チームメンバーや関係者がビジュアルの前提状況が理解できるように、ユーザーの目的や行動を短い文章でまとめる。

ビジュアル

シナリオのステップごとにユーザーの行動、心情・発言、操作している画面のスケッチ、ユーザーを取り巻くコンテキスト(状況、一緒にいる人など)を描写する。視覚的に理解できれば、描写方法はスケッチ、イラスト、写真など何でも良い。繰り返し作成して改善するイテレーションを素早く回せるよう、細部のビジュアルの作り込みは不要である。

キャプション

ユーザーのアクション、環境、感情、デバイスなどの情報をビジュアルに添えて簡潔に箇条書きで記載する。

ストーリーボードの作成方法

1. 対象を決め、データを集める

ストーリーボードで何を具体化したいか対象を決める。
実際のユーザーを対象にする場合は、作成前にユーザーのデータを集める。データの集め方には、ユーザーインタビュー、ユーザビリティテスト、サイト解析データなどがある。
将来のあるべき姿(as is)や、解決策のアイデアなどを具体化するために作成する場合もある。

2. ペルソナとシナリオを決める

ひとつのシナリオごとにストーリーボードを作成する。複数に分岐する場合は複数のストーリーボードを作成し、ストーリーボード上のシナリオは常に一本道になるように表現する。

 

シナリオ オフィス用品を補充する
ペルソナ ジェームズ:企業の仕入れ担当

3. ユーザーの行動を段階的にまとめる

ユーザーの行動をいくつかの段階に分け、文章とアイコンを用いて大枠を作成する。アイコンには感情的な表情を記載する。予め文章と簡単なアイコンに落とし込むことで、次に作成するビジュアルに何を含めるかを明確にできる。

ユーザー行動をまとめたイメージ

ユーザー行動をまとめたイメージ
(翻訳引用: Storyboards Help Visualize UX Ideas

4. ビジュアルとキャプションを書く

アイコンの表情を参考にビジュアルを作成する。ビジュアルだけでは捉えられないコンテキストを、キャプションとして記載する。スピードを重視するためビジュアルの作り込みに時間をかける必要はない。

ビジュアルとキャプションのイメージ

ビジュアルとキャプションのイメージ
(翻訳引用: Storyboards Help Visualize UX Ideas

5. 完成したものを共有してフィードバックをもらう

完成したストーリーボードをプロジェクト関係者に共有してフィードバックをもらい、繰り返しブラッシュアップする。

ストーリーボードが活用される場面

ユーザーの行動やコンテキストを考慮せず、発注者の意見を鵜呑みにして、個々の機能や画面の設計に固執してはいないだろうか?ストーリーボードで一連のユーザー体験を追体験できるので、チームでユーザーニーズを共通理解することができ、問題発見や意思決定の助けになる。

また、ストーリーボードはUXデザイナーだけのものではない。CEOが自分のビジネスアイデアをストーリー化してビジョンを明確にしたり、プロダクトマネージャーがチーム全体に問題をシェアするときに使ったり、幅広い職種に様々な場面で活用される。活用される場面の一部を紹介する。

顧客の情報を集め終えた時

リサーチ結果をもとにストーリーボードを作成すると、プロジェクトメンバーでの理解度が深まる。ユーザビリティテストの結果からストーリーボードを作成する場合は、スケッチではなく写真やビデオの静止画を用いる。

アイデアの具体化や優先度を決定する時

ポストイットに書いたアイデアは、抽象度が高くプロジェクトメンバーがイメージできないケースが多い。ユーザーの価値にフォーカスしてストーリーボードを描くと、アイデアが具体化され、メンバーがアイデアの価値や重要度を理解しやすくなる。

体験の流れを確認したい時

ユーザー体験の時間軸を複数のコマで表現しているので体験で不足している点を発見したり、注目すべき点を発見できる。

Airbnbの「snow white」というプロジェクトでストーリーボードを用いて、ユーザーがサイトに訪問するところから一連のサービス体験を描いた。
ストーリーボードを活用する前、開発チームは宿泊先に着いてからの体験が重要だと思っていた。しかし、ストーリーボードでユーザーの行動を追体験した結果、家に着く前にアプリで場所を確認したり、宿泊先のホストと連絡を取るといった体験が重要だと気づくことができた。

ストーリーボードの活用例:Airbnb

Airbnbの創業者であるジョー・ゲビア氏もストーリーボードを描いてアイデアを具体化させた。Airbnbのサービスアイデアのストーリーボードには、世界中でサービスが利用できることが地球のイラストで表現されている。また、家主が「ようこそ」と出迎えてベッドと簡単な朝食を提供する体験・コンテキストがイメージできる。

ジョー・ゲビアが実際に描いたストーリーボード。中央に家主が「ようこそ」とゲストを招いている様子が描かれている。

ジョー・ゲビアが実際に描いたストーリーボード。中央に家主が「ようこそ」とゲストを招いている様子が描かれている。
(翻訳引用: Airbnbの創設者に学ぶストーリーボードの必要性

Airbnbの例では、コマに分かれておらず1枚のビジュアルで表現されている。ビジュアルでアイデアを具体化する時には必ずしも複数のコマで作成する必要はない。
Airbnbのストーリーボードは手書きであるが、サービス体系がひと目でわかる。理解できることが目的のため、必ずしも綺麗に描く必要はないが、プレゼン等ので利用する場合は一枚絵でなく、ストーリー仕立てで誰が見ても同じ疑似体験してもらえるように綺麗に描く場合もある。

参考リンク

blank

あやぱん

現在、スタートアップのWeb制作会社でディレクター・プランナーをしています。UXの知識をつけて、色んな人と関わりながら学んでいきたいと思い、UX DAYS TOKYOに参加。「コンテキストの理解と実践」ワークショップ登壇。