「うちのホームページ、スマホで見るとなんか読みにくいんだよね……」
そんな風に感じたことはありませんか? もしかすると、お客さんも同じことを感じて、すぐにページを閉じてしまっているかもしれません。
今やインターネットを使う人の大半がスマートフォンからアクセスしています。にもかかわらず、パソコン向けのデザインのままになっているホームページは、まだまだたくさんあります。
実はこれ、お客さんを逃しているだけでなく、Googleの検索結果にも悪影響を及ぼしているんです。
この記事では、スマホ対応(レスポンシブデザイン)がなぜ重要なのか、対応しないとどんな損をしてしまうのか、そしてどうやって対応すればいいのかを、わかりやすく解説していきます。
この記事でわかること
- スマホからホームページを見る人がどれくらいいるのか
- スマホ対応していないと、具体的にどんな損をするのか
- Googleの「モバイルファーストインデックス」とは何か
- レスポンシブデザインとは何か、他の方法との違い
- スマホ対応するための具体的な方法と進め方
- 自分のサイトがスマホ対応できているかチェックする方法
スマホでホームページを見る人はどれくらい?
「パソコンで見る人もまだ多いでしょ?」と思う方もいるかもしれませんね。でも、実際の数字を見ると驚くと思います。
総務省の調査によると、日本のインターネット利用者のうち、スマートフォンからアクセスしている人は約7割以上にのぼります。特に以下のような傾向があります。
- 20〜40代では、スマホ利用率が90%以上
- 50〜60代でも、スマホからの閲覧は年々増加
- 飲食店や美容室など地域密着型のビジネスでは、スマホからの検索がほとんど
つまり、あなたのホームページに来てくれるお客さんの多くは、スマホの小さな画面でサイトを見ている可能性が高いんです。
パソコンで見たときにはキレイに整っていても、スマホで見たら文字が小さすぎたり、ボタンが押しにくかったり……。それだけで、お客さんは「このお店、ちょっと不安だな」と感じてしまうことがあります。
スマホ対応していないと、どんな損をするの?
スマホ対応していないホームページは、目に見えないところでたくさんの損をしています。具体的に見ていきましょう。
1. お客さんがすぐに離れてしまう
スマホで見づらいサイトを開いたとき、あなたならどうしますか? おそらく「戻る」ボタンを押して、別のサイトを探しますよね。
実際、スマホで表示が崩れているサイトは、約50%以上のユーザーが3秒以内に離脱するというデータもあります。せっかく検索から来てくれたのに、中身を読んでもらえないまま帰られてしまうのは、本当にもったいないですよね。
2. お問い合わせや予約につながらない
ホームページの最終的な目的は、お問い合わせや予約、購入といったアクション(行動)につなげることです。
でも、スマホ対応していないと……
- 電話番号がタップできない
- お問い合わせフォームが小さすぎて入力しにくい
- ボタンが近くにありすぎて、間違ったところを押してしまう
- そもそもお問い合わせページにたどり着けない
こうした小さなストレスの積み重ねが、「まあいいか、他のお店にしよう」という判断につながってしまいます。
3. 信頼感が下がる
スマホで見たときにデザインが崩れていると、「このお店、大丈夫かな?」「ちゃんとしたビジネスなのかな?」という不安を持たれてしまうことがあります。
特に初めてあなたのビジネスを知った人にとって、ホームページは第一印象です。その第一印象が「見づらい、使いにくい」だと、信頼を得るのが難しくなってしまいますよね。
Googleの「モバイルファーストインデックス」って何?
スマホ対応が重要な理由は、お客さんの使い勝手だけではありません。実は、Googleの検索順位にも直接影響するんです。
Googleは2019年から「モバイルファーストインデックス」という仕組みを本格的に導入しました。これは簡単に言うと、こういうことです。
Googleは、パソコン版ではなく「スマホ版」のページを基準にして、検索順位を決めている
以前は、パソコン版のサイトを基準に評価していました。でも今は、スマホ版が基準です。つまり、スマホで見たときに使いやすいサイトが、検索で上位に表示されやすくなるということです。
逆に言えば、スマホ対応していないサイトは、以下のような不利を受けることになります。
- 検索順位が下がる(同じ内容でもスマホ対応サイトより不利)
- 検索結果に「モバイルフレンドリーではない」と表示される場合がある
- 結果として、サイトへのアクセス数が減る
「頑張ってSEO対策しているのに、なかなか順位が上がらない……」という場合、スマホ対応ができていないことが原因かもしれません。
レスポンシブデザインとは?他の方法と何が違うの?
「スマホ対応」にはいくつかの方法がありますが、現在の主流はレスポンシブデザインです。
レスポンシブデザインとは
レスポンシブデザインとは、1つのHTMLファイルで、画面サイズに応じてレイアウトが自動的に変わるデザイン手法のことです。
たとえば、同じページでも……
- パソコンで見ると → 横に3列でコンテンツが並ぶ
- タブレットで見ると → 横に2列になる
- スマホで見ると → 縦に1列で表示される
こんな風に、画面の幅に合わせてデザインが柔軟に変わります。お客さんがどんな端末を使っていても、最適な見た目で表示されるのが特徴です。
他のスマホ対応方法との比較
スマホ対応の方法は、大きく分けて3つあります。
| 方法 | 特徴 | メリット | デメリット |
|---|---|---|---|
| レスポンシブデザイン | 1つのサイトが画面に合わせて変化 | 管理が楽、SEOに有利 | 設計にスキルが必要 |
| スマホ専用サイトを別に作る | PC版とスマホ版を別々に用意 | 各端末に最適化しやすい | 更新が2倍、URLが分かれる |
| アダプティブデザイン | 端末を判別して異なるレイアウトを出す | 細かい調整が可能 | 開発コストが高い |
Googleが推奨しているのはレスポンシブデザインです。1つのURLで管理できるため、SEOの観点でも有利ですし、更新作業も一度で済むので、運用の手間が少なくて済みます。
自分のサイトはスマホ対応できている?チェックする方法
「うちのサイトは大丈夫かな?」と思ったら、以下の方法で簡単にチェックできます。
方法1:スマホで実際に見てみる
一番シンプルな方法です。自分のスマートフォンでホームページを開いて、以下のポイントをチェックしてみましょう。
- 文字が小さすぎて読みにくくないか
- 横にスクロールしないと全体が見えないことはないか
- ボタンやリンクが指で押しやすいサイズか
- メニューが使いやすいか
- 画像がはみ出していないか
- お問い合わせフォームが入力しやすいか
方法2:Googleの「モバイルフレンドリーテスト」を使う
Googleが提供している無料ツール「Google Search Console」を使うと、あなたのサイトがモバイルフレンドリーかどうかを診断できます。
- Google Search Consoleにサイトを登録する
- 「モバイルユーザビリティ」のレポートを確認する
- 問題がある場合は、具体的な改善点が表示される
方法3:パソコンのブラウザで確認する
パソコンのGoogle Chromeブラウザでも、スマホ表示を確認できます。
- ホームページを開く
- F12キー(またはCtrl + Shift + I)を押して開発者ツールを開く
- スマホのアイコンをクリックして、モバイル表示に切り替える
いろいろなスマホの画面サイズでどう見えるかを確認できるので、とても便利ですよ。
スマホ対応するには、どうすればいいの?
では、実際にスマホ対応するにはどうすればいいのか、状況別に見ていきましょう。
すでにホームページを持っている場合
今あるサイトの状態によって、対応方法が変わります。
WordPressを使っている場合:
- レスポンシブ対応のテーマ(テンプレート)に変更するのが最も手軽
- 最近のテーマはほとんどがレスポンシブ対応済み
- テーマを変えるだけで、大幅にスマホ表示が改善されることも
古いHTMLサイトの場合:
- CSSの修正で対応できる場合もあるが、大幅な改修が必要なケースが多い
- 思い切ってリニューアルした方が、結果的にコストも時間も抑えられることがある
ホームページ作成サービス(Wix、Jimdoなど)を使っている場合:
- 多くのサービスがレスポンシブ対応済みのテンプレートを提供
- テンプレートを最新のものに変更するだけで改善されることが多い
これからホームページを作る場合
これから新しくホームページを作るなら、最初からレスポンシブデザインで制作するのが一番です。後から対応するよりも、はるかに効率的でコストも抑えられます。
制作会社に依頼するときは、以下の点を確認しておきましょう。
- レスポンシブデザインで制作してもらえるか
- スマホでの表示確認をしっかりしてもらえるか
- 表示速度にも配慮した設計か(スマホは通信環境が不安定なことも多い)
- タップしやすいボタンサイズやフォントサイズへの配慮があるか
「レスポンシブ対応は標準です」と言ってくれる制作会社を選ぶと安心ですね。
まとめ
この記事では、スマホ対応(レスポンシブデザイン)の重要性と、対応しないことで生じるデメリットについて解説しました。
- インターネットユーザーの7割以上がスマホからアクセスしており、スマホ対応は必須
- スマホ非対応だと、ユーザーの離脱・お問い合わせの減少・信頼感の低下につながる
- Googleの「モバイルファーストインデックス」により、スマホ対応は検索順位にも直接影響する
- 現在のスマホ対応の主流は「レスポンシブデザイン」で、Googleも推奨している
- まずは自分のサイトをスマホで実際に見て、問題がないかチェックしてみよう
- これから作る場合は、最初からレスポンシブデザインで制作するのが最善
「うちのホームページ、スマホで見たらどうなっているんだろう?」と思ったら、今すぐスマホで自分のサイトを開いてみてください。もし見づらいところがあったら、それはお客さんも同じように感じているということです。
スマホ対応は、今のホームページ運営において「やった方がいいこと」ではなく、**「やらないと損をすること」**です。まだ対応できていないなら、ぜひ早めに検討してみてくださいね。