UXデザインにおけるストーリーボードの役割と活用法

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

Storyboarding in UX Design (2017-04-30)

UXデザインを行う際、ワークショップやインタビューなどが主流な調査方法として挙げられます。そして調査結果はユーザーストーリーやプロセスフローで表現されます。また、チームのメンバーと考えを共有したり解決策を話し合うための手段として、ペルソナやWebページのレイアウトであるワイヤーフレームといったツールが使われます。

しかし、これらの調査を行うためには設計した製品のターゲットとなる、実在するユーザーを考慮しなければなりません。製品をより良いものにするためには、ユーザーと製品の間で何が起こっているかを理解し、製品がどのようにユーザーの生活を良くするのかを把握しておく必要があります。そして、ユーザーへの理解を深めるためにストーリーボードを活用します。

この記事では、UXデザインを検討するための役立つツールとして、また関連する問題や解決策を伝えるためのツールとしてのストーリーボードに焦点を当てて説明します。

ストーリーボードとは?

ストーリーボードとは、画像を使ってユーザー体験などをストーリーにする表現技法です。この表現技法の基本は、ストーリーを視覚化するために画像を連続的に並べて表現することです。ストーリーボードの表現技法は映画製作に由来しています。ウォルト・ディズニー・スタジオは、1920年代からフレームの制作にイラスト画像を使用しており、ストーリーボードが普及するきっかけとなりました。ストーリーボードは、映画を実際に撮影したり作成する前段階として、映画の全体像を検討するために役立つ方法です。

ディズニーがライオンキングの制作で使用したストーリーボード

ストーリーが効果的な情報伝達ツールとされるのは、以下のような理由があるためです。

  • 視覚化できる:「百聞は一見に如かず」ということわざがあるように、概念やアイデアを理解するには、視覚化することがもっとも効果的な方法です。何ページもある文章の資料で説明するよりも、画像を使って説明するほうがはるかに理解しやすいのです。
  • 記憶しやすい:ストーリーはただ羅列された事実より、22倍も記憶に残りやすいと言われています。
  • 共感しやすい:ストーリーで表現することで、すべての人がそれを見て共感することができるようになります。ユーザーは実際に自分自身がとった行動と似たような行動をしている登場人物に共感しやすいのです。
  • 没入感がある:ストーリーはユーザーの興味を引きやすいです。なぜなら、生まれ持った好奇心がストーリーへと心を引きつけるからです。特に偉大な功績に関するストーリーであれば、より関心を持たせやすいでしょう。

UXデザインにおけるストーリーボードの役割とは?

UXデザインにおいて、ストーリーボードは製品によるユーザー体験を視覚化して予測し、検討するツールとして役立ちます。ストーリーボードを使って、製品の使い方を映画のストーリーのように表現して伝えるのです。ユーザーの行動フローを何度も繰り返し確認できるので、信頼性のあるシナリオを作り出すことができるでしょう。

なぜUXデザインにおいてストーリーを作ることが大切なのか?

デザインプロセスにおいてストーリーは、体験を発見し、それを理解し、自分ごと化することのできる、安価かつ効果的な方法です。このテクニックには以下のような利点があります。

  • 人間中心設計のアプローチ:ストーリーは、分析データに人間味を持たせます。ストーリーボードは解決策に生命を吹き込み、デザイナーは実際のユーザーの目線でそれと対峙することができます。ストーリーボードは、既存のシナリオに関する理解を深めるだけではなく、潜在的シナリオについての仮説検証にも役立ちます。
  • 「ピッチとクリティック(批評)」手法:ストーリーボードはチームで行う作業で、UXデザイナーだけでなくどんな人でも参加することができます。映画製作と同様に、各シーンのプレゼンテーションにはチームメンバー全員が参画し、批評もチームメンバーによって行われます。ストーリーテリングをしながらUXデザインを行うと、デザインコンセプトがひらめきやすくなり、チームの結束も強まり、全員が何をデザインしているのか把握することができます。
  • イテレーション:ストーリーボードを成功させるには、イテレーション(反復アプローチ)が大切です。デザインコンセプトのためのロールプレイテストをスケッチする作業は、ほとんど手間とコストがかからないため、デザイナーはより手軽に実証・実験ができます。また、手早く、ラフに作ったものなので、思いついたアイデアに固執しなくても良いのも利点です。

ストーリーボードを作成する

ストーリーボードに取りかかる際、絵の上手さを気にする場合が多いでしょう、しかし幸いなことに、ストーリーボードのシナリオを描くために絵が上手である必要はありません。

Martin Scorsese氏の映画「グッドフェローズ」のストーリーボードフレーム

重要なのは絵の巧拙ではなく、何を伝えたいのかです。情報をわかりやすく伝達することが肝となります。

デザイナーに大切なスキルはPhotoshopやSketchではなく、シナリオを作り上げ、説明する能力です。

ストーリーを作り出す要素とは?

ユーザーの問題についてのストーリーを視覚化して他の人に伝える場合、ストーリーを論理的で説得力のある内容にするための準備が必要です。ストーリーの要点を把握し、それを要素ごとに分解することで、より信頼性と説得力のある説明をすることができます。ストーリーに必要な要素は以下の通りです。

  • キャラクター:ストーリー上の特定のペルソナのことです。キャラクターの行動や振る舞い、見た目、期待やキャラクターがストーリーに沿って取った決断などはとても重要です。ストーリーボードにおいてユーザー体験を可視化するには、キャラクターの感情を表現することが大切な要素なのです。
  • シーン:キャラクターをキャラクターとして存在させるための環境(場所や人物を含む現実の世界)のことです。
  • プロット:多くのデザイナーは、最初にストーリーの背景を説明せずにデザインの詳細を説明しがちですが、これは不適切です。ストーリーは起承転結を念頭において作る必要があります。ストーリーボードで展開される物語は、キャラクターの目標に焦点を当てて作成される必要があります。ストーリー構成は、まず何らかのきっかけによりストーリーが始まり、結論では解決策から得られる利益やキャラクターに残される問題が示されます。ストーリー構成を検討する際にはFreytag氏のピラミッドを参考にしてみてください。

ストーリーは、ピラミッドのような展開になる傾向があります。Freytag氏のピラミッドは、演劇で使われる5つの舞台構成(提示部、上昇展開、クライマックス、下降展開(または最終的な問題の解決や未解決への流れ)、結末)を例にストーリー構成を説明しています。Ben Crothers氏がピラミッド構造に合わせて制作した「ある男と故障した携帯電話に関するショートストーリー」が上の図です。

説得力のあるストーリーを作るために、いくつかのポイントを押さえておきましょう。

  • 筋が通っているか:大切なことは、詳細なキャラクター設定、キャラクターにとっての目標を作ること、そして、体験のなかで何が起こるかを明確に表現することです。製品と整合性のないストーリーは、ユーザーにすぐに伝わってしまうでしょう。そうならないためにも、実在する人物や現実的な文脈を心がけてください。そうすればユーザーの共感を得られるでしょう。
  • シンプルさ:余分なものはそぎ落としましょう。どんなに文章や画像、ページが良くても、ストーリーが伝えたいメッセージに沿っていなければ取り除きましょう。
  • 感情:ストーリーのなかで、体験を通して生まれたキャラクターの感情を表現することは必要不可欠です。

ストーリーボードを使って体験を説明する

描画スキルに自信がない方にとっては、ストーリーボードはとっつきにくいと思われがちです。しかし、心配はいりません。下記のガイドラインは、より良いストーリーボードシナリオを作成するのに役立ちます。

  • まずは簡単な文章と矢印のフローを作成します。最初に取り組むことは、起承転結に沿った物語の分割です。

場面をフロー化します。

  • 次にストーリーに感情を付け加えます。キャラクターの頭の中で何が起こっているのかを感じ取れるように、フローの各ステップに顔文字を書き込みます。ストーリーのなかで、成功や苦痛を感じるポイントで、キャラクターが期待していることや、結果がキャラクターにもたらした影響を顔文字で表現してください。顔文字は簡単なものでかまいません。

上と同じフローですが、各ステップに顔文字を追加しただけで、キャラクターの感情の状態が伝わるようになりました。

  • フローの各ステップをストーリーボードフレームに当てはめます。 それぞれの瞬間で何が起こっているかを強調し、キャラクターがどのような感情を抱いているかを考えてください。

ストーリーボードフレーム

  • ストーリーボードフレームにあてはめた文脈を明確なデザインにします。ストーリーボードに描かれたストーリーが見る人にとってわかりやすいものであることをよく確認してください。キャラクターにとって不利な状況を説明するストーリーであれば、問題を提起した結末になり、反対にキャラクターの問題の解決策を説明するストーリーであれば、解決策から得られる利益を示した結末になります。

人の笑顔や悲しみの表情は、ストーリーに感情を与え、見る人の心に訴えます。 画像著作権:Chelsea Hostetter氏、Austin Center for Design

結論

UXデザインにおいて、ストーリーボードの制作は簡単ではありませんが、有効な技法です。 視覚化はストーリーに現実味を与えられる良い方法なので、なるべく活用するようにしてみてください。ユーザーについての理解を深める上で大いに役立つでしょう。


イベント