ホームページをスマホ対応にする3つの方法や注意点などを解説

スマホで自社のホームページを開いたとき、文字が小さい、ボタンが押しにくいと感じたことはありませんか。
そもそも、スマホに対応できているのかどうか、自分では判断できないという方も多いはずです。

『ホームページがスマホに対応しているか、どこを確認すればよいの？』
『今のホームページを、自分でスマホ対応に直す方法はあるの？』
『制作会社へ依頼する費用は、依頼内容のどこで差が出るの？』

この記事では、スマホ表示の確認方法、自分で対応する3つの方法、外注時の費用の考え方、スマホ対応を進めるときの注意点をまとめました。

まずはスマホでトップページからサービス紹介、お問い合わせページへと順に開き、読みにくい箇所や操作できない箇所がないかを確認しましょう。

※2026年10月30日：記事の情報を更新しました

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

ホームページのスマホ対応とは、小さな画面でも必要な情報を読み取れて、メニューやフォームも操作できる状態に整えることです。

スマホの画面に収まるよう縮小して表示するだけでは文字やボタンも小さくなるため、表示する画面幅に合わせて配置や大きさを変える必要があります。

画面幅に合わせて文字や画像の配置を変える設計方法が「レスポンシブデザイン」です。

たとえば、パソコンでは横に並ぶメニューをスマホでは押しやすい大きさで縦に並べると、狭い画面でも迷わず操作できます。

ホームページのスマホ対応を確認する方法

スマホ対応の確認では、お使いのスマホで主要なページとお問い合わせフォームを操作します。
併せて、パソコンのブラウザで画面幅ごとの表示を調べましょう。

実機で確かめるポイントは、以下の4つです。

フォームは見た目だけで判断せず、ホームページの管理者に事前に伝えたうえでテスト送信を行い、通知メールが届くところまで確認しましょう。

実機がない場合や、さまざまな画面幅での崩れを調べたい場合は、パソコンのブラウザの開発者ツール（デベロッパーツール）が使えます。

出典：Google Chrome

たとえば、Google Chromeでは、ページ上で右クリックして「検証」を選び、画面右上のアイコン「デバイスのツールバーを切り替え」をクリックします。
続けて、画面左上の「サイズ」の中から「レスポンシブ」を選んで幅を変えると、文字やメニューが重なる画面幅を探せます。

ホームページを自分でスマホ対応にする3つの方法

自分でスマホ対応する場合は、WordPressやホームページ作成ツールなど現在の制作環境と、自分で編集できる範囲を確かめたうえで、以下の3つから方法を選ぶのが基本です。

WordPressのレスポンシブ対応テーマを利用

WordPressを使う場合は、レスポンシブ対応のテーマを選ぶと、スマホ表示に合わせた画面を用意できます。

テーマとは、ページの見た目や配置を決める仕組みで、本文の表示に加え、ヘッダーのメニューやフッターの表示にも影響します。

すでにWordPressを利用中なら、現在のテーマがレスポンシブ対応しているかをブラウザの開発者ツールで確認しましょう。
非対応や更新停止の場合は、対応済みのテーマへ変更します。

ほかの方法で作ったホームページを作り直す場合は、WordPressを新たに用意し、文章や画像を移し替えます。

テーマの候補選びから公開前の確認までは、次の順番で進めます。

テスト環境でトップページからお問い合わせフォームの送信までの流れを確認できたら、本番環境のバックアップを取ったうえで、本番のテーマを変更しましょう。

HTML/CSSで既存ページを調整

HTML/CSSを編集できる場合は、viewportの設定（表示領域の指定）と、pxなどの固定幅の指定を見直し、狭い画面でも内容が収まる構成へ変更します。

HTMLは文章や画像などの構造、CSSは大きさや配置などの見た目を指定します。
スマホ対応では、主にHTMLのheadタグ内の設定と、CSSの幅や配置の指定を調整します。

まずはHTMLのheadタグ内に、viewportの設定（meta name=”viewport”）があるかを調べ、なければ追加してください。
そのあと、CSSを調整します。

作業箇所と設定の考え方は、以下のとおりです。

なお、viewportの設定がないと、スマホでもパソコン用の広い画面幅で表示されて縮小されるため、スマホ向けのCSSが意図どおりに働かない場合があります。

無料から使えるスマホ対応テンプレートで作成

HTML/CSSで作られたスマホ対応のテンプレートを土台にすると、必要な内容を入れながら画面を組み立てられます。

テンプレートはページや部品のひな形なので、既存ページにそのまま適用できるわけではなく、文章や画像を移し替える作業が必要です。

選ぶときはデザインに加え、会社概要・サービス説明・お問い合わせへの案内など、自社に必要な構成を用意できるか確認しましょう。

無料で利用できる範囲を把握するため、テンプレート本体と公開・運用に必要なものを分けて確認してください。

テンプレートのコードが無料でも、公開・維持に必要な費用まで無料になるとは限りません。
公開後にかかる費用と更新の手間も含めて比較しましょう。

ホームページのスマホ対応を依頼する費用が変わる条件

制作会社にスマホ対応を依頼する費用は、既存ページを部分的に直すか、デザインや構造から作り直すかによって異なります。
どちらに当てはまるか判断できない場合は、部分的に直す場合と作り直す場合の両方で見積もりを依頼しましょう。

同じページ数でも、全ページが共通のデザインでできていれば、共通部分の修正で対応しやすくなります。
ただし、ページごとに画面の作りが異なる場合は、1ページずつ調べて直す必要があり、作業量と費用が増えやすくなります。

既存のホームページを残す場合も、現在の作りを調べる作業が必要です。
そのため、部分的に直すほうが必ず安くなるとは限りません。
古い仕組みで作られている場合は、修正前の調査や確認に手間がかかることもあります。

一方、作り直す場合は、画面の設計、文章や画像の移し替え、お問い合わせフォームの作成、現在のURLを新しいページへ引き継ぐ設定など、どこまでを依頼に含めるかで費用が変わります。

複数の制作会社の見積もりを比較できるよう、依頼内容を以下の項目でそろえて伝えましょう。

テーマの変更やHTMLの編集、フォームの動作確認などを自社で進めるのが難しい場合は、制作会社への依頼を検討しましょう。

ホームページをスマホ対応にするときの注意点

スマホ対応の作業では、バックアップを取り、重要な情報とお問い合わせフォームを維持したまま公開することが大切です。

以下の5つの点に注意し、ホームページのスマホ対応を進めましょう。

※1 参考：Google検索セントラル「サイト・ホームページ移行について」

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

ホームページ作成ツールの使用時やスマホだけで作成したい場合など、よくある疑問に回答します。

• ホームページ作成ツールを使っている場合はどう対応しますか？
• パソコン用とスマホ用の表示を手動で切り替える必要はありますか？？
• ホームページをスマホだけで作成できますか？

ホームページ作成ツールを使っている場合はどう対応しますか？

ホームページ作成ツールの種類やバージョンによって対応が異なるため、まず公式ヘルプで、スマホ表示の確認方法と調整できる設定を確認します。

代表的なツール・サービスの対応方法は、次のとおりです。

上記以外のツールを使っている場合も、公式ヘルプで「スマホ対応」「レスポンシブ」などのキーワードを検索すると、対応方法を確認できます。

パソコン用とスマホ用の表示を手動で切り替える必要はありますか？？

レスポンシブデザインで作られていれば、ユーザーが表示を切り替える必要は通常ありません。
画面の幅に応じて、自動で配置が変わるためです。

レスポンシブデザインは、パソコンとスマホで同じURL・同じHTMLを使う方式です。
そのため、運営者もパソコン用とスマホ用に同じ文章を別々に登録する必要はありません。

ホームページをスマホだけで作成できますか？

スマホでの作成や公開に対応したツールを選べば、パソコンを使わずに作成できます。

ただし、ツールによっては、スマホの画面では閲覧のみで、編集や公開はパソコンの画面でしかできない場合があります。
文章や画像の編集、公開の操作がスマホでできるかを、事前に確認しましょう。

まとめ

スマホ対応を進めるときは、まず普段お使いのスマホで主要なページとお問い合わせフォームを確認し、読みづらさや操作しづらさの原因を整理しましょう。

現在の制作環境に合わせて、WordPressのテーマ、既存ページの調整、テンプレートでの作成のうち、自分に合う方法を選びます。
作業前にはバックアップを取り、URLが変わる場合は転送設定も忘れずに行いましょう。

バックアップからの復元やフォームの動作確認を自社で行うのが難しい場合は、制作会社への依頼を検討しましょう。
部分的に直す場合と作り直す場合のどちらが合うか判断できないときは、両方の見積もりを依頼すると比較できます。

見つかった問題と直したい範囲を記録しておくと、自分で対応する場合も、制作会社へ相談する場合も、無駄のない進め方につながります。