トランジションとマイクロインタラクション

ねらい

スマホの画面を思い出してほしい。アプリのアイコンを押すと、その四角がぐーっと広がって画面いっぱいになる。フォルダを開くと、中身がそのフォルダの位置からふわっと出てくる。なぜ、いきなりパッと切り替わらないのだろう。

答えはこうだ。パッと切り替わると、人は「何が起きたか」を見失うから。一瞬で画面Aが画面Bになると、脳は「これは別物だ」と感じてしまう。でも、Aが動きながらBに変わると、「ああ、さっきのアイツが姿を変えたんだな」と分かる。動きが、AとBをつないでくれる。

このクエストのねらいは一つ。動きは飾りではなく「説明」だと理解すること。トランジション（画面のつなぎの動き）は「どこから来てどこへ行くか」を教える地図。マイクロインタラクション（押すとへこむ等の小さな反応）は「ちゃんと効きましたよ」という返事。どちらも、目に見えない「因果」と「状態」を、動きで見せている。

何への反作用だったか ―― 瞬間切り替えの時代

新しい考え方は、いつも前の時代の不便さから生まれる。トランジションも同じだ。

昔のコンピューターは非力だった。画面を動かす余裕などなく、操作するたびに画面がパッパッと一瞬で入れ替わった。1枚の紙芝居を、次の紙芝居に差し替えるような感じ。これを「瞬間切り替え」と呼ぶことにしよう。これだと、人はしょっちゅう「あれ、いま何が起きた？」「ここはどこ？」と迷子になった。

なぜ迷うのか。人間の脳は、もともと自然界の動きを読むようにできているからだ。リンゴが木から落ちるとき、リンゴは瞬間移動しない。空中をスーッと通って落ちる。だから私たちは「さっき上にあったリンゴ＝いま下にあるリンゴ」と無意識に結びつけられる。ポイントは途中の動きだ。脳には、途中がつながって見えるものを「一つのモノの動き」として追う性質がある。途中が連続して見えるから、前と後が同じモノだと分かるのだ。

瞬間切り替えは、この「途中」をすっ飛ばす。だから脳がついていけない。コンピューターが速くなり、画面をなめらかに動かす力を持ったとき、デザイナーたちはこう考えた。自然界と同じように、途中を見せよう。そうすれば人は迷わない、と。これがトランジションの出発点だ。

トランジション ―― 動きは「地図」になる

トランジションとは、画面や要素が「状態A」から「状態B」へ変わるときの、つなぎの動きのことだ。トランジット（移動・乗り換え）と同じ語源で、「移り変わり」を意味する。

ここで大事なのは、動きが「位置の関係」を教えてくれるという点だ。たとえば、一覧画面で「3番目の写真」をタップしたら、その写真が3番目の場所からぐーっと拡大して詳細画面になる。すると人は、無意識にこう理解する。「いま見ている大きい写真は、さっきの3番目だ」「戻るときは、また3番目の場所に縮んでいくはず」。

これが「地図」という意味だ。トランジションは、**どこから来て（出発点）、どこへ行くか（到着点）**を、動きの方向と軌跡で示す。だから人は、頭の中に「画面と画面の位置関係」の地図を描ける。逆に、どの写真を押しても同じ「パッ」で詳細が出るなら、この地図は描けない。戻ったとき自分がどこにいたか分からなくなる。

マイクロインタラクション ―― 動きは「返事」になる

ここにも「何への反作用か」がある。初期のWebは、ボタンを押したあと画面が真っ白で固まる時代だった。効いたのか分からず、不安になって二度押ししてしまう。「いま注文が二重になったかも」とヒヤッとする――あの感じだ。その不安への返答として、操作にすぐ小さな反応を返すという考えが重んじられた。これがマイクロインタラクションの土台になった。

マイクロインタラクションとは、マイクロ（とても小さい）＋インタラクション（やりとり）。つまりごく小さなやりとりの反応のこと。ボタンを押すと少しへこむ。「いいね」を押すとハートがポンと跳ねる。スイッチを切り替えるとツマミがスッと滑る。こういう、操作に対する小さな見た目の変化のことだ。

この言葉と考え方を体系立てたのが、デザイナーのダン・サファーで、著書『Microinteractions』（2013年）で広めた。彼によれば、マイクロインタラクションは小さいが、製品の印象を決定づける重要な部品だ。

なぜ小さな反応が要るのか。それは「フィードバック」（操作に対する反応・返事）を返すためだ。人は何か操作したとき、心の中で「ちゃんと効いた？」と不安になる。ボタンを押したのに何も起きないと、「壊れてる？」「もう一回押す？」と迷う。ここで、ボタンがへこんだり色が変わったりすれば、それは「受け取りました」という返事になる。会話で相手が「うん」とうなずいてくれるのと同じだ。うなずきが無い会話は不安だろう。画面も同じなのだ。

ちなみに、この「フィードバックを返せ」という考えは、サファーが急に思いついたものではない。使いやすさの研究者ヤコブ・ニールセンが1994年にまとめた「ユーザビリティ10原則（使いやすさの10のチェック項目）」の一番目が、まさに「いま“何が起きているか（処理中なのか、終わったのか）”を、いつもユーザーに見せ続けよ」だった。マイクロインタラクションは、この古い原則を「小さな動き」で実現する、現代的なやり方なのだ。継承である。

状態を語る ―― 動きは「いま何が起きているか」を伝える

トランジションが「場所の地図」なら、マイクロインタラクションは「状態の表示」も担う。状態とは「いま、このモノがどういう様子か」のこと。たとえばボタンには、ふつう・指が乗った（ホバー）・押している最中・読み込み中・完了、といったいくつもの状態がある。

ここで言う「状態」には、二つの大きさがあると思っておくとよい。一つはボタン1個の様子（押している最中か、など）。もう一つはシステム全体の様子（いま処理中か、終わったか）だ。さっきニールセンが「見せ続けよ」と言ったのは後者。どちらも「いまどうなっているか」を見せる、という点では同じ仲間だ。

動きは、この状態の移り変わりを見せる。「いいね」を例にしよう。押す前は白いハート。押した瞬間、ハートがポンと大きく跳ねて、赤く染まる。この跳ねて染まる動きが、「いま、白→赤に状態が変わりましたよ」と語っている。もし瞬間的に色だけ変わったら、変化に気づきにくい。動きが、変化に注意を向けさせるのだ。

読み込み中のクルクル回るマーク（スピナー）も同じ。あれは「いま処理中。固まってないよ、待ってね」という状態の動く看板だ。回り続ける動きがあるから、人は「動いている＝生きている」と分かり、安心して待てる。

要素の連続性を保て ―― Material Designの原則

ここまでをまとめる強力な考え方が、Googleが2014年に公開したマテリアルデザイン（Material Design）という設計の指針の中にある。そのモーション（動き）の章の核心は、ひとことで言えば**「要素（＝画面の部品。ボタンやカードなど）を、つながった一つのモノとして動かせ」**という原則だ。公式の言葉では visual continuity（ヴィジュアル・コンティニュイティ＝視覚的な連続性）と呼ぶ。難しく聞こえるが、意味は単純。画面の上のモノは、消えたり湧いたりさせず、ちゃんと“つながった一つのモノ”として動かせ、ということだ。

たとえばカードをタップして詳細を開くとき。カードを消して、別の詳細画面を新しく出す――これはダメな例。Materialの考えでは、そのカードそのものが拡大して詳細画面になる。同じモノが、姿を変えながら連続している。だから人は「これはさっきのカードだ」と追える。

なぜここまで「つながり」にこだわるのか。理由はもう図2で見た通りだ。人間の脳は、自然界のモノが急に消えたり生まれたりしない世界に慣れている。画面でも同じルールを守れば、脳は楽に追える。現実の物理に逆らわない動き――これがMaterialの根っこにある思想だ。ディズニーのアニメーターが1930年代に確立し、のちに1冊にまとめた「本物らしく見せる動きの法則」（典拠5）を、画面の上に持ち込んだ、とも言える。

だから動きは「意味」を持つ ―― 飾りではない

ここがこのクエストの肝だ。良い動きは、すべて「意味」を運んでいる。逆に言えば、意味を運ばない動き――ただ派手なだけ、ただクルクル回るだけ――は、ノイズ（じゃまな雑音）でしかない。

整理しよう。動きが運ぶ意味は、大きく三つだ。

• 因果――「あなたがこれをしたから、これが起きた」を結ぶ。押す→へこむ、で原因と結果が見える。
• 位置――「これはどこから来て、どこへ行くか」を示す。トランジションの地図。
• 状態――「いま、何が起きているか」を見せる。読み込み中・完了・変化した、など。

ことわっておくと、この因果・位置・状態という3つの分け方は、本書がここまでの先人の原則（サファー・ニールセン・ノーマン・Material）を1本にまとめ直した、本書なりの整理だ。先人の誰かがこの3語で語ったわけではない。だが、この3つのどれかを伝えているなら、その動きには存在理由がある。どれも伝えていないなら、その動きは消した方がいい。**「この動きは、因果・位置・状態のどれを伝えている？」**と自問する。答えられないなら、それは飾りだ。デザインの世界では「足す」より「引く」が効くことが多い――動きも同じだ。

見分け方 ―― 良い動き・悪い動きを見抜く

街やアプリで動きを見たとき、「これは説明か、飾りか」を見抜く目を持とう。次が当てはまるほど、それは説明としての動きで、良い動きだ。

• 押した・触れた操作に対して反応が返る（フィードバックがある）
• 画面の切り替わりで、前の要素が次の要素につながっている（消えて湧いていない）
• 動きの方向に意味がある（戻るときは来た方向へ帰る、など）
• 速くて、じゃまにならない（おおむね0.2〜0.3秒、大きな動きでも0.4秒ほど。これより短いと変化に気づけず、長いと“待たされてる”と感じ始める。Materialのモーション指針も、標準のトランジションをこのくらいの長さに置いている）

逆に、操作と無関係に動く・毎回ながながと演出が入る・方向がバラバラ、なら、それは飾りの動きを疑う。

これらはバラバラなルールではなく、すべて一つの思想から出ている。動きは、目に見えない因果・位置・状態を、目に見えるようにする説明である。この一点を覚えておけば、掟は自然に思い出せる。

譜例

棚（design-gallery）で、トランジションやマイクロインタラクションが効いている実例を見て、本文の「因果・位置・状態」のどれを伝えているか確かめよう。

• 棚：動きの実例を見る

見るときは、図7の3つ（因果・位置・状態）のどれを伝えている動きか、声に出して言ってみるとよい。言えない動きがあれば、それは「飾り」かもしれない。

練習・チェック

1. 自分のスマホで、アプリのアイコンを押してから開くまでの動きをよく見よう。その動きは「位置」を伝えているか？（ヒント：アイコンの場所から広がっているか）
2. 「いいね」ボタンの跳ねる動きは、図7の3つ（因果・位置・状態）のうちどれを伝えているか、一言で言えるか。
3. 身近なアプリで「これは飾りでは？」と思う動きを1つ探し、図7のチェックに当てはめてみよう。因果・位置・状態のどれも伝えていなければ、それは消した方が良い動きだ。