スタガー

定義

スタガーは、複数の要素をいっせいに表示するのではなく、項目ごとにごくわずかな時間差をつけて 順番に登場させるテクニックです。リストやカードの束が画面に入ってくるとき、全部が同時にパッと 出るのではなく、まず一つ目が現れ、ほんの少し遅れて二つ目、さらに少し遅れて三つ目、と続いていく イメージです。各項目の遅延は数十ミリ秒ほどで、単体では気づかないくらい短いのですが、この小さな ずれが積み重なると、要素が波のように順番に流れ込んでくるリズムが生まれます。おかげで視線が自然と 上から下へ、手前から奥へと流れに沿って動いていきます。

なぜ重要か

複数の項目がまったく同じ瞬間に現れると、画面が一度にガラッと変わって、目がどこを先に見ればよいか 迷ってしまいます。スタガーは登場に順序を与えることで、この負担をやわらげます。項目が順番に入って くると視線は自然とその流れを追いかけ、コンテンツの流れや構造がさりげなく伝わります。さらに順を追った 動きは画面に生き生きとした印象と完成度を添え、同じリストでもぐっと洗練され、丁寧に作り込まれた ように感じられます。ただし、この効果の目的はあくまで視線をやわらかく導くことにあります。派手さを 見せたくて時間差を大きく広げると、かえってコンテンツが遅れて現れてもどかしくなるので、ユーザーを 待たせない範囲を守ることが大切です。つまりスタガーは派手さのための演出ではなく、たくさんの項目が 一度に押し寄せるときの負担を減らすための案内に近いものなのです。

よくある間違い

• 項目ごとの時間差を大きくしすぎることです。一つひとつがはっきり遅れて現れると、順を追った リズムではなく単なる遅い遅延に感じられ、リスト全体が出そろうまでユーザーがひたすら待たされます。
• 項目が何十個もあるのに、その全部に時間差をかけることです。後ろのほうの項目まで一つずつ順番に 登場していくと、最後が現れるころには最初を見てからだいぶ経ってしまい、画面が埋まるまで動きが だらだらと間延びしてしまいます。
• スクロールするたびに同じリストのスタガーを毎回やり直すことです。初めて現れるときはよくても、 画面を行き来するたびに項目が何度も流れ込んでくると、かえって目が疲れてわずらわしく感じられます。

実務のヒント

• 項目ごとの遅延は30〜80ミリ秒くらいがおおむね心地よいです。この範囲なら順を追ったリズムが 生きつつ、全体が出そろうまでの時間ももどかしくならない程度に保てます。
• 項目がとても多いときは、最初の数個だけにスタガーを適用し、残りはまとめて表示させましょう。 画面に最初に入ってくる数個だけでもリズムは十分に伝わり、後ろは待たされることなく埋まります。
• スタガーは、各項目の登場のしかたをトランスフォームとトランジションで決めたうえで、その開始 タイミングだけを少しずつずらすものです。項目一つの動きそのものが自然でないと順番効果もなめらかに つながらないので、まず一項目の登場を整えてから時間差を重ねる順序で作業するとよいでしょう。

関連概念