ストーリーボードとは？
ストーリーボードとは、サービスや製品をどのような状況や環境でユーザーが使用しているのかを時系列のストーリーで視覚化するための手法です。アイデア共有からサービスの価値検証まで様々なフェーズで有効に利用できるので大変便利な手法と言えます。
アニメや映画制作などで使われる絵コンテや4コマ漫画をイメージしていただくと分かりやすいと思います。絵を描くのが苦手だ からこの手法はハードルが高いと考えてしまう方もいますが、絶対に絵を描く必要はなくあくまで表現方法の一つとして捉えればいいので、既存のイラストや写真などを用いてビジュアル化していくことが可能です。
ストーリーボードを構成するもの
ストーリーボードの主人公となるペルソナ（架空の人物像）がいることが重要な条件になります。ペルソナが抱えている課題とそのタッチポイントとなるタイミングや環境もストーリーボードを作る上で必要な要素となってきます。環境、文脈、タッチポイント（ユーザーがサービスの情報を知ったり利用するタイミング）などを明らかにすることで視覚的によりイメージをできるようにします。
- ストーリーボードを作成する際のポイント
- 効果的なストーリーボードを作るためには、しっかりとペルソナを設計することが大切です！ペルソナがいないとストーリーボードを作成する人のバイアスや思い込みが入り、実用性のないストーリーボードが出来てしまうので気をつけましょう。
UXデザインにおけるストーリーボードの目的
ユーザー体験を表現するのに適した手法で、ビジュアル化することによってサービスの理解を深めることや想定していなかった気づきを発見することが出来ます。アイデアを具体化するツールとして活用しましょう。環境や利用タイミングなどユーザー主体の価値観などを時系列で枠に埋めていくことによって利用シーンをまとめることができ、ストーリーボードを見るだけでサービスのユーザー体験理解が可能になります。
複数人でサービスを作っている場合、サービスについてテキストベースの情報をそのまま共有するより「イラストで説明してしまった方がいいかな？」や「とりあえずビジュアル化してから伝えたいな」と思う場合には積極的にストーリーボードを作って展開してみると理解が深まります。関係者にプロトタイプを作るタイミングで一緒にストーリーボードを展開するとより、ユーザーの具体的な利用環境や価値観を意識した状態でプロトタイプを触ってもらうことが出来ます。
ストーリーボードの活用方法
アイデアを共有しチームメンバーで共通認識を作るために使うことができます。ストーリーボードを作った時点でユーザーの課題を感じるタイミングなども可視化されて仮説としてユーザーがどこに不満を感じやすいかなどが チームでイメージできる状況になります。ストーリーボードが完成したタイミングでペーパープロトタイプを作成し、ユーザー体験をベースにした具体的なUI画面をストーリーボードに合わせてどのように設計をするかを整理することでさらに最終的なアウトプットのイメージを出すことも出来ます。また、この時点でストーリーボードを元にコンセプトテストを実施することもあります。
コンセプトテストとは、ユーザーに課題を解決するためのプロトタイプイメージや機能をビジュアル化したコンセプトを見てもらい、どのように感じたかや反応を調査します。開発プロセスの早い段階でコンセプトテストを実施することで、サービスや製品を作る前にユーザーの心に届く共感されるものになっているか調査することは極めて重要です。逆にこのタイミングで魅了がないサービス・製品の場合は、その後の開発や利用されることを考えて再度考え直す必要があると思います。
既に開発することが決まってしまっている場合はユーザーが魅了に感じる部分を洗い出して、アプローチを変えていく交渉をすることも出来ます。開発がスタートしてしまった後に変更することはかなり難しいため、このステップはかなり重要な役割となります。
ストーリーボードの作り方（複数人でストーリーボードを作る場合）
ユーザーフローから特定の目的を果たすためのストーリボードを作成します。今回は複数人でストーリーボードを作る場合を仮定して6つのステップで説明します。
1. 情報収集
ユーザーインタビュー、ユーザビリティーテスト、サイトメトリックスなどを実施しユーザーの環境・文脈・タッチポイント情報を集めましょう。調査をしなくても「分かっているつもり」になってしまう方は多いですが、ユーザー自身も気づいていないインサイトのヒントはまだ見えていない可能性が大いにあります。
2. 忠実度を決める
ステークホルダ（関係者）と一緒に作る場合は絵コンテは最初付箋を使って描き、壁に貼りながらワークをしていきます。絵コンテではなく、写真などを利用することもできます。クライアントとの共通認識もここで作りましょう。このフェーズでビジュアルの時間をかけすぎないことも重要です。
3. 基本定義
ストーリーボードはペルソナ1体に対してひとつです。複数のペルソナの環境をまとめて作るのは意味がありません。こ の時点で具体的なユーザーイメージがないと想像の中のユーザーのストーリーが出来てしまうので気をつけましょう。どのような体験をしてもらいたいのかや現状の解決したい課題を解決しゴールを達成できるよう重要な部分に絞っていきます。
4. 絵コンテパネルの準備
ホワイトボードに4〜9個程度四角い絵を描く枠を用意します。ストーリーが長くなりすぎると見る人によっては長くて逆にわかりづらいと感じてしまうので、強調したいステップなどを考慮して要点をまとめて短く完結させます。
5. ビジュアルとキャプション追加
絵コンテの絵は棒人間レベルで問題ありません。複数人でワークショップをする場合には参加者の中に絵が得意な人がいる場合もあるので声かけをしてお願いするもの良いと思います。最低限感情がわかるようになっていれば良いでしょう。
6. 展開→反復
チームにシェアしフィードバックをもらって反復を繰り返し、ブラッシュアップしていきましょう。
対面で実施する場合
大きな会議室を用意し大きめのホワイトボードや模造紙に加えて付箋とペンの事前用意が必要です。ワークショップ後、動かすことやそのまま置いておくことのできないホワイトボードの場合は、対面で実施した後にスマートフォンで写真を撮って保存します。余裕がある場合はオンラインデータにするためにイラストや写真のクオリティーを上げた状態のストーリーボードを改めて作ると良いと思います。関係者以外の人に説明するときにもストーリーボードをデータ化することで反復して要素をアップデートすることが出来ます。
会議室にホワイトボードがない場合
簡易的に壁に貼ることが出来るシートを利用すると非常に便利です。
オンラインで実施する場合
オンラインホワイトボードツールを利用し事前にテンプレートを検索して用意しておきましょう。オフラインと比べると発言していない人がいてもファシリテーターが気付きづらい場合はあるのですが、作ったタイミングでデータとして残り、会議室の残り時間を気にして後片付けを急いでする必要もないのは大きなメリットです。こちらの記事の最後にオンラインでストーリーボードを作るためのツールも複数紹介しているので参考にしてみてください。多くのツールはフィードバックをもらいやすいコメント機能があり大変便利です。
ストーリーボードの作り方（ストーリーボードを個人で作成する場合）
ツールなどを使わず、紙とペンを用意し直接書いていくことでツールの学習コストを考慮せずスピード感を持って進めることができます。ツールを利用して書いていく前、下書きフェーズで頭の中を整理するために紙とペンで何も書いていない紙に0から記入することもあります。最初からビジュアル化することなどを考えずアイデアを整理するためにもアナログな方法を取ることもおすすめします！
業務で利用することはセキュリティー的視点から難しいと思うのですが、個人的なプロジェクトであればiPadを利用するのも効率的でお勧めです。GoodNotes 5というアプリ（有料）を利用してストーリーボードのベースを作ることもあります。iPadの良いところはデータとして保存できる部分とApple pencileのお陰で実際に本物の紙に書いているかのようなスピードで進められます。
絵が描けなくても大丈夫！ストーリーボード作成に使えるツール
この手法において絵の上手さは重要ではありません。絵を描くことに抵抗がある方はフリーで利用できるイラストを組み合わせて作るのもおすすめです。UXデザインの現場では、「いらすとや」さんの素材を利用してストーリーボードを作成することもあります。イラストには著作権があるので必ず利用規約を確認するようにしてください。商用利用か個人利用でルールが変わることも多くあるので気をつけましょう。また、写真で表現したものを利用することもできるので関係者数人で会議室などに集まり、ユーザー役の人がポーズをとり撮影したものを利用することも一つの手法です。最終的にはビジュアル的に理解できる状態であればビジュアル化の形式は問いません。
ストーリーボードは世の中に沢山テンプレートが存在しているので、すでにあるものを利用すると効率的に作成できます。リモート勤務が一般的になってきているのでデジタルで一括管理できた方が良いなど需要もそれぞれあると思うので、皆さんの環境 にあったツールを選んで作成するのが良いのではないでしょうか。
ストーリーボードテンプレートがあるオンラインホワイトボード一覧
miro
https://miro.com/ja/templates/storyboard/
FigJam
FigmaのホワイトボードツールFigJamのストーリーボードテンプレート
https://www.figma.com/ja/templates/storyboard-template/
MURAL
手書き作業がしやすいホワイトボードツール
https://www.mural.co/templates/storyboarding-1
まとめ
本記事では、ストーリーボードとは何かについて解説してきました。繰り返しになりますが、ストーリーボードとはサービスや製品をどのような状況や環境でユーザーが使用しているのかを時系列のストーリーで視覚的に示すことができ、アイデア共有からサービスの価値検証まで様々なフェーズで有効に利用できるので大変便利な手法です。
ストーリーボードを作った後はそもそも計画していたこと自体に課題があることに気づけたり、その課題を解決するためのプロトタイプ作成し実際にユーザーに反応を確認するなど、次のステップへ進むときの大きな判断材料になります。視覚的にビジュアル化することでストーリーを伝えやすくなる良い手法なので、ぜひデザイナー以外の方も積極的にストーリーボードを活用し役立ててみてください。
