ホームページのレスポンシブ対応とは、1ページでパソコンやスマホなど複数デバイスに対応する方法のことです。ホームページのレスポンシブ対応はなぜ必要なのでしょうか。スマートフォンで訪問する人のために最適化したホームページなら、パソコン用のページとは別サイトとして構築する方法もあります。
本記事では、ホームページのレスポンシブ対応の必要性と、レスポンシブ対応のメリット・デメリット、レスポンシブ対応方法について解説します。
また、レスポンシブ対応の費用相場や依頼先についてもまとめました。レスポンシブ対応導入の意味を知りたい方や、費用感を知りたい方はご一読ください。
目次
なぜレスポンシブ対応が必要?
ホームページのレスポンシブ対応の必要性は、以下の3点にまとめられます。
- スマートフォンからの利用者を逃してしまう
- スマートフォン用とサイトを分けるとSEO的に不利
- Googleがユーザビリティをサイト評価に追加予定
これらの内容について、順番に解説します。
スマートフォンからの利用者を逃してしまう
LINE株式会社の「インターネットの利用環境 定点調査」2019年下期版によると、15~59歳の93%はインターネットの閲覧にスマートフォンを利用しているという結果が出ています。
インターネットアクセスにスマートフォンのみを利用する人は、女性59%、男性40%。特に女性は、スマートフォンのみでアクセスする人が多い傾向にあります。
パソコンからの閲覧者は47%で、スマートフォンとパソコン両方でアクセスしている人は44%。パソコンのみでアクセスする人は2%と少数派です。
このように、ホームページはスマートフォンに最適化しておかないと、PV数やCV率が伸び悩む原因になります。
スマートフォン用とサイトを分けるとSEO的に不利
レスポンシブ対応以外で多デバイス対応をするには、デバイスごとにでサイトを分けるという手法もあります。
サイトを分ける方法は、既存のホームページを改修する必要がないというメリットがあります。
しかし、別ページになるとPV数が分散してしまい、SEO的に不利となってしまうという点はマイナスポイントです。
Googleがユーザビリティをサイト評価に追加予定
従来からGoogleはモバイル対応をしているサイトは、モバイルからアクセスしたときに検索結果を上げる仕組みがありました。
さらに、2021年には、新たなユーザビリティの評価指標をサイト評価に追加予定です。追加される評価指標は「Core Web Vitals」と命名されています。
Core Web Vitalsの土台となる評価指標は、以下の3点です。
・読み込み時間
・インタラクティブ性(最初の入力までの時間で判定)
・ページ コンテンツの視覚的な安定性
これらの要素が高いサイトは、ユーザビリティが高いと評価されます。
今からスマートフォンのアクセスを考慮したサイトにしないと、Core Web Vitalsを満たすことは難しいでしょう。
スマートフォン未対応のホームページは、2021年からはGoogleの検索結果順位が下がってしまう可能性があります。
レスポンシブ対応のメリット3点
ホームページをレスポンシブ対応にすると、以下のメリットがあります。
- 滞在時間と直帰率の改善
- URLが同一になりSEO的に有利
- 更新作業が1ファイルで済む
それぞれのメリットについて解説します。
滞在時間と直帰率の改善
インターネットにアクセスする人の9割以上はスマートフォンを使います。
アクセスしたサイトがパソコン用にしか最適化されていないと、可読性が悪いのですぐにサイトから離れる確率が上がり、直帰率の悪化に。
レスポンシブ対応されているサイトはスマートフォンからも読みやすくなり、直帰率が改善されます。
また、ホームページの内容に目を通す分、滞在時間が長くなる効果も。
これらの指標が改善されると、PV数やCV率もアップし、ホームページのゴール達成につながります。
URLが同一になりSEO的に有利
レスポンシブ対応をすると、全デバイスからのアクセスを同一URLに集められる点も大きなメリットのひとつです。
結果として、PV数もパソコンとスマートフォンのアクセスを合算され、SEO上有利に働き、検索エンジンで上位表示する助けとなります。
更新作業が1ファイルで済む
レスポンシブ対応をすると、コンテンツをデバイスごとに分ける必要がありません。
コンテンツは1つになり、デザインのみをCSSなどの仕組みを使って切り替えます。
レスポンシブ対応したコンテンツのメンテナンスは、1ファイルのみ。
修正ファイル数が少ないと、それだけメンテナンスにかかる工数は少なくなり、費用面でも手間の面でも大きなメリットです。
レスポンシブ対応のデメリット3点
レスポンシブ対応は、メリットばかりではありません。
デメリットもありますので、メリットとデメリットを天秤にかけ、対応するかどうか検討しましょう。
スマートフォン専用サイトよりも読み込み速度が遅くなる
レスポンシブ対応サイトを読み込むときは、全デバイスのコンテンツを読み込む点に留意しなければなりません。
ページに埋め込んでいる画像や動画などは特に要注意です。
パソコン用の画像や動画などもファイルサイズを小さくするように配慮しないと、読み込み速度が遅くなる危険性があります。
現行PC用サイトのレスポンシブ対応は高くつく場合も
現行サイトがパソコン用になっていて、ファイルサイズの大きい画像をふんだんに使用している場合、画像も再作成しなければなりません。
単なるリサイズで済めばいいのですが、画像によっては一から作り直さなければいけないケースもあります。
大幅なデザインの変更が必要な場合は、それだけ費用が高くなる点に注意しましょう。
レスポンシブ対応をしたいサイトの特性により費用は異なるため、事前の見積もりが必要です。
Webデザインの構成力が必要
レスポンシブ対応では、多デバイスに最適なデザインを考えなければなりません。
しかし、世の中に出回っている全デバイスの対応は大変なので、自社のホームページのアクセス解析をして、アクセスの多いデバイスをメインに対応することになります。
対応するデバイスを絞り込んだとしても、複数のデバイスに対して最適なWebデザインにしなければなりません。
複数デバイス対応のサイト構成には、Webデザインの専門知識が必要です。
そのため、レスポンシブ対応は一般的なWebデザインに比べて費用がかかります。
では、レスポンシブ対応にはどれくらいの費用が必要なのでしょうか。
レスポンシブ対応をする場合の費用相場
レスポンシブ対応をする場合の費目と費用相場について解説します。
レスポンシブ対応の費目
レスポンシブ対応の主な費目は以下の通りです。
- 既存ホームページレスポンシブ化またはレスポンシブサイトの新規制作
- 画像調整費用
検討ポイントは、既存ホームページを活かしてレスポンシブ化するか、レスポンシブサイトを新規制作するかという点です。
シンプルな構成が多いコーポレートサイト(会社紹介サイト)なら、既存コンテンツを活かしてレスポンシブ化する方向で検討します。
レスポンシブデザインに活かしにくいWebデザインの場合は、レスポンシブサイトを新規で作成する方が費用面でも運用・メンテナンス面でも良い選択です。
また、既存画像の調整費用も必要になります。リサイズで済む場合もありますが、画像によっては再作成しなければなりません。
ホームページにはさまざまなアイコンやバナーなどさまざまな画像が埋め込まれていますので、調整費用は別途見積もっておきましょう。
Webサイトのタイプ別レスポンシブ対応費用相場
Webサイトのタイプ別に、レスポンシブ対応を新規製作した場合の費用相場を紹介します。
サイトの種類 | 想定ページ数 | 費用相場(万円) | 特徴 |
---|---|---|---|
企業 | 小:10 中:30 大:80 | 小:40~ 中:80~ 大:150~ | 中~大の場合は、お知らせなどの更新にCMS対応を検討する |
飲食店 | 30 | 50~ | 写真が重要になるのでその分費用が高め |
美容院 | 7 | 40~ | 予約システムを組み込むためページ数の割に費用がかかることを想定 |
EC | 30 | 300~ | プログラミングが必要で商品写真にもこだわる必要があるので費用は高くなる |
ランディングページ | 1 | 25~ | 1ページで集客から商品購入までを促す販促用ページ SEOやマーケティングなどさまざまな技術を必要とするため割高となる読みやすい漫画を取り入れるLPも増えているがこの見積もりの中には漫画制作費用は含まれていない |
上記はあくまでも目安であり、複雑な要素や写真、漫画などクリエイティブ数によって費用は前後します。
相見積もりを取るときや、既存ホームページを活かしてレスポンシブ対応をする場合と比較検討する場合の参考としてください。
なお、既存のホームページをレスポンシブ対応デザインに変更する場合、1ページあたりのデザイン費用は通常のデザイン費用の1.5倍が目安です。
レスポンシブ対応の費用見積ポイント
レスポンシブ対応の費用を見積もるときのポイントについて、2点ほど解説します。
レスポンシブ対応をするデバイスを絞る
世の中に出回っているすべてのデバイスに対応するのは費用対効果的にあまり良いとは言えません。
まずは、既存サイトのアクセスログを確認して、アクセスデバイスの傾向を分析しましょう。
その上で主要デバイスに絞ってレスポンス対応をすることで、コストパフォーマンスは高くなります。
新規に作り直す方が良いかどうか
既存サイトをレスポンシブ対応にするか、新規でレスポンシブ対応サイトを作るかどうかを比較検討しましょう。
複数の制作会社に相見積もりを取る場合は、制作にかかる初期コストだけでなく、ホームページの維持・運用にかかるコストも計算に入れることを忘れないでください。
新規にレスポンシブ対応サイトを構築すると、どうしても初期コストはかさみます。
しかしCMS導入や最新技術の導入で、維持・運用コストが安く済み、長く運用するにつれてコストパフォーマンスは上がります。
レスポンシブ対応の依頼先の特徴を比較
レスポンシブ対応の依頼先は、主にホームページ制作会社を検討しますが、フリーランスを活用する方が良いケースもあります。
ホームページ制作会社とフリーランスへの発注について、どのような特徴があるのか解説します。
ホームページ制作会社
ホームページ制作会社は、Webサイト構築に必要な技術を持つ従業員や外注先とのコネクションがあり、組織的な対応が特徴です。
自社ホームページのレスポンシブ対応を一括外注する場合は、ホームページ制作会社の総合力が頼りになります。
自社リソースをホームページリニューアルにあまり割けない場合も、ディレクションなどすべて任せられるホームページ制作会社の利用が便利です。
ただし、ホームページ制作会社に一括発注するため、どのような技術レベルの人間が作業するかは、発注側からは見えにくくなります。
フリーランス
自社ホームページの運用体制が整っている場合、ホームページ制作会社に一括して任せるよりも、必要な部分だけ専門知識のある人材に発注する方が便利です。
その場合、基本は自社で対応するが、専門技術を持つフリーランスに外注する方が良い場合もあります。
フリーランスと直接交渉するため実績や作成物のテイストを直接確認して、求めるイメージの人材を確保しやすくなります。
レスポンシブ対応をフリーランスに依頼するメリット
レスポンシブ対応をフリーランスに発注するメリットについて解説します。
クラウドソーシングサイトで実績が確認できる
フリーランスに発注する場合、クラウドソーシングサイトやフリーランスの自作ポートフォリオサイトなどで、過去実績や技術レベルを確認できます。
デザインやイラスト、写真などのテイストも確認しやすく、自社のブランドイメージに合わせた選択が可能です。
レスポンシブ対応をホームページ制作会社に発注する場合、各担当者の技術レベルはくわしく確認できません。
自社に不足する専門分野を補える
自社でホームページのレスポンシブ対応をする場合、対応に必要な技術者やクリエイターを自社リソースでまかなうことは難しいでしょう。
自社で対応しきれない分野がある場合、あるいは一応対応できても量的に対応しきれない場合は、一部を外注化できると便利です。
フリーランスなら、足りない部分を補う人材をきめ細やかに探せます。
レスポンシブ対応でユーザビリティをアップしよう
自社ホームページをレスポンシブ対応すると、ユーザビリティがアップしてPV数やCV率の改善につながります。
レスポンシブ対応をする前には、アクセスデバイスの調査や対応方法の検討などが必要です。
自社の体制によっては、フリーランスの活用も視野に入れつつレスポンシブ対応を進めましょう。
フリーランスの活用を検討される場合は、ぜひランサーズを活用して、必要とする技術を持つ人材を検索してみてください。