WEBサイトのモバイル対応のやり方と注意するポイント

１． WEBサイトのモバイル対応は必須

スマートフォン、タブレットなどのモバイル端末の普及によって、WEBサイトを閲覧する環境が激変しました。それまでのパソコンでインターネットをするというスタイルから、モバイル端末へ移行しているのです。
20〜30代の若者におけるスマートフォン普及率は90％を超えていることからも、WEBサイトづくりをする上でモバイル版対応を考慮する必要性が高いのです。

参照：http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html

検索サイトの大手Googleでは、モバイル端末を使って検索された際、「モバイル端末に対応しているWEBページ」が優先的に表示される仕様になっています。これが、2015年にGoogleが発表した「モバイルフレンドー」になります。モバイル対策ができていないサイトは、モバイルで検索された際に上位表示がされにくくなっています。

さらに2016年にGoogleが発表した「モバイルファーストインデックス」というのがあります。検索サイトでは、ページ内容と検索キーワードとの関連度を判断し、検索結果を表示します。それまでは、パソコンで閲覧した時の内容が使われていましたが、モバイル端末で閲覧した時の内容へ変える方針になります。
モバイル対策ができたいないサイトが、何かすぐに悪影響があるわけでは無いのですが、モバイルファーストインデックスの適用は、日本でも浸透しています。
競合サイトなどがモバイル対策を終えている場合は、自社サイトの順位が相対的に下がる可能性があります。

もし、検索サイトからユーザを誘導しようと考えている場合は、WEBサイトのモバイル対応は必須のものとなります。これまでのパソコンサイトと同様の知識を持って対応することが大事です。

２． WEBサイトのモバイル対応の方法

モバイル版対応をする場合、その方法は大きく分けて2つあります。その方法を解説します。

レスポンシブを採用したモバイル版対応

レスポンシブは、パソコンでもモバイルでも関係なく1つのHTMLで構成し、デバイスごとにCSS（情報の大きさや位置など表示指定）で切り替えて表示を変える方法です。
最近では、このレスポンシブを用いる手法が浸透しており、メリットとしては同じコンテンツを複数ページへ展開する必要がないのでウエブサイト管理が煩雑になりません。また、端末ごとにURLを分ける必要もないので案内も楽です。また、URLが一つなのでWEBサイトを閲覧するユーザーにシェアされやすくなります。そして、検索結果の上位に表示されやすくなるモバイルフレンドリー、スマホ用のページ順位の決め手となるモバイルファーストインデックスに対応ができます。

一方で、デメリットもあります。HTMLが１つなのでパソコンとモバイルで同じデータを読み込むことになります。そのため、スマホで表示しないデータも読み込むため、表示完了までの時間がどうしてもかかってしまいます。
デザイン面に関しては、基本的にHTMLが1つなので、パソコンとモバイルで大幅に見え方を変えるようなデザインを組み込むことは難しいです。あとは、デバイスごとのデザイン制作後、それに合わせて一つにするコーディングを行うので、複雑なことによる制作工数がかかります。

モバイル端末専用サイトを別途制作したモバイル対応

パソコン版とは別にモバイル専用のページを作る方法があります。これは、すでにパソコン版のWEBサイトがあるものの、レスポンシブ化でモバイル版を組み込むのが困難な場合に用いる手法です。
モバイル専用サイトのメリットは、パソコンサイトに影響することなくモバイル版サイトを制作できることです。管理自体も別々に行うことになりますので、パソコンとモバイルで見せるコンテンツが違う場合などは、有効的に手法です。

一方のデメリットは、パソコンとモバイルではURLが異なることにあります。URLがことなると、アクセスが分散します。SEO効果が薄まることと、SNSシェアに弱くなります。
また、パソコンとモバイルで同一コンテンツが多い場合、一方を修正するともう一方も忘れずに修正する必要が出てきますので、管理が煩雑になってしまうことは否めません。

それぞれにメリット、デメリットありますので、自社のサイトポリシーに合わせてどちらで対応するのが良いか見当が必要です。

３． モバイル対応をする上での注意するポイント

ここでは、WEBサイトをモバイル版へ対応する際に、知っておきたいポイントや注意するポイントなどを紹介します。

✔︎縦方向に長すぎないようにする

パソコンで表示していたWEBサイトを、モバイル版に対応するととても縦長なページになり、いくらスクロールしても最終にたどり着かないということが起こりがちです。それでは、せっかくのモバイル版対応も台無しになってしまいます。
パソコン画面とモバイル画面では、大きさが明らかに違いますので、コンテンツ量が多いページだと、モバイルでは長すぎてしまいどこまで読んだのかなど現在地がわからなくなってしまいます。途中で離脱されないためにも、情報量の整理、配置、ページ遷移を含めてパソコン以上に気を使うべきポイントは多いです。

✔︎動画やアニメーションサイズに注意する

パソコンで表示している自動再生の動画やアニメーションの使用は、モバイルサイトでは通信環境の制限などで読み込みに時間がかかり処理が遅くなる可能性があります。
パソコンとモバイル版では、表示を切り替えるなどの対応が必要です。

✔︎文字サイズの選び方

パソコンとモバイルサイトでは、表示フォントサイズの見え方も異なってきます。モバイル版では、パソコンよりも狭い画面の中で、読み進めやすい文字フォントにする必要があります。

✔︎シンプルなレイアウト

パソコンで表示するWEBサイトでは、段落を作りサイドバーを設けるなどで横方向にも広がるレイアウトが多いです。ただ、モバイル版に関しては画面が小さいこともあり縦移動は得意でも横移動は操作が面倒です。
そこで、段落を使わずシンプルなレイアウトにすることで、モバイル版でも閲覧しやすくなります。

✔︎指で操作しやすいインターフェース

モバイル版では、画面を指1本で操作することがほとんどです。モバイル版では、クリックを「タップ」という言い方になります。また、画面をめくる操作を「スワイプ」といいます。タップやスワイプの操作をスムーズにできるようにすることで、ユーザビリティを高めることができます。

✔︎ポップアップは使えない

パソコンでは、ポップアップウインドウを表示することは容易ですが、モバイル版にはウインドウという概念が無いので、小窓を開くのはできません。別ウインドウを作ったとしても、パソコンのように正常に動作するとは限りません。ポップアップウインドウのような仕様を入れたい場合は、モーダルウインドウに見えるようなテクニックを使う方法があります。

４． まとめ

今回は、モバイル版サイトの対応について基本として知っておいたほうが良いポイントを解説してきましたが、いかがでしょうか。今は、モバイル版を持っていることは当たり前になっていますので、まだ対応していない、これからWEBサイトづくりを行うなどの場合は、モバイル版も含めて制作を検討することをオススメします。