エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

MoviePrint
TOP > デザイン > 今さら聞けない。レスポンシブWEBデザインのメリット、デメリットとは?

今さら聞けない。レスポンシブWEBデザインのメリット、デメリットとは?

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/16

みなさんこんにちは。

webプロモーション事業部の池本です。

「レスポンシブWEBデザインって耳にすることは多いし、見かけることも多くなったけど、うちはBtoBだから関係ないんだよ」というお声はよく聞くものです。

が、ターゲットユーザーがスマートフォンを使ってWEBサイトを閲覧してくれるかどうか以外にも、判断基準にしてほしいメリットとデメリットが、レスポンシブサイトにはたくさんあるんです。

今日は弊社のレスポンシブWEBデザイン対応事例と併せて、レスポンシブ対応におけるメリットとデメリットをご紹介します。

1. レスポンシブWEBデザインとは

パソコン・スマホ・タブレットなど、閲覧デバイスが増えたことで、ひとつのサイトデザインではWEBサイトが見づらいという傾向が出てきました。
そこで出てきたのがレスポンシブWEBデザインです。様々な端末画面が次々と出てくるようになりましたが、そのそれぞれに合わせて単一のHTMLファイルが自動的に最適を図ってWEBサイトのデザインを調整して表示する手法を指します。

従来のWEBサイトは、

  パソコンで閲覧 → パソコン用のHTMLでデザイン表示

  iPhoneで閲覧 → スマホ用のHTMLでデザイン表示

このように、複数のHTMLページを用意して、更新を行っていく必要がありました。

しかし、レスポンシブWEBデザインなら

  パソコンで閲覧 → パソコン閲覧用にデザインが自動最適化

  iPhoneで閲覧 → iOS閲覧用にデザインが自動最適化

となります。どこを表示させたら最適化するのかを判断し、表示させる部分を閲覧デバイスの画面サイズによって、デザインが自動最適化してくれるんですね。これがレスポンシブデザインと呼ばれるものとなります。

2. レスポンシブWEBデザインのメリット

1.ワンソース管理が可能

PCサイトとスマホサイトでHTMLが別構築されていないため、サイトのメンテナンス工数を削減することができます。

また、ひとつのHTMLを更新すると、どのデバイスから見た場合でも同じ更新がされている状態になるため、ミスも少なく、修正も容易に行うことができるのがレスポンシブサイトの最大の魅力です。

2.SEOに効果的

検索結果の表示順位に関わる、判断基準のGoogleアルゴリズムに4月大きな改訂がありました。
それが【モバイルフレンドリー】です。

モバイルフレンドリーとは?

WEBサイトをモバイル端末での表示に最適化=スマホ対応することいいます。
モバイルフレンドリーに対応しているWEBサイトは、拡大しなくても読みやすいテキストサイズ、横スクロールの必要がない、リンクやボタンがタップしやすい、Flashを使用していないなどの項目を満たしている必要があります。

レスポンシブ対応していないサイト構築だと、HTMLがPC用とスマホ用でそれぞれあるため、Googleクローラーが「これは不正なミラーサイトか?」と判断に迷ってしまうことがあります。

そうするとそのWEBサイトの評価はあがりづらくなってしまうことがあります。
クローラーが迷わないためにも、きちんとスマホに最適化しているレスポンシブサイトの構築が必要でしょう。

3.将来的に出てくるデバイスにも対応可能

端末の画面サイズに依存しないため、今後でてくるであろう端末に対しても、しっかりとしたユーザビリティの上で表示させることが可能です。

レスポンシブWEBデザインは、その表示の横幅によってデザインを切り替えることになるため、新たなデバイスの登場にあわてて対応する必要が少なくなるでしょう。

3. レスポンシブWEBデザインのデメリット

1.スマホ表示が重くなる

例えば、横幅1200ピクセルのときは【××画像】を表示、480ピクセルのときは【××画像】を非表示、というようにサイト構築するとします。

その場合、もし480ピクセルの非表示時端末だとしても、切り替えのスタイルシート内にはタグが打ちこまれていますので、一旦そのソースを読み込もうとします。
そのために、サイズが重い画像をサイト上で使用していた場合、スマホサイト上では表示速度が落ちてしまうことがあり、レスポンシブサイトのデメリットと言えます。

2.構築に工数がかかる

表示させるデバイスごとにレスポンシブ対応のデザインを用意したり、コーディングの構築が複雑になっているため、今までの制作時間と比較すると設計の段階でも構築の段階でも工数が増えます。そうすると、構築コストがレスポンシブサイトの方が高くなってしまいます。

3.デザインに合わせてコンテンツの精査が必要

一般的に、PCサイトは表示画面が大きいため、多くの情報を盛り込んでも問題がありません。
しかし、スマホやタブレット端末になると小さな画面での回遊が必須になるため、ユーザビリティが高くなるようなデザインやコンテンツの構想が必要です。レスポンシブにする場合は、PCでみた場合、スマホでみた場合、など、デバイスごとのコンテンツ精査が必要になります。

4.IE8以下の古いブラウザに対応していない

レスポンシブデザインは古いブラウザを使用している端末には対応しておりません。
そのため、せっかく構築したWEBサイトが思ったような表示をされない端末も当然ながらあります。

また、ガラケーと一般的に呼ばれているフューチャーフォンにも未対応となっています。

4. 実際のレスポンシブ事例を見てみよう

弊社のWEB制作でも、もちろんレスポンシブWEBデザインを適応させていただくことが可能です。
今回は、「日本製紙クレシア」様(http://pro.crecia.co.jp/)を事例に、レスポンシブの世界を体感していただければと思います。

標準PCブラウザ

PC版デザイン1

PC版デザイン2

【ラインアップから探す】では、ピックアップ商品と商品種類別の入り口があったり、上部にあるメニューはテキストで横に羅列して配置されている状態ですね。

グローバルメニューが変化

スマホ版デザイン1

スマホ版デザイン2

先ほど、上部にテキストで羅列配置してあったメニュー部分が、いわゆる【 ハンバーガーメニュー 】に切り替わっていますね。ここをクリックすると、ホームや商品情報、資料請求などの項目がプルダウン表示されます。

サムネイルの画像やレイアウトの変化

スマホ版デザイン3

スマホ版デザイン4

ピックアップ商品だけの表示になり、商品種類別の入り口が非表示になっていますね。下部のお問い合わせからメールニュース登録までのバナーも横に三つ配置されていたのが、縦にデザイン変更されています。

おわかりいただけましたでしょうか?このように、画像が自動的に小さくなったり、配置が換わったり、メニュー表示が変わったりと、ブラウザサイズに合わせてデザインが最適化されます。
これを全て単一のHTMLで行えるのがレスポンシブデザインと言われるものです。

→その他のレスポンシブ実績をみる

5. まとめ

レスポンシブWEBデザインがあなたのWEBサイトにとって必要が不必要かはターゲットユーザー層だけで判断するべきではありません。
メリット、デメリットそれぞれをふまえた上で、レスポンシブ対応が必要か考えていただけたらと思います。

また最後に、レスポンシブでもマルチデバイス対応でも、ユーザーに見てもらうためのWEBサイト制作で重要なポイントは下記の3点です。

・どの閲覧デバイスでも、ファーストビューは最重要

・スマホで表示したいこと、PCで表示したいことを整理する

・閲覧デバイスごとに構築の段階での表示テストをする必要がある

以上です!PCからもスマートフォンからも集客が最大化できるように、もう一度サイトの構築を見直してみてはいかがでしょうか?

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

関連キーワード

web制作 レスポンシブ

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング