WINGS ブログ
ITやWEBに関するブログを書いています。

レスポンシブウェブデザイン

投稿者:hana-masuyama | 2012年/12月/10日

こんにちは、ますやまです。

一気に真冬の気候になりまして・・・寒さがこたえますね。。

さて、弊社サイトがリニューアルしました!
見た目のデザインも一新したのですが、ウェブデザイナーさんと話し合い、最近注目の”レスポンシブウェブデザイン”というものを取り入れてみることになりました。今、御覧いただいているブラウザーのウインドウを広げたり狭めたりしてみてください。ウインドウの大きさに合わせその中にうまく収まるようデザインが変化すると思います。iPadなどのタブレットやスマートフォンをお持ちでしたら、それらで弊社のサイトを見てみてください。小さな画面でもデザインが崩れることなく、大きさに合ったレイアウトに変化して表示されるんです。

ウイングス・コンサルティングのHPはこちら

レスポンシブウェブデザイン(Responsive Web Design)とは

PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したウェブサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したウェブサイトを制作できます。

下記は米のスタバのサイトです。3つの大きさに合わせてサイトのレイアウトが変化しているのがわかりますでしょうか。

米スタバのサイトイメージ PCサイズ

米スタバのサイトイメージ PCサイズ

米スタバサイトイメージ タブレットサイズ

米スタバサイトイメージ タブレットサイズ

米スタバサイトイメージ スマホサイズ

米スタバサイトイメージ スマホサイズ

注目されるレスポンシブウェブデザイン

レスポンシブウェブデザインが注目される背景は、やはりスマートフォンでしょう。前回のブログでも書きましたが、スマートフォンの急速な普及により、インターネットを考えるときスマートフォンはもう無視できない存在、むしろPCよりもスマートフォンへの最適化を先に考えるべきと言っても過言ではないかもしれません。

PC以外のデバイスの登場により、ウェブサイトも閲覧環境に応じてページレイアウトを柔軟に切り替えられるようにマルチデバイス化が必須になりました。そこで、デバイス毎にレイアウトの違うHTMLファイルを複数用意して、デバイス毎に振り分けるという方法が取られてきました。しかし、その開発にかかるコストは安くないものですし、新しいデバイスが出たらそれに合わせたものを作らねばならずコストは増える一方、また更新などのコンテンツ管理も煩雑になりがちで大変です。

そんな課題を解決してくれる新しい手法として国内・海外で注目されているのが、「レスポンシブウェブデザイン」という手法です。レスポンシブウェブデザインでは、あらゆるデバイスに対して単一のウェブページ(HTML)を使い、スクリーンサイズ(画面の横幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供することができるのです。また、単一のHTMLを用意すればいいのでメンテナンスの負担が少なく、スクリーンのサイズだけを基準にしてレイアウトを変更するため、新しいOSやデバイスが登場してもHTMLを修正する必要はありません。本当にシンプルで便利な手法といえるでしょう。

モバイルファーストという考え方

さて、みなさんは「モバイルファースト(Mobile First)」という考え方をご存知ですか?モバイルファーストは、ウェブサイト設計に限らず、マーケティングやプロダクトの設計をする時、モバイルを起点として始めるという考え方です。従来のように、まずPC向けのウェブサイトやプロダクトから作り始めて、モバイル版を最後に考える「モバイルラスト」とは正反対の考え方と言えます。

世の中のスマートフォンの普及によって、PCよりもスマートフォンでのネット閲覧時間が長くなる傾向が現れ始めてきています。そのような状況を考えますと、PC用のサイトを作って、それがスマホでも見れる・・・というだけでは十分ではないかもしれません。つまり、モバイルでどう見えているのか、使いやすいレイアウトになっているのかというところを最初から考えておくべきということ。レスポンシブウェブデザインはとても便利ですが、採用したから安心ではなく、スマートフォンでも見やすく操作のしやすいサイトを制作の始めの段階でイメージし内容やデザインを考える、つまり「モバイルファースト」の考え方を取り入れること益々大切になってくるかもしれません。

以上、ますやまでした。。