やってはいけないホームページ制作方法、モバイル対応していない

つちや たけし
1,000社以上の店舗集客と会社集客をサポートしてきたWebマーケティングプランナー。複数のYouTubeチャンネル運営経験を持ち、複数のSNSやサイトを運営、実践的なマーケティング戦略の立案・実行を得意とする。「理論より実践」をモットーに、現場で使える具体的なノウハウを提供している。

大阪でWebマーケティングをしている、つちやたけしです。

ホームページ制作における「絶対にやってはいけないこと」シリーズ。

今回は、今やビジネスの死活問題と言っても過言ではない、このテーマについてお話しします。

それは、「モバイル対応していない(スマホ対応していない)」ということです。

「うちは法人相手(BtoB)だから、みんな会社のパソコンで見るでしょ?」
「パソコンで見たら綺麗だし、スマホでも拡大すれば読めるからいいんじゃない?」
「予算がないから、スマホ対応は後回しで…」

もし、あなたがそう思っているなら、非常に危険な状態です。なぜなら、今のインターネットの世界は「モバイルファースト(スマホ優先)」だからです。

スマホで見にくいサイトは、Googleからも、そしてお客様からも「存在しないもの」として扱われます。

今日は、なぜモバイル対応がこれほどまでに重要なのか、そして対応しないとどんな恐ろしい損失があるのかを、分かりやすく解説します。

スマホで見にくいサイトに困るユーザーのイメージ
目次

モバイル対応の重要性、パソコン専用サイトの時代は終わった

まずは現状を知ってください。今のWebアクセスの大半はスマートフォンからです。

  • 一般消費者向け(BtoC):アクセスの7〜8割、業種によっては9割以上がスマホ
  • 企業向け(BtoB):以前はPCメインでしたが、今や若手担当者や経営者がスマホで情報収集することも多い

電車の中、待ち合わせのカフェ、寝る前の布団の中…。誰もがスマホで検索し、スマホで商品を選び、スマホで問い合わせをします。「パソコンを開いてじっくり見る」という行動自体が減っているのです。

それなのに、あなたのサイトが「パソコン専用」のままだったら?それは、お店の入り口を半分以上閉めているのと同じことです。

モバイル対応していないとどうなるか?6つの損失

「拡大すれば読める」というのは、運営側の言い訳に過ぎません。ユーザーにとってはストレスでしかありません。具体的にどんなデメリットがあるのか見ていきましょう。

1. 文字が小さすぎて読めない

PC用の画面がそのままスマホの小さな画面に縮小表示されると、文字は米粒のようになります。

いちいちピンチアウト(指で拡大)しないと読めません。そして、読み終わったらまた縮小して、横にスクロールして…。

こんな面倒な操作を強いるサイトを、誰が読むでしょうか?「あ、めんどくさい」と思った瞬間に、お客様は離脱します。

2. ボタンが押しにくい

PC用のリンクやメニューは、マウスでクリックすることを前提に作られています。指でタップするには小さすぎたり、間隔が狭すぎたりします。

「お問い合わせはこちら」を押そうとしたのに、隣の違うリンクを押してしまった…。そんなイライラ経験はありませんか?二度と戻ってきてくれなくなります。

3. Googleのモバイルファーストインデックス(MFI)

ここがSEO(検索対策)において最も重要なポイントです。

Googleは現在、「モバイル版のページを基準にして検索順位を決める」というルール(MFI)を採用しています。

つまり、どんなに立派なPCサイトがあっても、スマホ対応していなければ「評価の対象外」になりかねないのです。検索順位を決める土俵にすら上がれない可能性があります。

4. 検索順位が大幅に下がる

さらにGoogleは、「モバイルフレンドリー(スマホで見やすい)」かどうかをランキング要因にしています。スマホ対応していないサイトは、スマホでの検索結果で順位が下げられます。

スマホユーザーが8割いるのに、その検索結果に出ない。これはビジネスにとって「死」を意味します。

5. ユーザー離脱率が激増する

Googleの調査によると、モバイル対応していないサイトを訪れたユーザーの大部分が「すぐに別のサイトに移動する」と回答しています。

せっかく広告費をかけて集客しても、穴の空いたバケツに水を入れているようなものです。6割以上のお客さんを、みすみす競合他社に送っているようなものです。

6. ビジネスチャンスの損失

特に実店舗の場合、「今すぐ行きたい」「電話したい」というニーズがスマホ検索には多いです。

地図が見にくい、電話番号がタップできない。

これだけで、「じゃあ近くの別の店にしよ」となってしまいます。本来得られるはずだった売上を、毎日毎日逃し続けているのです。

モバイル対応の種類、どれを選べばいい?

「じゃあどうやって対応すればいいの?」という方のために、主な3つの方法を紹介します。結論から言うと、「レスポンシブデザイン」一択です。

1. レスポンシブデザイン(★Google推奨)

一つのHTMLファイル(ページ)で、見る人の画面サイズに合わせて自動的にレイアウトが変わる仕組みです。PCで見ればPC用、スマホで見ればスマホ用に表示されます。

メリット: URLが一つで管理が楽、SEOに強い、シェアされやすい。
デメリット: 制作時に設計が必要(今は当たり前ですが)。

2. セパレートURL(別々のサイト)

PC用サイト(www.example.com)と、スマホ用サイト(sp.example.com)を別々に作る方法です。

デメリット: URLが2つになるので管理が2倍大変。リダイレクト設定が必要。今はあまり推奨されません。

3. ダイナミックサービング

URLは同じですが、サーバー側でアクセスしてきた端末を判別して、違うHTMLを表示させる高度な方法です。

デメリット: 技術的に複雑でコストがかかる。設定ミスが起きやすい。

自分のサイトがモバイル対応しているか確認する方法

「自分のサイトは大丈夫かな?」と思ったら、以下の方法ですぐに確認できます。

1. Googleのモバイルフレンドリーテスト

Googleが無料で提供しているツールです。「モバイルフレンドリーテスト」で検索し、自分のサイトのURLを入力するだけ。「このページはモバイルフレンドリーです」と出れば合格です。

2. 自分のスマホで実際に見てみる

一番確実なのはこれです。iPhoneやAndroidで自分のサイトを開いてみてください。

  • 文字は読みやすい大きさですか?
  • 横にスクロールしないと読めない文章はありませんか?
  • リンク同士が近すぎて押しにくくないですか?

モバイル対応で押さえるべき5つのポイント

ただスマホで表示されればいいわけではありません。「使いやすいかどうか」が重要です。以下のポイントをチェックしましょう。

1. 文字サイズ(フォントサイズ)

本文は16px以上が推奨されています。これより小さいと、高齢の方や老眼の方には読みづらくなります。

2. タップしやすいボタンサイズ

指の太さは人それぞれです。ボタンやリンクは、高さ44px以上あると押しやすいと言われています。周りに十分な余白も必要です。

3. 横スクロールさせない

スマホサイトは「縦スクロールのみ」が推奨。画像や表がはみ出して横スクロールが発生すると、ユーザビリティが一気に下がります。画像は画面幅に合わせて自動縮小するように設定しましょう。

4. 電話番号はタップで発信

スマホならではの機能です。電話番号を見たら、タップするだけで発信画面になるようにリンク(telリンク)を設定しましょう。これだけで問い合わせ率が上がります。

5. フォーム入力のしやすさ

お問い合わせフォームの入力欄が小さすぎたり、郵便番号を入れると自動で住所が入らなかったり…。スマホでの文字入力は面倒です。できるだけ入力を補助する機能をつけましょう。

今すぐできる改善方法

WordPressを使っている場合

もしWordPressを使っているなら、ラッキーです。

「レスポンシブ対応」と書かれたテーマ(テンプレート)に着せ替えるだけで、一発でスマホ対応できることが多いです。最近のテーマはほとんど対応しています。

古いHTMLサイトの場合

残念ながら、小手先の修正では難しい場合が多いです。(もちろんツールによって小手先で対応することはできますが、あくまで一時しのぎです)。

HTMLの構造から書き直して、思い切ってWordPressなどでリニューアルすることをおすすめします。その方が結果的に安く済み、SEO効果も高いです。

よくある質問

Q1. PCサイトのデザインをそのままスマホで見せたいのですが?

A. おすすめしません。PCとスマホでは画面の向きも大きさも違います。PCのデザインをそのまま縮小しても、文字が読めなくなるだけです。情報は同じでも、見せ方(レイアウト)は変えるべきです。

Q2. スマホ対応するとPCサイトが見にくくなりませんか?

A. レスポンシブデザインなら大丈夫です。PCで見たときはPC用のレイアウト、スマホで見たときはスマホ用のレイアウトに自動で切り替わります。両方にとって最適な表示が可能です。

Q3. 費用はどれくらいかかりますか?

A. 既存のサイトを修正する場合、規模によりますが数万円〜数十万円かかります。リニューアルの方が安い場合も多いです。最初からレスポンシブ対応込みで作ってくれる制作会社を選びましょう。

Q4. タブレット対応はどうすればいいですか?

A. レスポンシブデザインなら、タブレット(iPadなど)の画面サイズにも自動で適応します。個別に作る必要はありません。

まとめ

モバイル対応は、もはや「あったらいいな」ではなく「ないと土俵に上がれない」必須条件です。

今日のポイント

  • アクセスの8割はスマホから。PC専用サイトは「営業停止」と同じ。
  • スマホ対応していないと、Google検索順位が下がる。
  • ユーザーは「見にくい」と思った瞬間に離脱する。
  • 今やるなら「レスポンシブデザイン」一択。

あなたのサイト、スマホで見られますか?「使いやすい!」「電話したい!」と思えますか?

もしスマホ対応していないなら、今すぐ改善しましょう。

それはコストではなく、未来の売上への投資です。大阪でスマホ集客に強いサイトを作りたいなら、いつでも相談してください。一緒に「スマホで売れる仕組み」を作りましょう!

つちや たけし
1,000社以上の店舗集客と会社集客をサポートしてきたWebマーケティングプランナー。複数のYouTubeチャンネル運営経験を持ち、複数のSNSやサイトを運営、実践的なマーケティング戦略の立案・実行を得意とする。「理論より実践」をモットーに、現場で使える具体的なノウハウを提供している。
目次