海外デザインブログDJDesignerLab.comで、ユニークなグリッドレイアウトを使ったWebサイトデザイン40個をまとめたエントリー「40 Impressive Grid Based Web Designs for Inspiration」が公開されていたので、今回はご紹介します。
コンテンツをグリッド状に並べることができるjQueryプラグインも一緒にまとめていますので、デザイン制作の参考にしてみてはいかがでしょう。
詳細は以下から。
シンプルで分かりやすい、ユニークなグリッドレイアウトのWebサイトまとめ
トップページでは、全体を一目で確認できるグリッドレイアウト&無限スクロールを利用し、詳細ページではフルスクリーンを使って、コンテンツを展開しています。滑らかなアニメーションにも注目。
日本が誇る世界的ファッションブランドの海外向けWebサイトで、グリッドレイアウトを意識した、余白スペースたっぷりなデザインが特徴。
あらゆるウィンドウ解像度に対応した、フルスクリーン型Webサイトデザイン。モバイル時に特定コンテンツを非表示にするなど、ビジュアル面でもたのしめます。
型押しプリント印刷を得意としたカナダの会社で、すべてのコンテンツをカラフルなボックスで分けた、シンプルでオシャレなWebデザイン。
チェコ在住のタイポグラフィーアーティストのポートフォリオサイト。これまでの作品や実績が一目で確認できる、分かりやすいレイアウトが好印象です。
気に入った自転車を、高品質なデザイン写真と一緒に並べて、整理したWebデザイン。シンプルながらも、ソーシャルメディアなどの必要事項は、邪魔にならないように、うまく表示されています。
モノクロデザインで統一した制作実績は、サムネイルからデザインがはみ出すなど個性的なWebサイトを表現しています。
ファション好きに送るウェブマガジンで、毎日世界中の新鋭アーティストを中心にした商品紹介、インタビューなどが掲載されています。カテゴリーごとに、鮮やかなカラーリングで分けるなどアイデアの参考に。
ファッションブランドのショッピングサイトで、グリッド状に分けられたコンテンツより目的の商品を探すことができます。特にフルスクリーンの写真、動画スライドショーを使った、商品用シングルページは素敵。
コンテンツごとにグリッド状に並べられたシンプルな作りで、ソーシャルメディアアイコンなどあらゆるパーツを四角形にすることで統一感を表現します。
ウィンドウ幅に応じてコンテンツレイアウトが切り替わる、レスポンシブWebデザインに対応したグリッド型Webサイト。
コマーシャルや映画などで使われるBGMを作成する会社で、 ワンシーンを切り抜いたサムネイル写真をアニメーション付きで展開します。
アムステルダムに張られているカラフルなポスターを集めている、ユニークなコンセプトのミニブログ形式のサイト。
ニューオリンズ州にある音楽プロダクションのアーティスト紹介ページ。モノクロデザインを基調に、黄色がよいアクセントカラーとなっています。
サイズの異なる正方形が、ウィンドウ幅に応じて変化しながら整列する、レスポンシブデザインに対応したWebサイト。
目的に応じたミニマルWebサイトデザインを提供する、デザイン事務所のひとつで、無駄を省きながらも細部にこだわったデザインが魅力的。
トップページ全体を大きなナビゲーションメニューとして利用している、ユニークなグリッドレイアウトの活用法。
それぞれ大きさの異なるコンテンツが並べられており、ホバーすることでイメージ写真をスライドさせることもできるポートフォリオWebサイト。
グリッドレイアウトで使いたい、jQueryプラグインまとめ
[fancy_box]今回ご紹介したWebサイトでは、ウィンドウ幅が変化するときにアニメーション切り替えを行っているケースが多いようです。デザイン制作の参考になりそうなjQueryプラグインをいくつかご紹介します。[/fancy_box]
写真共有サイトPinterest風レイアウトを実現する、有名jQuery無料プラグイン。
上記プラグインとは異なる、ウィンドウ幅切り替え時のスムーズなアニメーションが特徴のjQuery無料プラグインとなっており、詳しい使い方についてはこちらをご参考にどうぞ。
Animated Responsive Image Grid
レスポンシブ対応で、イメージ写真をグリッド状に並べてくれるjQuery無料プラグイン。サンプルデモが３種類用意されており、フルスクリーン画面へのグリッド表示も可能。
[button_square color=”red” url=”http://tympanus.net/Development/AnimatedResponsiveImageGrid/”] デモページ [/button_square] [button_square color=”green” url=”http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/”] ダウンロードページ [/button_square]
Gamma Gallery: A Responsive Image Gallery
コンテナの大きさに応じてグリッドを最適化してくれる、レスポンシブにも対応した無料jQueryプラグイン。デモページより確認できます、また詳しい使い方はこちらをどうぞ。
[button_square color=”red” url=”http://tympanus.net/Development/GammaGallery/”] デモページ [/button_square] [button_square color=”green” url=”http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/”] ダウンロードページ [/button_square]
イメージ写真の横幅、マージン幅など細かく設定でき、滑らかなアニメーションと並び替えソート機能が実装されたプレミアムjQueryプラグイン。
[button_square color=”red” url=”http://codecanyon.net/item/responsive-tile-gallery/full_screen_preview/3290154″] デモページ [/button_square] [button_square color=”green” url=”http://codecanyon.net/item/responsive-tile-gallery/3290154?ref=showhey0705″] ダウンロードページ [/button_square]
上記プラグインにも似ていますが、あらかじめ白、黒２バージョンが用意されており、CSS3アニメーションなどを追加したダイナミックな動きをたのしめるjQueryプラグイン。
[button_square color=”red” url=”http://themes.themepunch.com/?theme=megafolio_jq”] デモページ [/button_square] [button_square color=”green” url=”http://codecanyon.net/item/megafolio-gallery-jquery-plugin/980161?ref=showhey0705″] ダウンロードページ [/button_square]
参照元リンク : 40 Impressive Grid Based Web Designs for Inspiration – DJDesignerLab.com
