モバイル対応　きほんの「き」

【モバイル対応についての記事構成】

モバイル対応については、以下のように「準備編」と「実践編」で何回かに記事を分けていきます。

※本記事での「モバイル対応」とは、「スマートフォンとタブレットへの最適化」と定義し、フィーチャーフォンは対象に含めません

第一回目の今回は準備編：モバイル対応　きほんの「き」です。
実際にモバイル対応をする前に把握しておくとよさそうなことをご紹介します。

１）だからモバイル対応が必要
２）モバイル対応の方法を検討する
３）サイトが表示されるデバイスの環境に気を配る

１）だからモバイル対応が必要

◆年々増えるモバイルからのアクセス

日本全体でも、モバイルからのアクセスの方がPCを超えるサイトが増えてきているというのはこの業界にいる方ならご存知のことと思います。
自社サイトのアクセス状況やコンバージョン率なども確認し、半数近いアクセスがモバイルからきているのであれば対応を検討しましょう。

◆デバイスの多様化

一言でスマホ、タブレットといっても、実に多種多様なサイズがでてきています。
Apple watchの発売も公表され、将来的には車やゲーム機、冷蔵庫もインターネットにつながるデバイスの仲間入りをするかもしれないといわれています。

IoT（Internet of Things）（※）が進むにつれて、今では想像もしていないデバイスが誕生するかもしれません。
そんな時でも快適に表示できるウェブサイトが求められてきます。

（※）IoT（Internet of Things）・・・通称「モノのインターネット」。あらゆるモノをインターネットにつなげる技術のこと

◆Googleが本格的にスマホ対応を評価対象の一つに

また、特筆すべきはGoogleが正式にモバイル最適化をランキング要因の一つにすると公表したことです。4/21から、全世界一斉にアルゴリズムが変更されます。
「この日までにどうにかスマホ対応を…！」というサイトは多いはずです。

Googleが公表している「モバイルフレンドリーテスト」から、自社サイトのモバイル対応に対する評価が簡単にわかります。
対応していないサイトに関してはどう対応すべきか？のヒントも教えてくれるので、まだやったことがない場合はチェックしてみると良いでしょう。

▼モバイル対応しているサイトの結果

「問題ありません。 このページはモバイル フレンドリーです。」というメッセージが表示される

▼モバイル対応していないサイトの結果

「モバイル フレンドリーではありません」というメッセージとともに、その理由が表示される

２）モバイル対応の方法を検討する

モバイル対応にはざっくり分けて２種類の方法があります。
一つは、PCとは別にモバイル専用のページを作ること。
もう一つは、レスポンシブデザインで作ること。
それぞれの特徴とメリットは以下の通りまとめてみました。

（例）保険スクエアbang! 自動車保険　モバイルサイトとPCサイト

◆［case1］モバイル専用ページを作る

モバイルとPCのhtmlを分けて作成する従来の方法です。
ソースが２種類に分かれているので、柔軟にデザインができます。
これによってモバイルからくるユーザーとPCからくるユーザーで訴求方法を変えることができ、より効果的なサイトが作れるという利点があります。
また、モバイルで見ていてもPCのレイアウトに切り替えて閲覧することも可能なので、モバイルにはないコンテンツを見たい！というユーザーの希望に応えることができます。
さらに、ファイルを切り替えているので必要なソース、ファイルのみを読み込むため、モバイルでのページ読み込みが比較的速いというのも大きなメリットの一つです。

◆［case2］レスポンシブデザインを採用する

レスポンシブデザインとは、htmlはワンソースでcssでモバイル・PCのデザインを切り替える方法です。
ワンソースなので修正・変更が一回で済むことにより、運用コストの軽減や更新忘れのリスクが少なくて済みます。
また、Googleが「レスポンシブデザインを推奨している」と公表していることもあります（※）。
これは、どのデバイスでもユーザーにとってピンチやズームをせずに快適にサイトを閲覧できるという一方で、ファイルが一つであることによってクローラーのリソースが少なくて済むという理由も挙げられます。
また、URLが一つなので拡散がしやすいこと、将来出てくるであろうまだ見ぬ端末サイズにも対応できるという点で優れているといわれています。

（※）参考：モバイル向けサイトを構築する際に知っておくべき 3 つのこと

【モバイル専用ページとレスポンシブデザインのメリット】

上記のメリットを把握したうえで、サイトや目的、制作環境などによってどちらを採用するかを決定すると良いでしょう。

モバイル専用ページは、アクセスしてくるユーザー属性に応じて細かく訴求内容を変えたいランディングページ等にも向いています。
また、すでに既存サイトがあり、複雑なサイト設計だったり動的なプラットフォームで動いている場合の現実的な手段として採用されるようです。

レスポンシブデザインは、サイト特性の側面では企業のコーポレートサイト、情報系サイトに向いています。
どのデバイスでも快適に閲覧でき、サイト設計がシンプルなのでデザインが組みやすいことが理由として挙げられます。
また、モバイルからのアクセスが多いにも関わらず、離脱率が高い、コンバージョン率が低いという場合も、推奨されます。
モバイル環境で閲覧しづらいことが原因になっている可能性があるので、どのデバイスにも最適化することでこれらの問題を解消できる確率が高くなります。

３）サイトが表示されるデバイスの環境に気を配る

◆高解像度対応デバイス

iPhone 3Gが出た当初の一昔前までは、画面サイズ＝デザイン幅でした。
横幅320pxでデザインを作り、そのままコーディングしていけばスマホでもキレイに見えていたのですが、現在は高解像度対応のデバイスが主流です。

高解像度対応のデバイスでは、表示されるデバイスの画面サイズの２倍、３倍の横幅をもったデザイン画像が必要です。
ざっくり言ってしまえば、これをぎゅっとデバイス幅に凝縮して見せることで、画質の密度が上がり、より繊細に見えるようになるという仕組みです。（詳しくは「解像度」に関するページで解説します）

◆OSの対応範囲

これまでは「モバイル対応」と言えばiOSのみを対象とする場合が多かったと思います。
Android搭載端末は端末によって見栄えやクセが全く異なるといったことが起きるため、全てに対応させるのが困難だったためです。

しかし、デバイスの多様化によって、これからはそういうわけにもいかなくなってきました。
場合によってはAndroidだけではなく、Firefox OSも視野に入れ、正常に動作するサイトを構築することが重要になってきました。

では、どうやって対応OSを決めるのでしょうか？
一つの判断基準として、モバイルは２年周期で買い替える人が多いので、２年以上前の端末は捨てるという考え方があります。
しかし、アクセスしてくるユーザーの属性は当然サイトによって異なるので、こちらもデバイスごとのアクセスをチェックして判断すると良いでしょう。

ちなみに弊社サイトの例でいうと、メインにサポートするのはiOSは7以上、Androidが4.0以上という結果がでました。

◆ブラウザの対応範囲

同じ端末で見ていてもブラウザが違うと見え方が異なる場合があります。
モバイル端末で見るブラウザはsafari、chrome、firefoxに加え、Android端末では端末の独自ブラウザが用意されています。
OS同様、どこまでを対応範囲に含めるかは自社サイトのアクセス等を考慮して決めましょう。

以上までが、モバイル対応をする上で検討しておいた方が良い事項です。
新規で構築する場合でも、ターゲットユーザーを想定して対応方針を決めていくと良いでしょう。
次回は、実際に構築する際のポイントをご紹介します。