レスポンシブだけじゃない！スマホ対応の方法3つと特徴まとめ

投稿日:2023年11月09日

スマホ対応が必須となった昨今では、Webサイトもスマホに合わせたデザインは必須になっています。特に多くの人が使っているのが、スマホの画面の大きさに合わせてデザインや配置を変える「レスポンシブデザイン」です。WordPressのようなCMSでも、このレスポンシブデザインに対応したテーマがたくさんあり、Webデザインの世界ではとても重要な方法と言えます。
でも、すべてのWebサイトをレスポンシブデザインにするのがいいかというと、そうとも限りません。スマホ対応の方法は他にもありますし、Webサイトの目的や予算を考えて、一番いい方法を選ぶことが大事です。
この記事では、Webサイトをスマホに合わせるための3つの方法を紹介します。それぞれのメリットやデメリットも解説しているので、スマホ対応の方法を選択する際の参考にして頂ければと幸いです。

スマホ対応の方法まとめ

それでは早速、スマホ対応の方法を3つご紹介していきます。特徴とともに、それぞれの方法のメリット、デメリットについてもまとめています。

方法１．スマホ専用のページを作る

まず、最初の方法は、スマホ専用のページを作成することです。PC向けとは別にスマホ用のページを作るので、HTMLやCSSなどのソースも異なります。そのため、PCページのURLとスマホページのURLも下のように異なることになります。

PC向けページのURL
http://www.○○○.co.jp/

スマホ向けページのUR
http://www.○○○.co.jp/sp/

メリット
✔PCページに影響を与えずにスマホページを作れる
✔PCサイトとスマホサイトを別々に管理・運用できる

この方法の一番のメリットは、PCページに影響を与えずにスマホページを作れることです。後で説明しますが、既存のサイトをレスポンシブに対応させるのはかなりの手間がかかります。なぜなら、PCページも含めて全体の設計を見直す必要があるからです。
しかし、この方法なら、そうした手間が不要で、既存のPCサイトにスマホページを追加するだけで、サイトをスマホ対応にすることができます。さらに、PCサイトとスマホサイトを別々に管理・運用できるのも大きな利点です。デバイスによって見せたい内容が異なる場合も多いので、この方法は非常に有効な選択肢になります。

デメリット
✔URLが異なる
✔SEOの効果が弱まる可能性がある
✔SNSでのシェアがしにくい

それでは、この方法のデメリットは何でしょうか？まず考えられるのは、URLが異なることです。内容が同じでも、URLが違うとアクセスが分かれてしまい、SEO（検索エンジン最適化）の効果が弱まる可能性があります。また、SNSでのシェアもしにくくなります。
次に、デザインの問題もあります。スマホでパソコン用のページが表示されたり、逆にPCでスマホ用のページが表示されることがあります。これを解決するために、PCページとスマホページを切り替えるボタンを設置することもありますが、これはユーザビリティ（使いやすさ）を下げることになりかねません。（自動で振り分けるプログラムを使う方法もありますが。）
さらに、サイトを更新したり改修する際の手間も考慮する必要があります。例えば、新しい記事やコンテンツを追加するとき、PCページとスマホページ、両方に内容を反映させる必要があるのです。

方法２．スマホ専用のページを作る（同一URL）

二つ目の方法は、上の方法の改善案です。スマホ専用のページを作るところまでは変わらないのですが、ユーザーが使っているデバイスのUA（ユーザーエージェント）によって、表示するページを切り替えます。さらに.htaccessなどのプログラムファイルを使ってURLを書きかえます。

メリット
✔後付けでスマホページが作れる
✔PCページとは別に運用管理ができる
✔SEOやSNSシェアに強いサイトが作れる

一つ目の方法と同じく、後付けでスマホページが作れること、PCページとは別に運用管理ができることがメリットとしてあげられます。加えて、URLが同一であることからSEOやSNSシェアに強いサイトが作れることがあります。

デメリット
✔管理が二度手間、三度手間になってしまう
✔デバイスごとにページを用意する必要がある

一つ目の方法のデメリットは大きく解決できるのですが、ページごとに管理が二度手間、三度手間になってしまうことは変わりません。URLは異なりますが、HTMLやCSSなどのソースが別であることは変わらないからです。
また、デバイスごとに対応するページを用意しなければいけないこともデメリットとして残ります。PC向け、スマホ向け、タブレット向けのように対応させるデバイスが増えるとその分手間も増えてしまうのです。

方法３．レスポンシブデザインを使う

3つ目は、レスポンシブデザインを利用してスマホ対応をする方法です。レスポンシブデザインとは、デバイスのディスプレイサイズ（画面の横幅）によってデザインを切り替える手法のこと。CSS3のメディアクエリを利用して、ディスプレイサイズによって適用するCSSを切り替えているのです。

メリット
✔保守や管理の手間を減らせる
✔SEOやSNSのシェアにも強い

レスポンシブデザインの場合、どんなデバイスにも対応するためにHTMLは一つだけです。違うのはCSSの部分だけです。このため、先ほど紹介した2つの方法と比べると、保守や管理の手間をかなり減らすことができます。新しいコンテンツを追加する時も、一つのHTMLファイルを更新するだけで済みます。

また、デバイスごとにURLが変わらないので、SEOやSNSでのシェアにも強いです。特にSEOの面では、レスポンシブデザインが他の方法よりも大きなメリットがあります。なぜなら、Googleがレスポンシブデザインを推奨しているからです。

デメリット
✔予算や作業量がかかる場合がある

レスポンシブデザインはスマホ対応の方法として非常に広く使われていますが、完璧な方法ではありません。基本的には大きな問題はないものの、プロジェクトの内容によっては向かない場合があります。特に、既存のPCサイトの構造によっては、予算や作業量が思ったよりも増えてしまうことがあります。ただ、これはサイトによって異なるため、一概には言えません。
以前は「レスポンシブデザインはページの読み込みが遅い」という意見もありましたが、現在ではこの問題はかなり改善されています。インターネットの回線状況も良くなっており、CSSスプライトや画像の読み込みを遅らせるなどの技術的な改善策もあります。

どの方法を選べばいいのか？

どの方法を選べばいいのか？
レスポンシブが最善の方法であることに疑いの余地はないでしょう。新規でサイト制作するのであれば、特別な理由がない限りはレスポンシブデザインを採用した方がいいです。
しかし、既存のサイトを活用する場合は状況が変わります。上述したように、Webサイトの作りによってはレスポンシブデザインを利用すると予算や工数が嵩んでしまうことがあるからです。
その場合は、別途スマホページを用意するなど、レスポンシブデザイン以外の方法を検討する必要もあるでしょう。一部のページだけをレスポンシブにするなど、複数の方法を組み合わせることも検討したいものです。

まとめ

Webサイトをスマホ対応するための3つの方法についてご紹介しました。
自社のWeb戦略に照らし合わせて、最適な方法を選んでいくようにしましょう。