ホームページのスマホ対応（レスポンシブ）の費用はいくらですか？新規制作と既存サイトのレスポンシブ化
Answer
レスポンシブデザインによるスマートフォン対応は、現在のホームページ制作で標準仕様となっています。ENVY DESIGNでも追加費用は不要で、基本制作に含まれています。Googleはモバイルでの見やすさを評価基準とするため、スマホ対応はSEOにも関わります。文字サイズやボタン設計などのユーザビリティ向上は離脱防止にもつながります。
さらに詳しい内容をご覧になりたい方は下記も併せてお読みください。
新しくホームページを制作する場合、スマホ対応（レスポンシブデザイン）は制作費に含まれており、別途費用はかかりません。ENVY DESIGNでは標準仕様として対応しています。
一方、すでに公開しているPC専用サイトをあとからスマホ対応にする「レスポンシブ化」は、既存のHTML・CSSを作り変える作業になるため、別途お見積もりとなります。
既存サイトのレスポンシブ化は、ページ数やHTML・CSSの構造によって工数が大きく変わるため、一律の料金は設定していません。数ページ程度の部分改修で済む場合もあれば、サイト全体を作り直したほうが費用を抑えられる場合もあります。
既存サイトのレスポンシブ化は、作り直したほうが安く済むことが多い
「今のサイトをスマホ対応にしたい」というご相談はよくいただきます。ただ、実際に中身を確認したうえで、部分的な改修より作り直しをご提案することが多いのが正直なところです。費用と工数の両面で、そのほうが結果的に抑えられるケースが多いためです。
理由は次のとおりです。
- PC専用で作られたサイトは、構造から見直す必要がある：固定幅を前提に組まれたレイアウトやテーブルレイアウトの場合、CSSを足すだけでは対応できず、HTMLから書き直すことになります
- 他社が書いたコードの解読に時間がかかる：どこを変えると何が崩れるかを把握する作業が先に必要で、新規に書くより時間がかかることがあります
- 画像やフォントがPC表示前提になっている：スマホで見たときに文字が小さい、画像が重いといった問題が残り、結局作り直す範囲が広がります
- 改修してもデザインは古いまま：費用をかけてスマホで見られる状態にしても、見た目や構成は当時のままです
もちろん、比較的新しいサイトで構造がしっかりしている場合や、ページ数が少ない場合は、部分的な改修で対応できることもあります。まずは現在のサイトを拝見して、どちらが適しているかをお伝えします。
作り直す場合の費用は料金・費用ページでご確認いただけます。判断の目安はホームページの耐用年数は3〜5年｜リニューアル時期の見極め方と費用の考え方にまとめています。
PCサイトとスマートフォンサイトは共通パーツで構成
ホームページ制作やWebサイト制作では、PCとスマートフォンを別々に構築するのではなく、共通のテキストや画像を利用し、レイアウトを切り替えることで最適化します。必要に応じて情報を出し分けることも可能です。
PC用とスマホ用で2つのサイトを作る方法もありますが、更新のたびに両方を直す必要があり、運用の手間が二重になります。現在はレスポンシブデザインで1つのサイトにまとめるのが一般的です。
レスポンシブデザインの仕組みと特徴
レスポンシブデザインでは、HTMLが骨格となり、CSSでレイアウトや配色など見た目を整え、JavaScriptで動きや機能を補完します。これによりPCとスマートフォンで統一された情報を届けつつ、環境に合わせた表示が可能となります。
Googleは、スマートフォン向けページを基準にインデックス登録・ランキングを行う「モバイルファースト インデックス」を採用しています。また、モバイル対応の方法としてレスポンシブWebデザインを推奨しています。
ただし、スマートフォン対応だけで検索順位が上がるわけではありません。モバイルでの使いやすさや表示速度を含むページ体験を整えることは、ユーザーにとっても検索にとっても重要だと考えられます。
スマートフォン対応とUX改善
スマートフォンで閲覧されるケースが主流となり、文字サイズやボタンの押しやすさは重要な要素です。画像や動画は軽量化し、表示速度を保つことでユーザー体験を向上できます。
Core Web Vitals（LCP＝表示速度、INP＝応答性、CLS＝視覚的な安定性）も確認することで、ユーザー体験を改善できます。Core Web VitalsはGoogleのランキングシステムでも利用されていますが、数値だけで検索順位が決まるものではありません。
ENVY DESIGNではMicrosoft Clarityによるヒートマップ分析を活用し、実際のユーザー行動に基づいた改善提案を行っています。スマホで表示が崩れている場合の原因と対処はスマホで見ると、ホームページが崩れているで解説しています。
レスポンシブ対応の検証・チェック方法
制作後のレスポンシブ対応は、検証・チェックを行うことが大切です。PageSpeed Insightsを使うと、表示速度やCore Web Vitalsの改善点を把握できます。ブラウザの開発者ツールで画面幅を変えながら表示を確認する方法も一般的です。
こうしたツールを活用することで、技術的にもユーザー体験的にも質の高いホームページ制作が可能になります。
ENVY DESIGNの取り組み
ENVY DESIGNではレスポンシブ対応を標準仕様とし、新規制作では追加費用は発生しません。公共施設や大規模ECサイトなど、幅広い分野での制作実績があり、アクセシビリティ重視の設計や複雑なEC機能のレスポンシブ対応も数多く手がけてきました。
保守・運用で10年以上継続してご依頼いただいているお客様も多く、長期的な成果を重視したホームページ制作を実現しています。
改修と作り直しのどちらがよいか決まっていない段階でもご相談いただけます
現在のサイトがどういう作りになっているかは、見てみないと判断できません。改修で済むのか、作り直したほうが早いのかを含めて、現在の状況のまま相談することができます。
制作費用全体の目安はホームページ制作費用の目安、お支払い条件はホームページ制作の支払いはいつですか？着手金不要・分割払いと支払い方法をご覧ください。スマホ対応を標準装備した制作はコーポレートサイト制作でご案内しています。
デザイン面での注意点は、ホームページのデザインで注意することもあわせてご覧ください。
関連記事