「レスポンシブ化」でPCサイトをモバイル対応にするポイントは!?【2024年最新版】

ここ数年でスマートフォンやタブレットなどモバイルデバイスを利用するユーザー数は急増し、webサイトを閲覧する環境も大きく変わってきました。

また、2016年にはGoogleがモバイルデバイスへの対応をサイト評価に取り入れることを明らかにしました。これにより検索上位に表示されるにはモバイル対応が実質上必須の要件になったことから、多くのサイトがモバイルデバイスへの対応を加速させたのです。

モバイルデバイスに対応するには、パソコン（PC）用とは別に専用のサイトを作る方法もありますが、最近では１つのサイトをPCやスマートフォン、タブレットなど複数のデバイスから閲覧できる「マルチデバイス対応」が主流になっています。

「マルチデバイス対応」のなかで、それぞれのデバイスの画面サイズに合わせて表示を調整する方式が「レスポンシブwebデザイン」です。
また、レスポンシブwebデザインを取り入れてwebサイトをマルチデバイス対応にすることを「レスポンシブ化」と言います。

この記事では、PC向けサイトの「マルチデバイス対応」を考えている人のために、「レスポンシブ化」を成功させるためのポイントを解説していきます。

そもそもレスポンシブデザインってなに？という方は、以下の記事もチェックしてください。

PCにしか対応していないサイトのコンテンツをスマートフォンから閲覧ができるようにする手段として、「専用サイト」「変換サービス」「レスポンシブ化」という３つの方法があります。

「専用サイト」とは、文字どおりPCサイトとは別にスマートフォン、タブレットなどのデバイスごとに専用のサイトを分けて作る方法です。
デバイスに合わせて専用化するのでデザインや機能の自由度は高くなりますが、サイトごとに制作・管理をするので、その分のコストと手間がかかってしまいます。
また、URLがPCサイトとは別になるため、SEO上は不利になります。

「変換サービス」は、PCサイトをスマートフォンに適したサイトに変換してくれる外部サービスを利用するものです。
専用サイトを作るのにかかる初期費用を抑えられるだけでなく、同一URLを使えるサービスであればSEO上のデメリットも発生しません。
ただし、外部に依頼することになるので、毎月の利用料金がかかるほか、サービスの継続性のリスクがあります。

「レスポンシブ化」は、冒頭で紹介したようにレスポンシブwebデザインを用いて、１つのサイトをデバイスに関係なく同じURLで閲覧することができるように、それぞれのデバイスの表示幅に合わせてデザインを変えるものです。

現在はこの「レスポンシブ化」が主流となっています。
次の項目では、その「レスポンシブ化」のメリットについて詳しく見ていきましょう。

１つのサイトですべてのデバイスに対応するため、コンテンツを一元管理でき、それぞれの専用サイトを作るのに比べて日々のメンテナンスや管理が格段に楽になります。
当然、デザイン上の意図した対応を別にすれば、デバイスによって違う情報が表示されるという問題も発生しません。

専用サイトを別々に作ると、アクセスが分散し検索順位はなかなか上がりません。
加えて、同じHTMLの記述が複数存在することになり、webサイトの情報を収集するGoogleのクローラーは「どちらが正しいサイトなのか」「不正なサイトなのではないか」と判断に迷い、サイトの評価が下がってしまう可能性もあります。
レスポンシブ化すれば、ワンソースのため複数のURLやHTMLの記述は存在しなくなり、モバイル対応していることも含めて評価が上がりやすくなるため、SEO上も有利に働きます。

実際、Googleのウェブマスター向けの公式ブログでも次のようにレスポンシブwebデザインを推奨しています。

ここでは、既存のPC向けサイトの「レスポンシブ化」を成功させるためのポイントをお伝えします。

１つのソースでPCとスマートフォン、タブレットに表示する場合、デバイスによってデザインや文字サイズ、さらには内容にも違いが出ることがあります。
これは画面の幅の違いや構造上どうしても避けることができません。

例えば、PCではコンテンツを横に５つ並べて表示されるものがスマートフォンやタブレットでは縦１列に５つ並んで表示されたり、長く複雑な構成のコンテンツがカットされてしまったりすることがあります。
コンテンツを横に２つあるいは３つ並ぶように調整することもできますが、無理にやるとスマートフォンやタブレットでは画像や文字が小さくなってしまい、ユーザーにとって大変見にくい画面になってしまいます。

PCでの表示を軸にしながらも、スマートフォンやタブレットで表示されたときにどのような違いになるかを常に意識し、両方にとってバランスの取れた表示となるデザインを目指すことがとても重要です。

ボタンの大きさや配置、背景の色やパターンなどについて、PCの画面上では全く気にならなかったのにスマートフォンやタブレットで見ると違和感や見づらさを感じることがあります。
これは、主に画面が縮小されたり、表示範囲が変わったりすることが原因です。

また、PCでは整列して一覧できるグローバルメニューの表示が、途切れたり崩れたりしてしまう場合もあります。
こうした事態を避けるには、グローバルメニューの項目を絞ったり、重要な機能のボタンは一律に縮小されないようにしたりするなど、モバイル端末で操作をしやすいように調整するのが１つの方法です。
また、PCでは一覧表示しているグローバルメニューを、モバイルデバイス向けではハンバーガーメニューに切り替え、メニューをクリックするとプルダウンしてそれぞれの項目表示されるようにする方法もあります。

サイト制作をする最初の段階で、webサイトを見に来てくれたユーザーにどのようなアクションをしてもらいたいかを考え、そのための導線を意識して制作したことと思います。
しかし、PCサイトとモバイル向けサイトでは導線が全く違います。

PCサイトでのユーザーの目線は左から右、上から下へと動いていきます。
それらを組み合わせて「Z型」や「F型」になるように目線に合わせて導線を作るのがセオリーです。

一方、スマートフォンやタブレットでは、webサイトの表示自体が縦長になります。
ユーザーは縦にスクロールしていくことになるので、目線もその流れに合わせてサイト上を進みます。
そのユーザーの目線の動きに合わせて、コンテンツやボタンを配置し、いかに最終的に問い合わせや申し込みにつながる導線を作れるかが大きなポイントとなります。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

この記事では、既存のPC向けサイトを「モバイルデバイス対応」にしたいと考えている人のために、現在の主流になっている「レスポンシブ化」の内容を説明し、成功させるためのポイントを紹介しました。

古いサイトのなかには構造的に簡単にレスポンシブ化できないものもありますが、基本的に「PCサイトをスマートフォンやタブレット（モバイルデバイス）でも表示できるようにする」だけであればそう難しいことではありません。

ただし、モバイルデバイスでも使いやすいものにするためには、サイトそのものに大きく手を入れることが必要なケースもあります。

なかには、全面的にリニューアルしたほうが、PCでもモバイルデバイスでも使いやすく、よりユーザーにとって魅力的なサイトになり、費用対効果が高い場合も考えられます。

「現在のサイトのレスポンシブ化について相談できる制作会社を知りたい」「実績のある制作会社を紹介して欲しい」というご希望がありましたら、ぜひ日本最大級の業者比較サイト「アイミツ」までご相談ください。
あなたの会社の希望に応じた最適な制作会社を無料でご紹介させていただきます。

スマホサイト制作での具体的な注意点はこちらで解説！
→見づらいサイトは低評価？スマホサイト制作で押さえるべき９つの注意点

レスポンシデザインが得意な会社はこちらの記事で紹介しています！
→レスポンシブデザインに強いホームページ制作会社9選