SPAは、ユーザーの操作に対して必要な部分のみを読み込むことで高い操作性を実現するWebアプリケーションの設計構造を指します。
Webサイトの中でも、ページ遷移やクリック挙動は多種多様です。その中でも、SPAが実装されたものは、一度ページを訪れたらページ遷移をすることなく、ユーザーはストレスフリーでWebサイトを閲覧できます。なお、SPAが実装された代表的なWebサービスは、GoogleマップやFacebookメッセージャーです。
これらのサービスでは一部のコンテンツを更新しても、ページ全体が再読み込みされず、良いUXをユーザーに提供できます。そこで本記事では、SPAを実装するメリットやデメリット、SPAを実装すべきコンテンツの特徴についてご紹介します。
目次
SPAとは
SPAとは”Single Page Application”（シングルページアプリケーション）の略であり、単一のページで、Webアプリケーションを構成する設計構造のことです。SPAが実装されたページでは、遷移を行わずにコンテンツが切り替わるため、ユーザー体験（UX）の向上に繋がります。
従来のWebページでは、操作の度にページ全体を読み込みます。一方で、SPAが実装されたページは、JavascriptでHTMLの一部を差し替えて必要な部分だけを読み込むため、サーバーとの通信量を抑え、アプリケーションのパフォーマンス向上につながります。
Googleマップで目的地を変更するたびに、毎回ページ全体の読み込みが行われないのは、このSPAによるものです。そのため、高度なWeb表現や、高い操作性を実現できます。
SPAを実装する4つのメリット
SPAを実装するメリットは、大きく分けて下記の4つです。
● Webで表現できることの幅が広がる
● 動作性の向上
● ネイティブアプリの代用
● UXの向上
Webサイトにおいて、すべてユーザー体験に直結するメリットです。ここでは、上記の4つのメリットについて解説します。
Webで表現できることの幅が広がる
SPAは、ユーザーの操作に対して必要な部分のみを読み込みます。そのため、ブラウザの挙動に縛られず、幅広いUIの設計ができます。従来のWebページだと、ローディング（読み込み）画面やページ遷移はブラウザによって制御されており、独自性を持たせられませんでした。
SPAを実装することで、ページ遷移やローディングといった、ブラウザに依存していた部分までも独自の開発ができます。また、Javascriptにはvue.jsやReactといったフレームワークが豊富にあるので、比較的表現も簡単です。
関連記事：【UI/UXとは？】それぞれの意味や違い、デザインの改善方法まで解説
動作性の向上
動作性は、Webページの運用において非常に重要です。実際に、ページの表示速度が1秒遅れることで、コンバージョンが7％低下するデータもあります。また、SEO対策の観点からも表示速度が遅くなることによって検索エンジンからの評価が落ちてしまいます。しかし、SPAの実装によって動作速度を大幅に速められます。
従来のWebページは、操作ごとにページ全体が読み込まれるので、時間がかかる上に、通信環境の影響を大きく受けます。また、更新したい部分だけでなく、ページ全体が更新されるため時間がかかる点もネックの1つです。
SPAを実装することで、操作時に必要な部分だけが読み込まれます。そのため、操作箇所以外は再読み込みがされず、通信量も大幅にカットできるため、動作速度が上がり、同時に動作性も向上します。
参考：How Loading Time Affects Your Bottom LIne
ネイティブアプリの代用
SPAの実装によって提供できるユーザー体験は、アプリケーションストア経由でインストールして端末上で操作をする、ネイティブアプリに引けを取りません。ホーム画面からのアプリの起動やプッシュ通知といった、スマホアプリ特有の機能も実装可能です。
実際にネイティブアプリをリリースするには、開発後もAppleStoreやPlayストアの審査などがあり、非常に手間がかかります。SPAを実装することで、上記のようなスマホアプリ特有の機能を実装できるため、SPAのWebアプリをネイティブアプリ代わりとして使えます。
UXの向上
SPAを実装したWebアプリは、操作箇所以外が読み込まれないことによる、利便性があります。たとえば、音楽を流しているページの一部を更新するとします。SPAを実装していないWebページなら、一部を操作するとページ全体が再読み込みされ、音楽が止まってしまいます。しかし、SPAを実装すれば操作した箇所のみが読み込まれるので、音楽が止まることはありません。このように、SPAではUXを損なわない機能を実装できます。
SPAは技術的観点からのデメリットも複数あり
一見良いことばかりのSPAですが、技術的観点から以下のようなデメリットもあります。
● 実装コストが大きい
● 開発者が少ない
● 初期ローディングが遅いため時間がかかる
● 下層コンテンツを無くす場合はSEOで不利になる可能性がある
デメリットも理解した上でSPAの実装を検討すべきです。ここでは上記4つのSPAのデメリットについてご紹介します。
実装コストが大きい
SPAを実装するには、従来はブラウザが担っていた機能を実装する必要があるので、普通のWebページ以上の開発コストが必要です。たとえば、ブラウザの「進む」「戻る」の機能や履歴管理、ローディング(読み込み)画面の表示などが代表として挙げられます。
これらはUIの細かい部分ですが、開発を必要以上に省力化してしまうと使い勝手が悪くなり、良いユーザー体験を提供できなくなる恐れがあります。ライブラリを用いた工数の削減はできますが、できる限りアプリに合わせて開発を進めるべきです。
詳しくは後述しますが、ただ動くものを作るだけでは通常のWebページと比較して、SEOの面で不利になります。SEOの部分もカバーしたい場合は、サーバーサイドレンダリング（SSR）と呼ばれる技術での対策が必要です。SSRの導入にはサーバーサイドの開発が必要な上に、対応ライブラリも限られるため、より多くの開発コストがかかります。
開発者が少ない
現状、SPAの開発経験者は、一般的なWebページの開発者に比べて非常に少数なので、人的リソースの確保が困難です。SPAの開発にはWebページの開発やJavascript、その周辺技術に関する知識が必要であり、規模の大きなコードを書くことが求められます。
SPAの開発にはライブラリやフレームワークの使用が必須なので、それらの知識も必要です。その上、開発後のメンテナンスを考慮した上で設計・構築を進める技量も求められます。
初期ローディングが遅いため時間がかかる
SPAを実装することで、ページの切り替えは速くなりますが、Javascriptのコードが増えて初期ローディングに時間がかかります。しかし近年、CDN（Contents Delivery Network）の発達によって弱点が保管されてきています。現状（2021年9月時点）では、初期ローディングはSSRを用いることで高速化できますが、その分の実装コストがかかるので注意が必要です。
下層コンテンツをなくす場合はSEOで不利になる可能性がある
SPAを実装したページは、原理上1つのURL/URIによって提供されるため、特定の表示状態に対して、それぞれ固定のURLとしてアクセスできません。SPAが実装されたWebページはJavascriptでデータを取得して、HTMLを構築することでページを表示します。そのため、ほとんどの場合クローリングの対象外となり、SEOで不利になります。SEOの影響が少ないコンテンツの場合は問題ありませんが、SEOが必要になる場合は前述したようにSSRの導入が必要です。
SPAを実装するべきコンテンツの特徴
ここまで、SPAのメリットとデメリットについてご紹介しました。開発の際にSPAが必要かどうかを吟味する必要性をご理解いただけたかと思います。では実際に、どのようなコンテンツにおいてSPAは実装すべきなのでしょうか。ご紹介したメリットとデメリットを踏まえて、2つの例をご説明します。
滞在時間が長いコンテンツ
SPAはその特性上、頻繁にコンテンツの操作を行う、滞在時間が長いコンテンツに非常に適しています。たとえば、情報が頻繁に更新されるデジタルマーケティングツールなどが挙げられます。
SPAが実装されていない場合、情報の更新があるたびに長い読み込み時間が必要です。じっくりとデータを見たくても頻繁に更新され、そのたびに読み込みの完了を待つのは大変不便です。
SPAを実装することで操作ごとの読み込みが速くなるため、情報の更新のたびに読み込みを待つ必要が無くなります。
なお、SPAを実装した代表的なツールがSlackです。Slackではメッセージが送られるたびに全体が読み込まれず、メッセージの表示に必要な一部のみが読み込まれることでメッセージが表示されます。滞在時間が長い上に、頻繁に更新する必要があるコンテンツには、SPAを導入すべきでしょう。
ページ遷移が多いコンテンツ
SPAはページ遷移において、高速で読み込みを行うメリットがあるため、ページ遷移が多いコンテンツも導入するべきでしょう。代表格として、映画館のチケット予約ページなどが挙げられます。
映画館のチケットを予約するには、「鑑賞する映画を選ぶ→時間を選ぶ→座席を選ぶ…」のように高頻度で操作がされる上に、その操作に伴うページ遷移が必要です。操作のたびに読み込みに時間がかかっていては、ユーザーにとって非常に不便であり、離脱の原因となります。
このようなページ遷移が多いコンテンツは、SPAを実装することでページ遷移のスピードを高められ、より良いユーザー体験を提供できます。
まとめ：SPAを実装してUXを向上させましょう
本記事では、SPAのメリットやデメリット、実装するべきコンテンツの特徴について解説しました。SPAは便利ですが、すべてのコンテンツに適しているわけではありません。技術的なデメリットも大きいため、慎重に実装を検討することが大切です。
前述したように、滞在時間が長いコンテンツや、ページ遷移が多いコンテンツにはSPAの実装を検討してみましょう。本記事を参考に、SPAのメリットとデメリットを把握した上で、本当に自社のWebページにSPAの実装が必要なのかを考えるようにしましょう。
