このページの本文へ

レスポンシブWebデザインとは (3/5)

2012年06月04日 11時00分更新

文●菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

広がるレスポンシブWebデザインの事例

 レスポンシブWebデザインはすでに海外を中心に大手企業サイトでも利用されています。以下は米スターバックスのWebサイトです。実際にブラウザーでアクセスしてウィンドウの幅を狭めてみてください。画面幅に応じてナビゲーションの位置やカラムの数など、レイアウトが変わっていくのが分かります。

zu04-1.png

図4 米スターバックスのWebサイト

 国内でも2011年以降、レスポンシブWebデザインを使ってWebサイトを構築する事例が増えてきています。以下は、グリーの「GREE Platform」というWebサイトです。

zu05.png

GREE Platform

 レスポンシブWebデザインは、ほかにも多くのWebサイトで採用されています。レスポンシブWebデザインのWebサイトを集めた「Media Queries」では、さまざまなサイトが日々追加されています。PCからアクセスして、ブラウザーの横幅を広くしたり、狭くしたりして、レスポンシブWebデザインを体感してみてください。

zu06.png

図6 Media Queries

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く