スマホに対応したサイトを制作する2つの方法

スマホに対応したサイトを制作するには大きく分けて2つの方法があります。ここではその主な方法を説明していきます。

主な方法としては、

  • PCサイトとスマホサイトを別々に制作する
  • レスポンシブデザインを導入したサイトを制作する

の2通りがあります。

PCサイトとスマホサイトを別々に制作する

PCサイトとスマホサイトを別々に制作し、ユーザーの環境(OS等)によってPCサイトかスマホサイトにユーザーを振り分けます。この事によってPCのユーザーだけではなく、スマホのユーザーにも対応することができます。

サイトをwordpressで制作したのであれば、「Multi Device Switcher」というプラグインがあるので、これを使用すれば端末(PC,スマホ、タブレット)別にテーマを切り替えることができます。

PCサイトとスマホサイトを別々に制作した場合のメリットとしては、それぞれの端末によって見せ方を工夫したサイトを制作することができることです。

PCのユーザーであればPCサイトに、スマホのユーザーであればスマホサイトに振り分けられるので、より端末に合ったサイトをユーザーに見せることができます。

また、デメリットとしては、PCサイトとスマホサイトの2つのサイトを制作するので、制作に時間がかかります。
更新作業についてもPCサイトとスマホサイトの両方を変更しなくてはならないので、手間と時間がかかります。

レスポンシブデザインを導入したサイトを制作する

スマホに対応したサイトを制作する方法の2つ目としては、レスポンシブデザインを導入することです。

レスポンシブデザインとはページを画面の横幅に最適な状態に変化するよう設定されたサイトの事です。

wordpressでサイトを制作したのであれば、レスポンシブデザインのテンプレートを利用すればすぐに導入できます。
wordpress以外でサイトを制作した場合でもBootstrapというCSSのフレームワークがあるのでこれを利用すれば、すぐに導入可能です。

この場合のメリットとしては、更新作業をする際に一か所を変更するだけでPCサイト、スマホサイトともに変更できるので、保守が楽です。

また、GoogleではPCサイトとスマホサイトを別々に作成する場合よりもレスポンシブデザインのサイトにするようにアナウンスしているようです。

デメリットとしては1つのページをcss等で変化させているので、不具合が出やすいです。特にPCで見ているときに、ブラウザの横幅を縮めていった時に不具合が起きることが多いように思います。

スマホ対応サイトを制作するにはどちらの方法をとればよいか?

現在の主流はレスポンシブデザインのサイトです。
やはり、Googleからのアナウンスがきいているのかもしれません。

ただし、PCサイトとスマホサイトを別々につくるより、若干ながらレスポンシブデザインのほうが制作費用が高くつく可能性があるので注意が必要です。

ですので、あまり制作費用について気にしないのであれば、レスポンシブデザインのサイトをつくる事をおすすめします。