迫られるスマホ対応！レスポンシブと専用サイトの特長を徹底解説

レスポンシブ対応のWebサイトについて調べていると、スマホ対応という言葉を目にするのではないでしょうか。
レスポンシブWebデザインはパソコンにもタブレットにも、スマートフォンにも対応できるようにプログラムされたWebデザインのこと。つまり、Webデザインによってスマートフォンへの対策をすることです。

スマホ対応とは、ホームページをスマートフォンに対応させることであり、レスポンシブもその方法の中のひとつ。
他にもいくつかやり方があるので、今回はレスポンシブWebデザインとスマホ対応のWebサイトについて詳しく紹介させていただきます。

スマホ対応のWebサイトとは

スマホ対応のWebサイトというのは、ホームページにアクセスしてきたユーザーに対してスマートフォンできちんと表示されるように対策されたWebサイトのことを言います。
もともとWebサイトはスマートフォンができるよりも前からあったため、パソコン用に作られたものばかりでした。
その結果、スマートフォンが急速に普及し、Webサイトを閲覧するデバイスが大きく変わった今でも、スマートフォンへの対策が遅れ、パソコン用のWebサイトを運用している企業も少なくありません。
きちんとスマートフォンへの対策が取られているかどうかも含めて「スマホ対応」という言葉が生まれた経緯があります。

スマホ対応Webサイトの種類

スマホ対応のWebサイトは大きく分けて3種類があります。

• パソコン・スマートフォンをデバイスで分けて表示する
• レスポンシブWebデザインで表示させる
• スマートフォンユーザーのことだけを考えてデザインする

パソコン・スマートフォンをデバイスで分けて表示する

Webサイトにアクセスしてきたユーザーのデバイスがパソコンなのか、タブレットなのか、スマートフォンなのかを判断することができます。
この機能を利用し、それぞれのデバイスに合わせたページへとアクセスユーザーを遷移させます。

パソコンにはパソコン用のサイトを表示させ、スマートフォンの場合は専用に作成したスマホ用のページに自動で転送します。
そのため、パソコンはhttp://hogehoge.comでも、同じ内容のページをスマホで開くとhttp://hogehoge.com/mbなどの表示でURLが分かれています。
もともとはWebサイトはパソコン用に制作されたものが多かったため、初期のスマホ対応はすべてこの方法でした。

レスポンシブWebデザインで表示させる

レスポンシブWebデザインはデバイスの横幅に合わせてサイトのレイアウトを合わせるデザインのことです。
Webサイトにはデバイスの画面サイズを読み取る機能が備わっています。
この機能を利用し、今、見ている画面のサイズがどのサイズなのか、その場合、どのレイアウトを選択するのかをサイト側にプログラムしておきます。

ユーザーがスマートフォンを横に向けたり、パソコンのウインドウ幅を狭めたりしても、プログラム側で制御し、サイズに合わせて表示してくれます。
また、レスポンシブではパソコン・スマホで同じURLを使用できるため、制作サイトはひとつだけでOKです。
現在ではスマホ専用サイトを制作するのではなく、レスポンシブのサイトを制作する企業が増えています。

スマートフォンユーザーのことだけを考えてデザインする

パソコン専用のデザインを作らず、スマホ専用サイトのみを制作する方法です。
Webサイトにもよりますが、BtoCのWebサイトでは、スマートフォンからのアクセスが全体の90％を超える場合があります。
この場合、パソコンのユーザーのことは無視し、スマートフォンに特化したデザインにした方が効果が出やすい可能性があります。

スマホ対応ができていないWebサイトの場合、スマホでのアクセスには「閲覧しにくい」という障害が出ます。
しかし、パソコンの画面はスマートフォンより大きいため、スマートフォン用に組まれたデザインでもタブレット程度のサイズまで対応しておけばパソコンでも不自由なく閲覧できます。
そのため、離脱には繋がりにくい傾向があります。
これらを加味し、場合によってはスマホのみに対応したWebサイトとすることもあります。

スマホ専用サイトの特長

レスポンシブのサイトでは一定のルールに則って文字や画像を配置しなければならないというルールがあります。
何故なら、パソコンとスマートフォンで同じページを使うため使用している要素は変わらないからです。デザインが変形しても内容が変化するわけではないのです。
これに対してスマホ専用のWebサイトには特に制限がないため、画像やタイトル、本文などを並び順や表示パターンを気にせず自由に配置することができます。
そのため、スマートフォンでアクセスしてくるユーザーのことだけを考え、ユーザビリティの高いWebサイトを制作することが可能になります。

スマホ専用のWebサイトのメリット

スマホ専用サイトは、スマートフォンからアクセスしてくるユーザーのことだけを考慮して文字のサイズやボタンの位置などを設定できるため、UI設計に無理が生じにくく、より使い勝手の良いWebサイトにすることが可能となります。
また、公開後にABテストをしたり、ユーザー動向を考えた修正をしたりするのにもパソコンサイトに影響されないため、対応がシンプルです。
さらに、パソコンで表示される画面幅を気にしなくてよいため画像サイズをかなり小さめに設定することが可能です。

画像を小さく設定できることがSEOにも影響する

画像サイズが小さくなると読み込みの時間が短縮されるので表示スピードがアップします。
ページを開くまでの時間が長ければ長いほどユーザーはページを開く前に「戻る」のボタンを押してしまう可能性が高くなってしまいます。
そのため、パソコンのことを考えて表示させるレスポンシブWebデザインに比べてスマホ専用サイトの方が表示速度の対策がしやすくなり、表示速度での離脱を防ぎやすくなります。
さらに、表示速度の改善と、直帰率の低下はいずれもSEOにおいてメリットとなるため、順位の上昇につながる可能性があります。

スマホ専用のWebサイトのデメリット

メリットの部分を考えると、レスポンシブに対してスマホ専用サイトの方がユーザーにとって使いやすさを追求できることは明らかです。
しかし、実際に世の中のWebサイトを見てみると多くがレスポンシブWebデザインでスマホ対応をしています。
その理由は大きく分けて4つあります。

レスポンシブに比べてコストがかかる

スマホとパソコンで運用を分けた場合、単純にコストが2倍かかります。
もし、その分を「サイトを分けることによって売り上げが上昇し、補填できる」という明確な理由があれば、コストをかける必要がありますが、そうでない場合、わざわざサイトを分ける意味がありません。
現実的な手段として、レスポンシブWebデザインを採用するか、もしくはスマホサイトのみを運用し、パソコンユーザーもスマホサイトに促すというのが現実的な手段となります。

スマートフォンを中心にページをデザインする

今までホームページでは、パソコン用にデザインされているケースがほとんどでした。レスポンシブデザインも「パソコン用のWebサイトをモバイルに対応させたもの」という考え方が今でも残っています。しかし、アクセスの状況をみると多くのホームページはスマートフォンからのアクセスが7割から8割あり、パソコンからのアクセスは3割にも満たないケースがほとんどです。

Googleの検索もスマホファースト

ユーザーが使用している端末の変化を受け、Googleは「モバイルファーストインデックス」を採用し、検索でもパソコンよりスマートフォン優先でインデックスすると発表しました。
さらに、スマホ対応ができていないサイトは順位が下げられる可能性があることも伝えられています。
そのため、今のWebサイトはスマホ対応が必須になっています。
サイトを別々に分ける場合でも、メインで考えるサイトはスマホとし、パソコンでアクセスしてきたユーザーのみを別に表示させる「パソコン対応」のWebサイトとして表示させることも考えていく必要があります。

スマホ対応も専門家に相談

スマホ対応についてご紹介してきましたが、制作したいWebサイトによってユーザーの利用方法やアクセスする端末も変わってくるため、全てのサイトが当てはまるわけではありません。
ホームページの制作やリニューアルを考えている場合は、専門家とも相談しながら自社の状況と照らし合わせて対応していくことをおすすめします。