スクロール演出

ねらい

Webサイトを下にスクロールしていくと、文字がふわっと現れたり、背景の写真がゆっくり流れて奥行きが出たりする。あの動きはどこから来て、なぜ効くのか。そして――どこからが「やりすぎ」で害になるのか。

このクエストのねらいは一つ。スクロールに連動した動き（リビール、パララックス）の正しい使い方を、理由ごと身につけること。覚えてほしい背骨は短い。

スクロール演出は「読むための動き」であって、「見せ場のための動き」ではない。

そして最後にもう一段。主導権はいつもユーザーが握る。ページがスクロールを勝手に操ると（これをスクロールジャッキングという）、人は酔い、迷い、離れる。なぜそうなるかを歴史からたどる。

スクロールは、Webで一番多い「動きの引き金」

まず事実から。Webサイトで人がいちばん多くする操作は何か。クリックでも入力でもなく、スクロールだ。記事を読むのも、店の写真を眺めるのも、ほぼ全部スクロールしながらやる。

ということは、**スクロールこそが、動きを起こす最大の引き金（トリガー）**になる。指やマウスでページを送る、その量に合わせて、要素を現したり動かしたりできる。ボタンを押させなくても、人は勝手にスクロールしてくれる。だから設計者にとって、これはタダで手に入る一番大きな「きっかけ」だ。

ここを押さえておくと、このあとの話が一本の線でつながる。スクロール演出とは要するに、「人が下に進む量」を入力にして、画面の動きを出力する仕組みのことだ。

リビール ―― スクロールで「現す」

いちばん基本の演出がリビールだ。「reveal（リビール）」は英語で「現す・あらわにする」という意味。下にスクロールして、その要素が画面に入ってきた瞬間に、ふわっと浮かび上がらせる――あれだ。

なぜこれが効くのか。理由は、人の集中力には限りがあるから。一画面に全部いっぺんに見せると、目はどこを見ていいか分からない。リビールは、今この瞬間に読んでほしいものだけを、順番に差し出す。これは前章までで学んだ「視覚的階層（どこを先に見るかの序列）」を、時間を使って作る方法だ。空間で差をつける代わりに、時間で差をつける。

ただし注意。動きは速く・小さく・一度だけ。目安はふわっと0.3〜0.5秒で済ませ、何度もピョコピョコ動かさない。なぜこの幅か。これより長いと「動きを見せられている」と感じて待たされ、これより一瞬すぎると気づけない。0.3〜0.5秒は「気づくが邪魔にならない」ちょうどの幅だ。これはこのクエストだけの思いつきではなく、本書II章「タイミングとイージング」で見たとおり、UIの動きはおおむね200〜500ミリ秒（＝0.2〜0.5秒）に収めるのが実務の目安、という話とつながっている。リビールの仕事は「気づかせる」ことであって、「踊る」ことではない。

パララックス ―― 奥と手前で速さを変えて、奥行きを出す

次がパララックスだ。日本語にすると「視差（しさ）」。これは難しい言葉に見えて、実は誰でも体で知っている現象だ。

電車や車の窓から外を見たことを思い出してほしい。近くの電柱はビュンッと速く流れ、遠くの山はゆっくりとしか動かない。同じ速さで進んでいるのに、近いものほど速く、遠いものほど遅く見える。この「距離によって動く速さが違って見える」ことを視差（パララックス）という。脳はこの速さの差から、「あれは近い、あれは遠い」と奥行きを読み取る。

Webのパララックスは、これを画面の中でわざと作る。手前の層を速く、奥の層（背景）を遅くスクロールさせる。すると平らな画面なのに、奥行きがあるように感じる。立体メガネも3Dも要らない。速さの差だけで、脳が勝手に「奥がある」と思ってくれる。これがパララックスの正体だ。

このパララックスがWebで一気に広まった瞬間が、歴史にはっきり残っている。**2011年、Nike（ナイキ）の「Nike Better World」**というキャンペーンサイトだ。これは一人の天才の作品ではない。広告会社ワイデン+ケネディ（Wieden+Kennedy）が組んだチーム（Seth Weisfeld らが主導し、デザインとインタラクションを Ian Coyle と Duane King が担当）が作った。スクロールするほど背景と手前が違う速さで動き、まるで一本の物語をめくるように見える――そんなページだった。世界中のデザイナーが「スクロールでこんな表現ができるのか」と驚き、一気に真似が広がった。ここがWebパララックスの実質的なスタート地点だと覚えておくといい。

スクロール量を「物語の進み具合」に使う

リビールとパララックスを組み合わせると、もう一段上のことができる。スクロールした量そのものを、物語の進み具合に使うのだ。

ふつう、文章は「読む」もの。でもスクロール演出を使うと、読者が下に進むこと自体が、ページをめくる動作になる。少し進むと製品が一つ現れ、もう少し進むと使い方が見え、最後まで進むと結論にたどり着く。スクロールバーが、いわば本のページ番号の役目を果たす。Nike Better Worldが世界を驚かせたのも、まさにこの「スクロール＝物語を進めるレバー」という感覚だった。

ここで効くのが、前章の「視線誘導」だ。人は自然と上から下へ目を動かす。前章の「視線誘導」で学んだとおり、これは見せたい順番に目を導く一例で、その自然な流れに現れる順番を合わせると、目が迷わない。だから演出は読みの順番を邪魔せず、後押しする形になる。逆に言うと――順番を乱す動き、読みを止める動きは、この時点で「やりすぎ」のサインだ。

やりすぎが生む「酔い・重さ・読みにくさ」

ここからが、このクエストでいちばん大事な「節度」の話だ。スクロール演出は気持ちいい。気持ちいいから、作り手はつい盛りすぎる。盛りすぎると、はっきり三つの害が出る。

• 酔い ―― 画面が大きく速く動き続けると、人は乗り物酔いと同じ状態になる。脳は「見えている動き」と「体で感じる動き」の二つを照らし合わせて世界を理解している。スクロールでは目だけが動き、体は座って止まっているので、この二つが食い違う。脳が混乱して、乗り物酔いと同じ気持ち悪さが出る（これを感覚の不一致という）。とくに動きに敏感な人――乗り物酔いしやすい体質の人など――には本気でつらい。
• 重さ ―― 動きを細かく計算するほど、機械（とくにスマホ）に負担がかかる。スクロールがカクカクしたり、ページが固まったりする。せっかくの演出が、逆に「重い遅いサイト」を作ってしまう。
• 読みにくさ ―― 文字が動いている最中は読めない。現れるのを待ち、止まるのを待ってからやっと読める。演出が増えるほど、読む人は「待ち」ばかりさせられる。

覚えておく合言葉はこれだ。動きは調味料。料理（中身）ではない。 塩は一振りで料理を生かすが、丼一杯入れたら食べられない。動きもまったく同じ。

スクロールジャッキング ―― 主導権を奪う、扱いの難しい一手

害の中でも、扱いを最大限慎重にすべきものがある。スクロールジャッキングだ。「jack（ジャック）」は「乗っ取る」という意味。スクロールジャッキングとは、サイトがスクロールを勝手に乗っ取り、ユーザーの思い通りに動かさないことを指す。

具体的にはこうなる。ちょっとだけ下を見たいのに、ページが勝手に一画面分ガッと飛ぶ。速く読み飛ばしたいのに、わざとゆっくりしか進まない。下に送ったつもりが、横に動き出す。――どれも、「自分の指で動かしている」という当たり前の感覚を奪う。

なぜこれが危ういのか。スクロールは、ユーザーが唯一完全に握っているハンドルだからだ。クリックする場所は作り手が決める。でも「どれだけ・どの速さで進むか」だけは、ずっとユーザーのものだった。それを奪うのは、運転中に勝手にハンドルを横取りされるようなもの。人は驚き、混乱し、多くは「壊れてる」と思って去る。

これは感想ではなく、調べられた事実だ。使いやすさ研究で有名なニールセン・ノーマン・グループ（NN/g）は、スクロールジャッキングを実際にテストして検討した。その結論は、じつは条件付きだ。NN/gは、明確な機能（たとえば「出来事を分かりやすく見せる」など）を果たすときは有効に働きうると認めつつ、見栄えだけのジャッキングでは、多くの参加者が方向感覚を失い「壊れている」と感じたと報告している。つまり「常に悪」ではないが、目的のない乗っ取りの害は測れている。だから掟は「禁止」ではなく「扱いを最大限慎重に」となる――機能を果たせない動きなら、やらない。

原則 ―― 主導権は、いつもユーザーが握る

ここまでの話は、たった一つの原則に集約できる。

コントロール（主導権）は、いつもユーザーが握る。

これはこのクエストだけのルールではない。Webの使いやすさを考えたヤコブ・ニールセンが1994年にまとめた「ユーザビリティ10原則」の中にも、はっきり「ユーザーに主導権と自由を」という項目がある（この10原則は1990年に原型ができ、1994年に現在の形へ整理された）。「自分で操作している」「いつでも引き返せる」という感覚こそが、安心して使えるサイトの土台だ、という古くからの教えだ。

スクロール演出は、この原則の上でだけ許される。要素を現すのも、奥行きを出すのも、物語を進めるのも、すべてユーザーが自分の指で進めている、その上に乗せる。動きが主役になり、ユーザーが脇役にされた瞬間、それは良いデザインではなくなる。

順番をまちがえないこと。主役はいつも、読む人。動きはその後ろを、静かについていく。

逃げ道を用意する ―― prefers-reduced-motion

ここまでで「酔い」の話をした。動きで気持ち悪くなる人は、実際にいる。だから、動きを苦手とする人のために逃げ道を用意するのが、いまの作法だ。

その逃げ道がprefers-reduced-motionだ。これは、ユーザーが自分の端末（スマホやPC）で「動きを減らしてほしい」と設定しておくと、サイト側がその合図を読み取って、演出を控えめにする仕組み。W3C（Webの仕様を決める団体）が正式なメディア特性として定めている。だから「気を利かせて自作する」のではなく、もとから用意された蛇口をひねるだけでいい。

これは原則「主導権はユーザーが握る」の延長だ。動きの量まで、最終的にはユーザーが決められるようにしておく。良いスクロール演出は、必ずこの逃げ道とセットになっている。

見分け方 ―― 良いスクロール演出と悪いスクロール演出

最後に、自分のサイトや人のサイトを見て「これは良いか悪いか」を判断する目を持とう。次の問いに「はい」が多いほど、良い演出だ。

• 動きを全部消しても、内容はちゃんと伝わるか？（動きはおまけか）
• 指で進めた分だけ、素直に画面が進むか？（ハンドルはユーザーの手にあるか）
• 一つの動きは速く・短く・一度きりか？（しつこくないか）
• スマホでもカクつかず軽いか？
• 動きを止めたいユーザーのために、控えめにする逃げ道があるか？

逆に、勝手に飛ぶ・わざと遅い・延々と踊る・読む前に毎回待たされる――こういうサイトは、演出が主役を食っている。直し方はいつも同じだ。足すのではなく、引く。 動きを減らし、主導権をユーザーに返す。

これらの掟は、別々のルールではない。すべて**「読むための動き／主役はユーザー」という一つの思想**から出ている。掟を暗記するのではなく、この思想を覚えれば、新しい場面でも自分で正解を出せる。

譜例

棚（design-gallery）でスクロール演出の実例を見て、本文の「見分け方」がどう現れているか確かめよう。

• 棚：スクロール演出の実例を見る

見るときは、「見分け方」の5つの問い（消しても伝わる／指の分だけ進む／速く短く一度／軽い／止める逃げ道）に、いくつ「はい」が付くかを数えてみるとよい。良い演出ほど、動きより先に内容が立っているはずだ。

練習・チェック

1. よく使うWebサイトを一つ開き、下までスクロールしてみよう。「見分け方」の5つの問いに、いくつ「はい」が付くか数えてみる。
2. スクロールジャッキングを最大限慎重に扱うべき理由を、一文で言えるか。（ヒント：ユーザーが唯一握っている「ハンドル」とは何か）
3. パララックスがなぜ奥行きに見えるのか、電車の窓のたとえを使って、友達に説明してみよう。「近いものは（　）、遠いものは（　）」の空欄を埋められれば合格。