株式会社コプロシステム

お問い合わせ

2012年1月 6日

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

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

明けましておめでとうございます。
本年も、弊社コプロシステムと、当ブログ「Tips*Blog」を宜しくお願い申し上げます。

昨年の最も大きな出来事といえば、やはり誰もが「東日本大震災」を思い浮かべるでしょう。
それでは、IT業界に絞るとどうでしょう?

IT業界の大きな変化の一つに「スマートフォンの急速な普及」が挙げられるのは間違いないのではないでしょうか。
国内の各キャリアでは、昨年の夏モデルくらいからスマートフォン中心のラインナップになり、従来の携帯電話(フィーチャーフォン、ガラケー)からスマートフォンへシフトした年でした。
2012年ではこの急速な普及がさらに加速され、スマートフォンの販売台数は、携帯電話全体の6割を占めると予想されています。

そんな中、上記の変化はwebサイトの構築手法にも影響してきています。

webサイトのマルチデバイス化が必須に

どういうことかといいますと、
webサイトは今やパソコンだけで閲覧されるものではなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット端末、様々なデバイスで閲覧されています。
そのため、webサイトも閲覧環境に応じてページレイアウトを柔軟に切り替えられるようにマルチデバイス化が必須になってきますが、デバイス毎にレイアウトの違うHTMLファイルを複数用意しているとコストが非常に多くかかりますし、コンテンツ管理も大変です。

そこで、新しい手法として国内・海外で注目を集め始めているのが、「レスポンシブwebデザイン」という手法です。

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

「レスポンシブwebデザイン」とはどういう手法かというと、
デバイスをwebサイト表示の判断基準にするのではなく、
ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法です。

現在一般的には、デバイス毎のレイアウトが違うHTMLファイルを複数用意することが多いと思いますが、「レスポンシブwebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整できます。

≠リキッドデザイン

いわゆる「リキッドデザイン」と似たような感じですが、違いは、

◆リキッドデザイン:
ブラウザ横幅サイズに応じて長さは可変するが、レイアウトは同一。要素の表示・非表示も対応できない。
◆レスポンシブwebデザイン:
ブラウザ横幅サイズに応じて、要素の表示・非表示も含めてレイアウトが可変。

です。

事例

レスポンシブwebデザイン手法を取り入れているwebサイトをいくつか集めたので、ご紹介します。
(スクリーンショット下の数値は、ブラウザの横幅サイズです)

1. 3200tigres

2. Earth Hour | WWF France

3. Leica Explorer

4. 320 and up

5. ribot

6. TeeGallery - A collection of designer T-shirts

7. Colbow Design - Freelance Web Designer

8. Sony USA


各ブラウザサイズで、レイアウトをどのようにし、どのコンテンツを表示(非表示)するかなど、webサイトの綿密な設計が必要になりますが、一つのHTMLファイル・スタイルシートの調整だけで実現できる手法なので、今後さらに注目を集めそうです。

参照したサイト

追記(2013/6/28)

レスポンシブWebデザインに関連するエントリーとして、下記の記事も参考になると思います。
是非ご一読ください。



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

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP