Loading...
Loading...
投稿日:2016年10月31日
スマホ対応の方法についてまとめました。スマホやタブレットが普及した現在では、Webサイトもそれに合わせたデザインが要求されています。特によく使われているのが、端末のディスプレイサイズ（横幅）によってデザインやレイアウトを切り替えるレスポンシブデザインです。WordPressなどのCMSでもレスポンシブデザインに対応したテーマは数多く、Webデザイン業界のスタンダードとも言えるでしょう。
ただし、何でもかんでもレスポンシブデザインにすればいいのかと言うと、必ずしもそうではありません。他にもスマホ対応の方法はありますし、Webサイトの目的や予算を考慮して、最適な方法を選択していきたいものです。
本稿では、Webサイトをスマホ対応するための方法を3つご紹介します。各方法のメリットやデメリットについても解説していますので、スマホ対応の方法を選ぶ際の参考にしていただければと思います。
それでは早速、スマホ対応の方法を3つご紹介していきます。特徴とともに、それぞれの方法のメリット、デメリットについてもまとめています。
一つ目の方法は、スマホ専用のページを作ることです。PC向けとは別にスマホ用のページを作るので、HTMLやCSSなどのソースも異なります。そのため、PCページのURLとスマホページのURLも下のように異なることになります。
PC向けページのURL
http://www.○○○.co.jp/
スマホ向けページのURL
http://www.○○○.co.jp/sp/
メリットとして真っ先にあがるのが、PCページに影響することなくスマホページが作れることでしょう。後述するように、既存サイトをレスポンシブ対応するのは手間が掛かります。PCページも含めて、全体設計を見直すこともあるからです。
この方法ではそういった作業が必要なく、既存のPCサイトにスマホページを継ぎ足すだけで、サイトをスマホ対応させることができるのです。
また、PCサイトとスマホを別々に管理運用できることもメリットと言えます。デバイスによって見せたいコンテンツが異なることも多いので、そういったケースでは有力な選択肢となるでしょう。
デメリットはどうなのでしょうか？真っ先に上げられるのが、URLが異なることでしょう。コンテンツの内容が同じであっても、URLが異なることでアクセスが分散してしまいます。SEO効果が薄まってしまいますし、SNSシェアにも弱くなります。
また、想定とは異なるデザインで表示されてしまうこともデメリットです。スマホでPCページが表示されてしまったり、その逆にPCでスマホページが表示されてしまうこともあるでしょう。解決策として、PCページとスマホページを切り替えるボタンを設置している事例も多くあります。が、ユーザビリティが低下してしまうことは否めません。（プログラムで自動振り分けする方法もあります。）
もう一つ、サイトの更新や改修が手間になることもあげておきましょう。例えば記事などのコンテンツを追加するとき、PCページとスマホページの両方に反映する必要がありますよね。
二つ目の方法は、上の方法の改善案です。スマホ専用のページを作るところまでは変わらないのですが、ユーザーが使っているデバイスのUA（ユーザーエージェント）によって、表示するページを切り替えます。さらに.htaccessなどのプログラムファイルを使ってURLを書きかえます。
一つ目の方法と同じく、後付けでスマホページが作れること、PCページとは別に運用管理ができることがメリットとしてあげられます。加えて、URLが同一であることからSEOやSNSシェアに強いサイトが作れることがあります。
一つ目の方法のデメリットは大きく解決できるのですが、ページごとに管理が二度手間、三度手間になってしまうことは変わりません。URLは異なりますが、HTMLやCSSなどのソースが別であることは変わらないからです。
また、デバイスごとに対応するページを用意しなければ行けないこともデメリットとして残ります。PC向け、スマホ向け、タブレット向けのように対応させるデバイスが増えるとその分手間も増えてしまうのです。
3つ目は、レスポンシブデザインを利用してスマホ対応をする方法です。レスポンシブデザインとは、デバイスのディスプレイサイズ（画面の横幅）によってデザインを切り替える手法のこと。CSS3のメディアクエリを利用して、ディスプレイサイズによって適用するCSSを切り替えているのです。
レスポンシブデザインでは、対応させるデバイスの種類によらずHTMLは一つです。異なるのはCSSだけなので、上記の2つの方法と比較して大きく保守管理にかかる手間を減らすことができます。コンテンツを追加する時も、一つのHTMLだけを改修すれば済みます。
端末ごとにURLも変わらないため、SEOやSNSシェアにも強いと言えます。特に、SEO面ではレスポンシブデザインは他の方法よりも圧倒的にメリットが得られます。というのも、検索エンジン最大手のGoogleが推奨している方法がレスポンシブデザインだから。
スマホ対応の方法として最も広く使われているレスポンシブデザインなのですが、デメリットはないのでしょうか？
基本的には大きな欠点はないのですが、制作内容によっては適さないことがあります。既存のPCサイトの作り（設計）によっては、予算や工数が膨らんでしまう可能性があること。ただしケースバイケースで、サイトの作りによってさまざまです。
以前は「レスポンシブデザインは遅い」と言われていましたが、この点については現在では改善が見られています。ネット回線の環境も改善していますし、CSSスプライトや画像などの読み込みを遅くするなどの改善方法もあるからです。
Googleが推奨している以上、レスポンシブが最善の方法であることに疑いの余地はないでしょう。新規でサイト制作するのであれば、特別な理由がない限りはレスポンシブデザインを採用した方がいいです。
しかし、既存のサイトを活用する場合は状況が変わります。上述したように、Webサイトの作りによってはレスポンシブデザインを利用すると予算や工数が嵩んでしまうことがあるからです。
その場合は、別途スマホページを用意するなど、レスポンシブデザイン以外の方法を検討する必要もあるでしょう。一部のページだけをレスポンシブにするなど、複数の方法を組み合わせることも検討したいものです。
Webサイトをスマホ対応するための3つの方法についてご紹介しました。流行っているからと何となくレスポンシブデザインにするのではなく、自社のWeb戦略に照らし合わせて、最適な方法を選んでいくようにしましょう。
