レスポンシブデザイン

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

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

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

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

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

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

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

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

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

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

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

 

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

レスポンシブデザインでホームページ制作する場合

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

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

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

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

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

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

 

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

スマホ専用サイトの制作

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

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

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

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

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

 

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

浅草ねこのてホームページではレスポンシブデザインをおすすめしています

それぞれメリットとデメリットをざっと並べてみましたが、私ども浅草ねこのてホームページではレスポンシブデザインでのHP制作のほうを強くお勧めします。いろんなメリット・デメリットの中で、やはり「更新の手間が2倍になる」というスマホ専用サイトのデメリットだけはどうしても無視できません。

ホームページは作って終わりではありません。更新と追加を続けてホームページそのものを育てていくことは本当に重要なことです。更新の手間が2倍になれば作業にかかるお金と時間も増えてしまいますし、更新のモチベーションさえも失ってしまいがちです。

昨今のホームページ事情においては欠かせないスマホ対応。特別に事情がない限り、レスポンシブデザインでの制作を選択することをおススメいたします!

 

レスポンシブデザイン スマホ専用サイト
作るサイトの数 1 複数
振り分け方法 閲覧した端末の画面横幅で判断してデザインを変化させる(将来的に新しい端末が現れても大丈夫) 閲覧した端末の機種で判断して違うサイトにジャンプさせる(将来的に新しい端末が現れた場合対応が必要になる)
デザインの差別化 あくまで1つのサイトにおいてデザインを変化させるだけなので限界がある 別サイトなので、完全に違うデザインのサイトにするこが可能
サイト表示速度 パソコンでもスマホでも同じサイトを見るので、スマホにとっては重たいサイトになりがち スマホ用サイトだけ軽くなるように作ることが可能
更新性 1つのサイトに手を加えるだけでいい 複数作ったサイトすべてに手を加えなければいけない。ミスも誘発しやすい。
拡散性 URLは1つなのでSNSでリンクを張られやすい URLが複数になるのでリンクが煩雑になる
SEO オリジナルの1つのサイトとして判断されるのでペナルティの心配がない Googleは「問題ない」としているが、重複コンテンツと誤認される可能性や、全てのサイトのクロールが正しくされない可能性は否定できない。また外部からのリンク評価が分散される可能性もありえる。
初期費用 制作会社次第。非レスポンシブサイトに比べて6割~8割増しぐらいの見積もりでやっているところが多い 制作会社次第。ページ数が多くなければなるほど作業量が多くなるので結果的にレスポンシブより高くつきやすい
維持費用 通常と同程度 通常と同程度
制作会社に更新依頼したときの費用 通常と同程度 作業量が倍になるぶん更新費用も倍