PCにモバイル、スマートフォンにタブレット、そして今後はデジタルTVまでユーザーがデジタルコンテンツに多種多様なデバイスでアクセスし、消費する時代が本格化している最中。デバイス毎にウェブサイトをデザインしていてはキリがないとばかりに、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやOSにデザインを柔軟に対応して表示させる手法。今回は、そんなレスポンシブWebデザインを実践しているサイトからThe Next Webが厳選した10の素敵なサイトを紹介します。 — SEO Japan
最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。
あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのことを頭に入れてデザインしなければならない。画面サイズやオペレーティングシステムに柔軟に対応するデザイン手法は、レスポンシブWebデザインとして知られる。ここで紹介する10のサイトはフレキシブルなWebの未来を見せつけている。
Bread & Pepper
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/breadpepper-520x295.png)
Bread & Pepperは、スパイシーなコードを使ってシンプルなインターフェースを作るソフトウェア会社だ。
UPPERDOg
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/UPPERDOG-520x296.png)
ブラウザのサイズ調整をする度にリアルタイムでこのサイトもサイズ調整するのは素敵だ（決して跳んだり跳ねたりしない）。
- UPPERDOg
Food Sense
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/Food-Sense-Plant-Based-Eating-At-Its-Best-520x326.png)
サイズに応じてロゴの位置まで動く。
- Food Sense (via Splashnology)
Jux
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/H%C3%85RRISON-by-harrison-520x306.png)
異なるアプリを作り出す代わりに、Juxは、iPhone、iPad、デスクトップのような異なるデバイスに優雅に適応するために1つのレスポンシブWebデザインに重点的に投資した。（暴露：私は、TNWの前に彼らと仕事をしていた。）
- Jux
Endloop Mobile
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/endloop-520x265.png)
Endloop Mobileのサイトは、レスポンシブWebデザインのWordPressテーマを改変して作られた。
Gravitate
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/gravitate-520x328.png)
Gravitateはどのサイズでもエレガントに見える。
- Gravitate (via WebDesignDev)
Think Vitamin
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/think-vitamin-520x269.png)
Think Vitaminは、小さいサイズではサイドバーを完全に消している。
Clean Air Works
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/clearairchallenge.com_-520x346.png){kind=spacer}
Clean Air Worksは、小さいサイズではメニューを完全にフォーマットし直す。
- Clean Air Works (via WebDesignDev)
CSS Grid
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/The-1140px-CSS-Grid-System-%C2%B7-Fluid-down-to-mobile-520x338.png)
CSS Gridのサイトはフレキシブルなグリッドを使用するという目的を中心に構築されている。
- CSS Grid
Responsive Illustration
/http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2012/01/screen-shot-2012-01-04-at-7-33-47-pm.png)
メディアクエリを使って作ってある。“これは、レスポンシブWebデザインのテクニックを使ったインタラクティブな体験である。” このサイトについては以前に書いている。
私たちの社会において成長するコネクティビティは、人々をお互いに近づけながら驚異的な量の情報の流れを保ち、いくつか驚くような結果をもたらしている。しかし、この消費の新しい時代にはいくつかマイナス面があり、その中の1つがウェブサイトが現在デザインされているあり方なのだ。
モバイルデバイスを持っている人ならWebを閲覧することがいかに難しいかということを知っているが、そうでなければならないわけではないのだ。ますます多くのデザイナーがレスポンシブWebデザインの技術を活用するようになっていて、全ての新しいWebデザインに期待される手段になる日は近いだろう―まだその日が来ていないのなら！
この記事は、The Next Webに掲載された「10 Beautiful examples of responsive Web design」を翻訳した内容です。
流石にどれもPCで見ても美しいデザインのサイトばかりでした。確かにどのサイトもブラウザサイズを変更しても綺麗に収まってくれます。レイアウトを自動調整した上でそのデザインがしっくりはまっているのは「凄い！」と思えますね。個人的には「Jux」が気に入りました。さらに気になる方は是非スマートフォンやタブレットでもチェックしてみてください。確かに今後はこの流れが効率化のためにも加速化する気はします。SEO Japan的にはこれからはレスポンシブSEOだ！とも先にいっておきましょうか。 — SEO Japan
