share

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

0137_01

今回は、レスポンシブデザインのメリット・デメリットについて、ご紹介します。

モバイルフレンドリーに対応していますか!?

そもそも、レスポンシブデザインの採用を検討するきっかけとして、モバイルフレンドリー対応/span>があります。

0137_02

0137_03

【引用:http://googlewebmastercentral-ja.blogspot.jp/2015/04/rolling-out-mobile-friendly-update.html

モバイルフレンドリーとは、スマートフォンに最適化されたWebサイトのことです。Googleは、2015年2月、モバイルフレンドリーが、検索アルゴリズムで優遇されることを発表しました。

とくに、重要視されているのは、スマートフォンユーザーの検索体験を充実させることです。

これをきっかけとして、各業界がモバイルフレンドリーに注目するようになりました。そして、サイトをスマートフォンに最適化する方法の1つが、レスポンシブデザインなのです。

というのも、レスポンシブデザインとは、パソコン・スマートフォン・ダブレット、デバイスごとの画面サイズに最適化させて、Webサイトを表示させてくれるデザインだからです。

ユーザビリティNO1のサイトは、あの会社

0137_04

【引用:http://responsive-jp.com/2032.html

レスポンシブデザイン事例をいうと、KDDI株式会社の公式サイトがあげられます。左からスマートフォン・タブレット・パソコンのサイズに合わせたサイズで、並んでいます。

0137_05

0137_06

【引用:http://brand.tribeck.jp/usability/ranking/2015/

なお、株式会社トライベック・ブランド戦略研究所が公表している「主要企業Webユーザビリティランキング2015<企業サイト編>」によると、1位は、KDDI株式会社でした。

ランキングは、全15業界・150サイトの中から、ユーザビリティ(アクセス性や、使い勝手、安全性、モバイルフレンドリーなど)の高さで、つけられたものです。

ユーザビリティがよく、評価も高いレスポンシブデザイン。どんなメリット、デメリットがあるのか、具体的に紹介していきます。

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

0137_07

どんな端末サイズでも、1つのHTMLで対応

パソコン・タブレット・スマートフォンといっても、大小いろんなサイズがありますし、ゲーム機も含めると、多様なデバイスが出回っています。

レスポンシブデザインによって、閲覧デバイスがどんなサイズでも、単一のHTMLで一元管理できるようになりました。

厳密にいうと、デバイスにあわせてサイズを最適化しているのではなく、Webサイトの横幅サイズによって、複数のCSS(スタイルシート)を読み分けて、デザインを切り替えています。

今までは、このような対応は不可能でした。端末ごとに、それぞれのデバイスにあわせたHTMLを、いくつも用意しなければなりませんでした。

このことによって、開発だけではなく、メンテナンスも一元管理できるので、工数もコストも削減することができます。

SEOで有利になる

レスポンシブデザインは、Google側にとっても魅力的です。

というのも、GoogleがクロールしているURL数を削減できます。Googleのリソースを効率よく使えるようになります。また、canonicalタグの間違いがあまりないため、重複コンテンツの掲載ミスを少なくできます。

0137_08

【引用:http://responsive-jp.com/2032.html

この詳細は、Googleのウェブマスター向け公式ブログの記事(参照元:http://responsive-jp.com/2032.html)に記載されています。レスポンシブデザインが、検索順位に影響を与えることをうかがえます。

リスクヘッジができる

ユーザーによるWebサイトからの離脱を減らしていくことができます。今までであれば、スマートフォンからパソコンサイトに訪れても、操作性が悪くて、ユーザーが離脱するケースがありました。しかし、レスポンシブデザインであれば、デバイスにあわせた閲覧ができるため、ユーザーの離脱を防ぐことが可能です。

ほかにも、多様なサイズの端末サイズに対応できます。今後も、おそらく今までにない端末、とくにウエアラブルなデバイスが、次々と出回ってくるでしょう。その場合でも、レスポンシブデザインであれば、対応することができます。

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

コストが割高

従来のWebサイト制作よりも、工数が多いため、その分、コストがかかります。具体的には、デバイスごとにレスポンシブデザイン対応したデザイン、HTMLのコーティング構築など。複雑な設計・構築なため、割高感がでます。

スマートフォンでの表示が重い

サイト上で、パソコン用に重い画像ファイルを表示していた場合、スマートフォンのブラウザでも、そのソースを読み込もうとするため、表示速度が遅くなってしまいます。

その他

パソコン・タブレット・スマートフォン、端末ごとの兼ね合いがうまくいきません。

例えば、パソコンで、スマートフォンサイトを見ることができなかったり、スマートフォンでは画面サイズが小さい分、ユーザビリティを高めるコンテンツ・デザインを精査したりする必要があります。

ほかにも、IE8や、フィーチャーフォンには対応していません。

レスポンシブデザインに適したWebサイト

レスポンシブデザインは、すべてのデバイス・Webサイトに適したデザインではありません。スマートフォンに特化させたコンテンツを、コストを抑えながら、短期的に開発するのは困難です。むしろ、その場合はアプリを制作したほうがいいかもしれません。

レスポンシブデザインは、デザイン・コンテンツなど、デバイスによって情報が相違なく、一元管理・運用しやすいWebサイトが、とりわけ適しているでしょう。例えば、マルチなデバイスに対応しながら、売上をあげていきたいECサイト・会員サイトなどです。

このようなサイトには、メリットが勝ってくるでしょう。

ポイント詳細

メリット ■どんな端末サイズでも、1つのHTMLで対応
■SEOで有利になる。
■リスクヘッジができる。
デメリット ■コストが割高
■スマートフォンでの表示が重い
■パソコン・タブレット・スマートフォン、端末ごとの兼ね合いが難しい。
■IE8や、フィーチャーフォンには対応してない。
レスポンシブデザインに適したWebサイト ■デザイン・コンテンツなど、デバイスによって情報が相違なく、一元管理・運用しやすいWebサイト(例)ECサイト・会員サイト

この記事を書いた人

投稿者
奥中 将太

大阪出身、1991年生まれでセルバの中では一番の若手です。

元は某ITベンチャー企業の営業マンでしたが、日々の業務をこなしているうちに自ら制作する側になりたいと思い、全く知識・技術もなく転身。
日々進化する、技術を毎日必死で学んでいます。

趣味は、音楽・旅行・釣り

セルバではWEBシステム開発からスマートフォンアプリ開発、デザイン、企画/マーケティングまでいかにコストを掛けず、成果を高めるのか研究し実践しています。企業、店舗のWEBシステム/アプリ開発のお手伝いさせていただいておりますので「WEBシステムの開発」「アプリ開発を依頼したい」「既存サイトのアプリ化」「サイト/アプリからの集客を増やしたい」など新規開発やリニューアルにご興味のある方は、ご相談だけでも構いませんのでお気軽にお問い合わせください。

ご相談・お見積
ページトップ