2016年4月25日
やみくもに使うのはNG！ レスポンシブウェブデザインを採用するべきシチュエーションと、Web担当者が押さえておきたいメリット・デメリット
数年前からWebデザイン業界で話題になっている「レスポンシブウェブデザイン」。
検索してみてもWeb制作者向けの記事が多く、Web担当者の方はそのメリット・デメリットについて分かったような分からないような...というケースが起こりがちです。
本記事ではテクニカルな要素は極力排除し、企業のWeb担当者の皆様目線のレスポンシブウェブデザインのメリット・デメリットをご紹介します。
これだけは押さえたい！重要ポイント
・レスポンシブウェブデザインは、OSやブラウザではなく閲覧画面の横幅でレイアウトやデザインが変わる
・URLが単一、Googleからの評価が高い等のメリットがある
・表示速度が遅くなる、デザインに制約が出る等のデメリットがある
・ターゲットユーザー、コンバージョン、運用体制等によって適しているかどうかは変わってくる
・ひとりで悩まず、専門家に相談してみましょう！
レスポンシブウェブデザインとは何か？
PCサイトとスマートフォンサイトを用意している場合、サーバ側がユーザーの使用している閲覧環境がPCかスマートフォンかを判断して、それに適したURLのページを表示します。
パソコンでは http://www.○○○.com/
スマートフォンでは http://www.○○○.com/sp/ のように、複数のHTMLファイルからどちらかを見せています。
ところがレスポンシブウェブデザインでは、URLを http://www.○○○.com/ のように1つに統一して、ユーザーが横幅何px(ピクセル)の画面(ブラウザ)で見ているか？だけを基準にしてデザインを決めることができます。
※PCから閲覧していても、ブラウザの横幅をスマートフォンくらいに狭めればスマートフォンと同じ表示になります。面白いですよ！
PC・タブレット・スマートフォン用の3つの区切り(ブレイクポイント)を設定しているサイトもあれば、
PC・スマートフォン用の2つの区切りだけ設定していサイトるサイトもあります。
例1: 3つ以上のブレイクポイントを設定しているサイト
↓
↓
例2: 2つのブレイクポイントを設定しているサイト
日本女子大学 http://www.jwu.ac.jp/sp/
↓
先進的に見えるレスポンシブウェブデザインですが、Web担当者の皆様も導入に向けてしっかりとメリット・デメリットを押さえておく必要があります。
以下で紹介するメリット・デメリットとユーザー層を比べて、じっくり考えてみましょう！
現在お付き合いのあるWeb制作会社があるならば、そちらの担当者の方に相談してみても良いでしょう。
レスポンシブウェブデザインのメリット
- URLがひとつである
これはユーザーにとっても運営者にとっても大きなメリットになります。
SNSでシェアされたURLをクリックしたり、アドレスバーにURLを直打ちした場合でも、閲覧環境に適合したデザインのサイトが表示されます。
レスポンシブウェブデザインを採用すれば、
スマートフォンから閲覧しているのにPCサイトが表示されてしまった
→ユーザーにとってストレスとなり、すぐに離脱
といった機会損失を防ぐことができます。
- PCサイトとスマホサイトが一気に更新できる
こちらは主に運営サイドのメリットです。
レスポンシブウェブデザインのサイトは1つのHTMLに複数のCSSを組み合わせて構成されています。
1回だけHTMLの更新や修正を行えば、PCサイトも(タブレットサイトも)スマホサイトも全てが更新されます。
PCサイトとスマホサイトを別々に持っていたら、HTML・CSSが2つずつとなります。
更新や修正を行う場合2回ずつ行わなければなりません。
レスポンシブウェブデザインの場合、この手間や、片側だけでの更新・修正ミスを回避することができます。
- Googleの「モバイル対応」認定を受けやすい(SEOで有利！)
あなたの運営するWebサイトをGoogle検索してみましょう。「モバイル対応」の文字は付いていますか？
昨年から、GoogleはモバイルフレンドリーなWebサイトを高評価すると発表しています。
その中でも、「URLがひとつ」で「HTMLファイルがひとつ」なレスポンシブウェブデザインを採用したWebサイトはユーザーにとっても利便性が高いと判断され、Googleから高く評価されます。
検索結果で上位表示される可能性が高くなるということにつながります。
いわゆるSEO的観点で有利！ということです。
レスポンシブウェブデザインのデメリット
- 1つのファイルだからといって、安い訳ではない
先述のように、レスポンシブウェブデザインのWebサイトは1つのHTML・CSSで構成されています。
それではPCサイト・スマホサイトを別々に作るよりも制作費が安いのか？というと、そうとは限りません。
むしろ、横幅ごとの切り替えの対応や確認等にコストがかかり、レスポンシブウェブデザインの方が高額となる可能性もあります...。
- データが重くなり、表示が遅くなる可能性あり
スマホサイトはPCサイトよりも情報量が少なくなりがちです。
例えば、横幅○○○px以下の環境で閲覧する場合は有用性の低いサイドバーのコンテンツは非表示にしましょう、という設定をすることがあります。
また、画像のサイズも小さいものになったりしますね。
それでもスマートフォンが読み込むファイルはPCサイトと同じ量。
サイトの仕様によっては、スマートフォンユーザーから「あれ？このサイト重い...」という感想を持たれることがあるかもしれません。
ユーザーにとってストレスになるとともに、離脱のリスクにもつながります。
- スマートフォンからPCサイトが見られない
スマホサイトからだと情報量が少ないことを予想したユーザーや、以前そのサイトをPCから訪問したことのあるユーザーは、スマートフォンからもPCサイトを見たいと言った場合があるでしょう。
PCサイトとスマホサイトが別々であればPCサイトとスマホサイトを行き来することができますが、画面の横幅で表示される要素やデザインが全て決められるレスポンシブウェブデザインではそうはいきません。
「あえて」スマートフォンからPCサイトを見ることができなくなってしまうということです。
- デザインに制約ができてしまう
レスポンシブウェブデザインは万能ではありません。
PCから見た時に最もユーザーにとって使いやすいデザインと、スマートフォンから見た時に最もユーザーにとって使いやすいデザインが、1つのHTMLファイルから実現できるとは限りません。
レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるのです。
レスポンシブウェブデザインを採用するべきシチュエーション
デメリットもあるレスポンシブウェブデザイン。
それでもメリットがデメリットを上回り、コストパフォーマンスが良いと判断できれば採用したいですよね。
どんなシチュエーションがレスポンシブウェブデザインに向いているのでしょうか？
マルチデバイスにおいて、SNS等ユーザー間でのシェア(拡散)を狙っている場合
→URLが単一なことがマルチデバイス拡散の際に有利に働きます。キャンペーンサイト等で採用すると良いでしょう。
ただし、広告用LP等で表示速度第一だったり、ターゲットがPC・スマホどちらか決まっている場合は話が別になります。
よく考えて決めましょう！
デザイン面以外の更新・修正が多い場合
→内容の更新・修正、ページの追加が多い場合は、一度の修正でPCサイトもスマホサイトも更新・修正できるレスポンシブウェブデザインが有利に働きます。
自ら運用を行う場合はレスポンシブウェブデザインの方が手間がかからないかもしれないですね。
Webサイトの大幅なリニューアルを行う場合
→GoogleはモバイルフレンドリーなWebサイト、特にレスポンシブウェブデザインのWebサイトを高く評価しています。
既にPCサイトを持っていてスマホサイトを新しく構築する場合は別々でも構わないかもしれませんが、PCサイトもリニューアルしてモバイルフレンドリーに対応したい場合は、SEO的観点も踏まえてレスポンシブウェブデザインを検討してみてはいかがでしょうか。
まとめ
ここで冒頭に示した重要ポイントを振り返ってみましょう。
・レスポンシブウェブデザインは、OSやブラウザではなく閲覧画面の横幅でレイアウトやデザインが変わる
・URLが単一、Googleからの評価が高い等のメリットがある
・表示速度が遅くなる、デザインに制約が出る等のデメリットがある
・ターゲットユーザー、コンバージョン、運用体制等によって適しているかどうかは変わってくる
・ひとりで悩まず、専門家に相談してみましょう！
本記事がレスポンシブウェブデザインの導入に向けた一助となれば幸いです。
また、レスポンシブウェブデザインを採用するか否かは問わず、スマートフォン用のサイト構築は今後必須となっていくでしょう。
BtoCサイト、CtoCサイトの多くでスマホサイト構築やアプリ展開が進んでいます。
PC閲覧が多いBtoB企業のWeb担当者様も、今一度スマートフォン対応について検討してみてはいかがでしょうか？
WebConsulting.jpでは、スマートフォンサイト構築相談を無料で行っております。
どんな質問でも分かりやすくお答えします。是非お気軽にお問合せくださいませ！
- Permalink
- by 武井洋
- at 09:06
- Trackbacks (0)
