Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SHIFT EVOLVE Presents Events Vol.14 エンジニアのためのUX...

SHIFT EVOLVE Presents Events Vol.14 エンジニアのためのUXデザイン講座「ストーリーボードで学ぶUXデザイン」

Avatar for kazuharumurakami

kazuharumurakami

March 31, 2022
Tweet

More Decks by kazuharumurakami

Other Decks in Design

Transcript

  1. ・年齢、性別、リテラシー(≒知識、経験)、 サービス利用頻度etcで分類して作成する 仮想の「具体的な」ユーザー ・インタビュー、アンケート等の調査を通じて 作り上げる(「なんちゃってペルソナ」) →ペルソナを作ると、「誰のためのサービスか」 について関係者の目線が揃う ◆ペルソナ ペルソナは年齢や性別、リテラシー、サービス利用頻度などでユーザーを分 類して作る具体的なユーザーです。

    分類する際にインタビューやアンケート等の調査を通じて情報を集めて作り 上げますが、コスト、スケジュールの面で難しい場合は「なんちゃってペル ソナ」を作ることもあります。 ただ、「なんちゃってペルソナ」を作る場合、好き勝手に作っていいわけで はなく、関係者間で「こういうユーザーいるよね」の合意が取れるくらい、 具体的かつ実在する可能性が高いペルソナにする必要があります。 ペルソナを作ると、関係者間で「誰のためのサービスなのか」についての目 線が揃います。 6
  2. ・サービスを通して、ユーザー(=ペルソナ)の 行動、感情、思考を時系列(シーン別)に並べる ①まずAsIsを記載 → 「問題」を特定する ②次にToBeを記載 → 「解決策」の仮説を立てる この仮説の検証に使うのが「ストーリーボード」 ◆カスタマージャーニーマップ

    先ほど、ユーザーの需要を把握するためにカスタマージャーニーマップを使 うと説明しました。 その際、まずはペルソナが「問題」と感じることを特定し、それから解決策 の仮説を考えると話しました。 実は問題の解決策は一つだけというケースは少なく、いくつも解決策のアイ デアが出てくることが大半です。 ただ、沢山の解決策のアイデアが出てきたとしても、全てのアイデアが有効 とは限りません(一般的には有効だが、ペルソナが直面しているシーンでは 有効ではないetc)。 そこで解決策が有効かどうかを検証する際に「ストーリーボード」を作成し ます。 11
  3. ・カスタマージャーニーのシーンごとに、数コマの 絵コンテを作成して、仮説(解決策)を検証する。 ・ストーリーボードには以下を記載する ①登場人物(≒ペルソナ) ②タスクと実施する方法(≒解決策) ③動機(目的) ④満足度 →ざっくり言うと、「5W1H」+「感情」 ◆ストーリーボードのつくり方 ストーリーボードは、前述したようにカスタマージャーニーマップのシーン

    を数コマの絵コンテの形で仮説を描き、検証します。 ストーリーボードには以下4点を記載します。 ①登場人物(≒ペルソナ) ②タスクと実施する方法(≒解決策) ③動機(目的) ④満足度 ざっくり言うと、「5W1H」+「感情」 です。 これを絵コンテの形で記載します。 16
  4. ★ポイント いわゆる「UI」はあえてぼかすほうが良い ・UIを出すには早い ・UIを見ると、UIに目が行ってしまう →ここで考えるべきは「UI」ではなく、「体験」 ×「UI」のための「体験」 ◎「体験」のための「UI」 ※ただし、既にUIが存在するケースは例外あり(事例で後述) ここでポイントになるのが、「UIはあえてぼかす」ということです。 要件の洗い出しというタイミング的にUIを作るのが早いという点と、UIを見

    てしまうとUIそのものに目が行ってしまい、本来考えるべき「体験」ではな く、「UI」を考え始めてしまいます。 それも、「ボタンの角を丸くしたい」とか、「この情報は上下を入れ替えた い」、「説明文がわかりづらい」といった、かなり細かなUIが気になってし まうケースが多いです。 このタイミングで細かなUIにフォーカスしてしまうと、後になって必要な要 件が抜けてしまっていたり、実現したかった体験が作れなかったりします。 ただ、例外があって、既にUIが存在するケース(稼働中システム等)はUIを 出すこともあります。この場合も、UIそのものに目がいかないように注意す る必要があります。 17
  5. 事例 PC向け業務システムのタブレット化 ◆対応内容 ・既存のワークフローシステムのタブレット対応 プロジェクト ・タブレット向けの機能設計をするのではなく、 PC機能をそのまま移植する想定のコスト・工数 ・ボトムアップではなく、トップダウン ・類似の業務システムの中で初のタブレット対応 ストーリーボードを使った事例です。

    過去にPC向け業務システムのタブレット化というプロジェクトがありました。 ワークフローのシステムだったんですが、外回りをしていてもオフィスにい るのと同じように申請、承認ができるようにするというプロジェクトで、PC 向けの機能をそのままタブレットに移植するというプロジェクトでした。 このプロジェクトは、社員がより積極的に外回りをするようにしたいという、 トップの意向からスタートしており、ボトムアップではなく、トップダウン の案件でした。 また、タイミング的に今のようにタブレット端末が普及する前で、安易に 「ノートパソコンの代用として使える」と思われている状況でした。 20
  6. ◆ストーリーボードの作成 ①登場人物(≒ペルソナ) →営業担当(申請者)とその上司(承認者) ②タスクと実施する方法(≒解決策) →稟議の申請と承認をタブレットを使って &PC向けの画面・機能のままで ③動機(目的) →出先でも申請&承認したい ④満足度 →満足できる??

    このプロジェクトで実際に開発を始める前に、2人のペルソナを作ってストー リーボードを作成しました。 一人はワークフローの申請者である、営業担当者、もう一人は承認を行う上 司を設定しました。 タスクと動機に関しては、トップが狙っている、「外出先でもオフィスと同 じことができる」ということで、タブレットを使った申請&承認をPCと同様 にできる このストーリーで、ペルソナが満足できるかという点について議論しました。 21
  7. ★ポイント1 ・既に稼働中のシステム、かつ PC画面・機能を 移植するというプロジェクトだったため、 「PC画面のスクショ + スクリーンキーボード」 を提示 ★ポイント2 ・Web画面の移植のため、技術的なハードルは

    なかった ポイント1として、この時のストーリーボードはUIを見せました。というの も、稼働中のシステムだったことと、PC画面のまま移植するというプロジェ クトだったからです。 ポイント2は移植自体には大きなハードルはなく、開発するにあたっての課 題はありませんでした。 22
  8. ◆内部で「満足度」を議論した結果・・・ ・営業担当(申請者):満足度は低い PC画面のタブレット対応 →「②タスクと実施する方法」が厳しい ・その上司(承認者):満足度は同じ or 低い そもそも外出が少ない →「 ③動機(目的)

    」がない →プロジェクト実施の再考を依頼 内部で満足度がどうなるか議論したところ、やはり満足度は高くならないど ころか、低いのではないかという予測に至りました。 というのも、営業担当ペルソナの目線からすると、単純にPC向けの画面をタ ブレット用に置き換えただけでは難しく、タブレット特有のスクリーンキー ボードで1から入力することは非現実的。かろうじて、あらかじめPCで入力 しておいたものを出先で修正して申請するといった補助的な使用であれば使 えるといったものでした。 また、承認者である上司ペルソナの場合、そもそも外出頻度が少なく、タブ レットを使う必要性がないというものでした。 このように、どちらのペルソナも満足度が低い可能性が高いため、プロジェ クト実施について再考してもらうように関係者に依頼しました。 24
  9. Q.とはいえ、やっぱりハードルが高いです・・・ A0.棒人間でもOK A1.「5W1H」縛り A2. StarPeople&エモグラフィ A3. 写真コラージュ A4. Webサービス(StoryBoardThat、コミPo!) とはいえ、1枚目の絵から「どう描いたらよいかわからない」というケースも

    あると思います。 ここでは、その壁を超えるための方法を紹介します。 一つ目は棒人間です。これに関してはほとんど説明不要だと思いますが、ほ ぼ記号であり、描くハードルも低いと思います。 28
  10. A4. Webサービス(StoryBoardThat、コミPo!) 出典:会社設立マンガ もし女子高生が会社を設立したら https://ameblo.jp/zeirisitokyo/image-10772088747-10990535162.html ▪コミPo! https://www.comipo.com/ ▪Storyboard That https://www.storyboardthat.com/

    4つ目はストーリーボードが作成できるWebサービスを使うことです。ここで は2つのサービスを紹介します。 Storyboard Thatというサイトでは、ドラッグ&ドロップでストーリーをボー ドを作成することができます。 人物やモノ、背景等も豊富なうえ、操作も簡単なのでおススメです。 もう一つはコミPo!といサービスです。こちらもイラストを使ったものですが、 Storyboard Thatよりもちょっと漫画っぽい感じです。 こちらも使いやすいと思いますし、サイトには利用事例もあるので、参考に できると思います。 34
  11. 「 Microsoft: Productivity Future Vision」https://www.youtube.com/watch?v=w-tFdreZB94 「近未来におけるテクノロジーと生活」を 描いたムービー。 →「ストーリーボード」の発展形 →→「今は存在しないもの」の見せ方 追加資料:Microsoft

    Future Vision Microsoft Future VisionはMicrosoft Office Labsが作成した、近未来のテク ノロジーを描いたショートムービーです。 ムービーですが、「今は存在しないが、こういうデバイスや機能があるとこ ういう生活になる」というストーリーを描いているので、ストーリーボード の延⾧線上にあると言えます。 38