動きをたのしむ、面白レスポンシブWebデザイン参考例26個まとめ

moreresponsive_top

 

デスクトップPCのほかに、スマートフォンやタブレット端末にも対応し、自由なレイアウトを実現するレスポンシブWebデザイン。採用するサイトも増えており、それによって今まで以上にユニークな表現方法や、仕掛けテクニックでユーザーを楽しませてくれるようになってきています。

 

 

海外デザインブログNoupe.comで、レスポンシブデザインのユニークな使い方をした、Webサイトデザイン26個をまとめたエントリー「Let It Flow – 26 Awesome Examples of Responsive Web Design」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

ユニークな仕掛け、レイアウトが魅力のレスポンシブWebデザインまとめ

 

Future of Web Design 2013

毎年ロンドンで開催されているカンファレンス公式サイトで、グリッド分けされたイメージ写真やテキストが、画面幅に応じて3カラムで整列されます。レイアウトに応じて配色も変更しています。

futureofwebdesign_london2013

 

 

 

Shiny Demos

Webデザインの最先端を意識した、ユニークな仕掛けばかりのサイトで、斜めに並べられたキューブ状メニューは、ウィンドウ幅に応じて、デザインがアニメーション付きで変化します。

shinydemos

 

 

 

Andersson-Wise Architects

読み込み速度やモバイル端末での表示問題によって、敬遠されがちなフルスクリーン写真を使った、レスポンシブWebレイアウト。

anderssonwise

 

 

 

Dmig 5

ヘッダー部分にでかでかと配置されたイラストは、スクロールすることで画像を切り替え、スクロールしても追従する仕組みがユニーク。

dmig5

 

 

 

Lab FiftyFive

ロゴ、ナビゲーションメニューを中央に配置し、ウィンドウ幅に応じて背景が伸縮する、大胆なヘッダーデザインが印象的です。 ポートフォリオやアーティストページなどに良さそう。

labfiftyfive

 

 

 

Kava Ruzova

Googleマップのユニークな活用例のひとつで、左サイドバー固定型リキッドレイアウトを用い、デバイスに応じてマップを非表示にしています。

kavaruzova

 

 

 

Hicksdesign

ウィンドウ幅に応じて、カラム数が次々に変化し、レイアウトが次々と変化する、使い勝手も考慮したレスポンシブデザインサイト。

hicksdesign

 

 

 

Deren Keskin

巨大なタイポグラフィーデザインを採用したサンプル例で、スマートフォン端末ではナビゲーションメニューのみを表示するようになっています。

derenkeskin

 

 

 

TIME

何度かご紹介していますが、マガジンスタイルとレスポンシブデザインを組み合わせた、具体的サンプルウェブサイト。

time

 

 

 

FortyOneTwenty Inc.

レスポンシブデザインに対応した、ビデオ動画ファイルを埋め込んだ具体サンプル例。モバイル端末では非表示にするなど、デバイスごとに対応しています。

fourtyonetwenty

 

 

 

Forefathers

レトロ&アンティークデザインを活用した、レスポンシブWebサイト事例のひとつで、落ち着いたカラーリングが魅力的。

forefathersgroup

 

 

 

Stuff & Nonsense

画面幅に応じて、イラストで描かれたマスコットキャラクターが切り替わる、面白ヘッダーデザインを採用。 ロゴを使った、多彩なアニメーション付きナビゲーションメニューにも注目です。

stuffandnonsense

 

 

 

From the Front 2012

メンバー紹介として並べられた海賊風スタッフ達は、モバイル端末では、イメージカルーセルで表示されるというユニークさ。

treasurefrontend

 

 

 

Lancaster University

企業サイトなどでよく見かけるレイアウトのひとつですが、こちらもレスポンシブデザインに対応した、新テクニックが採用されています。見た目のデザインだけでなく、すべてのコンテンツにアクセスできる工夫が◎。

lancasteruni

 

 

 

Oliver Russell

特にウィンドウ幅に応じて、ロゴデザインとナビゲーションメニューが、アニメーション付きで変化するギミックは素敵。

oliverrussell

 

 

 

Somewhat

読み込み速度が遅くなりがちなモバイル端末では、イメージ画像を読み込まず、別デザインのナビゲーションメニューを採用したWebサイト。レスポンシブWebデザインの未来を感じます。

somewhat

 

 

 

効果的なレスポンシブデザイン活用事例Webサイト、ブログ40個まとめ

この他にも、レスポンシブデザインを採用するときに、参考にしたいユニークデザインが揃っています。

goodresponsive_top

 

 

参照元リンク : Let it Flow – 26 Awesome Examples of Responsive Web Design – Noupe.com