Web関連

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

0

昨今、レスポンシブ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デザインの是非!

0

調べていて気になったマッチングアプリの紹介前のページ

本当はPerfumeの方が好きだけど話題のSTAR WARSについて紹介します。次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    クラウドサービスを利用する上で最低限注意すべきセキュリティ5箇条

    こんにちは!外出時に何かと荷物が多くなり両手がふさがってしまう中條です…

  2. Web関連

    コンバージョンを上げるABテストとは!?

    今回は「ABテスト実施例」を紹介したいと思います。以前私は「A…

  3. Web関連

    業界のWebトレンド調査!スポーツ用品メーカーのサイトについてまとめてみました

    最近朝や夜が涼しく、ちょうどよい気温でとても過ごしやすいですね。私の友…

  4. AI関連

    【ホームページ制作】採用はもうAI(人工知能)がやれば良い。

    巷ではAI(人工知能)の進化、活用が話題になっていますね。弊社でも…

  5. Web関連

    初めてでもわかる! Photoshopの基礎

    PhotoshopやIllustrator等のデザインソフトは、デザイ…

  6. Web関連

    楽にできる?!レスポンシブWEBデザイン

    皆さんもスマホ対応しなければと思い、ホームページをリニューアルされ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    リターゲティング広告の性質を逆に利用!新たなバナー広告活用法
  2. サービス・新技術

    テレワーク・リモートワークを快適に…
  3. Web関連

    花粉症の味方サイトとアプリを探してきました!
  4. AIさくらさん

    【人工知能(AI)×マスコミ】お問い合わせやクレーム対応を人工知能が自動サポート…
  5. AI関連

    デジタルシフトの波に乗れ!AIが人材不足の悩みを解決!
PAGE TOP