今や、Webサイトの閲覧者のマジョリティがモバイルになりつつあることは説明不要であり、Webサイトの活用においてスマホユーザーは無視できないものとなっています。
つまり、ビジネスを成功させるにはモバイルフレンドリーであることが必須条件となりつつあります。
モバイルフレンドリーにするためには
では、具体的にどのようにモバイルフレンドリーにすれば良いのでしょうか？
モバイルフレンドリーなコンテンツを提供するには、まずモバイルサイトかアプリのどちらか、またはその両方を選択する必要があります。どちらを選択するかは、サイトの特性や予算の都合などによるでしょう。
また、最近ではAMP（アンプ：Accelerated Mobile Pages）やPWA（プログレッシブウェブアプリ:Progressive Web Apps）といった従来のモバイルサイトをより高速にまたはアプリの体験に近いものにするという試みも注目を集めています。
モバイルサイトとは
Webでモバイル向けコンテンツを提供する場合、従来だとレスポンシブデザインを採用するかPC版とは別のモバイル向けサイトを作成するという方法がありました。
統計では、79%ものユーザーがデバイスの画面サイズにサイトが対応していないと、即座に検索結果のページに戻ることが分かっています。ウェブサイトへの訪問は、いまや半数以上がモバイルからだと考えるとこの数字は大きいです。
モバイルサイトの長所
1. コストが安い
費用面では、ネイティブアプリと比べるとモバイルサイトのほうが安く済ませられます。
2. デバイスやプラットフォームへの対応性
ネイティブアプリのようにプラットフォームへの対応を考慮する必要がありません。ブラウザ毎にサポートするCSS、Javascriptが異なる場合もありますが、プラットフォーム毎の差異をそこまで気にする必要はありません。
3. アップデートが容易
アップデートのたびに審査が必要になったりと手間がかかるネイティブアプリと比べると、アップデートが簡単かつ素早く行えます。
4. 選択肢を残せる
実際に利用される頻度は多くはないです、モバイルサイトの場合は必要な時にPC版に切り替える選択肢を残すことも可能です。
モバイルサイトの短所
1. 読み込みが遅い
サイトの特性や仕様にもよりますが、ネイティブアプリのほうが高速化のためにとれる手段が多くあるため、モバイルサイトより読み込みを早くすることができます。
2. ネットの接続状況に依存してしまう
モバイルサイトの場合、オフラインでの利用やバックグラウンドでの読み込みが難しく、ネイティブアプリよりもネット環境に左右されやすいと言えます。
3. 機能面での制約
ウェブサイトの場合、端末に組み込まれているハードウェア機能が利用できないことが多いです。そのため、機能面での制約が生まれてしまいます。
ネイティブアプリとは
それでは、ネイティブアプリの長所と短所も見ていきましょう。アプリだけで提供するサービスも多く、かつてのウェブサイトの役割を取って代わることもあります。
ネイティブアプリの長所
1. デバイスのハードウェア機能が使用できる
Webサイトをアプリに変更したときの大きな利点として、アプリではカメラ、Bluetoothなどのデバイスに特有の機能を活用できることがあります。また、プッシュ通知を利用できるのは継続率の改善という面で大きなメリットです。
2. 読み込みが早くすぐに起動できる
アプリの場合はホーム画面からすぐに使えるので、わざわざブラウザを開く手間が省けます。また、モバイルサイトよりも読み込みを早くできるので、利用頻度を高める効果もあります。
3. オフラインで利用できる
アプリの中にはオフラインでの利用が可能なものもあります。また、ニュースアプリや電子書籍アプリの場合は、オンライン時にダウンロードすることでオフラインで使用できるのは大きなメリットです。
4. 決済がスムーズ・簡単
アプリの場合は多くのOSにおいてアプリ内決済機能が導入されているので、購入時にクレジットカード情報をいちいち入力する必要がなくすぐに支払いが可能となります。
5. ユーザーのロイヤリティを高める
上記に述べたようなメリットがあるため、一度アプリをインストールしてもらえればユーザーのロイヤリティを高めやすいというメリットがあります。
ネイティブアプリの短所
1. コストが高い
アプリを開発する上で、最も大きな短所がコストです。Android、iOSなど複数のプラットフォームへの対応やOSアップデートへの対応など、モバイルサイトを作成するよりコストが高くなります。
2. アップデートがしづらい
AppStoreの場合、リリースやアップデート時に審査を通す必要があります。最近は審査期間が短縮されつつありますが、いつ審査が完了するかを確実に知ることは難しいです。
3. マーケティングの手間・コストがかかる
アプリのストアなどで上位にランクインするために、より多くの努力が必要になります。アプリに関しては、Webサイトとは完全に異なる方法でマーケティングをすることになります。
4. 手数料をとられる
また、メリットに決済が簡単にできる点を挙げましたが、一方有料アプリやアプリ内アイテムの売上には手数料が発生します。そのため、アプリとウェブサイトで同じ商品なのに価格が異なるというケースもあります。
AMPとは
AMP（Accelerated Mobile Pages）は、その名の通りモバイルでのページ読み込みの高速化を目的とした仕組みです。Google、Twitterなどが参加するAMPプロジェクトが規格や使用を決めており、特にGoogleがその利用を推奨しています。
AMPに対応するには、AMP規格に沿ったHTMLのページを通常ページとは別途作成する必要があります。以下にその特徴を述べます。
AMPの長所
1. 読み込み速度が平均4倍
GoogleやTwitterはそのページをキャッシュし、ページへのアクセスがあると通常のページの代わりにAMPページを表示します。
2. データ量が平均1/10程度
AMP規格ではHTMLとCSSが制限されており、通常ページに比べデータ量が約1/10程度になります。
3. 検索結果で別枠で表示される
ニュースのみですが、AMP対応しているページは通常の検索結果とは別枠で表示されるので、検索流入の増加が見込めます。また、今後検索順位を決める要因となる可能性もあります。
AMPの短所
1. デザインの自由度が低い
AMP規格に沿ったページなので、どのサイトのページも同じようなデザインとなってしまい自由度はかなり低くなります。
2. 対応コンテンツが少ない
現状では、AMP規格が対応するのがニュースメディアなどのテキストベースのコンテンツのみとなっています。今後対応されるはずですが、現状ではECサイトなどでは導入できません。
3. 更新が即時反映されない
AMPはキャッシュを表示するため、更新が即座に反映されません。リアルタイムで情報を更新する必要があるサイトは、AMPに不向きです。
PWAとは
PWA(Progressive Web Apps)は、ネイティブアプリの機能性をウェブでも実現しようという試みです。FINANCIAL TIMESのページをモバイルで見てもらうのが早いでしょう。
Service WorkerやApp Shellといった技術を用いることで、まるでアプリのようなユーザー体験をウェブで提供することができます。
PWAの長所
1. アプリと同じユーザー体験
アプリと同じまたは近いユーザー体験をモバイルサイトでも提供できるようになります。
2. ページの読み込みが早い
Googleが掲載するケーススタディによると、SuumoはPWAを導入したページの場合は表示時間が75%減少となったそうです。
3. プッシュ通知が可能
現状、まだ対応しているOS・ブラウザが少ないですがプッシュ通知を送ることが可能になります。
4. オフラインで利用できる
Service Workerという仕組みを使うことで、オフラインでもページが利用できるようになります。FINANCIAL TIMESも一度読み込めば、オフラインでも利用できます。
PWAの短所
1. コストがかかる
通常のモバイルサイトを作成するよりも、コストはかかります。また、比較的新しい仕組みなので事例やドキュメントが少ないというデメリットもあります。
2. 対応ブラウザが少ない
Service Workerという仕組みにIEやSafariが対応していません。非対応ブラウザでも通常と同じように使うことはできます。
結局どれを選ぶべきか
ここまでモバイルサイト、ネイティブアプリ、AMP・PWAと説明してきましたが、結局のところどの手法が一番良いのでしょうか。
結論としては、ケース・バイ・ケースになるのですが、検討する時に以下の質問が判断の助けになるかもしれません。
・ウェブサイトのモバイル化にあたり、何が一番の目的か
・モバイルユーザーから期待するものは何か
・あなたのプロダクトはどんな機能が必要か
・予算はどれくらいか
これらの質問への回答から、より最適な選択肢が導き出されるでしょう。
