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

関連記事

  1. Web関連

    スマホ広告を出す前に押さえておきたい3つのポイント

    こんにちは、コンサルの横山です。「歩きスマホ」での事故が年々増えてる…

  2. Web関連

    なんで流行ってるの?今注目のオンライン学習サービスについてまとめてみる

    英語を話せるようになりたいなぁとやんわり思い始めて早2年が経ちました。…

  3. Web関連

    「Windows 10」の登場で、web制作は変わるのか?

    2015年の7月末にリリースされたMicrosoftの新OS「Wind…

  4. Web関連

    連絡ツールの最大手「LINE」について調べてみた。

    数年前から大流行中のSNSツール「LINE」、皆さんも使っているのでは…

  5. Web関連

    どんどん身近に!話題の3Dプリント

    こんにちは、デザイナーの角田です。何かと話題の3Dプリンター、皆さん…

  6. Web関連

    最新のトレンド?!アダプティブWebデザインについてあれこれ

    こんにちは!すっかり寒くなりましたね。デザイナーの角田です。さ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    スパイスの効いたWebサイトをまとめてみた
  2. Web関連

    ついつい読みたくなるwebサイトのコラムを書くコツ ~作文 3つの基本編 ~
  3. Web関連

    調べていて気になったマッチングアプリの紹介
  4. SNS関連

    SNSボタンがよく押される場所はどこ?
  5. Web関連

    Web制作会社の現在・未来について
PAGE TOP