Webアプリのレスポンシブ、多様なデバイスにどう対応すべきか背景と課題を整理
レスポンシブは、デバイスに合わせてブラウジングするコンテンツのデザインを自動的に変化させる仕組みをいいます。SaaSのサービスが拡大し、スマートフォンのブラウザからWebアプリを利用するケースが増えました。しかし、Webアプリはネイティブアプリとは異なる課題があります。レスポンシブの背景を整理しながら、多様なデバイスにアプリをどう対応させるべきか考察します。
デバイスの多様化とレスポンシブが登場した背景
レスポンシブは（responsive）は「反応性がある」という意味であり、ユーザーの環境に合わせて自動的にインターネットのコンテンツの最適な表示を行います。Webサイトのブラウジングに関するしては、レスポンシブWebデザインと呼ばれ、略称として「RWD」が使われます。
まず、レスポンシブが登場して利用が拡大した背景を解説します。
Webサイトのレスポンシブデザイン
レスポンシブデザインが登場したのは、2010年頃といわれています。
レスポンシブ登場以前のホームページは、PCのディスプレイに合わせた表示サイズで制作されていました。OSやハードウェアの性能により接続できるディスプレイが異なり、一般的に普及しているサイズをもとにホームページの横幅などの推奨値が定められていました。
ところが、スマートフォンの利用拡大により、ブラウジングする画面のサイズが多様化します。PC用、タブレット用、スマートフォン用に合わせて別々のファイルが用意され、Webサーバで振り分けることによって対応する方法が取られるようになりました。
しかし、制作する側としては、画面サイズに合わせた別々のページを用意することは煩雑です。また、固定されているPCのディスプレイと異なってモバイルデバイスは自由に持ち方を変えられるため、縦画面と横画面の両方に対応しなければなりませんでした。一方でユーザーとしても、小さな画面で文字が見にくい、場合によってはモバイル端末では表示できない問題がありました。
こうした問題を解決するために、CSSやJavaScriptで制御して自動的にデバイスやメディアに最適したレイアウトを表示させる方法が取られるようになりました。これがレスポンシブWebデザインです。
ちなみにNTT ドコモ モバイル社会研究所のレポートによると、2010年には4.4%だったスマートフォン所有比率は、2021年には92.8%まで上昇しています。このような2010年以降の急速なモバイル化によって、レスポンシブ対応が求められるようになりました。
参考：「スマートフォン比率92.8%に：2010年は約4％ ここ10年でいっきに普及（2021年4月14日）」NTTドコモ モバイル社会研究所
レスポンシブデザインはGoogleの推奨で拡大
また、レスポンシブ対応が進展した大きな契機には、Googleによるレスポンシブデザインの推奨があります。2015年にGoogleはモバイルデバイスの利用拡大に合わせて「モバイルフレンドリー」というアルゴリズムを検索結果の判断基準に据えることを表明しました。
モバイルフレンドリーで推奨したのは、スマートフォンやタブレットなどのデバイスで表示しても文字や写真が見やすく、レイアウトが崩れないWebサイトです。共通のURLとHTMLおよびCSSファイルによって、あらゆるデバイスにコンテンツを表示させることを重視しました。特定のデバイスで表示されないエラーを防いで、ユーザビリティを向上させるためです。
Googleの検索エンジンの上位表示は、多くのWeb制作者が重視すべきミッションのひとつであり、SEOに大きな影響を与えます。Googleの掛け声によって、レスポンシブ対応が一気に加速することになりました。
レスポンシブデザインとアダプティブデザイン
ところで、レスポンシブデザインと似た用語に「アダプティブデザイン」があります。アダプティブ（adaptive）は適応の意味で、JavaScript によってコンテクストに応じた最適なコンテンツを表示させる仕組みです。
1つのレイアウトを柔軟に対応させるレスポンシブデザインに対して、アダプティブデザインでは、個々のデバイスなどに合わせた画面サイズのレイアウトを複数用意します。したがって、それぞれのデバイスに最適化された高速表示、コンテンツの品質を向上できることがメリットです。一方、制作に時間がかかり、難易度が高いデメリットがあります。
ユーザーの体験（UX）からいえば、それぞれの端末に最適化されたコンテンツをストレスなく表示できることは魅力があります。しかしアダプティブデザインはあまり普及していません。レスポンスデザインのほうが一般的です。
Webアプリの登場とネイティブアプリ
一方、クラウドの利用拡大により、いわゆるSaaS（Software as a Service）としてブラウザで利用できるサービスが増加しました。モバイル端末で利用できるWebアプリの利用が拡大しています。Webアプリは、一般的なコーポレートサイトやブログのようなWebサイトのコンテンツと異なり、インタラクティブな機能や課金の処理など高度なプログラムの提供ができます。
一方、従来のようにモバイル端末にインストールして使うアプリを「ネイティブアプリ」と呼びます。ネイティブアプリはクライアントの端末にインストールして使うため、インターネットに接続していない状態でも使えます。
現在、SNSなどを中心にWebアプリとネイティブアプリが混在している状況です。ネイティブアプリの機能にWebアプリの機能を合わせたハイブリッドアプリも使われています。
開発の側面からみたWebアプリとネイティブアプリ
レスポンシブのテーマから少し離れますが、Webアプリの開発とネイティブアプリの開発について違いを説明します。初めてアプリを開発するときには「同じアプリじゃないか」と感じて分かりにくいかもしれませんが、開発言語や開発の領域がまったく違います。
Webアプリは、フロントエンドとバックエンドの開発が必要です。そして、フロントエンドとバックエンドの開発では開発言語が異なります。
Webアプリのフロントエンドの開発言語は、Webサイトの構築と同じように、以下のような言語が使われます。
- HTML
- CSS
- JavaScript
HTMLやCSSは、ホームページ制作では馴染み深い基本的なプログラム言語です。HTMLはWebサイトの構造を記述し、CSS（Cascading Style Sheets）はWebサイトの体裁を別のファイルで指定します。文書とレイアウトが別々のファイルになっていると理解するとよいでしょう。CSSは複数のページを基本フォーマットで統一したり、より精細なレイアウトをデザインしたりするときに有効です。
JavaScriptは、Webサイトに動きをつけるなどの演出、メニューなどの機能を追加するために使う言語です。画像のスライドショーを自動的に表示させたり、パララックスと呼ばれるマウスの操作によって画像を切り替えたり、さまざまな効果を可能にします。レスポンシブに対応させるためには、CSSとJavaScriptの理解が必要です。
一方でWebアプリのバックエンドの開発言語としては、次のような開発言語があります。
- PHP
- Ruby
- Python
- JavaScrip
PHP はWebサイトに特化したプログラム言語、Rubyは日本のまつもとひろゆき氏によるオブジェクト指向の言語、Pythonは機械学習など人工知能の開発で注目を浴びるようになった言語です。そしてフロントエンドと同じJavaScriptがあります。その他、データベースなどの設計が必要になります。Webアプリが動作するのはクラウド上のサーバであり、クラウドの管理運用に関する知識も求められます。
一方ネイティブアプリの開発言語は、AndroidであればJava、iOSならSwiftやObjective-Cなど、あるいはC++が用いられます。ネイティブアプリが動作するのはそれぞれのユーザーの端末上です。
Webアプリとネイティブアプリでは、プログラムが動作する場所、プログラムの開発言語が異なります。当然のことながらハイブリッドアプリでは両方が求められます。
Webアプリにおけるレスポンスデザインのポイント
Webアプリとネイティブアプリの解説をしましたが、ここからはWebアプリにフォーカスしてレスポンスデザインのポイントを整理します。ただし、JavaScriptのプログラムではなく基本的なCSS の設定です。
実際にレスポンシブに対応するためには、既に提供されているフレームワークを活用することにより、コーディングの負荷を大幅に軽減できます。JavaScriptに対応したフレームワークもあり、ボタンなどの演出やカルーセル、スライダーなどの動きのある画面を制作できます。
ただし、ここではレスポンシブを考える上で最低限知っておく基本をCSSの側面から取り上げます。
表示領域の設定
CSSでレスポンシブを実現する場合、表示領域はviewportで指定します。PC向けに設定した表示をスマートフォンで表示させると文字や写真が小さくなりますが、HTMLのmetaタグで指定し、content属性で表示領域を定めます。
モバイルファーストか、PCファーストか
CSSのレスポンシブは、ブレークポイントを指定して分岐点によってスタイルの情報を変化させてデバイスに適した体裁にします。CSS3ではメディアクエリのメディアタイプによって、デバイスの種類などを設定できるようになりました。
このときモバイルファーストか、PCファーストか、優先すべきデバイスをメディアクエリで設定できます。特定の環境だけで見せたいコンテンツも指定することが可能です。
画像の切り替え
デバイスによって画像を切り替えます。複数のイメージソースに対するsrcset属性による指定ができます。JavaScripを使ってレスポンシブに対応させた場合、読み込み時間がかかる場合があり、このようなときにはsrcset属性による指定が有効です。また、メディアクエリによるimgタグの表示・非表示の切り替えによっても画像の切り替えを設定できます。
Webアプリのレスポンシブ対応における課題
Webアプリはインターネットの接続環境とブラウザがあれば使えることが利点です。しかしPC用に作られたWebアプリをハイブリッドなどの環境でモバイルに対応させようとしたとき、さまざまな課題があります。レスポンシブで解決できる場合もありますが、根本的な課題について触れておきます。
PCでは横画面、スマートフォンは基本的に縦
PCの画面とスマートフォンの画面では向きが異なります。スマートフォンを横に使う場合も考えられますが、横で使った場合に画面上部にメニューなどを配置すると、コンテンツが見えにくくなります。PC用のWebアプリを縦横比が全く違うスマートフォンに対応させるとき、レイアウトを完全に作り変えなければならない問題も発生します。
モバイル端末はマウスではなく指によるタッチ操作
PCの利用ではマウスやトラックパッドのようなポインティングデバイス、キーボードといったインターフェースを利用しています。ところが、モバイルデバイスでは指を使ったジェスチャーです。マルチタップなどのジェスチャーによってドラッグ＆ドロップを可能にしているデバイスもありますが、複雑な操作はユーザビリティの側面から再考しなければなりません。
文字の大きさや色など視認性の配慮が必要
テキスト情報を多く表示させなければならないWebアプリは、そのままではレスポンシブに対応させると非常に読みにくくなります。視認性の面から配色などの注意も必要です。UI全体を見直し、ネイティブアプリの開発を選択したほうがよいケースもあります。
Webアプリとネイティブアプリ、どちらを選ぶか
レスポンシブ対応の課題は、最終的には提供するサービスや開発するアプリによって異なります。あらゆるデバイスに対応しようとすると、それだけ開発工程や費用がかかることを覚悟しなければなりません。したがって制作コスト削減から、スマホ対応を諦めるのも賢明な方法といえるでしょう。
ビジネスで利用される業務管理のWebアプリであれば、PCからの利用率が高いことが想定されます。初期段階では、スマートフォンには対応しない選択も検討すべきです。一方でリアルタイムの情報共有を目的としたチャット系のアプリは、モバイル端末に通知してアプリに誘導する使い方が便利です。
まとめ
SaaSによるサービスが浸透し、モバイル端末でWebアプリを利用する機会が増えました。しかし、あらゆるデバイスに対応することが得策とはいえません。Webアプリとネイティブアプリのどちらを優先すべきか、ハイブリッドにすべきかなど、ユーザーの利用状況を検討した上で決めることをおすすめします。