【集客のプロが解説】ホームページのスマホ対応|方法・費用・注意点まとめ

「ホームページはあるのに、問い合わせがなかなか来ない…」

そう感じている経営者・個人事業主の方は、ホームページをスマホ対応にできていない可能性があります。

以前ご相談いただいた愛媛県内の整骨院経営者のホームページは、スマホで開くとロゴ以外の文字が認識できないほど小さくなっていました。PCでは表示できていた問い合わせボタンがスマホ画面に収まらず、はみ出している状態でした。

このような状態は、長期間更新できていない中小企業事業者のホームページによく見られます。

スマホで検索することが主流となった昨今では、ホームページのスマホ対応は必須です。

この記事では、スマホ対応の基本から、対応方法・費用相場・外注の判断基準まで、Web集客の視点でわかりやすく解説します。

目次

ホームページのスマホ対応(モバイルフレンドリー)とは

そもそもホームページのスマホ対応とはどういう状態を指すのか、定義と確認方法を整理しましょう。

  • スマホ対応とは
  • スマホ対応しているか確認する方法

スマホ対応とは

ホームページのスマホ対応とは、スマートフォンの画面サイズに合わせて、適切に表示・操作できる状態のことを指します。Googleではモバイルフレンドリーとも呼ばれています。

誤解されやすいですが、スマホで開くことができた=スマホ対応できている、というわけではありません

大画面のPCサイトに最適化されたページをそのままスマホで表示すると、文字が極端に小さくなったり、ボタンが押せないほど操作に影響を与えたりすることがあります。

スマホで開けても、実際には使い勝手の悪い状態になっているケースは少なくありません。

スマホ対応しているか確認する方法

自分のサイトがスマホ対応しているかどうかは、以下の3つの方法で確認できます。

  • Lighthouseの拡張機能:Chromeウェブストアで「Lighthouse」を検索してインストール。確認したいサイトを開いてアイコンをクリックするだけでスマホ対応状況・表示速度・SEO評価をまとめてチェックできます。
  • スマートフォンの実機で確認:実際の表示・操作感を直接チェック。iPhoneとAndroidで表示が異なる場合があるため、両方での確認が理想的です。
  • Chromeのデベロッパーツール(モバイル表示シミュレーション):右クリック→検証をクリック→デバイスツールバーのアイコンから、スマホ表示をPC上で確認できます。

おすすめなのがLighthouseです。

サイトを開いてアイコンをクリックすることで、PageSpeed Insightsというページが立ち上がり、スマホ対応状況・表示速度・SEO評価などの診断結果を数値で教えてくれます。

もちろん、目視で見やすく操作しやすい状態かを確認することも可能です。

ホームページをスマホ対応にする必要性と集客への影響

ホームページのスマホ対応はあれば便利な対策ではなく、集客・問い合わせに直結するため必須といえます。

  • 訪問者の離脱・機会損失を防ぐため
  • SEO評価に直結するため
  • 問い合わせ・集客に直接影響するため
  • SNSやWeb広告の効果を無駄にしないため

4つの観点から解説します。

訪問者の離脱・機会損失を防ぐため

現在、インターネット利用者の8割以上がスマートフォンを使っており、ホームページへのアクセスはスマホで行われることが多いです。

本サイトを訪れる人の割合を確認したところ、スマホで閲覧している割合が75%、PCで閲覧している割合が25%という結果でした。

スマホで開いたときに文字が小さくて読めない、ボタンが押せない、画面がはみ出すなどの状態だと、ユーザーはすぐに離脱し、スマホ対応された見やすい競合サイトへと流れていきます

また、リンクをタップしてから3秒待っても表示されなければ、約4割のユーザーが離脱するというデータもありますスマホですぐ開けるスピードもスマホ対応の一環といえるでしょう。

スマホ対応は、訪問者を逃さないための最初の関門です。

SEO評価に直結するため

Googleは、モバイルファーストインデックスという方針を採用しており、検索順位の評価をPCサイトではなくスマホサイトの状態を基準に行っています。

そのため、PCでのレイアウトよりもスマホでのレイアウトの方がSEOにおいて重要といえます。

つまり、SEO対策するのであれば、前提としてスマホ対応が必須となるでしょう。

どれだけよいコンテンツを書いても、スマホ表示が崩れているだけでGoogleからの評価が下がります。

あわせて読みたい
【初心者入門】SEO対策とは?基本的な考え方や具体的な施策を図解付きで解説 Webサイトでのアクセスや集客、お問い合わせを増やしたいと考えたタイミングで、「SEO対策」という言葉を知った方も多いのではないでしょうか。 SEO対策はWeb集客の代表...

問い合わせ・集客に直接影響するため

昨今、スマホで検索してその場で問い合わせるという行動は一般的です。

そのため、スマホ対応できておらず、問い合わせまでの行動にストレスを感じるサイトでは、問い合わせ自体が発生しにくい構造になっています

特に「地域名+業種」で検索するユーザー(例:「松山市 税理士」「今治市 リフォーム」)は、スマホからのアクセスが多い傾向にあります。

地域に密着した事業を行うのであれば、スマホ対応が重要になるでしょう。

SNSやWeb広告の効果を無駄にしないため

InstagramやLINE公式アカウントをチェックするユーザーのほとんどがスマホを使っています。

SNSやWeb広告から興味を持ってサイトに訪問してくれても、スマホ未対応で見づらいサイトであれば、せっかく高まった購買意欲がその場で失われかねません

SNSや広告の効果を最大化するためにも、まずサイトを整えることが先決です。

スマホ未対応サイトで起きているホームページの集客ロス5つ

「スマホで開けているから大丈夫」と思っていても、実際には集客の機会を失い続けているケースは非常に多いです。

  • 検索で見つかっても、開いた瞬間に離脱されている
  • 電話したいのに番号が押せない
  • 問い合わせフォームがスマホで入力できない
  • SNSや広告から来たのに、サイトで興味が失われる
  • 競合に見た目だけで負けている

よくある5つのパターンに当てはまっていないか確認してみてください。

検索で見つかっても、開いた瞬間に離脱されている

SEOで上位に表示されていても、スマホで開いたときの第一印象が悪ければ即離脱されます。

  • 文字が小さい
  • どこから問い合わせればよいのかわからない
  • ページ全体が画面に収まっていない
  • デザインに古さを感じる
  • そもそも読み込みが遅い

上記のような状態だと、信頼できないサイトという印象をわずか数秒で与えてしまいます

そもそもこのような状態が続くと、検索結果に上位表示されることもなくなるでしょう。

アクセスはあるのに問い合わせが来ない場合、ここで詰まっているケースが非常に多いです。

電話したいのに番号が押せない

スマホで検索しているユーザーの多くは、電話番号の記載を見て、そのまま電話したいと考えています。

電話番号にtel:リンクが設定されていないと手動でかけ直す必要があり、その手間がかかるとわかった瞬間に多くのユーザーが離脱します。

以前、愛媛県内の製造業者さんのサイトを確認した際、電話番号にリンクが設置されておらず、電話での問い合わせにつながっていないケースがありました。

tel:リンクを設定しただけで、翌月の電話問い合わせを件数獲得できました。

電話番号を入力して電話することはほんの小さな手間かもしれませんが、ユーザーは我々が思っている以上に怠惰で楽をしようと思っています

そのため、ユーザーの次の行動を先回りして提供してあげることが、問い合わせにつながります。

問い合わせフォームがスマホで入力できない

入力欄が小さすぎる・項目が多すぎる・送信ボタンが押しにくい、といった問い合わせフォームはスマホユーザーにとって大きなストレスです。

問い合わせページにたくさんの入力項目が小さな文字で並んでいるのを見たユーザーは、別のサイトに離脱します。

フォームまで来てくれたユーザーは問い合わせの意欲が高い状態のため、離脱させてしまうのは最もコストの高い機会損失といえるでしょう。

スマホに対応したフォームへの最適化は、問い合わせ数に直結しやすい改善ポイントです。

SNSや広告から来たのに、サイトで興味が失われる

InstagramやLINEの投稿を見てサイトに来てくれたユーザーは、購買意欲が高い状態です。

しかし受け皿となるサイトがスマホ未対応だと、高まった興味がその場で冷めてしまいます。

特にSNS、LINEなどの運用を丁寧に行い、オシャレなイメージをユーザーが抱いている場合、サイトとのギャップを感じて離脱につながりやすくなります

広告費をかけても効果が出ない原因が、サイトそのものにあるケースは少なくありません

競合に見た目だけで負けている

ユーザーは複数のサイトを比較しながら検討しています。

サービスの質では負けていなくても、スマホでの見た目が崩れているだけで「古い会社」「信頼できるかわからない」という印象を与えてしまいます。

スマホ対応された競合サイトと並んだとき、サービスの質すら見てもらえず見た目の差だけで競合に負けるかもしれません

違いがわかりづらいサービスの場合、サイトの見た目でユーザーに判断されることもあるため、スマホ対応は必須といえます。

ホームページをスマホ対応にする3つの方法と選び方

ホームページをスマホ対応にする方法は大きく3種類に分けられます。

  • レスポンシブデザインで作成する
  • 自動変換ツールを使う
  • スマホ専用サイトを別途作成する

それぞれの特徴と、状況に応じた選び方を解説します。

方法①|レスポンシブデザインで作成する

閲覧しているデバイスの画面サイズに応じて、レイアウトが自動的に切り替わる設計をレスポンシブデザインといいます。

レスポンシブデザインは現在のホームページ制作の主流であり、スマホ対応されたデザインとしてGoogleがSEO的に最も推奨している方法です。

レスポンシブデザインはSEO的に強く、表示速度が速い点がメリットといえます。

しかし、既存サイトをレスポンシブデザインに変更することは難しいため、すでにサイトがある場合はリニューアルとなることが多いです。

あわせて読みたい
ホームページリニューアルとは?目的・タイミング・進め方を集客のプロが解説 ホームページを作ったのに問い合わせが来ない、デザインが古くなってきた。 このような悩みをきっかけにリニューアルを検討する方は多いですが、リニューアルを単なるデ...

方法②|自動変換ツールを使う

既存のPCサイトをスマホ向けに自動変換してくれるツールを活用する方法もあります。

すぐにサイトリニューアルできない場合のにおすすめの方法です。

サイトリニューアルより安くスマホ対応できるものの、決して安い金額ではありません。

初期費用とランニングコストを合わせて、小規模サイトで年間10万円程度、中規模サイトで年間40万円程度必要になります。

またSEO効果が高いとはいえず、細かい調整が難しいためデザイン崩れが起きやすいデメリットもあります。

あくまでスマホ対応の応急処置として位置づけ、並行してリニューアルを検討するのが現実的です。

方法③|スマホ専用サイトを別途作成する

PCサイトとは別に、スマホ専用のURLでサイトを作る方法もあります。以前は使われることもありましたが、現在はほぼ推奨されません。

サイトの管理や更新の手間が2倍になるだけでなく、重複コンテンツとしてSEOに悪影響を与える可能性もあるためです。

スマホ対応の手段の一つではありますが、おすすめできません。

どの方法を選ぶべきか

状況別の判断軸を以下の表にまとめます。

状況おすすめの対応
新規制作・全面リニューアルを検討中レスポンシブデザイン一択
既存サイトの緊急対応が必要自動変換ツールで一時対応しながら、並行してリニューアルを検討
5年以上前に作ったサイトで全体的に古いスマホ対応と同時にリニューアルが費用対効果◎
最近作ったがスマホ表示が気になる部分改修でOK

自分の状況に合った対応がわからない場合は、まず現状のサイトがどのような状態なのか相談することをおすすめします。

WordPressサイトのスマホ対応:具体的な2つの方法

WordPressは、ホームページ制作のプラットフォームとして圧倒的なシェアを占めています。

企業サイト・個人サイトともに、ホームページ制作にWordPressを使用することが多いため、WordPressでのスマホ対応の具体的な方法を解説します。

  • レスポンシブ対応テーマに変更する
  • プラグインでスマホ表示を最適化する

対応方法①|レスポンシブ対応テーマに変更する

WordPressのテーマとは、Webサイトのデザインやレイアウト、装飾、機能などを一括で変更してくれるフォーマットのことです。

レスポンシブ対応されたテーマをWordPressに挿入することで、簡単にスマホ対応されたホームページが制作できます。

WordPressのテーマには有料テーマが多く存在しますが、無料テーマでもスマホ対応しているものが多く揃っています。

ただし、テーマを変更するとサイト全体のデザインが大きく変わることになります

これまでカスタマイズしていた部分が変更されることになるため、必ず事前にバックアップを取ってから作業してください。

サイト制作の知識がない状態でテーマを変更するのはおすすめできません。やり方がわからない方はプロに対応してもらいましょう。

対応方法②|プラグインでスマホ表示を最適化する

「WPtouch」などのモバイル対応プラグインを使う方法もあります。

WordPressのプラグインとは、サイトに後付けで追加できる拡張機能のことです。

プラグインを追加して有効化すればすぐに使い始められるため、テーマ変更より手軽に対応できます。

しかしデザインや機能に制限があるため、自動変換ツールと同様に、あくまで一時的な対応として活用するのが現実的です。

WordPressでスマホ対応するときの4つの注意点

WordPressでスマホ対応する際に、以下の4つに注意しましょう。

  • 文字サイズ・タップ領域を適切に設定する
  • ページ表示速度を速くする
  • 実機でデザインの確認を必ず行う
  • 問い合わせ導線(CTA)がスマホで機能しているか確認する

それぞれ解説します。

注意点①|文字サイズ・タップ領域を適切に設定する

スマホは指で操作するため、ボタンやリンクが小さすぎると押せません。

一般的な目安として、文字のサイズは14px以上、ボタンは44×44px以上を確保することが推奨されています。

当サイトをスマホで閲覧した際のフォントサイズは16pxで、設置しているボタンのサイズは約330×47pxとなっていますので、参考にしてみてください。

特にご年配の方をターゲットにしている医療、介護、福祉などの業種では、サイズに注意して設定しましょう。

注意点②|ページ表示速度を速くする

スマホ回線でも快適に表示されるようにしましょう。

タップした瞬間に表示されるサイトがほとんどの中で、数秒待ってもサイトが読み込まれなければ諦めて、別のサイトに移動するはずです。

ページの表示が遅いだけで離脱率が上がり、SEO評価も下がります

たとえば、低画質な画像はユーザー体験としてマイナスな評価を与えてしまいますが、画像サイズが大きすぎても表示速度を下げる原因になるため、最適な画像サイズにすることが重要です。

ページ表示速度を測る方法として、「Google PageSpeed Insights」にURLを入力することで無料でスコアを確認できます。

注意点③|実機でデザインの確認を必ず行う

スマホプレビューのシミュレーションはPCからでも可能ですが、実際のスマートフォンで表示・操作を確認することをおすすめします

あくまでシミュレーションのため、実際のスマホで確認するとズレが起きている可能性があります。

また、iPhoneとAndroidで表示が異なる場合もあるため、両方での確認が理想的です。

注意点④|問い合わせ導線(CTA)がスマホで機能しているか確認する

スマホ対応で見落とされやすいのが、問い合わせへの導線です。

以下の4点を必ずチェックしましょう。

  • 問い合わせボタンがスマホ画面で押しやすい位置にあるか
  • 常にボタンが押せるように配置されているか
  • 電話番号はタップで発信できるか(tel:リンクが設定されているか)
  • フォームがスマホで入力しやすいか

ユーザーが問い合わせたいと思ったタイミングでボタンが表示されていなければ、機会損失になりやすいです。

スマホ対応は見た目を整えるだけでなく、ユーザーが問い合わせや購入などのアクションを起こしやすい状態にするまで考えて行いましょう。

スマホ対応ホームページの費用相場と選び方の基準

費用はページ数・デザインの複雑さ・依頼先によって大きく変わります。

目安として以下を参考にしてください。

対応内容費用目安こんなケースに
スマホ対応のみ(部分改修)3万〜15万円程度表示崩れだけ直したい場合
WordPressテーマ変更15万〜40万円程度デザインを一新したいが記事データは残したい場合
フルリニューアル50万円〜全体的に古く、集客強化も同時に行いたい場合

部分改修の方が難易度が高く、費用が高くなる可能性もあるため、一概にはおすすめできません。

また、既存サイトの内容をリニューアルしたサイトに反映させるとなると、スマホ対応ホームページを新規制作するよりもコストがかかる可能性があります

セキュリティやSEOの観点からも、5年以上前に作ったサイトであれば、スマホ対応だけを部分的に直すよりフルリニューアルのほうが長期的なコストパフォーマンスが良くなるケースが多いです。

いくら払うかよりも、集客につながるかどうかという視点で判断することをおすすめします。

ホームページをスマホ対応しても問い合わせが増えない3つの理由

「スマホ対応したのに、問い合わせが増えない」というご相談は頻繁にいただきます。

スマホ対応はあくまで入り口を整えるための施策であり、入り口が整っても中身が整っていなければ問い合わせにはつながりません。

  • 理由①|問い合わせへの導線が設計されていない
  • 理由②|コンテンツがユーザーの疑問に答えられていない
  • 理由③|そもそもアクセスが集まっていない

原因として多い3つを解説します。

理由①|問い合わせへの導線が設計されていない

  • 問い合わせ方法がわかりづらい
  • CTAが1箇所にしかない
  • 電話番号をタップして発信できない

このような状態では問い合わせは発生しません。

以前支援した不用品回収業者の方は、電話番号へのリンク設定と画面下部への固定CTAボタンを追加しただけで、スマホからの問い合わせ数が翌月から変わり始めました。

ユーザーが次にしたい行動を考えて導線を設計することは、作業のコストは少ないですが効果的です。

理由②|コンテンツがユーザーの疑問に答えられていない

  • 料金が記載されていない
  • どんな人に向けたサービスかわからない
  • 実績や事例がない

このような状態では、ユーザーは安心して問い合わせできません。

スマホで見やすくなっても、コンテンツで信頼を与えられなければユーザーに離脱されてしまいます

ユーザーが求めている情報やキーワードを把握して、提供する必要があります。今のサイトに何が足りていないのかわからない方は、無料相談でお伝えしますのでご利用ください。

理由③|そもそもアクセスが集まっていない

スマホ対応したホームページを作ること自体もSEO対策のひとつですが、スマホ対応しただけで検索順位が上がるわけではありません。

その他のSEO対策・コンテンツの充実・地域系キーワードへの最適化など、アクセスを集めるための施策は必要です。

そもそも問い合わせを増やすにはアクセスが必要で、アクセス数を集めるための施策にも取り組まなければなりません。

あわせて読みたい
ホームページで集客できない原因とは?費用をかけず集客できた成功事例も ホームページは、作っただけでは集客できません。 しかし、多くの事業者が制作=完成だと思い、ホームページを放置した結果、アクセスも問い合わせも伸びない状態に陥っ...

ホームページのスマホ対応はプロに依頼すべき?

自分でやるかプロに依頼するかは、目的と現状のスキル・時間によって判断が変わります。

それぞれのケースに合わせて検討しましょう。

自分でやるのに向いているケース

  • WordPressを使っていて、ある程度操作に慣れている
  • まず費用をかけずにスマホ対応の確認・簡易改善をしたい
  • html、CSSのスキルがある

これらにすべて当てはまっているのであれば自分で対応しても問題ないでしょう。

しかし、テーマを追加するだけでレイアウトは一気に変化します

テーマを入れてからデザインを整える作業が必要になるため、html、CSSのスキルがある程度必要になるでしょう。

プロに依頼したほうがよいケース

  • 一瞬でもサイトのレイアウトが崩れた状態になるのを避けたい
  • サイト全体のデザイン・構成から見直したい
  • スマホ対応だけでなく、集客・問い合わせにつながるサイトに改善したい
  • 作業する時間・スキルがない
  • 「スマホ対応したはずなのに問い合わせが増えない」という状態を解決したい

PCで閲覧するためにデザインされたサイトは、一部だけを変更しようとしても他のデザインが崩れる、それを修正しようとすると別のデザインが崩れる、というように連鎖してデザインに影響を及ぼすことも少なくありません

サイトの規模が大きくなるほど難易度が上がるため、最初からプロに依頼するのも一つの手です。

「サイトを見てもらえているのに問い合わせが来ない」という場合は、スマホ対応以外の要素(導線設計・CTAの設置・コンテンツの質・SEO)も合わせて見直すタイミングかもしれません。

ホームページのスマホ対応に関するよくある質問

ホームページのスマホ対応に関するよくある質問をまとめました。

  • スマホ対応していないと検索結果から消えますか?
  • WordPressのサイトは自動でスマホ対応されますか?
  • スマホ対応だけを業者に依頼できますか?
  • スマホ対応しても問い合わせが増えないのはなぜですか?

それぞれ解説します。

Q.スマホ対応していないと検索結果から消えますか?

消えるわけではありませんが、検索順位が低くなる可能性が高いです。

GoogleはモバイルファーストインデックスをSEOの評価基準に採用しており、スマホ対応はSEOの前提となっています。

検索順位が低くなり、たとえば検索結果の5ページ目まで進めなければ表示されないような状態だと、検索結果から消えているのと同等と考えられるかもしれません

検索結果に適切な順位で表示されるようにスマホ対応を行いましょう。

Q.WordPressのサイトは自動でスマホ対応されますか?

テーマにもよりますが、基本的にはテーマを入れることで自動でスマホ対応になります。

テーマを導入して動かすのがWordPressの主流で、導入できるテーマのほとんどはスマホ対応されています。

しかし、サイト自体はスマホ対応できていても、ボタンが小さくて押しづらい、問い合わせフォームが使いづらいなどのスマホ最適化不足な状態になっている可能性はあります

WordPressを使っているからスマホ対応は問題ないと考えるのではなく、モバイル端末を手に取ってサイトを確認してみてください。

Q.スマホ対応だけを業者に依頼できますか?

可能です。ただし既存サイトの構造によっては部分対応が難しく、リニューアル対応になるケースもあります。

また、スマホ対応のみの改修はリニューアルと比較して一般的ではないため、実績を掲載している業者も少なく、業者を選ぶのも簡単ではありません。

スマホ対応の依頼はリニューアルを提案される可能性も頭に入れて行いましょう

Q.スマホ対応しても問い合わせが増えないのはなぜですか?

スマホ対応はあくまで入り口です。

問い合わせを増やすには、導線設計・CTAの設置・コンテンツの質・SEOなど、スマホ対応以外の要素も整える必要があります

見てもらえているのに問い合わせが来ないという場合は、サイト全体の設計を見直すタイミングかもしれません。

あわせて読みたい
【とりあえずで始める前に】初心者向けWeb集客の基本戦略と正しい始め方 Web集客は、WebサービスやECサイトを展開する事業者はもちろんのこと、地方の店舗ビジネスのようにWebとのつながりが薄い事業者にも効果を発揮します。 Web集客には初心...

まとめ:ホームページのスマホ対応は集客の入り口

スマホ対応はあれば便利なデザインではなく、集客するために必須の対策です。

自身のサイトがスマホにどの程度対応できているのか、スマホ端末から確認してみてください。

また、現状のサイトに問題がないかプロに確認を依頼したい、スマホ対応と一緒に集客改善も検討しているという方は、お気軽にご相談ください。

愛媛県を中心に、中小事業者・個人事業主のWeb集客支援を多数手がけてきた経験から、現状のサイトを確認したうえで優先すべき改善点をお伝えします。

目次