Web制作・ホームページ制作会社 埼玉・浦和で依頼するならTABCODE(タブコード)へ。

ユーザーの記憶に残る非同期画面遷移アニメーション「barba.js」について

角田 角田
フロントエンド

はじめまして。タブコードでアートディレクター兼デザイナーとして活動しております、角田(かくた)と申します。 お客さまにとっても、制作者さまにとっても役立つ情報を発信していきますのでよろしくお願い致します。

初回は「barba.js」を実装するメリットと、その注意点についてのご紹介です。フロントエンドでの実装方法を詳細に説明した記事はネットにたくさんアップされていますので、ウェブプロモーションという観点から、非同期画面遷移アニメーションがどのように役立つのかをご紹介いたします。

barba.jsとは?

barba.jsとは、pushStateとAjaxをまとめて使いやすくしたpjaxをさらに使いやすくしたjsライブラリです。下記の弊社実績サイトのような、非同期画面遷移アニメーションを設定することができます。


弊社でのbarba.js実装例 - 日本郵便 - &Post

barba.jsを導入するメリット

・新鮮な体験の提供
動きや演出によってユーザーが面白い、楽しいと感じられるウェブサイトは、より触りたくなるものです。「新鮮なユーザー体験を提供することでウェブサイトの内容を隅々まで閲覧してもらう」私はこれがbarba.jsを導入する最大のメリットだと考えます。

・ウェブサイト全体でのブランドイメージの訴求
遷移アニメーションにロゴやブランドイメージを使用することで、ウェブサイト全体で一貫したブランディングを展開できます。ウェブサイトの内容を全て閲覧しきらなくても、ユーザーの記憶に残るというのは、ウェブプロモーションの本懐でもあるでしょう。

・ページ遷移が高速
barba.jsではhtml内の指定した部分のソースを切り替えることで画面遷移が実行されます。毎回ヘッダ・フッタを読み込む必要がないため、ページ遷移スピードの高速化が期待できます。この処理がデメリットにもなりうるので、その点については下記注意点にて後述いたします。

導入する時の注意点

・ ウェブサイトによっては不向き
目新しい演出や動きを忌避するユーザー層・ブランディングを目的としないウェブサイトには過剰な演出は不要です。間違った使い方をすることで、サイトの離脱率を上昇させることになり、結果コンバージョン率を落としてしまいます。メリットを最大限に享受できるウェブサイトでのみ実装を検討すると良いでしょう。

・実際にhtmlが切り替わっている訳ではない
barba.jsではAjaxを利用してhtmlの一部を切り替える処理を行なっています。これにより、デフォルトのままではhead内のmetaタグを切り替えられない、URLが切り替わらない、という問題が発生します。いずれも開発工程で回避可能な問題ではありますが、これを怠るとSEO面で大きなマイナスの影響を受けるので注意が必要です。

・WordpressやECCUBE、CSS、jsとの競合問題
フロントエンドエンジニアの工数をさくのがCMSやCSSとの競合問題。特にWordpressを導入したサイトでbarba.jsを動かす場合、Wordpressのプラグインが動かなくなるといった不具合が発生しがちですので、それらを考慮した工数管理が必要になります。

ウェブにおけるインタラクションと画面遷移

barba.jsに限らず、ウェブサイト上のインタラクションは格好いい、モダンである、という印象を与えますが、インタラクションの目的はUXの向上であり、それぞれのウェブサイトの目的を達成するのに役立つかどうか、の1点に集約されます。また、ウェブサイトの画面遷移(ページ移動)は、ユーザーにとっては障壁のひとつで、画面遷移を面倒くさいと感じたユーザーはその時点でページから離脱してしまいます。

このふたつをうまく繋ぐのがbarba.js。試してみてはいかがでしょうか?

その他のエントリー