Advertisement

goodresponsive_top

 

デスクトップだけでなく、スマートフォンやタブレット端末にも対応するレスポンシブデザインは、スマートフォン利用者数が増えていることに比例して、利用しているウェブサイト、ブログも増えているようです。

 

 

海外デザインブログDesignYourWay.comで、レスポンシブデザインを効果的に活用している、Webサイトやブログを40個まとめたエントリー「Responsive Web Designs for Inspiration – 40 Examples」が公開されていたので、今回はご紹介します。

 

 

実際にレスポンシブデザインを活用しているサイトを見ることで、デザイン制作の参考、アイデアにしてみてはいかがでしょう。レスポンシブデザインのメリット、デメリットにも目を向けながら制作することが、これからさらに重要になってきそうです。

 

 

 

詳細は以下から。

 

 

 

効果的なレスポンシブデザインの活用事例まとめ

 

[fancy_box]レスポンシブデザインは、デスクトップやスマートフォンなどあらゆるデバイスに対して、ひとつのHTMLページを、ウィンドウ幅に応じたCSSスタイリングに設定することで、レイアウト変更を実現しています。参考サイトの画面幅を広げたり、縮めたりすることで、デザインレイアウトの確認をしてみましょう。[/fancy_box]

 

Polygon

ゲームに関する最新情報、レビューなどを配信するブログメディアサイト。画面幅に応じてスムーズに切り替わるレイアウトや、サムネイルに淡いグラデーションを加えるなど、細かいエフェクトが素敵。

polygon_com

 

 

 

Bettery Magazine

PinterestのようなMansoryレイアウトを採用しており、ウィンドウ幅に応じて、ボックス枠が変化します。

betterymagazine_com

 

 

 

Greenbelt Festival

ブログメディアサイトの一例で、カテゴリーごとに色分けすることで、より分かりやすくレイアウトを整列させています。

greenbelt_org_uk

 

 

 

Microsoft

米国マイクロソフトでは、フラットデザインとレスポンシブデザインを組み合わせた、ミニマルなレイアウトが魅力。ふわっと表示するアニメーション効果が豊富です。

microsoft_com

 

 

 

The Next Web

個人的にツボだったレイアウトのひとつで、最新記事が表示されている左サイドバーと、コンテンツが連動してアニメーションします。キーボード操作つき。

thenextweb_com

 

 

 

Regent College

カナダ、バンクーバーにある短大カレッジの公式ホームページで、カラムを利用したユニークなレイアウト変化に注目です。

regent-college_edu

 

 

 

Bluegg

モバイル閲覧時には、ヘッダー部分のイメージスライダーを非表示にするなど、読み込み速度にもこだわっています。

bluegg_co_uk

 

 

 

United Pixelworkds

2013年注目のフラットデザインを取り入れた、レスポンシブデザインのショッピングサイト。 モバイルにも対応した、カート表記はさすが。

unitedpixelworkers_com

 

 

 

Time.com

世界的に有名なTIMEの公式サイトで、数多くのコンテンツ、記事をまとめて表示する工夫がされており、マガジンスタイルのサイト制作の参考に。

time_com_time

 

 

 

The Onion

こちらもマガジンスタイルのデザイン制作参考としてメモ。2カラム目をウィンドウ幅に応じて、非表示にするケースが多いようです。

theonion_com

 

 

 

Web Desgin Yorkshire

ロゴを真ん中に、そして両サイドにナビゲーション、検索バーを配置したレイアウトが、ウィンドウ幅を変更することで、縦並びに変化。

webdesignyorkshire_com

 

 

 

 StopPress

マガジンスタイルのブログメディア参考になりそうなレイアウトで、ウィンドウ幅に応じてカラム数を変更します。

stoppress_co_nz

 

 

 

E&E

イメージ写真や動画を多く公開する、ポートフォリオサイト制作の参考サイト。ウィンドウ幅の広いデバイスでの表示は、特に魅力的ですよ。

builtbyeande_com

 

 

 

Tilde Inc.

グリッドレイアウトを使って分けられた、それぞれのコンテンツに表示された巨大タイポグラフィーが、印象的なポートフォリオサイト。

tilde_io

 

 

 

Ribot

すっきりとコンテンツごとに整列された、見やすさを重視した、企業Webサイトのレスポンシブデザイン活用事例。

ribot_co_uk

 

 

 

Printagram

フルスクリーンで表示されたイメージ写真や、ソーシャルメディアを有効に利用した、フラットなサイトデザイン。

printgr_am

 

 

 

Digital Atelier

背景にフルスクリーンイメージ写真を利用しており、ウィンドウ幅に応じて、サークル状コンテンツが移動します。

digitalatelier_ro

 

 

 

Sasquatch! Festival 2013

音楽イベントの公式ホームページで、アニメーションエフェクトを加えることで、よりユーザーをたのしませる仕掛けが実装されています。

sasquatchfestival_com

 

 

 

W3Conf 2013

サンフランシスコで行われる、ウェブ系カンファレンスの告知ページで、ウィンドウ幅を変更することで、ゴールデンゲートブリッジ写真のみが、非表示になっていきます。

w3_org_conf

 

 

参照元リンク : Responsive Web Designs for Inspiration – 40 Examples – DesignYourWay.com