- 公開日： 最終更新日：
スマホ対応とは？ホームページを対応させる方法や制作法を解説
今やホームページのスマホ対応は当たり前のように行われてます。
しかし、まだまだスマホ対応を行っていないホームページもあり、どうすれば良いかお悩みのWebマスターも多いと思います。
当ページでは、スマホ対応とは何かや、ホームページを対応させる方法、ホームページ制作法、確認法、注意点を解説します。
目次
スマホ対応とは
スマホ対応とは、ホームページをモバイルフレンドリーにすることを言い、単にスマートフォンでホームページを閲覧できることではありません。
モバイルフレンドリーとは、スマートフォンでホームページを閲覧したときに、操作がしやすく見やすいことを言い、ユーザーがストレスを感じることなくホームページを閲覧できる状態のことを言います。
例えば、当社のトップページはパソコンで見ると上記のように見えますが、スマートフォンで見ると以下のようになります。
スマートフォンは、画面サイズが小さいくなっているので、パソコンでの見栄えをそのままスマートフォンで表示させると、文字サイズが小さくて読みづらいや、間違えてリンクをクリックしてしまうなどの問題が発生します。
そのため、モバイルフレンドリーなホームページとして、それぞれのデバイスで適切にホームページが利用できることをスマホ対応と言います。
ホームページをスマホ対応させる方法
ホームページをスマホ対応させる方法を解説します。
レスポンシブWebデザイン作成
ホームページをスマホ対応する方法として、レスポンシブWebデザイン作成があります。
レスポンシブWebデザイン作成とは、1つのソースコードで、パソコンとスマートフォンで異なるレイアウトのホームページを表示させる手法になり、さまざまなメリットがある制作手法になります。
対応デバイスが多い
レスポンシブWebデザイン作成では、ユーザーのデバイスごとにコンテンツを縮小することができるので、どのようなモニターサイズのスマートフォンでも最適化することができます。
制作や運営コストを抑えられる
レスポンシブWebデザイン作成は、1ソースになっているので、ホームページ制作料金を抑えることができたり、運営も1度の更新でパソコンとスマートフォンサイトの両方を更新することが可能です。
Googleが推奨していてSEO効果が出やすい
GoogleはGoogle検索セントラルのモバイルフレンドリーなサイトを作成するの中で、「Googleでは、実装と維持が最も簡単なデザインパターンとしてレスポンシブウェブデザインをおすすめしています。」と発言しています。
レスポンシブWebデザイン作成は、Googleが認識しやすい仕組みになっているので、高いSEO効果を発揮できる可能性があります。
スマホサイトの制作
ホームページをスマホ対応する方法として、スマホサイトの制作があります。
スマホサイトの制作では、パソコンとスマートフォンでそれぞれホームページを制作することを言い、つまりは2サイトの制作が必要になっています。
昨今、スマホサイトの制作は、あまり行われませんが、パソコンユーザーとスマートフォンユーザーで異なるコンテンツを表示したい場合にはおすすめできます。
ただし、デメリットが2つあります。
1つ目が、パソコンとスマートフォンで、それぞれのホームページを制作するということは、制作作業量が2倍になってくるという点で、すなわちホームページ制作時間と料金が2倍になることを意味しています。
さらに、2サイトになってくるので、運営量も2倍になります。
2つ目が、スマホサイトの場合、似たコンテンツのページを2つ作成するということは、適切な設定を行わなければ、Googleから重複コンテンツとして判断されるので、SEOで大きなデメリットになります。
Google曰く、スマホサイトを制作した場合の設定ミスが多くなっていて、多くのホームページが適切なSEO評価を受けることができていないそうです。
具体的には、canonicalタグとalternateタグの2つを設定しなくてはならず、意外と多くのホームページで設定ミスを行い、適切に評価されていないか、間違えて評価されていて、SEO効果を落としているそうです。
そのため、パソコンとスマートフォンでコンテンツを分けたい場合以外は、スマホサイトの制作は辞めた方が良いでしょう。
スマホ対応を行ったホームページの制作法
スマホ対応を行ったホームページの制作法を解説します。
WordPress制作でプラグインやテーマで対応する
スマホ対応におすすめのホームページ制作法は、WordPress制作を行うことです。
WordPress制作であれば、例えばデザインテーマを探す際に、レスポンシブWebデザイン対応と記載のあるテーマを選ぶことで、スマホ対応を行うことができます。
また、レスポンシブWebデザインに対応していないテーマであったとしても、多少の手直しは必要ですが、WPtouchやJetpackなどのプラグインを利用すれば、スムーズにレスポンシブWebデザインが適応されるので、スマホ対応が行えるようになります。
レスポンシブWebデザイン作成
自力でレスポンシブWebデザインに対応する方法もあります。
レスポンシブWebデザインの作成法は、訪問者のデバイスの横幅でレイアウトを切り替えるviewportを設定するのですが、一般論としてのviewportの設定は以下のタグを<head>・・・</head>内に記述します。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
viewport設定後に、グローバルナビゲーションで画像ではなくテキストに変更したり、HTMLやCSSを調整するための知識が必要になるので、お客さまだけで対応することは難しいかも知れません。
スマホサイトなら変換ツールを利用
スマホサイトの制作であれば、有料の変換ツールを利用する方法もあります。
当社は利用したことがありませんが、Web担当者フォーラムに企業向けスマホサイト変換サービス6選、PCサイト → スマホ変換を徹底比較という記事があるので、興味がある方はご覧ください。
スマホ対応の確認法
スマホ対応の確認はディベロッパーツールで行いましょう。
Google Chromeで、確認したいURLのページを開き、キーボードの「ctrl＋shift＋i」を叩くとディベロッパーツールが開きます。
ディベロッパツール開いたら、「ctrl＋shift＋m」を叩くと左側の領域に、「dimemsions」書かれている箇所があるので、そこをクリックすると主要なモバイル端末が表示されます。
確認したい端末をクリックすることで、その端末で該当のページがどのように表示されているかを調べることができるので、モバイル対応の状況を把握することができます。
スマホ対応の注意点
スマホ対応を行う際の注意点を解説します。
Googleはモバイルファーストインデックスを採用
現在のGoogleはモバイルファーストインデックスを採用しています。
モバイルインデックスとは、スマートフォンでのホームページの見栄えで、SEO評価を行っていることを指し、スマートフォンでのユーザーの利用のしやすさが、大きく検索順位に影響を与えています。
そのため、スマホ対応は、単にスマートフォンユーザーの扱いやすさを高めるだけではなく、SEOにおいても重要な要素の1つになっているのです。
ターゲットに最適な方法を行う
スマホ対応の行い方には、レスポンシブWebデザイン作成とスマホサイト制作の2つがありますが、ターゲットユーザーに最適な手法を選択しましょう。
当社のホームページ制作では、パソコンとスマートフォンで同じコンテンツを表示させることが一般的になるので、レスポンシブWebデザイン作成を行いますが、不動産会社のホームページでは、パソコンとスマートフォンで異なるコンテンツを表示させている事例をよく目にします。
例えば、パソコンでアパマンショップのホームページにアクセスすると、https://www.apamanshop.com/のURLになり、以下のページが表示されます。
しかし、スマートフォンでアクセスすると、https://www.apamanshop.com/sp/になり、異なるページが表示されています。
このように、ユーザーにとって、パソコンユーザーとスマートフォンユーザーで、異なるレイアウトやコンテンツを表示させた方が満足度が高くなると思われる場合は、スマホサイトを制作する方が良いと言えます。
高解像度ディスプレイに対応しよう
昨今では、高解像度ディスプレイを搭載したスマートフォンが多くなっています。
高解像度ディスプレイでは、解像度が通常画面の倍必要になっており、画像サイズによっては、ぼやけたりにじんだ画像になるので、ホームページの見栄えとして良いとは言えなくなります。
そのため、スマホ対応を行ったホームページでは、少しだけ大きめの画像サイズを設定してから公開した方が良く、そうすることで、高解像度ディスプレイであったとしても、綺麗な表示が行えます。
ただし、画像サイズが大きすぎると、次はホームページの表示速度が遅くなる可能性があるので、画像を公開しながら適切な画像サイズを探して、自社サイトにとって見やすい倍率の設定を行うようにしましょう。
スマホ対応のまとめ
スマホ対応について解説しました。
現在、パソコンよりもスマートフォンを使ってアクセスするユーザー数が増えているので、スマートフォン対応は必須と言っても過言ではありません。
スマホ対応って何？とお思いの方の参考になれば幸いです。
