ホームページ制作でスマホ対応する費用相場|必要性や算出方法も紹介【2026年最新版】
「自社のホームページ、スマホで見ると文字が小さくてレイアウトも崩れている」
「Googleの検索順位が以前より下がっている気がする」
このような悩みを抱えるWeb担当者は少なくありません。
総務省の通信利用動向調査によると、現在インターネット利用者の8割以上がスマートフォンを主要デバイスとして使用しています。PCサイトのままではユーザーの離脱を招くだけでなく、Googleのモバイルファーストインデックス(MFI)の評価対象からも外れ、SEOで大きく不利になる時代です。
ただし、スマホ対応と一口に言っても、レスポンシブデザインへの改修、スマホ専用サイトの新規構築、変換ツールの活用など手法はさまざま。費用も10万円台から数百万円規模まで幅があり、自社にとって「適正価格」を見極めるのは簡単ではありません。
本記事では、ホームページのスマホ対応にかかる費用相場を規模別・手法別に整理し、自社で対応する5つの方法から外注時の費用算出の仕組みまで解説します。読み終える頃には、予算とリソースに合った最適な進め方を判断できる状態になります。
※スマホ対応のホームページ制作を行いたい方は、Web幹事にご相談ください。予算や目的をヒアリングし、最適な会社を選定します。相談料も紹介料も一切かかりません。
【無料】ホームページ制作のスマホ対応費用について教えてもらう
ホームページ制作に役立つ記事もご覧ください スマホ対応させるならこちらもチェック!ホームページ制作・作成費用の料金相場
ホームページ制作でスマホ対応する費用相場
ホームページ制作でスマホ対応する際、通常のホームページ制作よりも費用がかかります。費用相場を把握して、外注の参考にしてみてください。
ホームページ制作のスマホ対応には「レスポンシブデザイン」と「スマホ専用サイトの作成」の2種類があります。レスポンシブデザインは、PC用サイト閲覧ユーザーの画面サイズに合わせてレイアウトを最適化する方法。スマホ専用サイトの作成は、PC用サイトとは別にもう1つスマホ専用サイトを作成する方法です。
既存ホームページの場合
既存のホームページをスマホ対応する場合の費用相場は、下記のとおりです。
※スマホ専用サイトの費用はPCサイト制作費用の2倍で算出
※スマホ専用サイトの費用は企業サイトの構築を例に算出
※画像調整の費用は5点で算出
|
ホームページ 種類 |
費用相場 |
小規模 (10ページ程度) |
中規模 (20~30ページ程度) |
大規模 (50ページ程度) |
|
レスポンシブ デザイン |
1ページあたり 1万円~3万円 |
10〜30万円 |
20〜60万円 |
30〜90万円 |
|
スマホ専用 サイト |
PCサイト 制作費用の 1.5〜2倍 |
〜100万円 |
100〜600万円 |
600万円〜 |
|
画像調整 |
1点あたり 2,000円〜6,000円 |
30,000円 |
60,000円 |
90,000円 |
すでにあるページをスマホ対応するため、1ページや画像1点あたりで費用がかかります。ホームページのレスポンシブ化はブレイクポイント(画面幅によってレイアウトが切り替わる境目)が多くなるほど、作業量が増えて費用が高くなります。
ブレイクポイントをパソコン・タブレット・スマホの3箇所にすることが多いです。ブレイクポイントをパソコン・スマホの2箇所にすると、作業量が減るので費用を安くすることが可能です。
新規ホームページの場合
新規で制作するホームページをスマホ対応する場合、PCサイトだけを作る費用の1.5〜2倍前後が相場です。基本的にスマホ対応せずにホームページ制作をすることは近年では稀であるため、スマホ対応すると思っておきましょう。新規でホームページを制作する費用相場は、下記の通りです。
※規模:サイトの規模を指します
※費用はPCサイト制作費用の約2倍で算出
※費用相場は企業サイトを例に算出
|
ホームページ 種類 |
費用相場 |
小規模 (10ページ程度) |
中規模 (20~30ページ程度) |
大規模 (50ページ程度) |
|
レスポンシブ デザイン |
PCサイト 制作費用の 1.5〜2倍 |
〜100万円 |
100〜600万円 |
600万円〜 |
|
スマホ専用 サイト |
PCサイト 制作費用の 1.5〜2倍 |
~100万円 |
100~600万円 |
600万円~ |
ホームページ制作は主に「ページ数」「コンテンツ(文章や画像)の質や量」「デザインの質や量」の3つから費用が決まります。コンテンツやデザイン素材を自社で用意したりすると、費用を抑えられる可能性があります。
ちなみに、上記はWeb幹事で問い合わせいただいたお客様への実際のホームページ制作見積書です。約300万円ほどかかる総額のうち、レスポンシブ対応については225,000円かかる内容となっています。
上記はレスポンシブ対応の見積書を詳細にしたものです。レスポンシブ対応の総額225,000円のうち、基本デザイン・基本コーディング・ファビコン作成(お気に入りアイコン)で項目が分類されており、それぞれ費用が異なります。
費用の算出方法
既存ホームページのスマホ対応の外注費用には、コーダーの人件費がかかります。新規のホームページ制作をスマホ対応にする場合は、人件費に加えて、サーバーやドメインの費用がかかります。
人件費は「人日×人日単価」で決まります。人日とは作業量の大きさを表す単位で、1人日を8時間と定める場合が多いです。例えば、8時間かかる作業(=1人日)を人日単価2万円の人員が担当した場合、費用は1人日×2万円=2万円となります。
スマホ対応するページ数や画像調整などの量によって必要な日数が異なるため、費用が変動する仕組みです。スマホ対応する画像の量を減らしたり、外注の作業内容を明確にするといった作業を自社で対応したりすると依頼費用を安くできます。
ホームページのスマホ対応については、下記の関連記事をご参照ください。
関連記事:ホームページをスマホ対応するにはどうしたらいい?すぐできる方法を解説します!
レスポンシブデザインの参考例については、下記の関連記事をご参照ください。
関連記事:レスポンシブデザインの参考事例探しに最適なサイトを総まとめ!【2022年版】
※スマホ対応のホームページ制作を行いたい方は、Web幹事にご相談ください。予算や目的をヒアリングし、最適な会社を選定します。相談料も紹介料も一切かかりません。
【無料】ホームページ制作のスマホ対応費用について教えてもらう
なぜ今、ホームページのスマホ対応(レスポンシブ化)が必須なのか
スマホ対応は、いまや「やったほうがいい施策」ではなく「やっていないと損失が発生する前提条件」へと位置づけが変わりました。未対応のまま放置するとSEO評価の低下、ユーザー離脱率の上昇、問い合わせ機会の逸失が同時進行で起こり、競合との差が時間とともに開いていきます。
具体的にどのようなリスクがあるのか、「検索順位」と「ユーザー行動」の2つの観点から見ていきます。
Googleの評価基準(MFI)と検索順位への影響
スマホ未対応のサイトは、Googleの検索順位で構造的に不利な扱いを受けます。理由はモバイルファーストインデックス(MFI)と呼ばれる評価方式が、検索エンジンの標準になっているためです。
MFIとは、Googleが検索順位を決める際に「PCサイトではなくスマホサイトのコンテンツを基準に評価する」という仕組みのこと。以前はPC版サイトを主に見てインデックス(情報の登録)と評価を行っていましたが、現在はスマホ版サイトの情報を正として扱います。
Google公式ドキュメントでも、すべてのサイトでモバイル版のクロールとインデックスを優先する方針が明示されています。
とくに、PC版のコンテンツがどれだけ充実していても「スマホ版で表示が崩れている」「情報が一部欠落している」「操作しづらい」という状態であれば、Googleはそのサイトを「品質が低い」と判断するため注意が必要です。結果として検索順位は上がりにくく、上がっていた順位も下落していきます。
スマホサイトが「正解」として評価される現在のSEOにおいて、レスポンシブ化はSEO対策の出発点です。コンテンツSEOやリンク施策に取り組む前に、まず土台としてのスマホ対応を済ませる必要があります。
スマホユーザーの離脱防止とコンバージョン率の向上
スマホ未対応のサイトは、訪問者の大半を取り逃がしています。総務省の調査でも示されているとおり、現在のWeb閲覧の主役はスマートフォンであり、PC前提のレイアウトのままでは「文字が小さくて読めない」「ボタンが押せない」「フォーム入力が困難」といった理由で、ユーザーは数秒で離脱します。
特に深刻なのが、入力フォームでの離脱です。スマホでのフォーム最適化(EFO)の有無で、問い合わせ完了率は大きく変動します。「入力欄が小さい」「キーボードの種類が適切に切り替わらない」「送信ボタンが押しにくい」というような細かな使い勝手の差が、最終的な売上やリード獲得数に直結しやすいです。
スマホ対応されたサイトは、表示の見やすさだけでなく、タップしやすいボタン配置や入力負荷の低いフォーム設計まで含めて最適化されています。これにより直帰率が下がり、ページ滞在時間が伸び、コンバージョン率(CVR)が向上するという好循環が生まれます。
問い合わせ数を増やすための具体的な施策については、ホームページの問い合わせを増やす方法も参考にしてみてください。
関連記事:ホームページ問い合わせを増やす14の施策|原因分析と改善手順を解説
自社でホームページをスマホ対応にする5つの手法
スマホ対応は外注だけでなく、社内のリソースを使って自前で進める選択肢もあります。費用を抑えたい企業や、社内にWeb担当者がいる企業向けに、難易度と費用感の異なる5つの手法を整理しました。
- CMS(WordPress等)のテンプレートを活用する
- ホームページ制作ツール(Wix、Jimdo等)を利用する
- HTML/CSSを直接編集してレスポンシブ化する
- 配布されているHTMLテンプレートに入れ替える
- 変換ツールを用いて既存サイトを最適化する
自社のスキル・予算・サイト規模に照らして、現実的な方法を選んでください。
1. CMS(WordPress等)のテンプレートを活用する
CMSとは「コンテンツマネジメントシステム(Contents Management System)」の略で、デザインテンプレートを選択してテキストや画像を流し込むだけでサイトを構築できる仕組みです。WordPressが代表例で、配布されているテンプレートの多くは最初からスマホ対応(レスポンシブ)が組み込まれています。
費用感はサーバー・ドメイン代の月額1,000〜5,000円程度に収まるケースが中心。
外注に切り替える局面でも、CMSは多くの制作会社が扱い慣れているため工数を圧縮しやすく、改修・運用フェーズまで含めた汎用性で他の手法を上回ります。
CMSごとの違いはCMS比較記事で詳しく確認できるので、本記事と合わせてご確認ください。CMS17選を比較|特徴や機能の違い、選び方まで徹底解説
2. ホームページ制作ツール(Wix、Jimdo等)を利用する
WixやJimdoに代表されるノーコード型の制作ツールは、コードを書かずにドラッグ&ドロップでサイトを構築できるサービスです。テンプレートを選んでテキストや画像を差し替えるだけで、デザイン調整からスマホ表示の最適化まで一貫して完結します。
費用はサーバー・ドメイン代込みで月1,000〜5,000円程度。無料プランも用意されているため、コストをかけずに着手できる点が大きな利点です。
注意点は、無料プランだと広告表示や機能制限、サポート対象外といった制約が発生すること。本格的に運用するなら有料プランへの切り替えが前提になります。
デザインの自由度はCMSやHTML手書きに劣るものの、Web担当者が専任でいない中小企業や個人事業主にとって、最短ルートでスマホ対応を実現できる現実的な選択肢です。
3. HTML/CSSを直接編集してレスポンシブ化する
HTML・CSSのコードを直接書き換えて、既存サイトをレスポンシブ対応させる手法です。HTMLでコンテンツの構造を記述し、CSSで画面幅ごとのレイアウトを切り替えることで、PC・タブレット・スマホそれぞれに最適化された表示を実現します。
最大のメリットはカスタマイズの自由度。テンプレートでは表現できないオリジナルのデザインや、独自機能の組み込みまで思いどおりに調整できます。費用面でも、サーバー・ドメイン代の月1,000〜5,000円のみで運用が可能です。
ハードルになるのは、コーディングスキルを持つ人材の確保。ページ数が多いサイトほど改修工数が膨らみ、外注した場合は「人日×人日単価」で人件費が積み上がります。社内にエンジニアがいる、もしくは時間をかけてでも自由度を優先したい企業に向いた手法です。
4. 配布されているHTMLテンプレートに入れ替える
インターネット上には、無料で使えるHTMLテンプレートが多数配布されています。専門サイトからダウンロードし、テキストや画像を自社のコンテンツに差し替えるだけで、スマホ対応済みのサイトを短期間で立ち上げられます。
ゼロからコードを書く必要がないため、HTML/CSSを直接編集する手法と比べてコストも時間も大幅に節約できます。スマホ対応テンプレートを選べば、レスポンシブ化の作業自体が不要になる点もメリットです。
懸念点としては、デザインや構成を変更する際にHTML・CSSの基礎知識が必要になること。もう1つは、テンプレート配布元のサポートが受けられないケースが多いことが挙げられます。最低限の修正で運用できる小規模サイトや、デザインよりスピードを優先したい場面で機能する手法です。
5. 変換ツールを用いて既存サイトを最適化する
既存のPCサイトを読み込み、スマホ用のレイアウトに自動変換するツールを使う手法です。管理画面上の操作だけでスマホ対応を完結できるため、コーディングもページの作り直しも発生しません。代表的なサービスには「shutto」や「flamingo」などがあります。
導入のメリットは、サイト全体を作り直さずに短期間でスマホ対応を完了できる点。PCサイトの更新内容がスマホ側にも自動反映されるため、運用フェーズの手間も抑えられます。
注意点は月額・年額の継続費用が発生すること。無料プランには広告表示やPV制限といった機能制約があり、本格運用には有料版への切り替えが前提になります。サイト全体を作り変える余裕はないが、スピード重視でスマホ対応を済ませたい企業向けの選択肢です。
変換ツールの詳細はホームページをスマホ対応する方法の記事も参考にしてみてください。
既存のホームページをスマートフォン対応にする方法・やり方をわかりやすく解説
【無料】ホームページ制作のスマホ対応費用について教えてもらう
スマホに対応したホームページ制作のポイント
スマホ対応は、レスポンシブ化して終わりではありません。表示速度・操作性・視認性・検証の4つを押さえることで、ユーザー体験とSEO評価の両方を底上げできます。それぞれのポイントを順に見ていきます。
- 画像・動画ファイルを圧縮する
- ボタンのサイズを調整する
- コンテンツに余白を取る
- モバイルフレンドリーのチェックを行う
画像・動画ファイルを圧縮する
ページの表示速度は、SEOと離脱率の両方に直結します。Googleの調査では、ページ表示が3秒を超えるとスマホユーザーの離脱率が大きく跳ね上がるとされており、サイズの重い画像・動画はそれだけで集客機会の損失につながります。
2026年現在、画像形式は従来のJPEG・PNGに加えて、WebP・AVIFといった次世代フォーマットの採用が標準的になりました。WebPはファイルサイズが小さく、画質を保ったまま読み込み速度を改善できます。
動画はMP4への変換が主流です。具体的な圧縮には、画像なら「TinyPNG」「Squoosh」、動画なら「HandBrake」「CompressVideo」などのツールが使えます。
ファイルをアップロードするだけで自動圧縮されるため、専門知識がなくても対応できます。表示速度の改善は、ユーザーの離脱抑制とGoogle評価の向上を同時に実現する施策です。サイト改修の初期段階で着手すべきタスクといえます。
ボタンのサイズを調整する
スマホサイトのボタンは「指でタップする」前提で設計します。マウスカーソルと違い、指は接地面が広いため、PC基準の小さなボタンでは押し間違いが頻発し、ユーザーの離脱を招きます。
Apple・Googleが公表しているUIガイドラインでは、タップ可能な領域の最小サイズを44px × 44px以上(Googleは48px × 48px推奨)と定めています。CSSでボタン要素の幅・高さを指定する際は、この数値を下回らないよう設定してください。
加えて、ボタンやリンク同士の間隔も重要です。隣接するタップ領域が近すぎると、隣のボタンを誤タップする原因になります。要素間には最低でも8〜10px程度の余白を確保し、誤操作を防ぐ設計にしてください。
ボタンサイズと配置の最適化は、CVR(コンバージョン率)に直接効く改修ポイントです。問い合わせフォームへの導線や購入ボタン周りから優先的に見直しましょう。
コンテンツに余白を取る
スマホの小さな画面で情報を詰め込みすぎると、ユーザーは圧迫感を覚えて読むのをやめてしまいます。文字や画像の間に適切な余白(ホワイトスペース)を取ることで、視認性が上がり、伝えたい情報に視線が集中します。
余白設計の基本は「グルーピング」の考え方です。関連する情報同士は近づけ、無関係な要素とは大きく離す。この距離の差で情報の構造を伝えます。見出しと本文は近く、セクションとセクションの間は大きく空ける。この強弱が読みやすさを生みます。
数値の目安としては、行間は文字サイズの1.5〜1.8倍、要素間の余白は16〜24px、セクション間は40px以上を確保すると、スマホでも余裕のあるレイアウトになります。左右にも16〜20px程度の余白を設けることで、コンテンツが画面端に張り付かず、視線が中央に集まります。
余白は「何もない空間」ではなく、情報を整理する設計要素です。詰め込むより削ぎ落とすほうが、結果的に多くの情報が伝わります。
モバイルフレンドリーのチェックを行う
スマホ対応の作業が終わったら、客観的に検証する工程に進みます。自分の端末で確認するだけでは、機種ごとの表示崩れや読み込み速度の問題を見落とすためです。
検証ツールの定番は、Googleが提供する「Lighthouse」。Chromeブラウザの開発者ツールから無料で利用でき、モバイルフレンドリー度・表示速度・SEO・アクセシビリティを総合スコアで可視化します。改善が必要な項目はアラートとして具体的に表示されるため、優先度の高い修正点から順に対応できます。
ツール検証と並行して、実機テストも欠かせません。iOS(Safari)とAndroid(Chrome)では、フォントのレンダリングやフォーム挙動に差異があります。最低でもiPhone・Androidの実機を1台ずつ用意し、主要ページの表示・タップ操作・フォーム送信まで一通り確認してください。
アラートの内容に専門知識が必要な場合は、社内エンジニアや制作会社に依頼するのが現実的です。自社対応が難しいと感じたら、Web幹事へのご相談もご検討ください。
【無料】ホームページ制作のスマホ対応費用について教えてもらう
ホームページ制作スマホ対応費用まとめ
ホームページ制作でスマホ対応する費用は「人日×人日単価」で決まります。既存サイトの場合はページ数や画像調整の量に比例して費用が積み上がり、新規制作の場合はPCサイトのみの費用の1.5〜2倍前後が相場です。
自社対応であれば、CMSテンプレートやノーコードツールの活用で月1,000〜5,000円程度に抑えることも可能です。外注する場合は、ページ数・コンテンツ量・デザインの質の3要素を整理してから見積もりを取ると、適正価格を判断しやすくなります。
予算と目的に合った最適な手法を選ぶには、自社の現状把握と複数社の比較検討が出発点です。
※自社での対応が難しい場合は、Web幹事にご相談ください。予算や目的をヒアリングし、最適な会社を選定します。相談料も紹介料も一切かかりません。
Q. スマホ対応のホームページを制作する際の費用相場は?
スマホ対応のホームページを制作する場合、PCのみに対応したサイト制作の1.5~2倍前後が費用相場になります。基本的にスマホ非対応でのホームページ制作は、近年では稀なケースです。新規でのホームページ制作の際は、スマホ対応で制作すると想定しておきましょう。
Q. ホームページ制作でスマホ対応する際の費用を安く抑えるコツは?
ホームページ制作でスマホ対応する際の費用を安く抑えるには「目的」と「必要機能」を事前に明確にしておきましょう。またサイト制作で活用できる補助金・助成金を利用すれば、費用をさらに抑えられます。