UIにおける自己帰属感と余韻について
Webサイトを作っています。山田啓太です。制作したWebサイトはポートフォリオサイトにまとめています。
この記事では具体的なUIを例に上げてそれぞれのUIを実装するときに僕が気をつけていることを書いていますが、その考えは渡邊恵太さんの著書、「融けるデザイン」の第1章〜第3章で語られている内容を非常に参考にしています。渡邉さんが独自の研究を通じて自己帰属感という単語に行き着くまでの過程も面白いのでぜひ読んでください。
自己帰属感とは
ある道具をまるで自分の身体の一部かのように扱えているとき、その道具は自己帰属感があると言えます。例えば大多数の日本人にとってお箸は自己帰属感のある道具でしょう。私たちがお箸を持って食べ物をつまむとき、まるでお箸が自分の指の延長になったかのように、お箸自体を全く意識することなく動作を行えます。
自己帰属感は自分の身体と扱う道具との高い連動性によって引き起こされると、融けるデザインでは示されています。お箸の例えに戻ると、お箸に自己帰属感が感じられるのは、お箸が指の細かい動きの一つ一つに正確に連動しているからと言えるでしょう。
この自己帰属感という概念がWebサイトを含むデジタルでのユーザーインターフェース開発において重要な指針になります。
では、具体的なUIを例に挙げて自己帰属感についてさらに理解を深めつつ、この概念がUIの実装方針としてとても強力だということを確かめてみます。
カーソルUIで考える自己帰属感と感触
カーソル自体もデザインの対象にして独自のUIとして扱う表現はここ数年の間に表現がリッチなWebサイトでよく見られるようになりました。まずはカーソルUIの例を通して自己帰属感を感じられる仕組みと、UIの感触について考えてみます。
以下、カーソルと言った場合は画面上のグラフィックとしてのカーソルのことを、マウスと言った場合は現実のマウスデバイスやトラックパッドデバイスなどのことを指します。
カーソルをカスタマイズするときの大前提として、そもそもデフォルトのカーソルはすでに自己帰属感のある優れたUIだということです。前述の通り、自己帰属感は身体と道具との高い連動性によって引き起こされます。マウスを動かす手と画面上の矢印のグラフィックがリアルタイムに連動することが、カーソルがまるで身体の一部になったかのような自己帰属感をもたらします。
さっそく実際に動くデモを見て自己帰属感について考えてみます。デフォルトのカーソルを非表示にし、代わりに小さい黒丸を表示するデモを作りました。
正確に言うと、この黒丸の座標にはマウスから得られるカーソルの座標（ターゲット座標と呼びます）を設定せずに、黒丸自体に独自の座標があり、ターゲット座標を追いかけるような実装になっています。この追いかける速度を右上のUIで設定できるようにしています。speedが1のときはターゲット座標に遅れることなくぴったり付いていき、speedの値が低いほど遅延して追従するようになります。
speedが1のときは何も特別な印象はありません。デフォルトのカーソル同様マウスを動かす手とグラフィックがぴったり連動していて、不便も感じなければ面白みも感じません。speedの値を1から下げていくとカーソルから感じられる感触が変化することを確かめてください。0.5以上の値では1のときとそれほど差異が感じられず、サクサク動いていると感じます。speedが0.3だった場合、依然として高い連動性があるので自己帰属感は十分ありますが、遅延して追従してくる動きにヌルヌル感を感じます。デフォルトのカーソルの代わりとして使うのであれば少なくともspeedはこのデモの0.3以上が適切だと思われます。さらにspeedを下げて0.1未満になると遅延が大きすぎマウスとカーソルの連動性が低くなります。結果としてカーソルの自己帰属感が損なわれ、カーソルの動きを重いと感じます。デフォルトのカーソルの代わりとしてこのくらい遅いカーソルを表示してしまうとユーザーにストレスを与えることになります。
もう一つカーソルUIのデモを作りました。このデモではデフォルトのカーソルは表示しつつ、カーソルのそばに円が追従してくるようになっています。カーソルストーカーと呼ばれるUIです。
デフォルトのカーソルを表示しつつ、UIの補助としてカーソルストーカーを表示する場合は、speedが例えば0.1などの低い値でも問題はないかと思います。これはユーザーがデフォルトのカーソルからしっかりと自己帰属感を感じているため、それに追従してくるカーソルストーカーで自己帰属感を担保しなくてもよくなったためです。むしろ遅延して付いてくるほうがゆったり感、上質感があるためそういう表現をしたいサイトではspeedを低い値に設定することでユーザーに特別な印象を与えられそうです。
自己帰属感のあるカーソルを実装するにはマウスとカーソルとの高い連動性が必要であり、また、連動性を低下させ自己帰属感が損なわれていくごとにカーソルから感じられる感触が変わることも確認できました。この感触自体に良し悪しはありませんが、不適切な感触を設定してしまうとユーザーにストレスを与えることにつながるので注意しています。
このように、しっかりした理解がなければなんとなくいい感じに実装しようとしか考えられないUIに対しても、自己帰属感が高いか低いか、またそこから感じられる感触が適切なのかを考えれば良いという指針を得ることができました。
ドラッグUIで考える自己帰属感
ドラッグやスワイプで横にスクロールすることができるUIを作りました。
このデモでは上段の横スクロールではスクロールスナップという処理をOffに、下段ではOnにしています。スクロールスナップとはある条件に従ってスクロール位置を固定する処理のことを指します。このデモでは下段の横スクロールは必ず左端の項目が画面左から40pxの位置にくるようにスクロール位置を固定しています。このデモはスマホにも対応していますが、まずはデスクトップ環境でマウスやトラックパッドを使って上段と下段をドラッグしたときの感触の差異を確かめてください。
上段も下段もドラッグしている最中ではマウスの動きとコンテンツの動きがリアルタイムに連動しているので自己帰属感を感じられます。ただし、下段ではマウスのクリックを解除したときにスクロールスナップ処理が働き、ユーザーの意図とは無関係にスクロールが動いてしまいます。僕はこのスクロールスナップ処理が働いている横スクロールがとても嫌いで、僕が実装を担当するときは基本的に作らないようにしています。僕以外に文句言ってる人を見たことがないので僕の気にしすぎかもしれませんが、やはりクリック解除後にガクッとスクロールが勝手に動いてしまうと制御を奪われたという感覚になり自己帰属感が0％まで一気に減少してしまいます。それがユーザーにストレスを与えることになると考えています。
今度はスマホからこのデモを動かしてみてください。ブラウザの横幅が640px未満のときは横スクロールの各項目が画面に1つだけ見えていて、横にコンテンツが続いてることを知らせるために左右のコンテンツが若干見えているというデザインになっています。
今度はスクロールスナップが効いている下段のほうが使いやすく感じます。このように、同じスクロールスナップ処理でもコンテンツの見え方によってストレスを感じるか使いやすさを感じるかが変わります。これはスクロールスナップというユーザーの制御を奪う処理が、結果的にコンテンツを閲覧する補助になっているかどうかの違いから起こるのだと思います。このデモでは640px以上のブラウザ幅では横スクロールコンテンツ内の項目が複数個見えています。言い方を変えると、どの項目に視線をフォーカスするかをユーザーが自由に決めることができます。この状態でスクロール制御を奪うのは、ユーザーの視線の自由を奪うことになるので使いづらさを感じさせることになります。640px未満の項目が画面に1つしか見えていない状態では、当然ユーザーはその見えている一つに視線をフォーカスさせます。この状態で項目がキレイに中央に来るようにスクロールを制御することは、ユーザーの視線のフォーカスを補助することになるので使いやすく感じるのだと考えています。
ユーザーからスクロールの制御を奪うこと、つまり自己帰属感を減少させること自体には良し悪しがなく、僕は状況によって適切かどうかを考えるようにしています。横スクロールのUIに関しては、僕は項目が複数個見えている状態ではスクロールスナップをOffに、1つしか見えていない状態ではオンになるように実装しています。
余談ですが、僕は動きの実装に責任を負っているので、使いやすさを重視して項目が複数見えている状態でのスクロールスナップの導入は避けたいと考えますが、デザイナーさんがスクロールスナップを導入したがるのはどこでスクロールを止めたとしても静止画として見栄えが良いようにするためというのが主な理由でしょう。スクロールスナップの導入は使いやすさと見栄えにどう影響が出るかを確かめて実装者とデザイナー間で相談して決めればよいかと思います。
自己帰属感という概念がUIの使いやすさを考える上で強力であることがわかりました。そして自己帰属感をコントロールすることでデジタルであっても感触を与えることができること、ユーザーのコンテンツ閲覧の補助となりえることもわかりました。
自己帰属感のその先、UIの余韻表現について
力の入ったWebサイトではただスクロールしてコンテンツを見られるだけではなく、スクロールに応じてコンテンツの出現アニメーションが入ったり、カーソルに独自のスタイルやアニメーションが施されたり、画像に対してエフェクトが入るなどの演出があることが多いです。
これらの演出要素は下手をすればユーザーにストレスを与えることになります。実際僕が作ったものも含め、いろいろなWebサイトの評価をネットなどで見ていると演出に対して否定的な意見も多数見られます。ではWebサイトで演出を作ることが全くの無駄であり悪なのかというとそんなことはないだろうと思います。美味しい料理とまずい料理があるように、悪い演出があったとすれば、それはその演出の出来が悪いだけでしょう。
今まで僕が見てきて悪いと思った演出は自己帰属感を無視した実装だったパターンが多いです。奇抜さ派手さはあるけれど自己帰属感のコントロールが適切ではなかったのです。演出を作るときはユーザーに自己帰属感をどう与えるか、またはどう奪うかが重要です。基本的には自己帰属感を与えつつ、その上でただ使いやすいという感覚を超えたアニメーションを実装したり、また適切に自己帰属感を奪うことでユーザーの期待を超えた表現を作ることができます。
融けるデザインでは自己帰属感を与えた上でのユーザーの期待を超えた演出のことを余韻と表現されていました。
僕が作ってきた余韻表現の例をいくつか挙げます。
Particle Emitter
デフォルトのカーソルに白丸が追従してくるようになっており、その白丸の速度に応じて飛び散るカラフルなパーティクルの大きさと数が変わるようになっています。我ながらなんだか癖になってずっと遊んでしまうような面白みを感じますが、それは余韻の作り方にあります。白丸はカーソルに素早く反応して追従してくるので自己帰属感がありますが、伸縮するヒモで繋がれたような動きをするようになっています。これがまさに自己帰属感を与えた上でのユーザーの期待を超える表現、つまり余韻になっているわけです。もちろん白丸から飛び散るパーティクルも、白丸の速度に対応しているので自己帰属感の上での余韻表現と言えます。
このデモが仮に、白丸が勝手に飛び回りパーティクルも勝手に飛び散っていて、ユーザーはそれを見るだけのものであったらとてもつまらないだろうと思います。確かに自分が操作しているという感覚を与えつつ、それ以上の演出が入ることによってまるで自分の能力が拡張されたように感じるからこそ楽しいのだと思います。
Adaptive Precision
iPadOSで導入されたAdaptive Precisionという仕組みがあります。簡単にいうとカーソルとカーソルで操作可能なUIそれぞれに独自のインタラクションを導入することでUIの使いやすさを向上させる仕組みです。
参考: https://developer.apple.com/videos/play/wwdc2020/10640/
このデモではその一部の、ボタン要素にカーソルが吸い付くインタラクションを再現しました。表示されているボタンのピクセルを覆う最小限の長方形にクリック範囲を設定してしまうとユーザーがクリック範囲にフォーカスするのが難しくなる場合があります。そうではなく、ボタンのピクセル範囲以上のクリック範囲を設定し、その範囲にカーソルが入った場合にカーソル移動の制御を奪うことで、ボタンをクリックするという操作の補助になっているわけです。UIは違いますが、このデモもスクロールスナップと同じく、自己帰属感を意図的に奪うことでユーザーの操作を補助する例です。
ボタンにカーソルが吸い付くUIはこのサイト↓で初めて目にしました。カーソルのカスタマイズ含め全てのUIが優れているのでぜひ見てください。
このサイトを見て以来、カーソルがボタンに吸い付く表現が好きすぎて隙あらば実装しています↓
おまけ
AirPods Maxの設計からわかるAppleの思想
僕が初めて使ったワイヤレスヘッドホンはSony製でした。そのヘッドホンではヘッドホン側面がタッチパネルになっており、パネルを前後になぞることで次の曲/前の曲の選択、上下になぞることで音量の調節ができるというものでした。初めてのワイヤレスヘッドホンだったので特に不便も感じませんでしたが、2代目ワイヤレスヘッドホンとしてAirPods Maxを手に入れたときにAppleの思想が感じ取れた気がしたのでその話をおまけとして書きます。
AirPods Maxにはタッチパネルが存在しない
AirPods Maxには物理ボタンしかありません。ノイズキャンセリングや外音取り込みなどのモードを切り替えるボタンと、音量調節とミュートのOn/Offができるデジタルクラウンと呼ばれるボタンがあります。iPodsやiPhoneによってタッチパネルを人類にとって当たり前の存在にしたと言っても過言ではないAppleが、自社のヘッドホンにタッチ操作を採用しなかったのには明確な意図がありそうです。
コマンドジェスチャとオペレーションジェスチャ
AirPods Maxの設計思想について語るために、コマンドジェスチャとオペレーションジェスチャという2つのジェスチャについて話しておきます。この言葉も渡邊恵太さんが融けるデザインの中で導入された単語ですので、詳しく知りたい方は本を読んでください。ここでは簡単に説明させて頂きます。
コマンドジェスチャはなにか機能を作動させるための一連の身体的動作のことです。例えばmacOSではブラウザでWebサイト見ているときにトラックパッドを2本指で2回タップするとサイトの拡大ができます。手にコントローラを持たずにハンドトラッキングでUIを操作するVR空間上では人差し指と親指を2回くっつける動作をするとメニューが現れたりします。例を上げるときりがないですが、コマンドジェスチャに共通しているのはソフトウェア側がユーザーの一連の動作を認識した後になにか機能を実行するという点です。ユーザーが動作を行っている間は画面上に何も変化が現れないので、コマンドジェスチャは自己帰属感のないジェスチャだと言えます。
一方オペレーションジェスチャとは身体の動きと画面の動きが連動しているジェスチャです。スマホで画面を上下にスワイプしてWebサイトやアプリなどをスクロールする動作もオペレーションジェスチャですし、スマホのホーム画面で左右にスワイプすることでアプリ一覧を切り替えるのもオペレーションジェスチャです。オペレーションジェスチャはユーザーが動作を行っている間も画面が連動して動いているので自己帰属感のあるジェスチャです。普段iOSやmacOSを使っている人はAppleがいかにコマンドジェスチャを排除してオペレーションジェスチャを多く取り入れているかがわかるかと思います。
なぜAirPods Maxには物理ボタンしかないのか
AirPods Maxにタッチパネルがなく物理ボタンしかない理由が2つのジェスチャの特徴とAppleが作ってきたものから推測できそうです。結論から言うと、Appleは視覚情報によるフィードバックによって自己帰属感をユーザーに与えられない場合は、潔く物理ボタンで対応しようという考えを持っているのかと思います。iPhoneのほとんどの操作がタッチ操作でも違和感なく受け入れられるのは、画面が指の動作に絶えず反応して動いているからです。当たり前ですがヘッドホンは顔の側面にあるのでヘッドホンを付けているときは視界にヘッドホンは存在しません。見えないということは視覚情報で自己帰属感を与えるということができません。ヘッドホンにジェスチャ操作を採用するということは必然的にそのジェスチャはコマンドジェスチャになってしまいます。コマンドジェスチャには自己帰属感がないので、そんなものを採用するくらいなら触覚から自己帰属感が感じられる物理ボタンをつけることをAppleは選択したのではないでしょうか。
ここまで書いたことは完全に推測ですが、1つの見方としては間違ってはいないだろうと思います。少なくともAirPods Maxに物理ボタンしかないのはAppleには明確なプロダクトの設計思想があるからで、他社がただ先進的で今っぽいからと無闇矢鱈にタッチ操作を採用するなか、タッチ操作を普及させたAppleがAirPods Maxに物理ボタンしか採用しなかったことにたまらなくかっこよさを感じてしまいます。
おまけの余談ですが、イヤホンのAirPodsにはコマンドジェスチャが採用されています。伸びている白いうどんの部分を上下になぞることで音量の調節ができます。物理ボタンを付けられるデバイスの大きさではないので、仕方なくコマンドジェスチャを採用したのかなぁとか想像しています。
まとめ
カーソルやドラッグのUIを通して自己帰属感には操作と画面のグラフィックの高い連動性が不可欠であること、その自己帰属感をコントロールすることで感触の発生やユーザーの期待を超えた特別な表現を作れることがわかりました。自己帰属感のコントロールは一朝一夕で会得できるものではありません。僕もまだまだへっぽこで、実装が終わってから作り直したくなることも多々あります。上手くなるには実際にいっぱい作るしかないですが、目を養うには優れた演出を見つけたときにその演出で自己帰属感がどうコントロールされているか、余韻はどのように生み出されているかを考えるとよいかと思います。
この記事がデザインや実装の参考になれば幸いです。読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？