Advertisement

26responsive_top

 

海外デザインブログGraphicDesignJunction.comで、レスポンシブデザインを効果的に利用した、スタイリッシュなWebサイトをまとめたエントリー「26 Fresh Responsive Websites Examples」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

レスポンシブデザインの参考にしたい、参考Webサイトまとめ

 

MoreSleep

コントラストの強い配色に、巨大タイポグラフィーがインパクトのあるドイツ、ベルリンのデザイン事務所の公式サイト。

responsive-websites-5

 

 

 

SquareSpace

コンテンツを切り替えるたびに、ヘッダーデザインも同時に変化する、見ていて飽きないデザインが素敵。

Build-a-Website-—-Squarespace-2013-07-12-04-04-26

 

 

 

Instnt with RTT

タイポグラフィーのみで表現された、ミニマルなナビゲーションメニューをつかうことで、よりコンテンツを引き立てたレイアウト。

responsive-websites-4

 

 

 

WNDRMNT

コンテンツ内容を1ページにまとめた、シングルページ完結型レイアウトに、パララックスエフェクトなどの新テクニックをふんだんに採用。

responsive-websites-8

 

 

 

Spectacle Wearer of the Year 2013

ウィンドウ幅を変更することで、同時にカラム数も変化させて、見やすくなる工夫がされています。

responsive-websites-6

 

 

 

Ledereen DubbelFrisss

ファンキーなイラストに、触ってたのしむアニメーションを大量に仕掛けたサイト。 思わずクリックしたくなるボタン配置など参考に。

responsive-websites-22

 

 

 

Luke & Allie are Getting Married!

結婚式の告知や詳細情報をまとめて公開する、新しいウエディングパーティーの形を提供した、ハッピーなWebサイト。

responsive-websites-7

 

 

 

Black Pearl Farms

コンテンツごとに切り替わる、フレッシュな壁紙デザインが素敵なWebサイト。

responsive-websites-13

 

 

 

Made by FIBB

パネル状にグリッド表示されたコンテンツは、スクロールするたびにアニメーション付きで出現。サムネイルホバーエフェクトも素敵ですよ。

responsive-websites-16

 

 

 

Grischek

ウィンドウ幅に応じてサムネイルの大きさが変化する、インタラクティブなギャラリーの魅せ方。

responsive-websites-15

 

 

 

UIG Studio

responsive-websites-1

 

 

 

Works Medical

最近のトレンドでもあるフラットデザインを採用し、カラー分けされたコンテンツが読みやすいレイアウト。

responsive-websites-20

 

 

 

LOFT City Church

余白スペースをたっぷりと利用することで、スマートフォンやタブレット端末でも、ストレスなく閲覧できる環境づくりがされています。

responsive-websites-24

 

 

 

Gc Watches

responsive-websites-11

 

 

 

Octave & Octave

ゆるいアニメーション付きイラストに、ビビッドな壁紙を使った、ウェブサイトの新しい可能性を感じるサイト。

responsive-websites-14

 

 

 

Super Sync Sports

タブレット端末とシンクロさせ、他の対戦者とスポーツ競技を行うユニークなサイト。

responsive-websites-25

 

 

 

Paul Casey

responsive-websites-10

 

 

 

Papiroga

フルスクリーンイメージスライダーを採用した、ポートフォリオ向けレスポンシブデザインの参考に。

responsive-websites-17

 

 

 

Loop.

responsive-websites-12

 

 

 

KIN HR

デバイスごとに表示スペースが変化する、どんな閲覧環境にもマッチするレスポンシブデザイン。

responsive-websites-21

 

 

 

完全無料、レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ

さっそくレスポンシブに対応したサイトを制作しようという方は、参考にしてみてはいかがでしょう。

freehtml_top

 

 

参照元リンク : Responsive Webistes Design | Web Design – GraphicDesignJunction.com