【ユーザー離脱阻止！】画面遷移アニメーション実装時の注意点

JavaScript

画面遷移アニメーションって楽しいけど、長くてイラっとする時ない？

こんな疑問に答えていきます。

本記事の内容

画面遷移アニメーション実装時の注意点

本記事を対象とする方

フロントエンドエンジニアを目指す方
Webデザイナーを目指す方

この記事を書いている僕はプログラミング歴2年6ヶ月です。webエンジニアとして”社内転職”しました。

ページロード遅延でユーザー離脱？

デザインに凝りすぎるとユーザー離脱の原因になります。

画面遷移アニメーションは、ユーザーを楽しませるデザイン手法であり、Webサイトの好感度に繋がります。一方で、手の込んだデザインを組み込みすぎてページ表示速度が遅くなる要因にもなり、ユーザーをイライラさせて離脱させてしまう要因にもなり得ます。ユーザーは目的を持ってページを閲覧している時でも、何となくWebページを見ている時でも遅延に敏感だからです。

コンピューター分野では有名な「Response Times: The 3 Important Limits」という研究があります。この研究では人間がコンピューターとやり取りする際の応答基準が設けられています。それによると、人間はコンピューターを操作する際、一連のナビゲーションが間断なく進んでいると感じられる限界がたったの「1秒」と言われています。間断なく進むということは、遅延がなく動くという意味ですが、たとえばWebページであれば、そのページを見るためにクリックして表示される時間が「1秒」以上だと待つことが出来ないということになります。たったの1秒です。※ちなみにUI操作は0.1秒が限界値とされている。

いくら魅力的なデザインを用意しても「1秒」以上時間がかかるとユーザーが離れてしまう割合が高くなっていきます。本末転倒でもったいない話ですね。「Response Times: The 3 Important Limits」に関して、英語版となりますが、下記リンクから確認できます。

Link – 外部サイト –

Response Times: The 3 Important Limits

以上のことから、画面遷移アニメーションはページロード速度を意識した実装が好ましいでしょう。

ブラウザバックの対処

次にブラウザバックについて説明します。

ブラウザバックとはWebページの閲覧中に、一つ前に閲覧していたページに戻ることを指します。通常、ブラウザの左上に矢印ボタンがあると思いますが、それをクリックすることで前のページに戻ることができます。また、マウス操作やスマホのスワイプでも同様のことが可能ですよね。

画面遷移アニメーションは、ページロードイベントを利用して実装することが多いですが、ブラウザバックではページロードイベント自体が発生しません。なのでブラウザバックされた時の処理を予め設定しておきましょうということなんです。といっても特に難しいことではなく、以下のコードで実現できます。


      
        window.addEventListner('pageshow', e => {
          if (e.persisted) {
              window.location.reload();
            }
        });

pageshowイベントは、ブラウザがHTML文書を表示した時に起こるイベントです。例えば、最初にページを読み込んだ時、ブラウザの進む、戻るボタンを押した時などです。e.persistedは、webページをキャッシュから読み込んだか、直接読み込んだかを返すプロパティです。戻り値はBoolean値となります。window.location.reload();は、強制的に文書の再読み込みを行います。つまり、webページがキャッシュから読み込まれたら、強制リロードを行うという処理になります。

ブラウザバック時に、画面遷移アニーメーションが必要かどうかは開発側で検討する余地がありますが、抜かりなく実装している印象を与えるならば必須となるでしょう。

実例【コードあり】

実際にアニメーションを実装してみました。

上記で説明したページロード速度、ブラウザバックに注意しながら画面遷移アニメーションを実装してみました。下記サンプルページへのリンクと実装コードになります。

Link – 関連ページ –

サンプルページはこちら


      【CSS】
      
        body {
          transition: all 0.2s;
        }
        
        body.hidden {
          background-color: #ffffff;
          opacity: 0;
        }
        
        .screenani {
          height: 100vh;
          position: absolute;
          left: 0;
          top: 0;
          width: 100vw;
          -webkit-animation: screenani 0.5s 0s;
                  animation: screenani 0.5s 0s;
        }
        @-webkit-keyframes screenani {
          0% {
            background-color: #000000;
            transform: scale(1, 1);
          }
          50% {
            transform: scale(1, 0.01);
          }
          100% {
            transform: scale(1, 0);
          }
        }
        @keyframes screenani {
          0% {
            background-color: #000000;
            transform: scale(1, 1);
          }
          50% {
            transform: scale(1, 0.01);
          }
          100% {
            transform: scale(1, 0);
          }
        }
        
        .screenani.hidden {
          display: none;
        }


      【JavaScript】
      
        function screenAnimation() {
          const body = document.querySelector('body');
          body.classList.add('hidden');
          window.addEventListener('DOMContentLoaded', () => {
            const screen = document.createElement('div');
            screen.classList.add('screenani');
            html.appendChild(screen);
            screen.addEventListener('animationend', () => {
              body.classList.remove('hidden');
              html.removeChild(screen);
            });
          });
        }
        
        function pageReload() {
          window.addEventListener('pageshow', e =>{
            if(e.persisted) {
              window.location.reload();
            }
          });
        }
        
        if (url_path === '/screenanimation/') {
          pageReload();
          screenAnimation();
        }

簡単に説明すると、サンプルページが読み込まれたら、htmlの最後の子要素としてdivを追加して、CSSでスタイリングするという内容になっています。ポイントはanimation-durationを0.5秒に設定している点です。ページロードの時間は1秒が理想的です。コンテンツ量にもよって当然異なりますが、ページロードにかかる時間を0.5秒だとしたら、使える時間は残り0.5秒です。よってアニメーションの時間は0.5秒になります。

今回のアニメーション自体は全く面白みのないデザインです。もちろん時間を増やせばその分色んなデザイン表現が可能になります。時間がかかっても良いからリッチなデザインなのか、それともページロードのスピードを重視するのか、これはブランディングに関わる考え方の違いかと思います。

コアなファンならば時間がかかっても待ってくれるかもしれません。そうでない場合はスピード重視じゃないと離れてしまうかもしれない。もちろん両方を実現できればそれに越したことはありませんが、どこかで限界は訪れます。個人的にはスピード重視派ですね。シンプルでわかりやすいほうが好きですし、リッチなデザインなら別の場所で表現できるからです。