レスポンシブデザイン VS スマホ専用サイト

ご存知のとおり、スマートフォンが爆発的に普及しました。

少し前まで流行り好きのインテリさんが持ってるだけだと思っていたら、もはや持っているのが当たり前の時代になってきました。都会だけ高かった普及率は地方でもガンガン上昇。一人一台どころか、仕事用なんかで一人で二台持ってる人なんかもザラにいます。

自分も結構ガラケーで粘っていたほうなんですけどねー、

仕事上のやりとりで添付されてくるWordファイルやExcelファイルが開けないことが多く、これはさすがに仕事に差し支えがあるということでスマホに機種変しました。いや、めっちゃ便利ですスマホ。もうスマホじゃないと仕事になんないです。

さてさて、このスマホの普及に伴いホームページ業界も変化を強いられることになりました。

ホームページと言えば、10年ほど前まではホームページといえばパソコンで見るのが当たり前。でも、スマホが普及すれば、みなさんもちろんスマホでホームページを見るわけで。いまではスマホでホームページを見るほうが当たり前になりつつあります。アクセス解析をすると、もはやスマートフォンからのアクセスは過半数を超えているのです。

そうなると困るのはホームページを作る側。

いままではパソコンでキレイに見えることだけを考えておけばよかったのに、今度はスマホでもちゃんと見えるように設定しなければいけなくなったのです。こりゃあ大変だ。

そこで必要になってきたスマホ対策。
方法は大きく分けて2種類あります。

ひとつは、どんな端末で見てもデザインが崩れないようにするレスポンシブデザインという手法。そしてもうひとつは、パソコン用サイトとは別に「スマホ用のサイト」を作ってしまおうという手法です。

お客様からもよく「スマホでもちゃんと見えるホームページにしたいんだけど、どっちにしたらいいの？」というお声をよく頂きますが、どちらの手法も一長一短があります。レスポンシブデザインでのホームページ構築と、スマホ用サイトの別構築。ここからはそれぞれの特徴を見てメリットとデメリットを見ていきましょう。

レスポンシブデザインで構築する場合

レスポンシブデザインの最大の特徴は、端末の種類ではなく、端末の画面サイズによってデザインを変える点です。パソコンであろうが、スマホであろうが、ガラケーであろうが、タブレットであろうが、機種そのものはまったく無関係。すべて画面サイズのみを見て判断し、デザインを変化させます。

具体的には、ホームページの中にあるスタイルシートというデザインを記述したプログラムの中に「画面サイズが800pxより大きいときは文字サイズを15px、800px未満のときは文字サイズを縮めて12pxで」というような分岐命令を書いて、デザインを変化させていきます。

文字の大きさだけでなく、画像の配置や回り込み方向など様々な要素を計算しなければいけないので、けっこうデザイン作業は大変です。レスポンシブ対応を制作会社に依頼すると、けっこう大きな金額を請求されたりします。最初の構築で工数がかかってしまうというのはデメリットといえばデメリットですね。

あとパソコンでもスマホでも同じサイトを見ることになるので、パソコンとスマホで完全にデザインをガラリと変えたいときにも向いていません。デザイン分岐といってもさすがに限界があります。

でも逆に大きなメリットが1つ。

メリットは、デザイン分岐の判断が端末依存ではなくサイズ依存である点。もしデザイン分岐の判断が端末依存だと、世の中に新しい端末が現れるたびに分岐を増やさなければいけません。ですがサイズ依存だと、将来どんな端末が現れようが関係ありません。新しい端末が出現したときに対応する手間がなくなります。

スマホ専用サイトで構築する場合

パソコンで見ていたサイトに加えて、スマホ専用のサイトを別で作ってしまおうという手法です。イメージ的にはレスポンシブデザインよりもこっちのほうがわかりやすいかもしれません。

ホームページにアクセスしてきた人の端末情報を見て、パソコンであればパソコン用サイトに、スマホ用サイトであればスマホサイトに、という振り分けを自動で行うようにプログラムしておくので、ホームページに来た人は特に意識することなく適切なサイトにジャンプすることができます。

メリットは、スマホ用サイトを別に設けることで完全に独自のデザインとコンテンツが構築しやすいこと。掲載する画像もそれぞれ別のものになるので、パソコン向けの大きな画像をスマホで見てしまい重たくなってしまうなどといったこともありません。

逆にデメリットとして大きいのは、更新をかけるときに手間が2倍になってしまうこと。パソコン用サイトとスマホ用サイトの両方に手を加えなければいけなくなるので、作業量も増えますし、どちらかにしか掲載していなかったりのようなミスも誘発されます。

またサイトが2つあるのはURLが2つになるということ。これは昨今のSNS全盛期において非常に不利です。せっかく自分のホームページが気に入られてリンクが張られても、それがパソコン用なのかスマホ用なのかで表示が変わってしまいます。さらに断定できない部分ではありますが、似たコンテンツの2つのサイトを持つことでSEO的に影響が出る可能性も否定できません。