2020年12月25日

テクノロジー

UXデザインの基礎!ストーリーボードの概要と作成方法を解説

プロダクト開発において重要なことの一つとして、そのサービスのコアを明確にするというのがあります。サービスのコアとは、そのサービスを使うユーザーは誰で、そのペルソナが持っているペインは何で、そのサービスによってどう解決されるのか、どう利用されることを想定しているのか、になります。想定されるユーザーと、ユーザーの利用シーンを明確にすることで、サービス初期のPMF(Product Market Fit)フェーズにおいては、想定仮説が正しいかの検証ポイントが明確になります。また仮説検証後のプロダクトのグロースフェーズでPDCAを回す上で必要なKPI設計で重要な役割を担います。この際に役立つのが、「ストーリーボード」と呼ばれるデザインフレームワークです。ここでは、初級者編としてストーリーボードの概要や注意点、活用方法、作成方法について解説します。

 

ストーリーボードとは

まず、ストーリーボードの概要、及び注意点について解説します。

ストーリーボードの概要

ストーリーボードとは、イラストを用いて特定の商品・サービスを利用したユーザーの体験を理想のストーリーとして表現するフレームワークです。UXデザインを検討する際に、最初のアイデアを整理するタイミングで最も役立つと言われています。元々はウォルト・ディズニー・スタジオの映画制作過程において、映画の全体像を検討する際に用いられていた技法です。

ストーリーボードはあくまでもアイデアを視覚化することで、ユーザーが感じる価値を分かりやすくする目的で作成されます。従って、重要なことは絵の巧拙ではなく、その商品・サービスがどのような問題解決をするのかという中身の部分です。

 

ストーリーボードの注意点

ストーリーボードの主な注意点を解説します。

<主な注意点>

  • ペルソナの設定は丁寧に行う
  • シナリオを吟味する
  • 具体的なUI、解決方法は含めない

 

商品・サービスのコンセプトやゴールは明確に存在していたとしても、ペルソナによっては要求が細かく異なる場合があります。このようなケースでは、本来チームの共通認識を高めるためのストーリーボードがその効果を発揮することができません。必ずペルソナの設定を丁寧に行い、そのペルソナが経験するシナリオをどのようなものにするか吟味しましょう。

また、ストーリーボードはUXデザインの工程において、あくまでもアイデアを整理した上で、ユーザーの体験にフォーカスする最初のステップです。つまり、ストーリーの内容にあまり具体的なUIや解決方法まで含めません。実際にその問題の解決方法を考えるのは、次のステップです。(何故UIや解決方法まで含めないかについては下記記事もご参照ください。)

2020-12-23
こんにちは。UIデザイナーの藤木です。 早速ではありますが、ユーザーにとって最適なUI/UXを実現するにはユーザーのニ

ストーリーボードの活用方法

次に、ストーリーボードの活用方法について解説します。

活用方法1:アイデアを具体化するツールとして活用する

上述した通り、ストーリーボードはアイデア発想直後を整理するタイミングで最も役に立ちます。初期のアイデアはぼんやりとしていることが多いため、ストーリーを構成することで断片的なイメージの隙間を埋めることが可能です。このことにより、頭の中だけの空想や、文章で書かれているだけでは気がつきにくかった発想の甘さや問題点を発見できる場合もあります。

活用方法2:アイデアを検証、ブラッシュアップするためのデザインツールとして活用する

新しいアイデアの是非を決めることは非常に困難です。特にそのアイデアが誰もまだ見たことがないような革新的なものであるほど、具体的なイメージが湧きにくくなります。

そのような想像しにくいアイデアでも、ストーリーボードを使ってユーザーの体験を視覚化することで、検証がしやすくなります。つまり、描かれたストーリーに共感できるかどうかがそのアイデアの評価軸になるということです。UXデザインにおいて最初のステップであるストーリーボードの時点で魅力的ではない商品・サービスは、その後成功する可能性は極めて低いと言えるでしょう。その場合は、このタイミングでアイデアをブラッシュアップすべきです。

活用方法3:アイデアの方向性を決定する意思決定ツールとして活用する

ストーリーボードは、アイデアの方向性を定めた上で意思決定をするためのツールとしても役に立ちます。商品・サービスを開発する企業側は、つい身近なビジネスニーズをベースにアイデアの方向性を考えてしまいがちです。いつの間にかユーザーニーズが抜け落ちていたということもよくあります。

ストーリーボードでは、あくまでもユーザーが満足する体験にフォーカスしたストーリーを描きます。その物語を元に、詳細の部分をビジネス視点で詰めていくことにより、両者のニーズを掛け合わせたバランスの良いUXデザインが自然と出来上がる仕組みになっています。従って、ストーリーボードはアイデアの方向性を決定する意思決定ツールとして非常に効果的です。

活用方法4:アイデアを第三者と共有するコミュニケーションツールとして活用する

アイデアを書面や口頭で第三者に説明する場合、イメージが湧きにくいため聞き手によって解釈が異なってしまうという問題点があります。この問題点を解決しないまま次のステップへ進んでしまうと、個々の認識の相違から工程のどこかで齟齬が生じてしまい、プロジェクトが行き詰まってしまうことになりかねません。

ストーリーボードを用いてアイデアを視覚化することで、どのような状況や環境にいる人の問題を、どのような方法で解決するのかが一目で理解できます。従って、素早く正確にアイデアの本質を共有することが可能になり、上述したような問題が起こりにくくなります。

そしてストーリーボードには、第三者からの共感が得やすいというメリットもあります。ストーリーに具体的なキャラクターが登場することで、イラストを見た人は自身の体験などを投影し没入感を感じやすくなります。

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

最後に、具体的なストーリーボードの作成方法について解説します。

ステップ1:現状、解決したい課題、ゴールの書き出し

ストーリーボードの作成において最重要課題は、論理的で説得力のあるサクセスストーリーを構築することです。そのためには、細かいイラストなどの前に「現状」「解決したい課題」「ゴール」の三大要素をはっきりとさせる必要があります。最初から細かい部分を詰めようとせず、全体像をイメージしやすくするためにまずは大まかな要点から押さえましょう。

ステップ2:体験してもらいたい内容の整理

「現状」「解決したい課題」「ゴール」の三大要素の設定を丁寧に行った後、次は課題を解決しゴールを達成するまでのプロセスを書き出します。つまり、ユーザーにとっての最高の体験を発想する段階です。

しかしこの際、そのアイデアの革新的なポイントを押さえた体験の内容に絞り、冗長にならないように注意しましょう。ストーリーが長くなりすぎると、見る人によってアイデアの解釈が分かれてしまう可能性があるため、かえって理解を得られにくくなります。多くても6コマ、理想的には4コマのイラストで物語が完結することが望ましいです。

ステップ3:ビジュアルとキャプションを書く

最後に、イラスト、キャラクターの台詞、キャプションなどを書き出します。イラストはユーザーの感情などが分かるように描き、それだけでは伝えきれない部分をセリフやキャプションで補います。

この際、上述の通り絵の巧拙は重要ではありません。あくまでもそのストーリーの伝えたい内容が素早く正しく伝わっているか、ということを軸にシンプルで見やすいものにしましょう。ストーリーを伝える上で余分なものは、むしろ削ぎ落とすことが望ましいです。

もしどうしても清書したい場合は「Storyboarder」や使い慣れたドキュメント作成ツールを活用するか、デザイナーやイラストレーターに依頼するのもいいでしょう。

まとめ

ストーリーボードの基本的な概要や注意点、活用方法、作成方法について解説させていただきました。冒頭にも記載させていただいたようにプロダクト開発の初期の企画・構想時に、対象ユーザーと、そのユーザーの体験設計(UXデザイン)を明確にしておくことは、サービスのローンチ後に非常に重要になってきます。実際のプロダクト開発ではPRD(Product Requirements Document:プロダクト要求仕様書 )を作成し、これらを記載します。ストーリーボードの手法は、PRDを作成する際、もしくはその前にチームでぼんやりしたアイデアやイメージをブレークダウンする際に効果的でしょう。アイデアの具現化、チームでのイメージ共有に、ぜひストーリーボードを活用してみてください。

▶︎in-Pocket編集部より
アイスリーデザインで実施しているUI/UXデザインにおけるサービスの特徴、手法や関連事例などについては、
こちらをご覧ください。

 

2020-12-24
新規事業という魅惑的な言葉の反面、残念ながら多くの新規事業が失敗に終わるのが現実です。一方でデジタルサービスの場合、市
2021-04-16
こんにちは。i3DESIGNのデザイナー 小島です。近年のビジネスの現場において「デザイン思考」は、誰もが一度は聞いた

 

 

in-Pocket編集部

i3DESIGN

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印