Webページは時代を経るにつれて進化を遂げ、今までにさまざまな構築手法が登場してきました。近年ではよりネイティブアプリのように機能を拡張できる「PWA」といった手法が話題を呼んでいます。
Webページの構築手法は、目的等でよく吟味して選ぶ必要があります。たとえばJavaScriptを活用する「シングルページアプリケーション」という技術は動作性などにメリットがある分、SEO面ではデメリットもあるので導入の際は注意しましょう。
今回はシングルページアプリケーションとは何か、その意味やメリット・デメリットをご紹介していきます。
1.JavaScriptで要素切り替え！シングルページアプリケーションとは
シングルページアプリケーションとは英語で「Single Page Application（SPA）」と書きます。Webページの構築手法の1つであり、動的にページ内容を操作してユーザーに提示するのが特徴です。
動的と書いているのは、シングルページアプリケーションのコンテンツ読み込みにJavaScriptが活用されるからです。通常のWebページにもJavaScriptは使われていますが、シングルページアプリケーションではより密接にJavaScriptが動作に関係してきます。
具体的には通常のWebページでは複数のコンテンツをページ切り替えを行いながら表示するのに対して、シングルページアプリケーションではJavaScriptを使いながら単一のページで複数のコンテンツを表示するのが違いです。つまり単一のURLで複数のコンテンツを見せられるように、HTML要素をJavaScriptで丸ごと書き換えているのがシングルページアプリケーションになります。
シングルページアプリケーションの実例としては、たとえば「Googleマップ」が挙げられます。Googleマップでは店舗情報をクリック等で切り替える際、ページを再読み込みせず新しい情報を提示するのが特徴です。これはシングルページアプリケーションによってURLを切り替えて新しいWebページを読み込まなくても、同じページで複数の店舗情報を切り替え表示できるようになっているからです。
これによりユーザーの目からはスムーズに情報が切り替わって見えるなど、さまざまなメリットが発生します。
2.ユーザー体験度向上にも効果あり！シングルページアプリケーションのメリットとは
シングルページアプリケーションを使うと、次のようなメリットがあります。
Webページの表現方法が増える
通常のWebページだと
- 読み込み
- ページの移動
といった機能はWebブラウザーに依存していました。
Webブラウザーが上記のような機能を担っている分、開発者は他の機能の開発へ注力することが可能です。しかし裏を返せば、上記のようなWebブラウザー依存の機能はカスタマイズできないということでもあります。
シングルページアプリケーションだと、たとえば動画を視聴しながらページを変えず、新しい情報を切り替えて表示するといった動作が可能です。これはページ移動をしないと新しい情報を閲覧できないWebページと比較してメリットになりえます。
このようにWebブラウザーに従来依存していた機能を別途開発してカスタマイズできるのが、シングルページアプリケーションの強みです。
動作性が通常のWebページより高速
従来のWebページではページ移動のたびに相応の時間と通信容量が発生していました。アプリダウンロードといった作業と比較すると時間・通信容量は消費しませんが、ユーザビリティに影響を与えてしまうのは事実です。
シングルページアプリケーションでは、ページ移動ではなく要素切り替えで情報を提供します。これによってページ移動によって発生する時間・通信容量のロスが一気に削減されるのがポイントです。切替部分以外は再読み込みが起こらないのですぐに情報を表示できますし、通信容量もそれほど消費しません。
ページ移動が起こるたびに時間や通信容量面で負担の掛かりそうなWebページを作る際は、シングルページアプリケーションを使って動作性向上を検討してみるとよいかもしれません。
PWAと組み合わせてネイティブアプリに匹敵するUXを提供可能
シングルページアプリケーションを利用すると、ネイティブアプリの代役として使うことも可能です。
たとえば単にシングルページアプリケーションを使うだけでは、ネイティブアプリの各機能は実現できません。しかしPWAの技術を組み込むと、
- プッシュ通知の発信
- ページのプリロード
- オフラインでのページ閲覧
といった機能が追加できます。
PWAについての詳細はこちらをご覧ください。
PWAとは？メリットや注意点を丁寧に解説！
こういったPWAの機能に加えてシングルページアプリケーションの動作性等を組み合わせると、ネイティブアプリと比較してもそん色ないWebアプリを作り出すことが可能です。もちろん完全な代替となるわけではありませんが、
- 開発コストが高い
- 審査通過を行う必要がある
といったネイティブアプリで発生する問題を解消できる技術としてシングルページアプリケーションは優秀です。
3.SEO対策が難しい！シングルページアプリケーションのデメリットとは
シングルページアプリケーションには次のようなデメリットもあるので、確認してから導入を検討してみてください。
開発者が少なく、実現にはコストが掛かる
シングルページアプリケーションは、Webページ開発手法ではマイナーな技術です。そのため利用できる開発者が少ない点がまずデメリットとなります。
もし人材が社内にいない場合は育成・あるいは新規採用等でリソースを確保する必要があります。しかし開発者が少ないため人材育成や新規採用等に時間・コストが掛かってしまうリスクがあるでしょう。
またシングルページアプリケーションでは、ページが単一のため戻る・進むといったWebブラウザーの機能が働きません。こういったWebブラウザーの基本機能まで自分たちで代替して開発する必要があるため、通常のWebページよりはコストがかさんでしまうデメリットがあります。
ネイティブアプリを開発するよりは安く済む場合も多いでしょうが、シングルページアプリケーションよりネイティブアプリのほうがサービス提供に適している場面もあるため注意しましょう。
初期読み込みの時間は通常のWebページより遅い
シングルページアプリケーションでは、読み込みに使うJavaScriptファイルを大量に最初読み込みます。次回読み込み以降は効率よく読み込みができますが、初期読み込みの時間だけを比較すると通常のWebページより時間が長くなる点がデメリットです。このため初期読み込みを遅く思わせない工夫が必要となってくるでしょう。
また要素を切り替える際に画面がそのせいでカクついたり大きくずれたりすると、ユーザビリティが損なわれてしまう危険があります。シングルページアプリケーションを導入する際は必ず検証を行い、ユーザーに不快な印象を与えない要素切り替えができているかを確認してみてください。
コンテンツ量を確保できないといったSEO上の懸念がある
オウンドメディアとして記事を都度アップロードしてコンテンツ量・質などを確保したいWebページには、シングルページアプリケーションが向いていません。なぜならばシングルページアプリケーションは、JavaScriptに依存している以上SEO面でデメリットが大きいからです。
たとえば基本JavaScriptは、Webページの掲載データを回遊して取得する「クローラー」の対象となっていません。URLが単一でありJavaScriptを使っているという点がネックになってしまいます。
また新規の記事を都度アップロードしたい場合は、わざわざJavaScriptファイルに内容を記載するのが面倒です。SEO面が気になる場合はシングルページアプリケーションをあきらめる、あるいはサーバーサイドレンダリングといった技術を使ってSEO面の弱点をカバーする必要が出てきます。
4.まとめ
今回はシングルページアプリケーションの概要やメリット・デメリットをご紹介してきました。
シングルページアプリケーションを使うとPWAといった最新技術と組み合わせることで、ネイティブアプリの代用ともなりうるコンテンツを作り出せます。ただし通常のWebページよりリソース確保が難しく、コストが発生するといった点に注意して導入を進める必要があるでしょう。
またシングルページアプリケーションで作ったコンテンツが、完全にネイティブアプリの互換となるかは分かりません。このため本当に今作りたいWebページにシングルページアプリケーションを導入する必要があるのかよく考えてみてください。
