今すぐホームページをスマホ対応に！確認方法や自分でできる方法を紹介

スマホが普及した現代では、ホームページのスマホ対応が必要不可欠です。ホームページのスマホ対応とは、スマホの画面に合わせてホームページを最適化することです。

ホームページをスマホ対応にしないと、スマホユーザーの離脱が増え、顧客を取り逃すことにつながります。

本記事では、ホームページをスマホ対応にしないといけない理由や、スマホ対応になっているかを確認する方法、スマホ対応させる具体的な方法を紹介します。

ホームページのスマホ対応とは？

ホームページのスマホ対応とは、スマートフォン画面での閲覧を最適化させることを指します。

「スマホで見えているから、スマホ対応できている」というのは間違いです。

ここでいう最適化とは以下の条件を満たしていることを指します。

• 文字や画像を横にスライドすることなく表示できる
• 横幅がスマホ画面に収まっている
• パソコン特有の操作(マウスホバー時に色が変わる等)を、スマホに対応した仕様にしている

また、このような条件を満たすには、サイトをレスポンシブデザインに対応させるか、PC用・スマホ用でサイトを別々に作成する必要があります。具体的な方法は、記事の後半で説明しています。

ホームページをスマホ対応させた方が良い3つの理由

ホームページをスマホ対応させるべき理由を改めて詳しく説明していきます。

PCよりもスマホユーザーの方が多い

2000年頃からスマホが普及し始め、その10年後の2010年には2人に1人、2020年ではほぼ8割から9割の人がスマホユーザーとなっています。ここ20年の間にスマホユーザーが急激に増えた結果、パソコンでインターネットに接続してWebサイトを見るよりも、スマホからアクセスする人の方が増えています。

閲覧するサイトの種類やジャンルによっても当然変わってきますが、平均するとスマホからWebサイトにアクセスする人が6割から7割、パソコンが3割、残り5％程度がタブレットという調査結果もあります。

このように、PCからWebサイトにアクセスするユーザーよりも、スマホユーザーの方が多い点から考えてもWebサイトのスマホ対応は必須というわけです。

参考：「スマートフォン市場の変化と現在 数字から探る移り変わり」

ユーザービリティが上がり、離脱率が下がる

離脱率は、Webページがユーザーによって開かれた数と、そのページから離脱した数（WebページだけでなくWebサイトそのものから離脱した）の割合を表す指標です。

計算式はそのページの離脱数÷そのページのPV数（ページビュー数）となります。

スマホ対応していないページは、読みにくい・画像が見にくい・クリックしづらいなどの理由で離脱率が高くなります。見にくいサイトは、閲覧行動そのものがストレスとなり、早く別のサイトに移動したいと思われてしまいます。まずは、ユーザーが離脱する要因を一つずつ減らしていきましょう。

SEOに効果がある

スマホ対応は、SEOの施策としても有効な手段になります。スマホ対応によってユーザーの離脱率が低下すれば、ユーザーがWebサイトを閲覧する時間も増えます。ユーザーの滞在時間が増えることはSEOとしても効果があります。

また、逆にスマホ対応していないサイトは、検索順位が下がる可能性が高いです。2015年以降、スマホ対応していないページは検索順位を下げるとGoogle側が公式に発表しています。もし、現在の検索順位が低くなかなか上がらない場合は、スマホ対応しているかどうかは見直すべき項目の1つです。

>>スマホ対応についてヒトノテに聞いてみる

ホームページがスマホ対応になっているかを確認する方法      

スマホ対応していないホームページをスマートフォンから見た場合は、画面がぎゅっと凝縮されて文字がほとんど見えない状態になったり、画面をスクロールしようとするとおかしな方向に画面が動いてしまったり、リンクがクリックできなかったりします。

ホームページをスマホ対応させることでこれらの問題を解決できるため、デメリットがなくなるだけでなく、スマートフォンからのアクセスも増える可能性があるため、メリットはかなり大きいです。スマートフォン で閲覧した時にスマホ版のホームページが表示されれば、ユーザーは安心してサイトを閲覧できるので、ストレス軽減の意味でも大きな効果があります。

自分のホームページをもっていても、それがスマホ対応になっているかどうかがわからない方もいらっしゃると思います。スマホ対応できていればこれからコストをかけて改修する必要もなくなるので、まずは確認するところから始めましょう。

スマホ対応できているかどうかを確かめるためには、Googleのモバイルフレンドリーテストを行うのがおすすめです。Googleのモバイルフレンドリーテストでどの程度スマホ対応できているのかを確認してみましょう。

参考：モバイル フレンドリー テスト – Google Search Console

このツールは、Googleが提供しているサービスであり、モバイルデバイス＝スマホやタブレットなど＝の使いやすさをテストするものです。自分のホームページのURLを入力し、確認ボタンを押してください。しばらくするとテスト結果が表示されます。

もし、テスト結果が「このページはモバイルフレンドリーです」という表示になっていれば問題ありません。スマホ対応できているということになります。「このページはモバイル フレンドリーではありません」と表示された場合は、修正するべき点も合わせて表示されますので、ぜひ一度試してみてください。

iPhone・Android・タブレット端末への対応を確認する

「スマホ対応」といったら、様々な端末（iPhoneやAndroid、タブレット端末等）に合わせる必要があります。

これは、端末の種類ごとに画面サイズが異なるため、ある1種類の端末では表示できているけれど、他の端末だと、画像がはみ出ていたりするからです。

例えば、iPhoneは画面サイズが一番小さいもので3.5インチ、一番大きいもので6.7インチと同じiPhoneでも約2倍のサイズ差があります。

また、Android端末は4インチのモデルが最も小さく、最も大きいもので6.8インチとなっています。そしてタブレットは、7インチが最も小さく、一回り大きい10インチのモデルもあります。

（2020年12月現在）

この様にスマホは端末によって画面サイズが異なるため、それぞれのサイズに合った形で表示させる必要があります。

また、iPhoneはiOSという独自のOSを使っているため、AndroidにはないCSSがデフォルトで設定されています。

そのことにより、Androidではきちんと表示されているけれど、iPhoneでは表示が崩れてしまっているなんてことも起きてしまいます。

そのため、画面サイズの確認も含め、サイトを「スマホ対応」させた後は、可能な限り多くの端末でテストをしてみるといいでしょう。

ホームページのスマホ対応の3つのパターン

ページをスマホ対応させるためのパターンは、大きく分けて3つあります。それぞれ一長一短がありますので、自サイトに合ったパターンを選びましょう。

レスポンシブデザイン（1つのURLで1つのコンテンツ）

レスポンシブデザインとは、閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザインのことを指します。

具体的には、「画面の横幅が320～1242 pxだったらすべての文字サイズを10pxにして、1243px以上だったらすべての文字サイズを17pxにする」などの命令が1つのサイトのコンテンツとしてあらかじめ組み込まれています。

通常、サイトを閲覧するときは、WEBブラウザ(Google chromeやsafariなど)というアプリケーションを用います。このWEBブラウザはレスポンシブ対応されたサイトを表示するときに、画面サイズを自動的に測定し、その測定した結果をもとにあらかじめ用意されているデザインを表示します。

レスポンシブデザインのメリットとしては、同じURLにアクセスすればデバイスに合わせ自動的に表示を変えてくれるので、パソコンからスマホにURLをメールで送った際に画面サイズが合わないなどの問題が起きることがありません。また「スマホのページはこちら」のようなテキストリンクを設置する必要もないため、サイトを見ている人にとっても手間が省かれている状態になります。

そのため、現在においてほとんどのサイトがレスポンシブ対応されています。

一方、デメリットとしては、レスポンシブ対応していないサイトに比べ読み込む際に時間が掛かってしまうという点です。レスポンシブ対応したサイトでは、スマホでアクセスした場合でも、パソコン用の表示方式とスマホ用の表示方式の2つを読み込んでいます。そのため、サイトを読み込むときの情報量が他のサイトより多くなっています。そのため、レスポンシブ対応していないサイトより読み込む際のスピードが遅くなってしまいます。

1つのURLで2つのコンテンツ

1つのURLに対して、2つのコンテンツを用意するパターンです。1では、見せ方を変えることでホームページを見るデバイスが変わっても対応させていましたが、こちらのパターンでは、見せ方を変えるのではなく、コンテンツ自体をデバイスごと（ユーザーごと）に変えてスマホ対応を行います。

コンテンツが異なるので、HTMLも異なります。スマホユーザーとPCユーザーで異なるコンテンツを配信していきたい場合は便利ですが、同じコンテンツを配信していきたい場合は、毎回PCとスマホでそれぞれ更新を行わなくてはいけないため、1のレスポンシブデザインよりも工数がかかる点がデメリットです。

2つのURLで2つのコンテンツ

3つめは、PCとスマートフォンでそれぞれ別々のURLとコンテンツを用意するパターンです。PCのページを見ていた際に、「スマホのページはこちら」というテキストリンクを目にしたことははありませんか？

PC用に作成しているホームページは、スマホから見ると文字が小さくて見えにくかったりもします。そういった場合に、PCからスマホ用サイトに誘導することで解決を図るスマホ対応方法です。

ホームページをスマホ対応させる具体的な4つの方法

それでは、ホームページをスマホ対応させるために、具体的にどんな方法があるのかを見ていきましょう。

自動変換ツールを利用する

例えば、自動変換ツールと呼ばれるものを使って、既存のページをスマホ対応させることができます。

以下では、自動変換ツールの例をご紹介します。有料ですが、自動的に変換してくれるので技術や知識がない方でも気軽に利用することができます。

モビファイ

パソコン用とスマホ用のサイトを分けない、レスポンシブデザインに変換されます。SEOにもマイナスな影響が出ないため、安心してスマホ対応できます。

フラミンゴ

こちらは規模の大きなサイトのスマホ対応を行うのに適したツールです。

スマホ対応の際のデザイン自由度が高いのが特徴ですが、HTMLやCSSといった一定レベルの専門知識が必要になるので、注意が必要です。管理画面からページやコンテンツ単位でスマホ対応ができる他、まったく新しいスマホ用ページを作ることもできます。

WordPressのプラグインを利用する

WordPressを利用してホームページを作っている方は、専用のプラグインをインストールして設定すればスマホ対応することが可能です。

一例としまして、WPtouchというプラグインがあります。インストール時に不具合が起きる恐れもあるため、テスト環境で試してから本番環境に反映することをおすすめします。不安であれば、専門知識を持ったエンジニアに依頼するのが良いでしょう。

スマホ対応したデザインのホームページを1から作る

もちろん、スマホページを1から作ることもできます。今のホームページを全面的にリニューアルして、新しいものを作る場合におすすめの方法です。

コスト面や運用面をシンプルにしたい方にとっても、パソコンとスマホでコンテンツにそごが起きないよう、レスポンシブデザインで作ることをおすすめします。

スマホ対応できる専門家に依頼する

スマホページを1から自力で作ることも不可能ではありませんが、1つのホームページ制作するためには、さまざまな知識が必要になりますし、画像やテキスト、動画などのコンテンツ作成についても自分1人だけで行うのは非常に困難です。

また、自分でスマホ対応を行う場合、プロ並みのスキルを持っているのであれば問題ないですが、スマホ対応後のホームページのクオリティは完全に担当者のスキルに依存してしまいます。

非常に多くの工数もかかってくるため、他の業務と両立させながら対応していく場合、かなりの日数が必要になることが予想されます。そして、自分で行うことの最も大きなデメリットは、ユーザー視点を維持することが難しいということです。実際のWebサイトの見やすさや使いやすさはユーザーが判断するものです。

自分で制作する場合、既にホームページの中身を知っているため、ユーザーからの視点を持つことが難しくなり、結果としてユーザーが使いづらいホームページになってしまう可能性もあります。

そういった理由から、自信のない方は、1から作る際はプロの制作会社に依頼することをおすすめします。

>>スマホ対応についてヒトノテに聞いてみる

ヒトノテにスマホ対応を依頼した場合のメリットと具体的なプロセス

ヒトノテでは、SEOのためのスマホ対応はもちろん、ユーザビリティを意識したスマホ対応のご支援が可能です。最近ではCore Web Vitalsというアルゴリズムが新たに導入されることもあり、単にレスポンシブウェブデザインにすれば大丈夫ということでもなくなりました。

お客様に課題やご依頼に具体性がない場合でも、弊社ではコンサルタントが貴社のサイトを分析して要件定義をすることが可能です。「何をやればよいかわからないけど何も出来てないからなんとかしたい」という方でも、遠慮なくご相談ください。

まとめ

ホームページのスマホ対応についてご紹介しました。スマホ対応は、スマホからWebサイトを閲覧するユーザーが多いこと、SEOの観点、ユーザーの使い勝手、集客数や売り上げなど、サイト全体に関わるさまざまな要素から考えると、未対応の場合は今すぐに対応した方が良い課題です。

スマホ対応させるための知識がない場合は、そのページ自体の完成度、コンテンツ、コスト、運用面から考えても、自力で行うよりも外注した方が良いでしょう。まずは、ご自身のホームページがスマホ対応されているかどうか、チェックするところから始めましょう。

>>スマホ対応についてヒトノテに聞いてみる

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。