初心者でも分かるWebサイトのスマホ対応方法

スマホ対応とは？

スマホ対応とはスマホ用のWebページを用意して、ページを最適化することを言います。そうすることで、スマホから見てもデザインの崩れなど感じることなくWebページを見ることができます。

近年まではパソコンから見ることを前提にホームページは作られてきました。しかし現在のホームページは、スマホ対応されていることがほぼ当たり前になってきています。

それは現在サイトのアクセスはほとんどがスマートフォンからになっているからです。理由としては簡単で、どこでも手軽にネットに接続できる時代に変化したからだといえるでしょう。そのため企業もスマートフォン向けのホームページに随分と力を注いでいます。

スマホ対応をした方が良い理由

スマホ対応をした方がいい理由として下記に3つほどあげました。

• 近年スマートフォンからのアクセスが急増している
• ユーザーに悪い印象を与えてしまうということを避ける
• アクセス数減少を避ける

それでは1つずつ解説していきます。

近年スマートフォンからのアクセスが急増している

前述したように、近年はスマートフォン利用者が大幅に増えています。保有率が2011年に14.6％だったのに対して、2016年には56.8％と5年間でなんと4倍に上昇しています。そのことからもわかるように現在Webページへのアクセスはほとんどがスマートフォンからになります。そのため、現代においてスマホ対応はWeb上にページを公開する上で最低限導入すべきものになりつつあります。

引用：「スマートフォン経済の現在と将来」

ユーザーに悪い印象を与えてしまうということを避ける

ホームページは言わば会社の看板になります。そこでユーザーがストレスを感じてしまったら、買いたかった商品も買いたくなくなりますよね。

スマホ対応していないと、ボタンやバナーなど押し待ちがえたり、小さい文字の文章をわざわざ拡大して読まなければいけないなど、多大なストレスを感じさせます。

また、ページのデザインが崩れていると、当然観覧者はページを読みたくなくなりますよね。見づらい、使いづらいという理由で、Webサイトから離脱されてしまっては大きな機会損失です。ホームページがスマホ対応していないだけで、会社自体のイメージを損なってしまうのはあまりにも勿体無いのです。

スマホ対応すると、デザインやレイアウトの崩れがないのでユーザーは気持ちよくページを観覧することができます。つまり、最後まで見てくれる可能性が高まり、売上の向上にもつながります。スマホ対応はユーザーに気持ちよくホームページを読んでもらう最低限の対応とも言えるでしょう。

アクセス数減少を避ける

検索エンジン「Google」の検索表示順位は、ランキングアルゴリズムと呼ばれるGoogleが独自に定めた評価要因を元にコンテンツを評価し決定されます。2015年にこのアルゴリズムの一つにスマホ対応の有無が追加されました。それが「モバイルフレンドリーアップデート」です。

モバイルフレンドリーアップデートとは、スマホから検索した際にスマホ対応していないサイトに対して順位を下げるというものになります。アクセス数が減少すると、売上の減少にもつながりますよね。なのでそれを避けるためにも、スマホ対応は必ず行うべきです。

Webサイトがスマホ対応できているか確認する方法

ここではWebサイトがスマホ対応されているか確認する方法をいくつかご紹介します。

• Google Chromeのデベロッパーツール
• Sizzy
• モバイルフレンドリーテスト

1つずつ簡単にご紹介していきます。

Google Chromeのデベロッパーツール

こちらWeb関係の勉強をしている方ならご存知の方も多いと思います。デベロッパーツールは無料で使用できるブラウザの機能になります。

手順としては

1. メニューバーから「表示」→「開発/管理」→「デベロッパーツール」とクリックします。
2. その後検証画面が表示されるので、下半分に表示された「Toggle device toolbar」と呼ばれるスマホのようなマークをしている部分をクリックします。
3. するとスマホ表示でwebページが表示されます。

またページ上部で複数デバイスを切り替えられるので、ぜひ試してみてください。

Sizzy

SizzyはChromeの機能拡張にも対応しているため非常に使い勝手がいいです。動作も非常に軽快で、スマホ・タブレット複数のデバイスを同時に確認することができます。使い方は簡単でまず下記のSizzyのページへアクセスします。

そして確認したい対象のページのURLを入力して矢印ボタンを押すだけです。非常に便利で簡単ですので、ぜひ試して見てはいかがでしょうか。

モバイルフレンドリーテスト

こちらはGoogle提供の無料サービスになります。これは確認したいページのURLを入力するだけで、簡単にスマホ対応しているか確認することができます。1分程度で計測できるので気になる方は是非試して見てはいかがでしょうか。

スマホ対応をする方法

ここまでスマホ対応する理由と確認方法をご紹介いたしました。最後はどうやってスマホ対応させる方法を2つほどご紹介していきます。

レスポンシブデザイン

まず1つ目はレスポンシブデザインになります。レスポンシブデザインとは、PCサイトとスマホ対応サイトが同一で、デバイスの幅に応じて表示やデザインを変える方法になります。

メリット

• 小規模なサイトならサイトの修正が比較的簡単
• URLが同一のためどのデバイスからもアクセスを得やすい
• Googleはサイト構築に関してレスポンシブデザインを推奨しているためSEOに有効的

デメリット

• スマホで見た場合に重たい画像などの表示速度が落ちる
• 既存のPCサイトを使用できないため、既存サイトをレスポンシブデザイン化する場合はサイト改修費用と時間がかかる
• サイト構成やデザインをきちんと考えなければ、ユーザーにストレスを与えページ滞在時間が下がる

レスポンシブデザインの作り方は以下をご確認ください。

レスポンシブWebデザインとは？メリットやデザインの作り方

スマホ専用サイトを作成

これは先ほどのレスポンシブデザインと違い、PC用サイトとスマホサイト別々に制作する方法です。URLも別なので運営者はサイトを運用する上で手間がかかる恐れがあります。

メリット

• PC用スマホ用それぞれに適したデザインで制作可能
• PC用スマホ用それぞれに適した素材の容量のものを使用できるため、webサイトの表示速度の軽量化ができる

デメリット

• 2つのサイトを運用するため運用コストが上がる
• 個別に素材やコンテンツの準備が必要になるため手間がかかる

今回ご紹介した以外にもスマホ対応させる方法は存在します。まずはそれぞれのメリット、デメリットを確認しどの方法が適しているかしっかり判断した上で選択しましょう。

おわりに

今回はスマホの対応方法をご紹介してきました。なぜスマホ対応させる必要があるのかしっかり理解できたでしょうか。

スマホ利用者が増加している中で、まだスマホ対応させていない方はできるだけ迅速に対応させることをおすすめします。対応方法は複数あるので、どの方法が適しているか見極めて行うことが大切です。