ホームページ制作におけるマルチデバイスへの対応の必要性

Webにアクセスする端末が多岐にわたっている現在では、マルチデバイスへの対応をどのように行うかが重要になってきます。

マルチデバイス対応の現状をお話していきます。

Web閲覧環境の変化

2014年末の時点での情報通信端末の世帯保有率が、PCが78.0％、スマートフォンが64.2％、タブレットが26.3％となっています。

2010年のスマートフォンが9.7％なので、大幅に上昇しています。また、20代以下にいたっては、最も使用している端末はスマートフォンと59.9％の20代が答えています。これはPCの32.9％を大きく上回っています。若者はPCよりもスマートフォンでWebを閲覧することが多く、全体でみてもスマートフォンでWebを閲覧することが多くなってきたようです。
2017年以降も、スマートフォンでの閲覧が増えている傾向は変わらず、むしろスマートフォンがメインといっても過言ではありません。

各デバイスの動向

iOSは3サイズで展開しており、また、Androidも各メーカーが独自の設計で展開しているので、単一サイズを前提としたコーディングは難しくなります。2017年現在では、Googleも、以前よりもレスポンシブを推奨しているのも、このような状況にあるからです。

マルチデバイスへの対応

マルチデバイス対応の課題

言葉にするとスマートフォン・タブレット・PCの3種類に対応すればいいという表現になりますが、実際は３つにくくれるほど単純な話ではありません。

タブレットに近いサイズのスマートフォンが発売されていたり、ミニタブレットと呼ばれるコンパクトなサイズのタブレットも発売されています。

そのため、スマートフォンからタブレットの画面サイズの分布は連続的で、このサイズ以下はスマートフォン、このサイズ以上はタブレットとは単純に決められません。

対応方法がいくつかあるため、ご紹介します。

レスポンシブWebデザイン（RWD）

RWDとは、HTMLなどのソースを変えず、メディアクエリを用いることでデバイスに対して適用されるCSSを切り替える手法です。

主に画面のピクセル数から切り替えを行います。

メリットは、ワンソースで作成することから工数が大きく膨らまないこと、メンテナンスが簡単であること、どのデバイスでも提供するコンテンツに差が出ないことが挙げられます。

デメリットは、初期設計をしっかり行わないと複数のソースを構築するよりも工数が上がりかねないことや、各デバイスの特徴を活かす実装が難しいところです。

RWDを導入する際は、統一したコンテンツを提供することが最適なのか検討する必要があります。

デバイスによる振り分け

アクセスしているデバイスを判定して、それぞれのデバイス向けに用意した出力を行う方式もあります。

メリットは、コストに応じた対応がとりやすいこと、それぞれのデバイスに応じたデザインやインターフェースを組み立てられることが挙げられます。

デメリットは、運用コストがRWDよりかかりやすいことや、PC向けとスマートフォン向けで情報の格差が出やすいことが挙げられます。

モバイル専用サイト

スマートフォンのみを対象としたWebサイトやWebサービスも存在します。

スマートフォンの特徴を活かしたソーシャルゲームや、SNSなどコミュニケーションサイトで多くみられます。

理由としては、ユーザーのハードルを下げることや、アップデートなどのスピード感、独自決済の採用などがあります。

どの方式を採用するべきか

いくつかの方法を紹介してきましたが、それぞれにメリット・デメリットが存在するため、「これを選べば問題ない」という正解は存在しません。

ですが、中小規模のWebサイトでは、新規およびリニューアルではレスポンシブデザイン（RWD）を採用するケースが多いです。また、上場企業でも徐々にRWDを採用してきているようです。Googleもレスポンシブデザインを推奨しています。

タブレットの対応

今後を考えるとタブレットへの対応は検討しておく必要があります。

ですが、タブレット向けの対応をしていない場合、注意しておくことがあります。

タブレット向けの対応をしていない場合は、PCと同等の表示をするべきで、スマートフォン向けの表示がされないようにするべきです。

タブレットでPCと同等の表示をするときは、いくつか注意する点があります。

まず、縮小して表示されるケースを想定し、文字やパーツの大きさやレイアウトがサイトとして成立するか実機で確認する必要があります。

また、リンクなどのタップエリアが指でタッチできるかや、マウスを前提としたデザインになっていないかを確認する必要があります。

タブレットでの利用スタイルの動向次第では、タブレットに特化した対応を検討する必要になってくるかもしれません。

アプリ内ブラウザへの対応

スマートフォンの利用時間の割合は、アプリが78％、ブラウザが22％となっています。

これを見る限りではブラウザの利用時間が22％と考えがちですが、実際にはアプリ内ブラウザで表示されるWebページが多くなっています。

このように、ホームページ制作を行ううえでは、様々は端末で最適な表示をすることが必要になってきますので、ホームページ制作の際にマルチデバイスを意識した設計にしていきましょう。