レスポンシブウェブデザインとは?

「レスポンシブウェブデザイン」よく聞きますね。

ホームページ制作会社のウェブサイトには必ずと言っていいほど「レスポンシブウェブデザインで制作します!!」って書かれています。この「レスポンシブウェブデザイン」をWikipediaで調べてみるとこんなふうに書かれています。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。

うーん。。わかったようなわからないような。。

スマホ対応=レスポンシブウェブデザインなの?

ホームページ制作会社のウェブサイトで大抵の場合、そしてこのサイトでもそうですが「レスポンシブデザインでスマートフォンでも快適!」みたいなフレーズをよく見かけます。

ようするに「スマホ対応ならレスポンシブウェブデザインなんでしょ?」と思ってる方いませんか?

それは違うんです。順を追って説明していきましょう。まず、ホームページがスマホ対応じゃないとどうなります?今スマホでこのホームページをご覧の方はちゃんと文字が読めていると思います。このページは「レスポンシブウェブデザイン」で制作されているからです。

例えばこのサイトの以下のページは
https://www.10cho.jp/hint/post-459.html
スマートフォンでアクセスすると、こんな風に表示されます。

レスポンシブウェブデザイン

しかしもしこのページがレスポンシブウェブデザインで制作されていなかったらどうでしょう?その時は同じページがこのように表示されるでしょう。

レスポンシブデザインじゃない場合

はい、すごく字が小さいですね。大抵の方は読めません。親指と人差し指で押し広げて見ないと(ピンチアウト)読めません。まだこのページは1カラムのページだから良いでしょうけど、右や左にメニューのある2カラムのデザインだったり、左右両方にメニューのある3カラムのページだと一体自分はページのどの部分を見ているのか分からなくなってきます。

このようにレスポンシブウェブデザインで制作したホームページはスマートフォンでアクセスしても快適に閲覧することが出来ます。「ほら…スマホ対応ならレスポンシブウェブデザインなんじゃん!」

いやいや、そういうわけではないんです。

レスポンシブデザインじゃないけどスマホ対応のウェブサイト【1】

様々なスマートフォン対応のホームページの中には「パソコン用サイト」「スマホ用サイト」を別々に制作しているサイトもあります。例えば上記のページのURL

https://www.10cho.jp/hint/post-459.html

が、スマートフォンだとこんな感じのURLに

https://www.10cho.jp/smart/hint/post-459.html

つまり、パソコン用のページとスマホ用のページを別々に作成しているわけです。この場合、それぞれを自由にデザインできるというメリットはありますが、更新作業はそれぞれで行う必要がありますので2倍の運営負担となります。規模の大きなサイトであったりパソコンとスマホで異なったコンテンツを表示させる場合は良いですが同じコンテンツをパソコンでもスマホでも快適に閲覧できることを目的とする場合には適していません。

また、SNSでシェアしたりする場合もパソコンとスマホでURLが異なるため、中小規模のサイトでオススメできる制作手法ではありません。

レスポンシブデザインじゃないけどスマホ対応のウェブサイト【2】

上の例のようにパソコンサイトとスマホサイトのURLが同じでも。レスポンシブウェブデザインじゃないサイトもあります。それはWordpressでも構築可能ですがCMSのテンプレートファイルをアクセス端末ごとに制作する方法です。
ユーザーがアクセスしてきた端末を判別しその端末に最適なテンプレートファイルでコンテンツを表示させるという方法です。

URLがパソコンでもスマホでも同じであるためSNSでのシェアの問題もクリアしますが、タブレット端末もスマートフォンも画面サイズがあまりにも多様化しているため端末の判別の他に画面サイズで振り分ける必要も出てきます。当然その分制作コストが高くなります。また、運営もコンテンツを複数管理しなくてはいけない場合も出てくるため運営負担が大きいです。

個人事業主や中小企業のサイトはレスポンシブウェブデザインが楽チン

レスポンシブウェブデザインが楽個人事業主、中小店舗のホームページでは大抵の場合「サービスの案内」「料金」「アクセス・概要」「お問い合わせ」のようなページがあり後は「店長のブログ」を更新していくという感じの運営が多いと思います。

「レスポンシブデザインじゃないけどスマホ対応」にした場合、パソコン用のブログを更新したら、引き続きスマホ用のブログを更新する何ていうことが必要になる場合もあります。パソコンページの料金表を変更したけどスマホ用のページの変更を忘れたりするようなこともあるかもしれません。

個人事業主や中小企業、中小店舗のホームページはレスポンシブウェブデザインがオススメです。

0532-74-5099ホームページ制作のお申し込みはこちらメールでお問い合わせこのページのトップへ