レスポンシブWebデザイン(RWD)の特徴まとめました│東京のWeb制作会社のレスポンシブWebデザイン関連コラム

Columnコラム

レスポンシブWebデザイン(RWD)

レスポンシブWebデザイン(RWD)の特徴まとめました

レスポンシブWebデザイン(RWD)の特徴まとめました

2015/12/14
このエントリーをはてなブックマークに追加

昨今、レスポンシブWebデザインが主流になり始めていますよね。
ただ、「何が良いのかわからない...。」「難しいのかな...。」「違いはなに...。」
と思う方もいらっしゃるのではないでしょうか。
そこで今回は、レスポンシブWebデザインのメリット・デメリットをご紹介したいと思います!

レスポンシブWebデザインとは

"レスポンシブWebデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。"※IT用語辞典 e-Wordsより

要は、ブラウザの横幅サイズによってCSSを切り替えて表示を変える手法です。
ブラウザの横幅を縮めたり画面いっぱいに伸ばしたりするとレイアウト構造が変わるサイトがレスポンシブWebデザ対応のサイトです!

レスポンシブWebデザイン対応サイト

実際にどのようなサイトなのかいくつかご紹介します!

RedBull

f-fujiwara_2015_9_2_001.png

http://www.redbull.com/jp/ja

レッドブルのサイトです。
メインビジュアルで画面いっぱいに複数の画像を載せていますね。
画面いっぱいに画像をのせることで、インパクトを表現することも可能です。

ANTIQUES THE GLOBE

f-fujiwara_2015_9_2_002.png

http://www.opir.kyoto-u.ac.jp/study/

京都大学のサイトです。
こちらもメインビジュアルを画面いっぱいに表示させていますね。
大学ということもあり、やはり学生がターゲットユーザーになるので、レスポンシブWebデザインでスマートフォン対応も完璧ですね!

大幸薬品株式会社

f-fujiwara_2015_9_2_003.png

http://www.seirogan.co.jp/

大幸薬品株式会社のサイトです。
昨今では、コーポレートサイトもレスポンシブWebデザイン対応が重要視されています。
SEO対策も有利になりますので、リニューアルを考えている方は是非!

レスポンシブWebデザインのメリット・デメリット

こんなに魅力的なら、全てレスポンシブWebデザイン対応すれば良いではないかと思いますよね。
しかし、デメリットもあるので、目的にあった対応が必要になってきます。
そこで、メリットとデメリットをまとめてみました!

メリット

2.メンテナンスが手軽にできる。

 パソコンサイトとスマートフォンサイトで作成している場合、修正する箇所が2箇所になります。
 しかし、レスポンシブWebデザインの場合だと修正したい部分を一つ修正するだけで、全デバイスの修正が可能になります。

2.SEO対策に適している
 Googleは、レスポンシブWebデザインを推奨しており、クローラーが効率的にページ読み込みすることが可能になります。
 上記でも記載させていただきましたが、レスポンシブWebデザの場合、ワンソースで済むためクローラーも読み込みやすいのです。

3.デザインの統一性
 パソコン・スマートフォンで別々のデザインを作成する必要が無いので、デザインの統一化をすることが可能です。
 そのため、ユーザーにもサイトを覚えてもらえやすいです。

4.マルチデバイス対応
 パソコン・スマートフォン・タブレット・フューチャーフォンと様々なデバイスがあります。
 アップルウォッチみたいに将来、別のデバイスが出てくる可能性もあります。
 しかし、マルチデバイス対応にすることで、端末の画面サイズに依存しないため、どんなデバイスでも表示させることができます。

5.リダイレクトの設定が不要
 スマートフォンサイトを作成しているとデバイスごとに異なるURLを設定する必要がありますが、各デバイスごとに設定する必要がなくなりますので、手間が省けます。

デメリット

1.工数がかかるため、制作費用が高い
 HTMLやCSSの調整は、複雑になります。
 デザインもブラウザの横幅ごとにレイアウトが変わるため、それを踏まえたデザインをしなくてはなりません。
 そのため、設計から構築までの工数が非常に多くなるため費用もその分高くなります。

2.スマートフォン画面でパソコン画面表示をすることが不可能
 スマートフォンページで見ていると、「PC版はこちら」というボタンが時々あると思います。
 それがレスポンシブWebデザインの場合できません。
 横幅のサイズで切り替えを行っているため、あえてパソコン版の画面を見るということが不可能です。

3.スマートフォンで見た時にページが重くなる場合がある
 横幅のサイズによって切り替えを行うので、パソコン版で表示させる画像とスマートフォン版で表示させる画像も表示・非表示と切り替えを行います。
 その場合、画面上では見えないのですが、実際存在するので読み込みを行ってしまいます。
 そのため、ページ速度に時間がかかる場合があります。

4.古いブラウザに対応していない
 IE8以下の場合、レイアウトが崩れたり表示がされない場合があります。
 そのため、サイトに訪れるユーザーのブラウザ使用率も把握して対応する必要があります。

まとめ

今回は、レスポンシブWebデザインをご紹介させていただきました。
デザインの表現方法は、レスポンシブWebデザイン以外にもたくさんありますので、自分にあった表現方法を取り入れることで効果も変わってきます。
魅力的な表現方法でも必ずデメリットはあるので今一度、自社のサイトにデメリットは無いか考えてみるのも良いと思います。
ただ、スマートフォン対応は必須となってきていますので、まだ対応されていない方はぜひティファナにご相談ください!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

関連コラム

レスポンシブWebデザインの是非!

text_totop