シェアする

  • このエントリーをはてなブックマークに追加

レスポンシブWEBデザイン

シェアする

  • このエントリーをはてなブックマークに追加

レスポンシブWEBデザインとは、ブラウザの横幅に合わせてサイトの表示方法を自動的に変更して表示させるWEBデザインの事です。ちなみのこのサイトもそうです。

リキッドデザインとの違い

リキッドデザインもサイトの横幅に自動的に合わせられます。ブラウザの横幅をマウスで狭くしたり、広くしたりしても画面いっぱいに全部が表示されるサイトがそれです。

じゃあレスポンシブWEBデザインと同じような気がしますが、

  • リキッドデザインは横幅が変わるだけでレイアウトは同じ
  • レスポンシブWEBデザインは横幅も変わるしレイアウトも変わる

という違いがあります。

例えば典型的なWEBサイトのデザインのパーツの1つのサイドバー(左右どちらかにあるメニュー)、リキッドデザインであればサイドバーは左右どちらかに位置されたまま、横幅を狭めてもやっぱり左右のどちらかに配置されますが、レスポンシブWEBデザインではこのサイドバーがメインコンテンツの下などに配置されます。

上述した通り、サイトの横幅に合わせてレイアウトも変わります。

01_valera-wp.__large_preview

こちらの画像のようにPCモニタとタブレット、スマートフォンの画面にWEBサイトの画面が表示されて〜というヤツはレスポンシブ対応って事を分かりやすく伝えるイメージです。こういうの見た事ある人もいるのではないでしょうか。

こちらはWordpressのテーマの1つで、無料で使用できるみたいです(こちら)。

実際のサイトを有名どころで1つ紹介します。

スターバックス(北米向け):http://www.starbucks.com/

北米向けのスターバックスのサイトです。試しにブラウザの横幅を狭くしたり、広くしたりするとサイズだけでなくてレイアウトが変わる事が確認出来ます。日本のスターバックスのサイトはレスポンシブではないみたいですね。



レスポンシブWEBデザインのサイトが増加中

増加している背景はスマートフォンやタブレットの普及にあります。

元々WEBサイトはPC用として作られたものがほとんどです。スマートフォン、タブレットが普及し、PCサイトと同じだと使いにくいよね…となり、スマートフォン対応サイトなんかも出て来ました。

その時期のスマートフォン対応サイトといえば、大体がスマートフォン用に全体的な設計を見直されたサイトで、もはやそれは別サイトです。実際にサイトのURLも「smartphone」や「sp」などが前後に付いたものです。こういったケースではそのサイトにスマートフォンでアクセスすると、それ用のページに飛ばす(リダイレクト)という感じがほとんどです。

スマホ普及当時はそういった流れが主流でしたが、今はレスポンシブWEBデザインという考え方があり、こちらも同じく注目を集めています。

レスポンシブWEBデザインに向いているサイト?

何でもかんでもレスポンシブWEBデザインが良いのか?というのは慎重に考える必要があると思っています。

特に現在でも1ページ1ページの情報量が非常に多いサイトなどを、そもままレスポンシブに対応したとすると、スマホでページの一番最後まで見た時にはスクロールし過ぎて指紋が無くなってるかもしれません。

これは日本のWEBサイトに多い傾向だと思います。私の経験上でも、二言目には「何か寂しいからバナーでも入れたい」と言われてしまったりします。情報として必要だからという発想ではないのです。

日本人の価値観なのかどうかは知りませんが、情報を詰め込んだサイトにしたがる方が多いように感じます。外国でもそういう価値観があるのかもしれませんが、大体日本はごちゃごちゃしてて、海外サイトはスッキリしているというのは感覚的に間違っている感じでもないですね。

つまり、レスポンシブが向いているサイトというのは「情報量が予め整理されているサイト」ではないかと考えます。

レスポンシブWEBデザイン以外で、スマホやタブレットにも対応したデザイン

これは超有名なところで

Apple:http://www.apple.com/jp/

ここのサイト、上述したレスポンシブではないんですが、スマホやタブレットにも対応?しています。百聞は一見に如かずなので、試しにスマホとタブレットで見て下さい。どのディバイスでみても全部同じ表示です。

それって、何もやってない普通のサイトじゃんと一瞬思いますが、アップルのサイトの場合、どのディバイスで見てもちゃんと見やすいように最初からページをデザインしているんです。つまり、そういう対応の仕方なのです。

まあ、ヘッダーとフッターののメニューはちょっと小さいんじゃない?という 細かい突っ込みも出来なくはないですが、だから「拡大出来るじゃん」あるいは「情報としては優先順位が低いからあえて」なんて事を言われたら「なるほど」って感じです。まあ、この辺りはApple擁護的な意見かもですが。

WEBデザインの理想型

とは言え、Appleのサイトはある意味理想型なのではないかと思ってたりもします。文字の小さい部分がやっぱり使いにくいとかって言われなければですが。

こういうサイトは、サイトの制作側にも、ユーザー側にも優しいのです。

そもそもレスポンシブデザインというのは、ある意味サイト制作側の目線もあったりします。つまり、各サイズのモニタでもいい感じで表示されるようであれば、スマホ専用サイトのようにイチイチ別サイトの制作をしなくても良くなります。

ユーザーには影響ないんじゃない?という感じもしますが、レスポンシブの場合、PCサイトとスマホではサイトのレイアウトが変わってしまうので、当然の事ながら使い勝手は変わってしまいます。あのメニューどこ行ったんだっけ?ということもあり得ます。全く同じでどちらでも使いやすいに越した事はないのです。

最後のまとめ

私個人の見解としては、現在のところは「レスポンシブWEBデザイン」を推したい考えです。もちろん上述したようにレイアウトが変わってしまうデメリットも踏まえた上です。

レイアウトが変わってしまうという事では、ユーザーもレスポンシブデザインのサイトに多く触れるようになるに連れて、一定の慣れが出てくるので感覚的にメニューはここかなと想像力が働いてくると思いますし、いつも使うサイトであればすぐにマスター出来ると思います。

また、「情報量が整理されているサイト向き」とも言いました。レスポンシブデザインを導入するにあたり、こちらも同時に見直す良いきっかけになることもあると思いますし。

そして何よりですが、サイトの制作サイドに携わるものとしては出来るだけ手間を軽減したいという想いもあります。これはクライアント様のコストを抑えることにもつながります。

近い将来、斬新な発想の元により洗練されたデザインの手法が編み出されるかもしれませんが、それまでは実用性の高いデザイン手法として活躍してくれそうです。



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント