動きの節度

ねらい

動き編もこれで最後だ。ここまで、動かし方（タイミング・イージング・状態変化・スクロール演出）を学んできた。だから今のあなたは、たくさん動かせる。でも、動かせることと、動かすべきことは別だ。

このクエストのねらいは一つ。「どこまで動かすか」ではなく「どこで止めるか」を学ぶこと。動きは目を奪う強い道具だ。強い道具ほど、振り回すと事故が起きる。だからこの章のキーワードは「足さない」。準備編やスイス様式で出てきたあの思想――意味のないものを置かない――の、動き版だと思ってほしい。

そして、もう一つ。動きには倫理がある。世の中には、画面が動くだけで気分が悪くなる人がいる。その人たちを守るのは、好みではなくやるべきことだ。最後にそれを扱う。

なぜ動きは「引き算」が品なのか ―― 強い道具だから

まず、いちばん大事な事実から。人の目は、動くものに勝てない。 これは性格やセンスの話ではなく、体のつくりの話だ。

大昔、人間の祖先にとって「視界のはしで何かが動いた」は命にかかわる合図だった。草むらが動く＝獣かもしれない。だから、動くものへ反射的に目が向く脳ができた。今のあなたにも、その脳がそのまま残っている。だから画面のどこかが動くと、読んでいた文章から目が勝手に奪われる。止められない。

ここに動きの怖さがある。動きは「目を向けさせる」力が桁違いに強い。強いから、むやみに使うと、見せたい本命まで邪魔してしまう。 全部が動いている画面は、全部が叫んでいる教室と同じ。誰の声も届かない。

これは新しい発見ではない。ディズニーのアニメーターたちが1930年代に現場で見つけ、1981年に2人がそれを一冊の本にまとめた「ディズニー12原則」。その12個の最後に挙げられる項目が、アピール（appeal＝見ていて心地よく、見るべきところが分かること）だ。むやみに動かすことではなく、伝わる動きに整えること。動きの目的は、昔から「見せる」であって「目立つ」ではなかった。

動きには「仕事」が要る ―― 三つの仕事

では、どんな動きなら残してよくて、どんな動きを消すべきか。判断の物差しはシンプルだ。その動きに仕事はあるか。 動きが許されるのは、次の三つの仕事のどれかをしているときだけ。それ以外は、原則、消す。

1. 注意誘導 … 「次はここを見て」と目を導く。たとえば、フォームの送信ボタンがそっと色づく。
2. 関係の説明 … 「これとこれはつながっている」を見せる。たとえば、押したカードがスッと開いて中身になる。閉じれば元のカードに戻る。動きが「開いた／閉じた」の関係を語る。
3. 状態のフィードバック … 「いま、こう変わったよ」と知らせる。たとえば、ボタンを押した瞬間に少し沈む。読み込み中はくるくる回る。

この三つは、言いかえれば全部「意味を伝える」だ。逆に、ただ「かっこいいから」「動かせるから」動いているだけのものには仕事がない。それは飾り。準備編やスイス様式で学んだとおり、意味のない飾りは置かない。動きでも同じ。仕事を言えない動きは消す。 これが背骨だ。

同時に動かすのは、原則ひとつ ―― 目は一つしか追えない

次は量の話。一つの画面で、いくつまで同時に動かしていいか。答えは――原則ひとつ。

理由は図2で見たとおりだ。動くものには、目が勝手に奪われる。そして、奪われる先は一度に一つだ。だから二つ同時に動くと、目は取り合いになって、どちらも中途半端になる。三つ動けば、もう何も読めない。動きを足すほど、一つひとつの動きの力は薄まる。

だから、こう考えるといい。動きは「ここを見て」という指さしだ。同時に二か所を指させば、指さしの意味が消える。 見せたい順番があるなら、同時に出さず、順番に動かす。まず見出し、次に本文、最後にボタン――という具合に、時間をずらして一つずつ。これなら目は迷わず、順番どおりに乗っていける。

速さは控えめ・短め ―― 気づくか気づかないかがちょうどいい

動きの「強さ」を決めるのは、量だけではない。速さと長さもだ。そして、ここでも答えは引き算――控えめに、短く。

ありがちな失敗は、動きを「たっぷり・ゆっくり」見せてしまうこと。作った本人は楽しいが、使う人は毎回その時間ぶん待たされる。ボタンを押すたびに、ふわ……っと1秒かけて開くメニュー。一度なら良くても、十回押せば十秒の足止めだ。動きは演出である前に、操作の反応だ。反応は速いほどいい。

目安として、画面のなかの小さな動き（ボタンや小さなパネル）は、だいたい0.1〜0.3秒くらい。「動いた」と気づくか気づかないか、くらいで終わるのがちょうどいい。これは厳密な数値というより、現代のUI（GoogleのMaterial Designなど）が現場で使っている実務的な目安だ。動きは、主役ではなく潤滑油。気づかせるためではなく、つながりを滑らかにするためにある。気づかせにいった時点で、たいていやりすぎだ。

必須の倫理 ―― めまいを起こす人がいる（prefers-reduced-motion）

ここからが、このクエストでいちばん大事な部分だ。好みの話ではなく、守らなければならない話。

まず、身近な話から。車の後ろの席で本を読むと、気持ち悪くなる人がいる。あれはなぜか。目は「止まっている本」を見ているのに、体は「車で動いている」のを感じている。目が言うことと、体が言うことが食い違う。この食い違いが、酔いを生む。

そして、この食い違いに弱い体質の人がいる。その人たちは、画面が大きく動くだけで、車酔いと同じめまい・吐き気が起きる。たとえばスクロールで背景と前景が別々の速さで流れる演出（パララックス）。あなたには「おしゃれ」でも、ある人にとっては乗り物酔いと同じ苦しさになる。これは気のせいではなく、体の仕組みだ。

これは少数の特別な人の話ではない。誰でも、車の後部座席で本を読むと酔う。あれと同じことが、あなたの作った派手なサイトで起きうる。動きは、人を物理的に具合悪くさせることがある。 だからWebには、これを守るための仕組みが用意されている。

（なお、この「体のバランスを感じる耳の奥の器官」を前庭という。前庭の働きが乱れやすい人＝前庭障害の人は、特に酔いやすい。名前は覚えなくていい。大事なのは「動きは人を酔わせうる」という事実のほうだ。）

その仕組みが prefers-reduced-motion（動きを減らす設定）だ。スマホやPCには「視差効果を減らす／動きを減らす」という設定がある。これをオンにしている人は、はっきり「動きはいらない」と意思表示している。Webサイトは、CSSの数行でこの希望を読み取れる。読み取れたら、大きな動きを止めて、パッと切り替わる静かな表示に差し替える。これを尊重するのは、思いやりであると同時にアクセシビリティ（誰もが使える状態にすること）の基本だ。

掟はこうだ。動きを足したら、必ず「減らす設定の人向けの止めるコード」もセットで書く。 動きとその停止は、いつも二つで一組。片方だけは未完成だと考える。

なお、この「止める手段を用意する」という考えは、ルールとしても明文化されている。Webアクセシビリティの世界基準WCAGには、**「動くものを止める手段を用意せよ」という決まりが2008年から入っている（2.0の達成基準2.2.2「Pause, Stop, Hide」。これは最も基本の必須ライン＝レベルAだ）。さらに2018年の2.1では、「やり取りで生じる動きは無効にできること」**という基準（2.3.3「Animation from Interactions」）が加わり、前庭障害の人がめまい・吐き気を起こしうると明記された（ただしこちらは最上位のレベルAAA。任意性の高い、より踏み込んだ段だ）。

つまり、「止める手段を用意するのは義務」という土台はレベルAの2.2.2が支えている。そこに、健康上の理由（人を物理的に酔わせうる）が重なる。あなたの好みではなく、業界の良識として守るべきことだと覚えておくといい。prefers-reduced-motion は、それをコードで叶えるための仕組みだ。

見分け方 ―― やりすぎサイトの三つのサイン

最後に、自分や他人の作ったものが「やりすぎ」かどうかを見抜く目を持とう。次のどれかに当てはまったら、引き算のサインだ。

• 目のやり場が定まらない … 同時にあちこち動いていて、どこを見ればいいか分からない（→ 同時にひとつへ）。
• 操作のたびに待たされる … 開く・閉じる・めくるが、いちいち長い（→ 速く・短く）。
• 止める術がない … 「動きを減らす」設定をオンにしても、派手な動きが止まらない（→ prefers-reduced-motion を尊重）。

この三つは、結局すべて一つの問いに戻る。その動きに、仕事はあるか。 仕事のある動きだけを、控えめに、止められる形で。それが「動きの節度」だ。動き編で学んだ技術は、使うためではなく、選んで使い、選んで止めるためにある。ここまで来れば、あなたはもう、動かせるだけでなく、止められる。

譜例

棚（design-gallery）で、動きの「効いている」例と「うるさい」例を見比べよう。気持ちよく感じるサイトは、たいてい同時に動くのは一つで、速く、止められる。逆にしんどいサイトは、図8の三サインのどれかを踏んでいる。

• 棚：動きの実例を見る

見るときは、OSの「動きを減らす」設定を一度オンにして、同じサイトをもう一度開いてみるとよい。動きがきちんと消えるか――それが、作り手が節度を持っているかどうかの、いちばん正直な答え合わせだ。

練習・チェック

1. 自分の好きなWebサイトを一つ開き、図8の三サインのうちいくつ当てはまるか数えてみよう。一つでも当てはまれば、引き算の余地がある。
2. 「仕事のない動きは消す」を一文で説明できるか。（ヒント：動きの三つの仕事＝注意誘導・関係の説明・状態のフィードバック）
3. 使っているスマホかPCで「動きを減らす（視差効果を減らす）」設定を探し、オンにしてみよう。そのうえで好きなサイトを開き、派手な動きがちゃんと静かになるかを確かめる。止まらなければ、そのサイトは掟を一つ破っている。