【UI/UX】プロダクトをデザインするときの考え方

「[行動を変えるデザイン](https://amzn.to/2Oecu9U)」という本がなかなか良書だったので紹介しようと思います

業務でプロダクト制作をしている人はもちろんですが、デジタル領域に関わらず物やサービスを提供している人にとっても有益な情報かと思いました💡

本書の内容がデザインの全てだということはないですが、１つの考え方として理解してもらえると良いかと思います

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/6fb4a58d-0c5b-e42b-4979-1f01771b044e.jpeg" width=30%>

`※ 本の内容を自分なりに解釈している部分もあるので、その点はご了承ください`
`※ だいぶ省略して説明しているので、より詳しく知りたい方は購入して読んでみることをオススメします`

# 👉 要点
* **ユーザーはこっちが想定するとおりには動いてくれない**（人間が行動するためにはたくさんの障壁がある）
* **ユーザーの行動を変えるためには、たくさんのサポートが必要**（これをプロダクト上で実現する）
* **良いデザインをするために、こんなポイントを押さえよう**（後述するこの記事見てね）

#### 今回話さないこと
* 色やボタンの大きさ、フォントなど、いわゆる表面的な見た目には触れません。
* 困ったら○○すれば良いというような内容はありません。正解を探し出すためのヒントにはなりますが、正解はやってみるまでわかりません



#  👨‍🏫 前提条件の整理
本書の解説をする前に、あらかじめ知っておいて欲しいことを整理しておきます

### 行動経済学とは？
人間の心理を考慮に入れて、経済学を理解しようという学問で、比較的新しい分野です

[Wikipedia](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%8B%95%E7%B5%8C%E6%B8%88%E5%AD%A6)では次のようにまとめられています（2021年3月現在）
> 行動経済学（こうどうけいざいがく、英: behavioral economics）とは、経済学の数学モデルに心理学的に観察された事実を取り入れていく研究手法である


例えば5000円割引のコートを買うために別の店まで平気で20分歩くくせに、車を買うときは同じ5000円のためでもそこまでしないみたいな、**人間特有の行動を考えましょう**という話です
（他にもいろんな心理的特性があるので、気になる人は最後に紹介する参考書籍を読んでみると良いかと）



### 行動するときの前提条件（重要）
この本の一番の肝と言える部分です（最悪ここだけ覚えておいてください笑）

人間が行動する際には前提条件があり、`キュー`→`反応`→`評価`→`能力`→`タイミング`が確認できて初めて行動を実行できるらしいです

このプロセスを頭文字をとって**CREATEアクションファネル**と本書では読んでいます

* **Cue（キュー）**
* **Reaction（反応）**
* **Evaluate（評価）**
* **Ability（能力）**
* **Timing（タイミング）**
* **Execute（実行）**

本文中にはこんな感じのイメージで描かれています
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/d6ab5f7d-1351-fa97-3adc-70e1a1b3bdf4.jpeg" width=50%>


以上の前提条件を踏まえると、ノリでプロダクトを作ってもユーザーの行動を変えることはできないのです🤭

ではユーザーに何らかの行動をとってもらうためには、どのようにプロダクトをデザインすれば良いのでしょうか？

次のセクションから実際のデザインの流れについて説明していきます

# ✍️ 実際にどのようにプロダクトをデザインするか
デザインするプロセスは簡単にまとめると次のようになります

* **コンセプトをデザインする**
    * ユーザーにとって欲しい行動（ビヘイビアプラン）を明確にする
* **インターフェースをデザインする**
    * その行動をとってもらうためにどんなサポートができるか考え、プロダクトに落とし込む
* **効果を測定する**
    * プロダクトの効果（ユーザーの行動変容ができたかどうか）を検証し、改善する

では順番にどんなふうに進めていくか見ていきましょう

## 🧭 コンセプトをデザインする
ここでの目的は、**行動を促す文脈（ストーリー）を言語化すること**です
（プロダクトがユーザーに対してどのように働きかけ、どのように行動をしてもらうかを明確にする）

ではその文脈はどのように組み立てれば良いのでしょうか？
本書では文脈は次の３つの要因で決まってくると言っています

* **行動の構造化**
* **環境の構築**
* **ユーザー自身の準備**

前提で説明したCREATEアクションファネルは、行動が実行される前提条件（必要条件）であり、この条件はとある文脈（流れ）の中で揃うということです

つまり、プロダクトはこの３つの項目に働きかけることで、CREATEアクションファネルに影響を与え、ユーザーの行動変容を促すことができるというわけなのです

例えば、誰かに部屋を片付けてもらいたいとすると、次のようにサポートできれば片付けをしてもらいやすくなります

* 片付けマニュアルや不要なものリストを提供する（行動を構造化する）
* 収納グッズや報酬を提供する（環境を構築する）
* 必要な知識や技能、やる気を与える（ユーザー自身を準備する）


`※ 実際は文脈を決める前にペルソナ（ターゲットユーザー）を決めておく必要があるのですが、その話は割愛します`

では３つのそれぞれの項目について、どんなふうに考えていけば良いかまとめてみます

### 行動を構造化する
まずはユーザーがとる行動を、大まかな一連のステップとして書き出します
（プロダクト上だけに限らない）

行動が言語化できたら、以下の点を気にしながらブラッシュアップしていきます

* **シンプルにする**（必要最小限のアクションにまで切り詰める）
* **チートする**（自動化できるステップは自動化する）
* **習慣にできそうな行動を探す**
* **簡単そうにする**


:warning:`よくある失敗`
次のようなことには注意しましょう

* **簡単でしょ！**
自分の経験上簡単だから問題ないと思っても他人にとってはそうでないことはよく起こります。
→ 少しでも疑わしかったら、一度もその経験がない人の提案を取り入れた方が良いでしょう

* **大変だからこそ頑張ってくれるだろう**
人は何かに注力すればするほど手離れしたくなくなるという効果は実際ありますが、それが有効なのはモチベーションが高い人だけです。各ステップで簡単なものは簡単に、本当に難しいものは達成感を味ってもらうようにしましょう


### 環境を準備する
行動が構造化できたら、次はユーザーが行動の意思決定しやすいような環境は何か考えましょう
環境を構築するためのポイントは主に次の５つです

* **動機を高める**
    * 新しい動機と今ある動機（なるべく今ある動機を活用する）
    * 報酬と罰則（罰することは避けるべき）
    * 動機付けの種類（ユーザーごとに異なるし、同じ動機づけには飽きてしまう）
    * 現在の動機と将来の動機（なるべく現在の意義に変換する）
* **ユーザーに行動を促す**
    * 注目させる
    * お願いをする
    * 今すぐというメッセージ
* **フィードバックループを作る**
    * 即時性（行動中にフィードバックがあるのが理想）
    * 明確性（ユーザーが理解できる内容にする）
    * 実用性（フィードバック後にどう行動すべきか伝える）
* **競合を排除する**
    * ユーザーのやる気を削いでいるものは？
    * 他にユーザーの注意を惹きつけているものは何か？
    * 簡単でシンプルな他の行動が溢れていないか？
* **障害を取り除く**
    * ユーザーの行動を妨げるものは？

このへんの内容が整理できてくると、プロダクトがどんな見た目であるべきか浮かんでくるはずです
そのアイデアは書き留めておくようにするとGood👍


### ユーザー自身を準備する
行動が構造化でき、環境も用意できたら、あとはユーザーのやる気があるかどうかになります
ユーザーのやる気もこちらで準備してあげましょう🔥

最近話題の自己肯定感というやつですが、やればできるという感覚は実際に学校の成績を上げることが多くの実験でわかっています
（詳しくは「[マインドセット「やればできる! 」の研究](https://amzn.to/3rhlVUR)」が参考になりましょう）

つまり、**ユーザー自身のマインドに介入することは、行動変容を引き起こす大事な要素になっているのです**

ここでとりうる戦略は次の３つです

* **物語る**
    * ユーザー自身の捉え方を変えられるか
    * その行動が、自分の本来の姿の延長線上にあると考えられるように手助けできるか
* **関連付ける**
    * ポジティブで馴染みがあるものと関係があるか
* **教育する**
    * なぜ重要か（Why）
    * どのように機能するか（How）
    * 何をするべきか（what to do）

これでコンセプトデザインはだいぶ明確になっているかと思います

ここまでできたらプロダクトのモックを作ってみましょう！
モック作りは、デザインパターンのサイト（[UI-Patterns.com](http://ui-patterns.com/)など）を活用すると良いかと思われます（[その他参考サイト](https://uxmilk.jp/68343)）

`※ モック作りのあれこれはここでは割愛します`


## 📱 インターフェースをデザインする
コンセプトデザインを明確化し、プロダクトのモックができたら、CREATEアクションファネルを意識しながら細かい部分をデザインしていくことになります

それぞれのアクションに対する戦術を簡単にまとめておきます

### キューの行動戦術
* **ユーザーに何をするのか伝える**
    * リンクをクリックして欲しいのならクリックして欲しいと遠慮せず書こう
* **どこで何ができるのかを明らかにする**
    * ページを見て2秒以内に何をするページかわかるようにしよう
* **ページから余計なものを削除する**
    * １つのページでのアクションは１つに絞ろう

### 反応の行動戦術
* **きれいで専門的なサイトにする**
    * 素人っぽいウェブサイトは信頼されてもらえない
* **社会的証明を利用する**
    * みんながやっている行動は価値があると信じてもらいやすい。みんながやっていることだとわかるようにしよう
* **強い権威を示す**
    * 専門家の意見は信じてもらいやすい。利用できる権威は利用しよう
* **フェイクにならないようにする**
    * 不特定多数の人へのメッセージは偽物だと思われてしまう。スパムだと思われないようユーザー個別の情報を盛り込もう

### 評価の行動戦術
* **ユーザーの連想を刺激しておく**（プライミング）
    * プロダクトを使いたくなるような、ポジティブな経験を思い出してもらおう
* **損失回避を促す**
    * 失うことは得ることの約2倍の動機付けになる。失いたくないという動機をうまく利用しよう
    * ただし、ネガティブな感情を連想させないように注意しよう。ユーザーにはプロダクトを使わないことでネガティブな感情を避けるという選択肢がある
* **ピア比較を利用する**
    * ピア（仲間）との比較により、自分も仲間と同様の行動をとるようになる
    * 仲間外れにされたくないという心理をうまく利用しよう
* **競争心理を利用する**
    * 人は誰しも競争しがちなところがある。他のユーザーの成績が見えるようにしてみると良いかもしれない
* **認知の過負荷を下げる**
    * ユーザーがどうすれば良いか迷わないようにしよう（やることは率直で明快に）
* **選択の過負荷を下げる**
    * 選択肢が多すぎると人は選べなくなる。選択肢は極力少なくしよう
    * 選択肢を増やして欲しいというユーザーの意見には注意が必要。そのユーザーのプロダクトに関する熱意は嘘ではないはずだが、実際に多くの選択肢が適切とは言い切れない
* **直接お金を渡すのは避ける**
    * お金はもともとある内発的モチベーションを下げてしまう（アンダーマイニング効果）


### アビリティの行動戦術
* **実行意図を引き出す**
    * Aが起きたらBをするという実行プラン（将来の行動計画）を予め決めさせておこう
    * これができればリマインダーがなくても自動的に望む行動が実行できる
* **なんでもデフォルトにする**
    * デフォルトが決まっていると余計なことを考える必要がない。オススメの設定みたいに、初心者でも悩まずに済むデフォルトを用意してあげよう
    * ただし入力フォームにデフォルトを使うと嘘の情報が紛れやすくなる。（デフォルト値が正直な回答か回答なしかわからなくなる）
* **行動と情報の重荷を減らす**
    * ユーザーの余計な労力はなるべく削ろう。これで行動するのためのコストを下げられる
* **ピア比較を活かす**
    * 他の人がうまくできてる様子を見せれば、自分もできそうだと思ってもらえるかもしれない

### タイミングの行動戦術
* **時間的近視眼を避けた言葉遣い**
    * 人は将来の報酬よりも今の報酬に動機付けされる。すぐ得られる利益に照準を合わせよう
    * 逆に労力がかかる行動は未来に照準を合わせよう（将来行動するように今約束させると良い）
* **行動する約束を思い出してもらう**
    * 過去の行動と矛盾したくないという心理をうまく使おう（認知的不協和）
    * 行動するタイミングを約束してもらい、約束のタイミングでリマインドすれば、過去の自分と矛盾しないように行動してもらえる
* **友人と約束してもらう**
    * 友人からの尊敬を失いたくないという心理を利用しよう
* **報酬の希少性を高める**
    * 希少性の報酬を何度も押し付けないようにしよう。（「10kgの減量に成功したらギフト券」は1度きりなら有効だが、何度もあると信頼を失いかねない）

ここまで意識してUIを作っていけば、それなりにいいものができるはず！
プロダクトができたらさっそく使ってもらいましょう✨

## 📈 効果を測定する（テスト・改善）
プロダクトが完成してリリースしたら終わりではないです
実際にユーザーの行動を変えることができたか効果を測定し、目標が達成できていなければ改善する必要があります


### なぜ効果を測るのか
正確に効果を測定することができれば、以下のようなことに役立ちます

* **経営管理部門と共有する**
    * 投資対効果がわかり、事業価値を見積もれる
    * 出資の判断材料になる
* **チームと共有する**
    * 開発メンバーのモチベーションにつながる
* **世の中と共有する**
    * 効果が立証できればニュースになる
* **さらに効果を高める**
    * 現状の点数を知ることで、変更が効果改善に役だったのか判断できる
* **課題を見つける**
    * ユーザーがどこで躓いてるか知ることができる
* **議論を終わらせる**
    * 偉い人の意見よりも実際のデータの方が信頼できるので、無駄な議論をしなくて済む

### どうやってテストするのか
王道はランダム化比較試験（A/Bテストや多変量テスト）をすることです

何も介入しないグループと介入する（アプリを使ってもらう、新機能を追加するなど）グループに分け、両方のグループ間に現れる効果を比較するということです

例えば筋トレ習慣を身に付けさせるプロダクトの効果を検証したいときは、`プロダクトを提供しないグループ（介入しないグループ）`と、`プロダクトを提供するグループ（介入するグループ）`を両方用意し、実際に筋トレをするようになったかどうかを確かめるということです

この実験をする上で注意するポイントは以下のとおりです

* **十分な人数（サンプルデータ）を集める**
    * サンプル数が小さいと外れ値に引っ張られやすくなるので、データは多い方が良い
    * オンラインで公開されているシンプルな計算機（[このサイト](https://bellcurve.jp/statistics/blog/14347.html)みたいな）で事足りる

* **真にランダムなグループを分ける**
    * ２つのグループの平均値が同じになるように分ける必要がある

* **変えることは１つだけ**
    * 異なる条件が複数になると、どの条件が効いてるかがわからなくなる

* **全員の結果を比べる**
    * ユーザーにプロダクトを使ってもらうよう求めたのに、使わなかった人をデータから除いてはいけない
    * ↑プロダクト自体の影響以外に、プロダクトを使ったか使わなかったかの違いが混ざってしまう

* **被験者について知る**
    * すでに提供するプロダクトについて理解のある被験者に対して、新しい機能を追加した検証をした場合、ここで得られる結果は、全くの初心者がプロダクトを使う場合には全ては当てはまらない
* **どちらのグループでも同じことを測る**
    * プロダクトの機能を使って成果を測定したいが、介入してないグループはそもそもプロダクトを使ってないので測定できないときどうすれば良いか
    * ↑についてはプロダクト以外で正確に成果を測定できないか探す、もしくは成果を測定するためだけのプロダクトを持たせるしかない


A/Bテストの他にも、事前事後テスト、クロスセクション分析、パネルデータ分析などもあるので、気になる方は調べてみるとよいでしょう

---
  

以上で本書の紹介は終わりになります

役に立ちましたなどのご感想や、自分はこう思うなどのご意見がありましたらコメントしていただけると嬉しいです😊

Twitterでも日々本の内容やプログラミング関係の情報発信しているので、良かったらフォローしてください :point_right:  （[アカウントはこちら](https://twitter.com/koki_eng73)）

# 📘 おすすめ書籍
本書の中で紹介されていた本の中で、僕が読んだことのある本を紹介しておきます
**どれも非常に面白く、行動変容のために役立つ心理学の情報が得られる**かと思うので、一度は読んでみることをおすすめします

* [ファスト&スロー あなたの意思はどのように決まるか? 文庫 (上)(下)](https://amzn.to/3e6SaSK)
* [予想どおりに不合理: 行動経済学が明かす「あなたがそれを選ぶわけ」](https://amzn.to/382E0OK)
* [影響力の武器[第三版]　なぜ、人は動かされるのか](https://amzn.to/3kMGUN3)