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