レスポンシブWEBデザインの３つのメリットと２つのデメリット

2014.07.09インターネット , ホームページ , レスポンシブwebデザイン

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

これまではwebサイトを作成する際、パソコン、タブレット、スマートフォンなど端末ごとに対応させるため、内容は同じでもそれぞれのサイズや動作に合わせて複数のサイトを作る必要がありました。現在でもそういったサイトは多く、その場合ファイルも複数作る必要があります。

複数のファイルを作るということは、手間もコストもそれだけかかるということ。もちろんデータ容量も消費してしまいます。また、端末ごとに合わせた作成が必要ですので、HTMLファイルやCSSファイルなど形式も変えなければならないため、作業が煩雑になります。

そうではなく、1つのファイルで複数の端末機器に対応できるように作成されたwebサイトをレスポンシブデザインwebサイトと呼びます。ファイルが自動的に画面サイズに対応して最適化されるように設定するのが特徴です。

画面サイズの使い分け

3つのサイズに対応するように作られるのが一般的

現在多くのレスポンシブデザインのサイトは、3つのサイズに対応するように作られるのが一般的です。パソコン、タブレット、スマートフォンそれぞれのサイズを基準に考えられています。

それら端末も機種ごとにサイズも異なってきますので、絶対的な規格はありません。「スマートフォンサイズ・横幅640px」、「タブレットサイズ・横幅768px」、「パソコンサイズ・横幅1024px」を基準としている場合が多いようですが、ユーザーの層などを考えて柔軟に考えていきましょう。

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

レスポンシブのメリット

【メリット1】手間が減り、更新がスムーズに

複数のファイルを作る必要がないため、手間やコストがかかりません。手間の面では、作成時というよりも更新していくのが楽だというのが大きいでしょう。単一のファイルのため、「スマートフォン版だけ更新し忘れていた」などのミスも防げますし、更新が簡単になるということは、それだけ更新の頻度も上がりやすくなります。

【メリット2】ユーザーのストレス軽減

あまりにパソコンサイトが重く、それしかサイトが存在しない場合、スマートフォンなどでは表示に時間がかかったり、表示自体が不可能だったりということもあります。そういったユーザー側のストレスを無くせることも大きなメリットでしょう。

また、検索エンジンを利用した際に、パソコン版サイト、スマートフォン版サイトなどが重複して出現することも防げます。これはユーザーの使いやすさだけでなく、管理者側がアクセス解析などを行う場合にも便利になります。

【メリット3】時代の流れへの反応

レスポンシブデザインは2010年頃から出始め、現在ではかなり多くなってきます。今後もますます増加していくことは間違いないでしょう。

スマートフォンやタブレット端末の普及もますます高まっていますので、それらに対応したレスポンシブデザインを取り入れることは、時代の流れに反応していくという意味で非常に重要です。企業や法人の場合は特にそうしたイメージが大切だと言えるでしょう。

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

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

【デメリット1】デザイン面での自由度の低下

1つのファイルをそれぞれに合わせて展開するため、端末ごとにデザインや機能を大きく変えることは難しくなります。利用端末に合わせてガラリとデザインを変えたい場合などは注意が必要です。

【デメリット2】ユーザビリティの問題

ユーザー側の使いやすさの問題が大きく2つあります。それは「レイアウト変化で二度手間になること」と「拡大による勝手なレイアウト変化」です。

「「レイアウト変化で二度手間になる」とはどういったことでしょうか。例えば普段家のパソコンで見慣れているサイトがあったとします。外出時にそのサイトを使おうと思いスマートフォンで開くと、レイアウトが違うためいつも見ていた情報がなかなか見つからない……。この場合、外でも普段使っているパソコンのレイアウトで見たかったというのがユーザーの気持ちではないでしょうか。

2つ目の問題は、パソコンで拡大して見ようとした時、ある程度まで拡大すると勝手にタブレット用やスマートフォン用の画面サイズに切り替わるという問題です。こうすると勝手にレイアウトが変わり混乱してしまいます。

これは細かい文字などが見辛い高齢の方などに多い現象です。また高齢ユーザーの場合、どうしてレイアウトが変わってしまったのか分からず、余計にパニックになる場合もあります。

デメリットへの対処法とは

これらデメリットへの対処で多く採られているが、パソコン用画面とスマートフォン用画面のデザイン表示を切り替えられるボタン方式です。レスポンシブデザイン自体は採用しつつも、ユーザーが任意で切り替えられるようにすることで、選択できるようにする方法です。サイト作成時には、こういった形でユーザビリティに気を遣うことが大切です。

最後に

レスポンシブwebデザインの作成は、技術的な問題などよりも、ユーザーの使いやすさや、求めているものにいかに反応するかを考えることが大切です。

これから導入を考えている場合は、レスポンシブデザインが自分の企業などにとってどういったメリットをもたらすか、また仮に採用した場合どういったデメリットが考えられるかなどを先に考え、計画的に作成していきましょう。

参考URL

e-wordレスポンシブデザインとは
 日経BPコンサルティングスタッフルーム「年寄りを困らせるレスポンシブwebデザイン」
レスポンシブWEBデザインとは何か？-メリット・デメリットをしっかりおさえよう-｜デジタルマーケティング研究所

タグ : レスポンシブwebデザインサイト

Pocket

この記事を書いた人
最新の記事

@ハウツー編集部

@howtoでは恋愛・結婚・不動産・学習・マネー・生活・健康・仕事・美容・趣味などのみんなが知りたかった情報を発信しているハウツーサイトです。