Image may be NSFW.
Clik here to view.
海外デザインブログGraphicDesignJunction.comで、レスポンシブデザインを効果的に利用した、スタイリッシュなWebサイトをまとめたエントリー「26 Fresh Responsive Websites Examples」が公開されていたので、今回はご紹介します。
詳細は以下から。
レスポンシブデザインの参考にしたい、参考Webサイトまとめ
コントラストの強い配色に、巨大タイポグラフィーがインパクトのあるドイツ、ベルリンのデザイン事務所の公式サイト。
Image may be NSFW.
Clik here to view.
コンテンツを切り替えるたびに、ヘッダーデザインも同時に変化する、見ていて飽きないデザインが素敵。
Image may be NSFW.
Clik here to view.
タイポグラフィーのみで表現された、ミニマルなナビゲーションメニューをつかうことで、よりコンテンツを引き立てたレイアウト。
Image may be NSFW.
Clik here to view.
コンテンツ内容を1ページにまとめた、シングルページ完結型レイアウトに、パララックスエフェクトなどの新テクニックをふんだんに採用。
Image may be NSFW.
Clik here to view.
Spectacle Wearer of the Year 2013
ウィンドウ幅を変更することで、同時にカラム数も変化させて、見やすくなる工夫がされています。
Image may be NSFW.
Clik here to view.
ファンキーなイラストに、触ってたのしむアニメーションを大量に仕掛けたサイト。 思わずクリックしたくなるボタン配置など参考に。
Image may be NSFW.
Clik here to view.
Luke & Allie are Getting Married!
結婚式の告知や詳細情報をまとめて公開する、新しいウエディングパーティーの形を提供した、ハッピーなWebサイト。
Image may be NSFW.
Clik here to view.
コンテンツごとに切り替わる、フレッシュな壁紙デザインが素敵なWebサイト。
Image may be NSFW.
Clik here to view.
パネル状にグリッド表示されたコンテンツは、スクロールするたびにアニメーション付きで出現。サムネイルホバーエフェクトも素敵ですよ。
Image may be NSFW.
Clik here to view.
ウィンドウ幅に応じてサムネイルの大きさが変化する、インタラクティブなギャラリーの魅せ方。
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
最近のトレンドでもあるフラットデザインを採用し、カラー分けされたコンテンツが読みやすいレイアウト。
Image may be NSFW.
Clik here to view.
余白スペースをたっぷりと利用することで、スマートフォンやタブレット端末でも、ストレスなく閲覧できる環境づくりがされています。
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
ゆるいアニメーション付きイラストに、ビビッドな壁紙を使った、ウェブサイトの新しい可能性を感じるサイト。
Image may be NSFW.
Clik here to view.
タブレット端末とシンクロさせ、他の対戦者とスポーツ競技を行うユニークなサイト。
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
フルスクリーンイメージスライダーを採用した、ポートフォリオ向けレスポンシブデザインの参考に。
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
デバイスごとに表示スペースが変化する、どんな閲覧環境にもマッチするレスポンシブデザイン。
Image may be NSFW.
Clik here to view.
完全無料、レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ
さっそくレスポンシブに対応したサイトを制作しようという方は、参考にしてみてはいかがでしょう。
Image may be NSFW.
Clik here to view.
参照元リンク : Responsive Webistes Design | Web Design – GraphicDesignJunction.com