ホームページの表示が遅い・スマホで見にくい|原因の9割は画像です

この記事の要約

  • いまホームページを見る人の7割前後がスマートフォンです。業種によっては9割を超えます。
  • まずご自身のスマートフォンで、自社サイトを開いてください。これだけで判断できます。
  • 表示が遅い原因は、ほとんどが画像です。デジタルカメラの写真をそのまま載せると、極端に重くなります。
  • 3秒を超えると、離脱が大きく増えるとされています。遅いサイトは、読まれる前に閉じられます。
  • 費用の目安はスマートフォン対応で10万〜30万円、表示速度の改善だけなら3万〜10万円です。
  • 費用0円でできることがあります。画像の縮小と、不要なプラグインの削除です。
目次

まず、ご自身のスマートフォンで開いてください

難しい話の前に、これをやってください。

ご自身のスマートフォンで、自社のホームページを開く。

次のどれかに当てはまるなら、対応が必要です。

  • 指で拡大しないと、文字が読めない
  • 横にスクロールしないと、全体が見えない
  • ボタンが小さくて、押し間違える
  • 電話番号を押しても、電話がかからない
  • 表示されるまでに、5秒以上かかる
  • メニューが開かない、または閉じられない

専門的な知識は要りません。使いにくいと感じたら、それが答えです。

私は札幌でホームページ制作をしている個人事業者です。この記事では、何が問題で、いくらかかり、どこから直すべきかを順に書きます。

なぜスマートフォンなのか

いまホームページを見る人の多くは、パソコンではありません。

業種にもよりますが、おおむね7割前後がスマートフォンからのアクセスです。飲食店や美容室では9割を超えることも珍しくありません。

つまり、パソコンで綺麗に見えているかどうかは、あまり関係がありません。大半の人は、スマートフォンで見ています。

検索順位にも影響します

Googleは、スマートフォン版のページを基準に評価しています。

スマートフォンで使いにくいサイトは、検索でも不利になります。見た目の問題だけではありません。

表示が遅い原因は、ほとんどが画像です

ここは、はっきりしています。

表示が遅いサイトの原因は、9割方が画像です。

何が起きているか

デジタルカメラやスマートフォンで撮った写真は、1枚あたり3〜8MB程度あります。これをそのまま載せているサイトが、かなりあります。

ホームページに必要なのは、その10分の1以下です。

トップページに写真が10枚あれば、それだけで数十MBを読み込むことになります。光回線なら気づきませんが、外出先の電波では10秒以上かかります。

3秒が分かれ目とされています

表示までの時間が長くなるほど、離脱する人が増えます。3秒を超えたあたりから、離脱が大きく増えるとされています。

どれだけ良い内容を書いていても、読まれる前に閉じられていては意味がありません。

費用0円でできること

制作会社に頼まなくても、改善できる部分があります。

1. 画像を小さくしてから載せる

これが最も効きます。

目安は次のとおりです。

  • 横幅……1200〜1600ピクセル程度で十分です
  • ファイルサイズ……1枚200KB以下を目標に

無料の画像圧縮サービスがいくつもあります。ファイルを放り込むだけで、見た目をほとんど変えずに容量を10分の1にできます。

すでに載せている画像も、差し替えれば効果が出ます。トップページの写真だけでも変えてください。体感で分かるほど変わることがあります。

2. 使っていないプラグインを消す

WordPressの場合、入れたまま使っていないプラグインが、表示を遅くしています。

管理画面から確認し、使っていないものは停止して削除してください。停止だけでは残るので、削除まで行ってください。

作業前にバックアップを取ってください。この点は保守費用の記事にも書きました。

3. 電話番号をリンクにする

スマートフォンで電話番号を押したとき、そのまま発信できるか確認してください。

できない場合、機会を失っています。番号を覚えて、電話アプリを開いて、入力し直す。ここで多くの人が離脱します。

WordPressなら、記事の編集画面でリンクを設定するだけです。

費用をかけて直す場合

スマートフォン対応(レスポンシブ化)

パソコン向けだけで作られたサイトを、スマートフォンでも見やすくする作業です。

費用の目安は10万〜30万円です。ページ数と、いまの作りによって変わります。

ただし、作りが古い場合は、リニューアルしたほうが安く済むことがあります。無理に改修するより、作り直したほうが結果的に早い場合があるからです。判断はリニューアルの記事を参考にしてください。

表示速度の改善だけ

すでにスマートフォン対応はできていて、遅いだけの場合です。

費用の目安は3万〜10万円。作業内容は次のようなものです。

  • 画像の一括圧縮と、形式の変更
  • 不要なプラグインの整理
  • 読み込みの順序の調整
  • キャッシュの設定
  • サーバーの設定見直し

費用対効果は高い部類です。数万円で、離脱が減ることがあります。

直す順番

全部を一度にやる必要はありません。安くて効果の大きい順に進めてください。

  • 1. 画像を小さくする……0円。最も効きます
  • 2. 電話番号をリンクにする……0円。取りこぼしを防ぎます
  • 3. 不要なプラグインを消す……0円
  • 4. 表示速度の改善を依頼する……3万〜10万円
  • 5. スマートフォン対応を依頼する……10万〜30万円
  • 6. リニューアルする……20万〜80万円

1〜3を試してから、4以降を判断してください。それだけで十分になることがあります。

スマートフォンで、情報の順番が変わります

見落とされがちですが、「対応している」だけでは足りません。

パソコンでは、画面の左右に情報を並べられます。ところがスマートフォンでは、すべてが縦一列になります。

つまり、何を上に置くかで、見られる情報が変わります。

上に置くべきもの

  • 何をしている事業か……1行で分かるように
  • 電話番号……押せば発信できる形で
  • 営業時間と定休日
  • 場所……地図か、最寄り駅からの案内

「会社の理念」や「代表挨拶」を最初に置いているサイトがあります。パソコンでは自然に見えても、スマートフォンでは、それを全部スクロールしないと連絡先にたどり着けません。

電話ボタンを、画面下に固定する

店舗や、電話での相談が多い業種では、これが効きます。

スクロールしても消えない電話ボタンを、画面の下に置く。どのページからでも、1タップで電話できます。

実装は難しくありません。制作者に「スマートフォン表示のとき、画面下に電話ボタンを固定してほしい」と伝えれば通じます。

問い合わせフォームは、項目を減らす

パソコンでは気にならない入力欄も、スマートフォンでは負担になります。

会社名、部署名、役職、住所、郵便番号、ふりがな。本当に全部必要でしょうか。

必要なのは、多くの場合「名前・連絡先・用件」の3つです。項目を減らすだけで、送信される数が変わります。

この点は問い合わせが来ない原因の記事にも書きました。

文字とボタンの大きさ

数字で挙げておきます。制作者に伝えるときの目安になります。

本文の文字

16ピクセル以上が目安です。それより小さいと、読みにくくなります。

「小さいほうが洗練されて見える」という考え方もありますが、読めなければ意味がありません。特に、年齢層が高いお客様が多い事業では、大きめにしてください。

行の間隔

文字の大きさの1.7〜1.9倍が読みやすい範囲です。詰まっていると、目が滑ります。

ボタンの大きさ

縦横44ピクセル以上が目安とされています。指で押す部分なので、小さいと押し間違えます。

特に、リンクが横に並んでいる場合は注意してください。間隔が狭いと、隣を押してしまいます。

確認の仕方

数字を測る必要はありません。ご自身のスマートフォンで、実際に押してみてください。

押しにくい、間違えて隣を押した。そう感じたら、直す価値があります。お客様も同じことを感じています。

画像を小さくする、具体的な手順

「画像を小さく」と書きましたが、やり方を具体的に書きます。

1. どの画像が重いか調べる

WordPressの管理画面で、メディアの一覧を開いてください。ファイルサイズが表示されます。

1MBを超えているものが、直す対象です。トップページで使っている画像から手を付けてください。

2. サイズを変更する

横幅を1200〜1600ピクセルに縮小します。

パソコンに入っている画像編集ソフトでもできますし、無料のウェブサービスもあります。「画像 リサイズ」で検索すると見つかります。

3. 圧縮する

サイズを変えたうえで、圧縮をかけます。無料の圧縮サービスに放り込むだけです。

3MBの写真が、150KB程度まで落ちます。見た目の違いは、ほとんど分かりません。

4. 差し替える

WordPressの場合、同じファイル名で上書きするのではなく、新しくアップロードして差し替えるほうが安全です。

作業前にバックアップを取ってください。手順は保守費用の記事にまとめました。

今後のために

載せる前に小さくする習慣を作ってください。後から直すより、はるかに楽です。

自動で圧縮するプラグインもあります。ただし、プラグインを増やすこと自体が表示を遅くする面もあります。更新頻度が低いサイトなら、手作業で足ります。

速度に影響する、その他の要因

画像以外にも、原因になり得るものがあります。ただし、画像を直してから見てください。

プラグインの入れすぎ

WordPressのプラグインは、1つ増えるごとに読み込むものが増えます。

20個以上入っている場合は、見直す価値があります。使っていないものを削除するだけで、変わることがあります。

外部から読み込んでいるもの

  • SNSの埋め込み表示
  • 地図の埋め込み
  • 動画の埋め込み
  • チャットの窓口
  • アクセス解析、広告のタグ

これらは、外部のサーバーから読み込まれます。相手側が遅ければ、こちらのサイトも遅くなります。

特に、SNSの投稿一覧を埋め込んでいる場合は影響が大きいです。本当に必要か、一度考えてください。

テーマそのものが重い

多機能なテーマは、使っていない機能の分まで読み込むことがあります。

ただし、これを変えるのはリニューアルに近い作業です。他の対策をすべて試してから検討してください。

サーバーの性能

極端に安いサーバーだと、応答が遅いことがあります。

ただし、優先度は最後です。画像が重いままサーバーを変えても、大きくは改善しません。

業種ごとに、優先する項目が違います

飲食店・小売店

写真が多いので、画像の圧縮が最も効きます。

そして、電話番号と地図を上に。スマートフォンで見ている人の多くは、いまから行こうとしています。

士業・コンサルティング

文章が中心なので、速度の問題は起きにくい業種です。

重要なのは、文字の大きさと行間です。長い文章を読んでもらう必要があるため、読みやすさが直接効きます。

工務店・リフォーム

施工事例の写真が、最大の負荷になります。

1ページに20枚、30枚と並べていると、極端に遅くなります。一覧では小さい画像を使い、詳細ページで大きく見せる作りにしてください。

製造業・BtoB

パソコンから見られる割合が、他業種より高い傾向があります。

ただし、採用目的で見る人はスマートフォンです。求人情報のページだけでも、スマートフォンでの見やすさを確認してください。

依頼するときの伝え方

制作者に相談するとき、「遅いので速くしてください」だけでは、範囲が曖昧になります。

具体的に伝える

スマートフォンでの表示について、ご相談させてください。

・トップページの表示に、外出先で10秒ほどかかります
・スマートフォンで、トップページの画像が横にはみ出しています
・電話番号を押しても発信できません
・お問い合わせフォームの入力欄が小さく、押しにくいです

まず、画像の軽量化だけで改善できる範囲があれば、そこからお願いできますでしょうか。
大がかりな改修が必要な場合は、費用と内容をあわせてご提示ください。

「まず安い範囲から」と伝えるのが要点です。いきなり全面改修の見積りが出てくるのを防げます。

見積りで確認すること

  • 作業内容の内訳
  • どのくらい速くなる見込みか
  • 作業後に確認できる形で報告があるか
  • スマートフォンだけか、パソコンも含むか

「どのくらい速くなるか」は、断定できないのが普通です。「必ず何秒になります」と言われたら、根拠を聞いてください。

速度の測り方

感覚だけでなく、数字でも確認できます。

Googleが無料で提供している測定ツールがあります。URLを入れるだけで、点数と改善点が表示されます。「PageSpeed Insights」で検索すると見つかります。

点数を気にしすぎないでください

ここは正直に書きます。

点数を100点にする必要はありません。90点を目指して費用をかけるより、他に投資したほうが良い場面が多くあります。

見るべきは点数そのものではなく、指摘されている項目です。特に「画像のサイズが適切ではありません」といった指摘は、対処が簡単で効果が大きいものです。

また、実際にご自身のスマートフォンで開いた体感を優先してください。数字より確かです。

よくある崩れ方と、その原因

スマートフォンで起きる不具合には、決まったパターンがあります。症状から原因を推測できます。

横にはみ出す

最も多い症状です。原因は、幅が固定された要素が入っていることがほとんどです。

  • 表(料金表、比較表)
  • 大きな画像
  • 埋め込んだ地図や動画
  • 横に並んだボタン

まず、どこではみ出しているかを特定してください。画面を横にスクロールしながら、はみ出している要素を探します。1箇所だけのことが多く、その場合は部分的な修正で直ります。

メニューが開かない、閉じられない

スマートフォンでは、メニューが三本線のボタンにまとまります。ここが動かないと、他のページへ行けません。

これは致命的です。気づかないまま数年経っていることがあります。いますぐ確認してください。

文字が画像になっている

古いサイトに多い作りです。見出しや料金表が、文字ではなく画像で作られている。

この場合、拡大しないと読めません。そして、検索エンジンも内容を読み取れないため、検索でも不利になります。

直すには作り替えが必要です。部分改修では対応できないことが多く、リニューアルの検討対象になります。

電話番号が押せない

番号が画像になっているか、リンクが設定されていないかのどちらかです。

リンクの設定だけなら、数分で直ります。制作者に依頼すれば、費用もほとんどかかりません。

アクセス解析で、実態を確認する

「7割がスマートフォン」と書きましたが、ご自身のサイトの実際の数字を見てください。

見るべき3つの数字

  • 端末ごとの割合……スマートフォン、パソコン、タブレット
  • 端末ごとの離脱率……スマートフォンだけ極端に高くないか
  • 端末ごとの滞在時間……短すぎないか

2つ目が重要です。パソコンからの離脱率が40%なのに、スマートフォンが80%。この差があるなら、スマートフォンで何か問題が起きています。

解析を入れていない場合

無料で入れられます。入れていないと、判断がすべて感覚になります。

設置は制作者に頼めば数千円から対応してもらえます。これは、最初にやるべき投資です。数字がないまま改修に何十万円もかけるのは、順番が違います。

直したあと、どのくらい変わるのか

正直に書きます。問い合わせが劇的に増えるとは限りません。

効果が出やすい場合

  • もともとアクセスがある……月に数百件以上
  • スマートフォンの離脱率が、パソコンより明らかに高い
  • 電話が主な連絡手段の業種

この条件が揃っているなら、取りこぼしていた分が戻ります。費用に対する効果は大きくなります。

効果が出にくい場合

  • そもそもアクセスが少ない……月に数十件
  • 検索で見つけてもらえていない

この場合、スマートフォン対応を直しても、数字は動きません。問題は別のところにあります。

アクセスが少ないなら、直すべきは集客です。記事を増やす、Googleビジネスプロフィールを整える、広告を出す。順番としては、そちらが先です。

原因の切り分け方は問い合わせが来ない原因の記事にまとめました。費用をかける前に、まずここを読んでください。

これから作る方へ

これから制作を依頼する方は、見積りの段階で確認しておいてください。

スマートフォンでの表示について、確認させてください。

・スマートフォン対応は、お見積りに含まれていますか
・スマートフォンでの表示も、確認させていただけますか
・画像の圧縮は、対応いただけますか
・電話番号は、押せば発信できる形にしていただけますか
・スマートフォンでは、どの情報を上に置く想定でしょうか

最後の質問が効きます。ここに答えられる制作者は、スマートフォンでの見え方を考えて作っています。

そして、公開前に必ずご自身のスマートフォンで全ページを確認してください。制作者の端末では問題なくても、機種によって見え方が変わることがあります。

よくあるご質問

パソコンでは問題ないのに、スマートフォンだけ崩れます

よくあります。パソコン向けに作られたものを、後から無理に対応させている場合に起きます。

崩れている箇所が一部なら、部分的な修正で直ります。全体的に崩れているなら、作り直したほうが安く済むことがあります。

表が横にはみ出します

料金表などでよく起きます。表は、横に長くなりやすいためです。

対処は2つあります。表の中だけ横スクロールできるようにするか、スマートフォンでは縦並びに組み替えるか。後者のほうが読みやすくなります。

動画を載せると、遅くなりますか

サーバーに直接置くと、かなり重くなります。

動画共有サービスにアップロードして、埋め込む形にしてください。それでも多少は重くなるので、自動再生は避けたほうが無難です。

自分のスマートフォンでは速いのですが

一度見たページは、端末に保存されているため速く見えます。2回目以降は、本当の速さが分かりません。

確認するときは、別の端末で見る、または回線を切り替えて見てください。外出先で、電波の弱い場所で開いてみるのが現実的です。

古いパソコンでの表示も気にすべきですか

業種によります。アクセス解析で、どの環境から見られているか確認してください。

大半がスマートフォンなら、そちらを優先してください。すべての環境で完璧を目指すと、費用が跳ね上がります。

制作会社に「スマホ対応済み」と言われましたが、見にくいです

「対応している」と「見やすい」は別です。

横スクロールが出ないだけで対応済みと呼ぶこともあります。文字の大きさ、ボタンの押しやすさ、情報の順序まで含めて見てください。

特に、スマートフォンでは電話番号と地図を上のほうに置くべきです。パソコン向けの順序のままだと、下まで探すことになります。

スマートフォン専用ページを別に作るべきですか

いまは推奨されません。1つのページが画面幅に応じて形を変える作り(レスポンシブ)が標準です。

専用ページを別に持つと、更新の手間が2倍になります。

画像を小さくすると、画質が落ちませんか

適切に圧縮すれば、ほとんど分かりません。

画面で見る分には、印刷ほどの解像度は不要です。むしろ、大きすぎる画像は表示のたびに縮小処理がかかり、遅くなります。

サーバーを変えれば速くなりますか

変わることもありますが、先に画像を見てください。

画像が重いままサーバーだけ変えても、大きくは改善しません。順番が逆です。

タブレットも考えたほうがいいですか

レスポンシブで作られていれば、通常は問題ありません。

ただし、横幅1000ピクセル前後で崩れるサイトがあります。タブレットを横向きにしたときの幅です。心配であれば、その幅でも確認してください。

まとめ

まず、ご自身のスマートフォンで自社サイトを開いてください。使いにくいと感じたら、それが答えです。

  • 見る人の7割前後がスマートフォン……業種によっては9割を超えます
  • 検索順位にも影響します……見た目だけの問題ではありません
  • 遅い原因の9割は画像……1枚200KB以下を目標に
  • 3秒を超えると離脱が増えます……読まれる前に閉じられます
  • 0円でできることが3つ……画像の縮小、電話番号のリンク化、不要なプラグインの削除

まずは0円の3つを試してください。それで足りるなら、費用をかける必要はありません。

Amane Worksでは、表示速度の改善やスマートフォン対応のご相談も承っています。現状を確認したうえで、直す必要がない場合はその旨をお伝えします。ご相談とお見積りは無料です。お問い合わせはこちらからどうぞ。

この記事の情報について

この記事は2026年9月時点の内容です。費用は当方および一般的な相場にもとづく目安であり、サイトの状態によって異なります。

アクセスに占めるスマートフォンの割合や、離脱に関する数値は業種や調査によって異なります。実際の数値は、ご自身のアクセス解析でご確認ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次