レスポンシブWebデザインのメリットデメリットを探る

マルチデバイス対応の手法として注目される「レスポンシブWebデザイン」について、改めて手法の解説とメリットデメリットについてまとめました。

2013年5月20日 10:55

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

2012年、Webの新たなトレンドとして注目された手法の一つに「レスポンシブWebデザイン」が挙げられると思います。 2010年に誕生して以降、知名度としては業界に広く一般的になりつつあるこの手法、実際に多くの企業様からもこの手法を加味したWebサイトの構築を検討したいとご相談いただくことが増えています。本コラムでは、トレンドになりつつあるこの手法について、キーワードとして聞いた事はあり興味もあるが、実際に何が有益で自社に置き換えた際にメリットが出るものなのかどうか釈然としない・・といった方向けに、比較的分かり易くメリットデメリットをお伝えできればと思います。

レスポンシブWebデザインとは

そもそも、レスポンシブWebデザインとは何か？昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成するのではなく、単一のHtmlファイルで、CSSで各画面サイズ毎に対応したレイアウトを調整することによってマルチデバイスに最適化したWebサイトを作ることができる技術になります。例えば、スマートフォンユーザー向けのサイトというと、それまでは①各端末毎に合わせたページを作り、ユーザーエージェントという技術を用いてアクセスしてくる端末を判別し該当するページへ振り分け表示をさせるというものか、②ＰＣサイトをスマートフォン向けページに自動変換するやり方が主流でした。これに対し、レスポンシブWebデザインではブラウザのスクリーンサイズを基準にレイアウトを自動で切り替える仕組みになりますので端末毎にわざわざページを作成する必要がなく、にも関わらず画面サイズが異なる端末でアクセスした際でもどのように表示させるのか最適化を踏まえた作りにする事が可能となります。

レスポンシブWebデザインで作られたサイト『スターバックス社』の事例

米国のスターバックス本社のレスポンシブWebデザインで作られたサイトは、ぜひ実際にサイトへアクセスし体感していただければと思いますが、ブラウザのサイズに合わせて5段階、ナビゲーションやレイアウト、画像サイズが変動します。 ※スターバックス社サイトのレスポンシブWebデザインについては、詳しくは弊社のコラム記事にて解説しております。http://www.micro-wave.net/column/web_mobile_strategy/responsive.php同社のサイトに見られるように、レスポンシブWebデザインで実装されたサイトは見た目には画像サイズもレイアウトもナビゲーションまでもが変化をするにも関わらず全て単一のHtmlソースで実現されたものであるから驚きです。Webの構築知識がある方であれば、単純にその凄さに感動するかと思います。この手法により、これまでＷｅｂ担当者の頭を悩ませていた次々と登場する端末毎の対応や複雑な構築・運用から解放される！といった希望も出てきます。

ですが・・ちょっと待って下さい。実は、レスポンシブWebデザインにも出来る事に限界があり（あくまで現時点はですが）行うには懸念点もありそうです。企業のＷｅｂサイトの役割や課題に合わせた最適な手法は何か？それを判断する事が最も重要なので、次に各手法のメリットや懸念点をお伝えしたいと思います。

マルチデバイス最適化の手法パターン

マルチデバイス最適化の手法は、大きく以下の3パターンあります。

レスポンシブWebデザインで作る
端末毎に合わせたサイズの別々のページを作る
コンバーターなどのツールによりPCサイトを自動で変換する

各手法のメリット・デメリットは？

マルチデバイス最適化の各手法について、それぞれのメリットデメリットを整理しました。

＜メリット＞

手法①　レスポンシブWebデザイン
・コンテンツを一元管理できるため、運用負荷/コストが押さえられる・画面の幅によってデザインを変えるため、端末に依存せず将来登場する端末にも対応できる・URLを一本化でき、SEO効果も高い
手法②　端末毎に作成
・情報構造やデザインを各端末ごとに最適化した、ユーザーファーストのサイトを構築できる
手法③　コンバータを利用した自動変換
・スマートフォン用にサイトを新規構築する必要がないため、他の手法と比較しすると導入の負担が低い・運用時もPCサイトを管理するだけで済むため、運用負荷が低い・費用負担は比較的安価になる　（※ツールの費用による）

＜デメリット＞

手法①　レスポンシブWebデザイン
・端末毎に細かく情報構造・UI・デザインを変更できない・スマホファーストでサイトを作らなければならない・設計/実装/テストに通常以上の時間がかかる傾向がある・ソースが複雑になりやすく、運用時には明確な運用ルールと技術者の理解/スキルが必要になる
手法②　端末毎に作成
・PC/スマートフォン用のサイトを別々で設計・実装するため導入の手間やコストがかかる
手法③　コンバータを利用した自動変換
・自動変換のためスマホファーストのサイトを作るのが難しい　　　※ツールの機能に依存・月額利用料が発生する

目的に合わせた手法を選択

上述の通り、手法によって特徴が大きく異なります。またいわゆるドコモやauといった国内キャリアの用意する携帯サイトはそもそもPCなどWebサイトとは環境が異なり、これら携帯サイトではレスポンシブWebデザインといった概念は当てはまらなくなってきます。一見するとメリットの享受が大きいように見受けられるレスポンシブWebデザインですが、実は制作の管理面や操作性でのメリットと、マーケティングやユーザビリティの最適化が必ずしもイコールであるとは限らない、という点が検討する上での最大のポイントかと思います。端末に即した最適な表示（レイアウト）を行ったからといって、スマートフォンユーザー独自の情報提供やファーストビューでのコンテンツ表示が正しい形で連動するとは限らない、ということです。そのような特徴をよく踏まえ、サイトの目的や役割に合わせ正しい手法を選択することをお勧めします。

■本コラムの元記事はこちら
レスポンシブWebデザインのメリットデメリットを探る