レスポンシブWEBデザインのホームページを制作する前に。メリットとデメリットを考えてみよう

「レスポンシブWEBデザインのホームページを制作したい」と最近よく相談をいただきます。
ただ、レスポンシブWEBデザインのホームページは必ずしも良いと言えるのでしょうか。

スマートフォンやタブレット端末が普及し、もちろんレスポンシブWEBデザインのホームページは大きなメリットもありますがデメリットもあります。

今回はそのレスポンシブWEBデザインのホームページのメリットとデメリットについてまとめてみました。

そもそもレスポンシブWEBデザインって何?

まずは下記の動画を見てみてください。

ブラウザのサイズを変更するとそれにあわせてレイアウトも変わっていくのがわかるかと思います。
スマートフォンやタブレットでも様々なスクリーンサイズのスマートフォンが発売されていますが、「レスポンシブWEBデザイン」はスクリーンサイズにあわせてサイトの表示を最適化してくれる技術です。

近年、WEBサイトのマルチデバイス化が必須になってきています。
webサイトは今やパソコンだけで閲覧されるものではなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット端末、様々なデバイスで閲覧されています。

そのため、企業によってはPC向けのWEBサイト、モバイルサイト、スマートフォンサイトなど、別々に開設し、別々にコストをかけて運用しているケースもありました。ただ、コンテンツを差し替える際にもそれぞれで変更が必要であるため、手間もコストも大きくかかってしまうデメリットがありました。

そこで、新しい手法として国内・海外で注目を集め始めているのが、「レスポンシブWEBデザイン」という手法です。

メリット1 1つのHTML(ワンソース)管理!

レスポンシブWEBデザインの場合、1つのHTML(ワンソース)を管理します。

サイトの運用で、テキスト修正や画像差し替え等変更すれば、パソコンで閲覧したとき、スマートフォンで閲覧したとき、タブレットで閲覧したときの表示を1回の更新作業で完結することができます。

メリット2 SEOに強い!

Googleは、サイトの構築手法の一つとしてレスポンシブWEBデザインを推奨していて、PCサイトとモバイルサイトを別で所有するより、同一URLで運用する方が適切にインデックスができると言っています。

メリット3 URLが1本化されるため、シェアしやすい!

PCサイトとスマートフォンサイトを別に用意しているサイトがあった場合、パソコンでサイトをTwitterで共有し、 スマートフォンでそのリンクを開いた時にPCサイトが開きサイトが見にくく離脱に繋がる、といったケースも考えられます。

レスポンシブWEBデザインで制作したサイトはそれがなく、問題なく閲覧、シェアが可能です。

QRコードを使って紙媒体と連動性を持たせた広告展開をする場合でもURLが1本化されたレスポンシブWEBデザインの方が便利ですし、ユーザーの認知に繋がりやすいといえます。

デメリット1 スマートフォンで閲覧したときにサイトによっては重く感じるかも

いくつかのサイトで検証してみましたが、今のところ気になるほど重く感じることはなかったのですが、サイト自体は元々一つなので、重い画像などを使ったサイトをスマートフォンで閲覧した場合、重く感じてしまうことがあるかもしれません。

デメリット2 通常のサイトを制作するよりも複雑で手間と時間がかかる=コストが増える

 社内のデザイナーいわく、「レスポンシブWEBデザイン制作は通常のHTMLサイトを構築するよりも1.5倍程度手間と時間がかかる 」そうです。そのためコストが通常のWEB制作より高くなるケースが多いようです。

デメリット3 スマートフォンやタブレットであえてパソコン向けのサイトを見たい時も見れない

パソコン向けの表示の方が好きだからパソコンの表示でみたい!と言われても見れません。

まとめ

レスポンシブWEBデザインでサイトを構築するメリットとデメリットについて考えてみましたが皆さんはどう感じたでしょうか。メリットとデメリットを考えてみた結果、すべてのコンテンツに“レスポンシブWEBデザインがあう”とは限らないと思うので、結局は自分の発信したいコンテンツの内容や、特性にあわせてレスポンシブWEBデザインを採用するかどうか判断するのがよいと思います。

私のブログは、総合的にメリットの方が大きいと考え、このブログサイトもWordPressを活用しレスポンシブWEBデザインで構築してみました。現在ではスマートフォンやタブレットでの閲覧者も増え、導入してよかったと感じています。

レスポンシブWEBデザインのWEBサイト制作を検討されている方は参考にしていただければ幸いです。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レクタングル(大)広告