Advertisement

blockgrid_web_top

 

海外デザインブログDJDesignerLab.comで、ユニークなグリッドレイアウトを使ったWebサイトデザイン40個をまとめたエントリー「40 Impressive Grid Based Web Designs for Inspiration」が公開されていたので、今回はご紹介します。

 

コンテンツをグリッド状に並べることができるjQueryプラグインも一緒にまとめていますので、デザイン制作の参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

シンプルで分かりやすい、ユニークなグリッドレイアウトのWebサイトまとめ

 

RED

トップページでは、全体を一目で確認できるグリッドレイアウト&無限スクロールを利用し、詳細ページではフルスクリーンを使って、コンテンツを展開しています。滑らかなアニメーションにも注目。

4blockgrid_web

 

 

 

Uniqlo

日本が誇る世界的ファッションブランドの海外向けWebサイトで、グリッドレイアウトを意識した、余白スペースたっぷりなデザインが特徴。

Grid_based_Web_Designs_20

 

 

 

Unbornink

あらゆるウィンドウ解像度に対応した、フルスクリーン型Webサイトデザイン。モバイル時に特定コンテンツを非表示にするなど、ビジュアル面でもたのしめます。

13blockgrid_web

 

 

 

Everlovin’ Press

型押しプリント印刷を得意としたカナダの会社で、すべてのコンテンツをカラフルなボックスで分けた、シンプルでオシャレなWebデザイン。

7blockgrid_web

 

 

 

Claire Coullon

チェコ在住のタイポグラフィーアーティストのポートフォリオサイト。これまでの作品や実績が一目で確認できる、分かりやすいレイアウトが好印象です。

16blockgrid_web

 

 

 

Boutique Cycles

気に入った自転車を、高品質なデザイン写真と一緒に並べて、整理したWebデザイン。シンプルながらも、ソーシャルメディアなどの必要事項は、邪魔にならないように、うまく表示されています。

Grid_based_Web_Designs_7

 

 

 

Nice Device

モノクロデザインで統一した制作実績は、サムネイルからデザインがはみ出すなど個性的なWebサイトを表現しています。

Grid_based_Web_Designs_5

 

 

 

Faebric

ファション好きに送るウェブマガジンで、毎日世界中の新鋭アーティストを中心にした商品紹介、インタビューなどが掲載されています。カテゴリーごとに、鮮やかなカラーリングで分けるなどアイデアの参考に。

Grid_based_Web_Designs_9

 

 

 

Reserved

ファッションブランドのショッピングサイトで、グリッド状に分けられたコンテンツより目的の商品を探すことができます。特にフルスクリーンの写真、動画スライドショーを使った、商品用シングルページは素敵。

Grid_based_Web_Designs_23

 

 

 

National Traveller

コンテンツごとにグリッド状に並べられたシンプルな作りで、ソーシャルメディアアイコンなどあらゆるパーツを四角形にすることで統一感を表現します。

20blockgrid_web

 

 

 

Pixillion

ウィンドウ幅に応じてコンテンツレイアウトが切り替わる、レスポンシブWebデザインに対応したグリッド型Webサイト。

Grid_based_Web_Designs_3

 

 

 

Major Tom

コマーシャルや映画などで使われるBGMを作成する会社で、 ワンシーンを切り抜いたサムネイル写真をアニメーション付きで展開します。

Grid_based_Web_Designs_4

 

 

 

Posters in Amsterdam

アムステルダムに張られているカラフルなポスターを集めている、ユニークなコンセプトのミニブログ形式のサイト。

Grid_based_Web_Designs_32

 

 

 

Where They At

ニューオリンズ州にある音楽プロダクションのアーティスト紹介ページ。モノクロデザインを基調に、黄色がよいアクセントカラーとなっています。

Grid_based_Web_Designs_39

 

 

 

Fakultat Gestaltung

サイズの異なる正方形が、ウィンドウ幅に応じて変化しながら整列する、レスポンシブデザインに対応したWebサイト。

Grid_based_Web_Designs_10

 

 

 

 SquareSpace 6

目的に応じたミニマルWebサイトデザインを提供する、デザイン事務所のひとつで、無駄を省きながらも細部にこだわったデザインが魅力的。

Grid_based_Web_Designs_15

 

 

 

Rodgers Townsend

トップページ全体を大きなナビゲーションメニューとして利用している、ユニークなグリッドレイアウトの活用法。

Grid_based_Web_Designs_22

 

 

 

Neighborhood Studio

それぞれ大きさの異なるコンテンツが並べられており、ホバーすることでイメージ写真をスライドさせることもできるポートフォリオWebサイト。

11blockgrid_web

 

 

 

 

グリッドレイアウトで使いたい、jQueryプラグインまとめ

 

[fancy_box]今回ご紹介したWebサイトでは、ウィンドウ幅が変化するときにアニメーション切り替えを行っているケースが多いようです。デザイン制作の参考になりそうなjQueryプラグインをいくつかご紹介します。[/fancy_box]

 

jQuery Mansory

写真共有サイトPinterest風レイアウトを実現する、有名jQuery無料プラグイン。

 

 

 

Grid-A-Licious

上記プラグインとは異なる、ウィンドウ幅切り替え時のスムーズなアニメーションが特徴のjQuery無料プラグインとなっており、詳しい使い方についてはこちらをご参考にどうぞ。

 

 

 

Animated Responsive Image Grid

レスポンシブ対応で、イメージ写真をグリッド状に並べてくれるjQuery無料プラグイン。サンプルデモが3種類用意されており、フルスクリーン画面へのグリッド表示も可能。

[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]

 

 

 

Responsive Tile Gallery

イメージ写真の横幅、マージン幅など細かく設定でき、滑らかなアニメーションと並び替えソート機能が実装されたプレミアム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]

 

 

 

Megafolio

上記プラグインにも似ていますが、あらかじめ白、黒2バージョンが用意されており、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