なぜNudge Amountを8ピクセルにするのか？チームを導くナッジ理論。
なぜNudge Amountを8ピクセルにするのか？チームを導くナッジ理論。
UIデザインを効率的・効果的にする重要な設定を紹介。これで良いUIを作れる蓋然性がちょっと増えます。Nudge amountの設定とその効果と価値、そしてより深いところにある「ナッジ」というエッセンスを紹介。デザインチームで実施しているナッジをシェアします。
現代におけるUIデザインでは、ほとんどの場合において4の倍数もしくは8の倍数でレイアウトを構成するのが主です。
これはスクリーン上のレンダリングやレスポンシブへ対応するためのピクセルパーフェクト1への配慮などからそのようにプラクティスが形成されており、同じデジタルデザインの分野でもDTPの世界とは全く異なっています。2
4もしくは8の倍数はもはやデファクトスタンダードなので、多くのUIデザインはツールをこれに則った設定にすることでワークフローを効率化できるでしょう。
まずはその1つ、FigmaのNudge Amountで私やチームが行っている設定についてシェアします。
キー操作による移動ピクセル数
Nudge Amount（ナッジ・アマウント）
私やチームが行っているその設定とは、キー操作によって移動するピクセル数(量)を変更する というものです。
日本語にすると何を言ってるんだという感じですが、要するに何らかのオブジェクトを掴んだ状態で矢印キーを押した時にどれだけのピクセル数を移動・増減するかという設定です。
設定
Figmaでは、これはNudge Amountという項目名になっています。
Nudge Amountには次の2種類があります。
Small Nudgeは、矢印キーを押した時に移動・増減するピクセル数
Big Nudgeは、Shift + 矢印キーを押した時に移動・増減するピクセル数
私はこのBig nudgeの値を8ピクセルに設定しています。
また私個人だけでなく、所属するチームのUIデザインを行うことが多い方やWEBプロダクトのデザインチームに所属している方には、この設定を行うことを推奨しています。
8ピクセルの意味
さて、キー入力の結果が10ピクセルか8ピクセルかというのは、あえて設定を変更するほど重要なことなのでしょうか？
端数を出さないUIデザイン
端的に言って、この設定項目を見つけた時、自分は光の速さでBig nudgeを8ピクセルに変更しました。それが答えです。
WEBサイトの余白やブロックサイズ、サイトの横幅は、8の倍数ですべて定義することができると言われています。3
今のところUIデザインを8の倍数で作るのはデファクトスタンダードであり、自分も含め、多くのデザイナーやデザインシステムがこれに則っています。
8の倍数ルールはこれまでに複数のプロジェクトで実践してきましたが、メリットがデメリットを完全に上回っていると感じます。それは初期の設計時においてもそうですし、運用段階においてもです。
余白の値は、原則として8の倍数を使用し、画面の外側から内側にいくにつれて小さい値を段階的に使います。
効果と蓋然性
綺麗に・有効にUIを作るための8の倍数4なのですが、Nudge amountを8に設定しておくことはこれに則ってデザインすることに繋がります。
8の倍数に設定するのが早くなります。Shift+→や↑を1回押せば8になります。
位置や値を操作していると常に8pxずつ変動するため、8の倍数で作ること忘れにくくなります。そしてこの操作は日々行うため、自然と自分の認知に刷り込ませることが出来ます。
コンポーネントを作る際も、variantsのpaddingがBig Nudgeの2倍（つまり16px）になったりもするので、コンポーネントドキュメントにおいても8ピクセルのルールが守られやすくなります。
こうしたことから、Nudge amountを設定することはUIデザインがプラクティスに沿うのを効率的にします。チーム全員で設定すれば、チームのアウトプットが丸ごとプラクティスに沿う蓋然性が手に入ります。
もしデフォルト値の10ピクセルのまま作業する場合、8ピクセル単位でのレイアウトに調整するために何度も2ピクセルずつ調整することになります。この積み重ねが1日、1週間、1年でどのくらいの時間になるのか、そしてそれを何人が行うのかを考えると、この無駄を排除すべきことに考え至らずにはいられないでしょう。
この意味を言語化し、事例とともに言語化し説明している動画も既にありましたので、ぜひご覧ください。
ナッジしよう
ところで、この項目の名前にある”Nudge(ナッジ)”とは、何だかご存知ですか？
実は、ナッジを理解している人間にとっては”Nudge Amount”という項目名を見ただけで、それをどのように使えば良いのか・どう向き合うべきなのか想像できます。
鶏が先だったのか卵が先だったのか分かりませんが、ともかく最高の命名センスです。
ナッジ理論
2017年以降において「ナッジ」と言うと、一般的にそれは行動経済学におけるある概念を指します。人を主体的に(≒強制することなく)よりよい選択へそれとなく導くという概念およびプラクティスです。
リバタリアニズム+パターナリズム
ナッジが概念として成立したのは近年のことです。5
定義としては上述の通り、人をよりよい方向に導こうとする概念なのですが、従来の誘導的な概念や啓蒙・教導・強制するような導き方(パターナリズム)とは異なります。
人の行動を変えようとする際に、何らかの強制的な力(禁止する, 罰金を課す, 評価する, 報酬を与える等)を用いた場合、それで人の行動が変わったとしてもそこに選択の自由や余地はありません。コントロールされた変容です。
また、そういったアプローチで変革できる人間の行動は表面的で、しかも利己的なインサイトに突き動かされているので必ずしも持続性がありません(餌や罰則が無くなると再現されない)。
そこで、ここに正反対の概念である自由主義(リバタリアニズム)6を加えてみます。
すると「個人の自由を疎外せず、行動の結果が「よりよく」なるように環境や条件を誘導的にする」という思想が生まれました。
この思想はリバタリアン・パターナリズムと呼ばれています。
これは相反すると思われていた主義の良いとこ取りをした革命的な概念でした。そしてこの思想を実現するための具体的な制度や仕組みについて行動経済学的に説明・実践したのが、ナッジ理論でした。
事例
ナッジの有名な事例としては便器に描かれたハエ7がよく挙げられますが、実証主義の概念であり様々な事例が存在します。タバコの吸い殻による投票8, ピアノの階段9, がん検査キットの通知などは、調べればすぐに出てくる事例でしょう。
また書籍『ナッジで、人を動かす』にはデフォルト設定がナッジとして強力であるとして、次のような例も挙げられています。
ドイツでは多くの人々が、選択肢があるならグリーンエネルギーを使うと言っているが、実際にはグリーンエネルギーを選択する人々がほとんどいないという状況が長く続いている。（中略）
ところが、全体としてはグリーンエネルギー使用率がゼロに近い時期でも、2つの市だけは90%を超える使用率をしめしていた。理由は簡単、これらの市ではグリーンデフォルトが設定されていたのだ。（中略）
こうした結果は、デフォルトが持つ特別な力を実証している。── ナッジで、人を動かす p.239
上記例はいずれも、強制も経済的なインセンティブもなしに、行動経済学的なインサイト、あるいは認知バイアスを上手く利用することによって人間を善的・有効的・利他的な行動へ導いています。
チーム・ガバナンスにナッジを
セルフナッジ
さて、Nudge amountをもう一度見てみましょう。これを8に変更することは、次の意味を持ちます。
アウトプットを強制・教導せずともより良い結果(8の倍数で作られたデザイン)に誘導することが出来ます
そして、もし気に入らなければ、1ピクセルずつ移動させて崩すこともできます
さらに、Big nudgeを他の値に再度変更することも出来ます
これらは、リバタリアン・パターナリズムおよびナッジの、個人の自由を疎外せず、行動の結果が「よりよく」なるように環境や条件を誘導的にするという定義を満たしています。
また、Big nudgeがShift+矢印のアウトプットの設定であることを鑑みると、その設定変更はある意味キー操作のデフォルト値を変更していることになります。これは事例の章で例示したサンスティーンの言うデフォルトが持つ特別な力 を応用していると解釈できますね。
つまり、Nudge amountは名実ともにまさにナッジであり、これ自体がナッジの一例と言えるわけです(これが言いたかった)。
Nudge Amountはスタート地点
Nudge Amountをナッジとして捉えると、そしてあくまで例の1つであることを考えると、こういったチームへのナッジは案外たくさん考えられそうです。
ナッジを理解し、チームをよりよい方向にそれとなく導いてみましょう。まずはNudge amountから始めてみてください(ナッジは実践を重んじる理論です！)
⚠️ナッジ活用の注意点
と、意気揚々と述べたはいいものの、ナッジ活用については注意点があります。表面だけ真似しようとすると、ケガするかもしれません。
反発
まず、ナッジを初めて聞いた人は一般的に反発心を持ちます。
ナッジの誘導を、無意識にコントロールされることだと捉えやすいためです。つまり「相手を騙して、本人の選択を誘導して自分の思い通りにしようとしてませんか」という疑問です。
もちろん、相手を騙してはいけません。騙す意図があるなら、それはより良い方向に誘導しようとしていないわけで、ナッジではありません。シンプルに詐欺・欺瞞です。
ナッジの名を借りて誰かを騙さないようにしましょう。
コントロールじゃないし万能じゃない
そういった騙す意図が無い限り、ナッジを活用することを恐れる必要はありません。反発に見えるものは、実際にはナッジへの反発ではなくパターナリズム的なコントロールと性善説への反発です。10
パターナリズムに注意
人を誘導する点にだけ着目して、何かを禁止したり報酬・罰金を出したり、権限を限定したり、あるいは上司として議論を誘導ないし排除したりといったコントロールをナッジと勘違いしないようにしましょう。それはパターナリズムです。
設計した制度や仕組みについて「この取り組み・制度は本当にナッジか？パターナリズムになっていないか？」と常に問いかけ続けましょう。
スラッジ
また、ナッジ…というより認知心理学を悪用して人を誤った方向や利己的な方向へ誘導しようとする人がいた(いる)ことは確かです。
これはナッジ以前に人間性・倫理観の問題であり、これを鑑みて何でもかんでも性善説で許容することに反発があるのは然るべきことです。ある制度をの提唱者について「この人は絶対に独裁官にならない」「絶対に信用できる」などと誰が言い切れるでしょうか？
利己的な振る舞い(独裁, 搾取など)をしたいがためにナッジ的な手法を悪用・誤用して賢い意思決定や社会的行動を難しくすることは、ナッジではなくSludge11と呼ばれます。個人的には、例えばポピュリズムによる煽動などもこれに当たるだろうと考えています。
そうならないように、ナッジを企図する場合は「この取り組みは本当にナッジか？スラッジではないか？」と常に問いかけ続けましょう。
ナッジはコントロールではありません。全てを解決する万能の魔法でもありません。完全無欠の理論ではありません。儲けるための手法ではありません。騙すための口車ではありません。あくまで、選択の自由と共にある善的な行為への誘導です。でも、そういう怪しげなものと混同され警戒されることは理解しておくべきです。
欠点のある理論
また、スラッジの暴走を確実に防ごうと思うとそれ用の機構を別途設ける必要があるというのも、ナッジの欠点です。個人的には、その機構は多くの場合議論と当該施策の評価だと考えています。
そして重要なのは、ナッジという道具の欠点を十分にわかったうえで、その実害を防ぎ、メリットを活かす道を探る12ことです。
ともに探っていきましょう13。
思い浮かべてみてください。今あなたが人・チーム・組織・ユーザーなどステークホルダーについて抱えている問題・課題を。
そして想像してみてください。それら課題が、インセンティブなどの強権的コントロールによらず自由意志によって利他的に解決された像を。
そのためには、どんな魅力的な・ユニークなナッジが考えられるでしょうか？
自分が過去に行ったナッジ活用例
隗より始めよということで、自分が過去に行ったナッジ例を紹介しましょう。
実は、前回「どのデザインがFixしているか分からない を無くす」で書いた内容がその1つでした。当該箇所は、下記の部分です。
よって、Projectを分けるという明示的なフローを敷くことによって次のようなことも同時に達成できればと考えていました。
探索の結果使い回すべきものをコンポーネント化していくナッジを作ることで、コンポーネントまわりの作業や文化, 思想に慣れる
1週間越しの伏線回収ですので、お忘れの方もいらっしゃるかと思います。前回の本編は下記からどうぞ。
一度読まれた方も、ナッジを念頭に置いて再度読んでみると再発見があるかもしれません。
【ピクセルパーフェクト】
ここではUIデザインにおいて端数を出さないこと という定義。デザインカンプの通りに実装しようという概念とは同音異議語とさせてください。
【DTPの世界】
DTPではメディアが紙であるため、ピクセルパーフェクトを気にする必要はありません（代わりにプリンターなど物理的な制約がある）。友人のDTPデザイナーに言わせれば「デザインファイルを見ればその人がDTPの人なのかUIの人なのか一発で分かる」らしいです。
引用元：デザインは8の倍数でできている
【8の倍数】
例外はあります。例えば4pxや12pxも便利です。このことから、8の倍数ではなく4の倍数を採用すべしという考え方もあります。
【ナッジが概念として成立したのは近年のこと】
ナッジ理論はノーベル経済学賞を受賞していますが、それが2017年のことです。受賞者はシカゴ大学教授のリチャード・H・セイラー氏。
参照1：THE NOBEL PRIZE
参照2：RICHARD H. THALER: INTEGRATING ECONOMICS WITH PSYCHOLOGY（PDF）
【リバタリアニズム】
個人的な自由、経済的な自由の双方を重視する、自由主義上の政治思想・政治哲学の立場である。 経済的な自由を重視する新自由主義と似ているが、リバタリアニズムでは個人的な自由をも重んじる。── Wikipedia
ちなみに、ナッジがアメリカで受け入れられたのはこの自由主義的性質がアメリカ人の価値観と合っていたからだという言説があります。
【便器のハエ】
1999年、オランダはアムステルダムのスキポール空港では、トイレの清掃員の人件費削減に頭を悩ませていました。特に男子トイレの小便器は、便器からそれた小便を清掃する手間が問題でした。そこで担当者は、低コストで実行できる一計を講じます。
男性トイレの便器に、小さなハエのイラストのシールを貼ったのです。こうすることにより、利用者が「的を当てる」感覚でハエを狙うからです。策は当たり、見事に他人の小便のコントロールをしたのです。なんと清掃費は8割（1億円以上！）も減少したそうです。
── 引用元：ナッジ（nudge）とは
参照動画：Piano stairs
【パターナリズムと性善説への反発です。】
よくあるケースはそうですが、実際のところはそれだけではありません。他の批判もあります。誰が設計するのか？誰にとって”より良い”のか？あらかじめ設計できない複雑系には対応できないのでは？などなど。
また『ナッジ!?: 自由でおせっかいなリバタリアン・パターナリズム』ではp.51〜p.54にて干渉者への不信, テーマへの異議, 方法への反発が挙げられています。
【Sludge】読み：スラッジ, 原義：ヘドロ
【ナッジという道具の欠点を十分にわかったうえで、その実害を防ぎ、メリットを活かす道を探る】
書籍『ナッジ!?: 自由でおせっかいなリバタリアン・パターナリズム』 p.7より引用。ナッジにはこのように、欠点も理解して活用しようという、ある意味潔い姿勢が見られる。これはナッジ理論自体が包括的・体系的に説明したり欠点の無い完璧な概念であろうとしておらず、実証主義を志しているからかもしれない。
【ともに探っていきましょう】
以下に推薦図書を記載しておきます。私はナッジを大変気に入っており、仲間が欲しいのです。
思わずためしてみたくなる マンガ 行動経済学1年生（著：平野 敦士 カール）
ナッジで、人を動かす（著：キャス・サンスティーン）
NUDGE 実践 行動経済学（著：リチャード・セイラー, キャス・サンスティーン）
ファスト&スロー（著：ダニエル・カーネマン）
ナッジとは？（PDF・環境省）
ナッジ等の行動インサイトの活用に関する フレームワークについて（PDF・環境省）
日本版ナッジ・ユニット年次報告書（PDF・環境省）
※中腹以降にあるコンテスト受賞者が事例として面白い