SPA(Single Page Application)ってなに？

制作
2019-1-23
更新日: 2024-2-13
ogasawara masami

Webサイトの動作が向上したり、高度なWeb表現ができたり、最近何かと注目されているSPA。
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、UXが向上すると言われていますが、いったいどのようなものなのでしょうか？

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

サービス資料はこちら無料相談はこちら

またWebサイトでのPDCAフローに関しては以下の記事で詳しくご紹介しております。

【Webサイト集客で結果を出す！】ポイントは現状把握と分析！結果を出すPDCAサイクルとは？

1 SPA（シングルページアプリケーション）ってなに？
2 SPAのメリット
3 SPAのデメリット
4 SPAを採用すべき場面
5 まとめ

SPA（シングルページアプリケーション）ってなに？

皆さんは、SPAをご存知でしょうか？
WebマーケティングにおけるSPAとは、Single Page Application（シングルページアプリケーション）のことです。
SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。
これから、SPAのメリット及びデメリット、そしてSPAを採用するのに適しているケース、さらにSEOの観点から、SPAで留意すべき点を解説していきます。

SPAのメリット

SPAのメリットは以下の3点です。

動作性の向上
より高度なWeb表現
ネイティブアプリの代用

単一のWebページでコンテンツ切り替えを行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWeb表現を可能にするのです。
では、順にご説明していきます。

動作の向上が期待できる

まずは動作が向上するという点に関してご説明していきます。
そもそも、従来のWebアプリケーションの仕組みは、以下のようになっていました。

ユーザーが何かしらのアクション（クリックなど）を行う
それを受けてサーバに通信（リクエスト）
サーバ側でHTMLを生成し、ブラウザに返す（レスポンス）
HTMLに反映

この仕組みではページを更新する度に変更していない部分までサーバ側で生成し直していました。
例えば、ページのヘッダーやフッターはユーザーが変更するように作られていないことがほとんどでしょう。
そういった変更のない部分までサーバに送信しているので、処理に時間がかかってしまっていたのです。
これに対して、SPAを導入した際のWebアプリケーションの仕組みは、以下のように変更されました。

ユーザーが何かしらのアクション（クリックなど）を行う
そのアクションに必要な部分のデータだけをサーバに要求
返ってきたデータをJavaScriptで処理
処理HTMLに反映

つまり、ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えることが可能です。
これによって、Webアプリケーションの動作の向上が期待できます。

より高度なWeb表現ができる

前述の通り、SPAはユーザーのアクションに対して必要な部分のみを更新します。
これにより、ブラウザの挙動に縛られることがなく、幅の広いUIを実装することができます。
また、JavaScriptにはVue.jsVue.jsなどのフレームワークがあり、様々な表現を容易に実現することができます。
例えば、HTML/CSS/JavaScriptのみでToDoアプリのようなものを開発することも可能です。
その際、グラフィカルな表現も簡単に実装できます。

Vue.jsについてはこちらをご覧ください。

Vue.jsとは？jQueryとの違いや使用のメリットを紹介

ネイティブアプリの代用ができる

SPAでは幅広いUIを実装できるので、ネイティブアプリの代用として使うことができます。
ネイティブアプリとは、端末内にダウンロードして使うタイプのアプリケーションです。
そもそもアプリケーションには、Webブラウザ上で動くWebアプリと端末内にダウンロードして使うネイティブアプリがあります。
スマホアプリはネイティブアプリの代表的な例です。
例えば、何かしらのWebアプリを開発し、そのiOSアプリ、Androidアプリをリリースする流れでは非常に手間がかかってしまいます。
仮にWebアプリのサーバサイドをNode.jsで書いたとしても、HTML/CSS、JavaScript、Swift、Javaの記述が必要です。
しかし、SPAを導入することで、オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動など、ネイティブアプリで主に使われるような機能を実装することができます。

SPAのデメリット

SPAのデメリットは、以下の3点です。

開発者が少ない
実装コストがかかる
初期ローディングに時間がかかる

では、順にご説明していきます。

開発者が少ない

SPA開発者・経験者の絶対数が少ないので、リソースの確保が難しいと考えられます。
Webサイトの制作スキルに加えて、JavaScript及びそのフレームワークのスキルが必要です。
また、後々までメンテナンスをすることを想定し、美しいコードを書くことが求められます。
そういったことができる開発者の絶対数が少ないので、そういった点でリソースの確保は通常のWebサイト開発に比べて難しいでしょう。

実装コストがかかる

SPAでは、今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストがかさんでしまいます。
ライブラリで対応できる機能も場合もありますが、アプリの開発要件に合わせて独自に実装する必要がある場合も多いでしょう。
さらに、改修・運用にも通常のWebアプリに比べ、ブラウザに処理を任せていた部分の処理、ライブラリで対応できない独自の実装を考慮しなければならず、工数がかかってしまいます。

初期ローディングに時間がかかる

SPAでは、サーバとのやり取りの量は減るので、ページ遷移は高速になります。
しかし、JavaScriptのコード量は増加するので初期ローディングに時間がかかってしまいます。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

サービス資料はこちら無料相談はこちら

SPAを採用すべき場面

ここまでで、SPAについてある程度のことは理解できたと思います。
では、実際にSPAを使う際にどのようなサービスが適しているのでしょうか？

滞在時間の長いサービスに適している

SPAはページ遷移を高速化するという特徴から、滞在時間の長いサービスに適しています。
例えば、デジタルマーケティングで使用するツールや、口コミや評判などを分析するサイトでは、ユーザーが繰り返しアクションを行い、その度にページ遷移することもしばしばです。
こういったサービスではSPAに適していると言えるでしょう。
ページ遷移が早くなることでユーザーのストレスが減少し、サイトに対する満足度の向上も期待できるでしょう。

SPAに適していないケースは？

滞在時間の長くないサービス、言いかえると直帰率の高いサービスは、SPAに適していないと考えられます。
主な例としては、ブログなどが挙げられます。
直帰率の高いサービスでは、アクセス時にかかる時間が増加してしまうSPAを導入すると、ユーザーは不快感を感じてしまい、直帰率が上昇する危険性があります。
SPAの導入を検討する際は、サイトにおけるユーザーの行動を分析することが重要です。

SPAはSEO上不利になる？

SPAで制作されたWebサイトはJavaScriptでコンテンツを描画しているため、Googlebotに正しく認識されずSEOの観点で問題が生じるのではないかという懸念の声がしばしば聞かれます。
しかし、現在のGooglebotには、Chrome 74相当のレンダリングが搭載されており、最新のJavaScript技術に対応しています。
ですので、SPAで制作されたWebサイトが何らかSEO上で不利になるということは考えられないでしょう。

このアップデートはGoogle I/O 2019にて発表され、アメリカ版Googleウェブマスター向け公式ブログでも告知されています。