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

レスポンシブWebデザインはユーザが閲覧する端末の画面サイズに合わせて、ページのデザインやレイアウトを自在に操るウェブ制作の手法です。この手法を使うとスマホやタブレットだけでなく、大画面テレビで閲覧するような場合でも、ユーザが使いやすいようにページを柔軟に順応させることが可能です。

これからレスポンシブWebデザインについて

「渡辺　竜氏著　レスポンシブWebデザイン　製作の実践的ワークフローとテクニック」

を基に簡単な説明と、その手法を用いて作られたウェブサイトがどんなサイトなのかを紹介していきます。

1.１分で分かるレスポンシブWebデザインの歴史

レスポンシブWebデザインは、アメリカのEthan Marcotte氏が考案、命名したウェブ制作の手法です。「Web Standards」を広めたJeffrey Zeldman氏が創設したウェブ制作者向けの「AList Apart」というウェブサイトで、２０１０年５月２５日に「Responsive Web Design」という題名の記事でその詳細が紹介されました。この記事はアメリカのウェブ業界に衝撃を与え、その後、さまざまな議論がなされ賛否両論を乗り越え、いまでは次世代ウェブ制作の１つの手法として確立されています。いまアメリカでは、この手法を使って製作されたウェブサイトが続々と登場しています。日本でも2011年後半から、この手法を取り入れたウェブサイトが登場し始めています。

2.レスポンシブWebデザインを支える3つの手法

レスポンシブWebデザインを支える3つの手法について簡単に紹介します。レスポンシブWebデザインは、以下の3つンを組み合わせることで成り立っています。

　・フレキシブル・グリッドをベースとしたレイアウト　　　　　　　　　レイアウト幅が可変する　　　　　　　　　　　　　　　　　　・フレキシブル・イメージ／メディア　　　　　　　　　　　　　　　　フレキシブル・グリッド内でサイズ　　　　　　　　　　　　　　　が可変するイメージやビデオなどのメディア　　　　　　　　　・メディアクエリ　　　　　　　　　　　　　　　　　　　　　　　　　画面サイズを判別してスタイルを指定できるCSS3の機能。

3.レスポンシブWebデザインの例

レスポンシブWebデザインで作られたサイトでは、以下のようにデバイスのサイズにレイアウトが順応して表示されます。

下記のURLをクリックしてサイトに入り、横幅を狭めたり広げて見て下さい。幅の変化によるメニューとかサイドバーなどサイトの変化をご覧ください。

レスポンシブWebデザインの各デバイスの画面

参考サイト名　：　ウインズスポーツクラブ　（青森県八戸市）

URL　：　http://winsfc.com/

引用元：渡辺　竜　著　レスポンシブWebデザイン