自分のサイトのトップで、メニューの「実制作」を押すと、少し待たされた。サーバーが遅いのだと思った。測ると、サーバーの最初の返事は0.2秒だった。待たせていたのは、リンクの書き方だった。
この研究を一言でいうと──同じページの中へは、読み直さずに動く。
実験：押してから落ち着くまでを、0.2秒ごとに撮った
本番のサイトを、幅1440×高さ900の画面で開いた。トップを見終えた状態から「実制作」を押し、0.2秒ごとに画面を撮った。初めて来た人と同じになるよう、キャッシュは切った。
直す前は、0.2秒で画面がいったん消え、0.4秒で「木下スタジオ」の登場の演出がもう一度始まった。作品の枠は0.8秒で出たが中身は空で、絵がそろうのは1.4秒だった。直したあとは、0.1秒でスクロールが動き出し、0.5秒で着いた。そのあいだ、画面は一度も消えなかった。
体験：遅さより「見失う」方が効いていた
1.4秒は、数字だけ見れば長くない。それでも待たされた感じが強かったのは、押した瞬間に画面が消えて、さっき見た演出がもう一度始まるからだ。進んだのか、トップに戻されたのかが、一瞬わからなくなる。
スクロールなら、0.5秒のあいだずっと、自分がページのどこを通っているかが見えている。行き先へ向かう動きそのものが、「いま進んでいる」という返事になる。
速さは秒数だけでは決まらない。途中で、自分のいる場所を見失わないかで決まる。
登場の演出は、初めて来た人に一度だけ見せるために作ったものだった。同じ人が2回目、3回目と見せられると、迎える演出から「待たせる演出」に変わる。演出は、何回目に見るかで意味が変わる。
原因：全ページ共通のメニューを、トップにもそのまま貼っていた
メニューは、全ページで同じ部品を使っている。ほかのページで「実制作」を押すなら、トップへ移ってからその場所へ飛ぶ /index.html#design-works が正しい。同じ書き方が、トップにもそのまま入っていた。
トップは「/」でも開く。「/」を見ている人にとって「/index.html」は別の住所なので、ブラウザはページを最初から読み直す。トップでだけ、自分自身を読み直していた。85ファイルを読み直し、まだ動いている登場の演出が9つやり直しになっていた。
| 押す場所 | 書き方 | 起きること |
|---|---|---|
| トップ | #design-works | ページの中でスクロールする（読み直し0回） |
| ほかのページ | /index.html#design-works | トップを開いてから、その場所へ飛ぶ |
トップのメニューだけを、ページの中の移動に書き換えた。「できること」「研究作品」「開発の裏側」「Contact」など、トップの中を指す6本が同じだった。
決めたこと
- 共通の部品を貼るときは、「このページで押したら何が起きるか」をページごとに確かめる。
- 同じページの中へは、
#だけで動く。 - 遅いと感じたら、サーバーを疑う前に、押してから落ち着くまでを撮って並べる。
- 登場の演出は、初めて来た人のためのもの。2回目に見せていないかを確かめる。
あなたのサイトのメニューは、いま開いているページの中へ向かうとき、何をしていますか。