デザイン

デザイン

PR

ウェブデザインをもっと素敵に!モジュールコンテンツのブロックレイアウト例25選

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、25 Web Designs with Modular Content Block LayoutsRead the full post
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,117 views

読了時間 : 約3分28秒

モジュールコンテンツブロックレイアウトを使ったおしゃれで参考になるウェブサイトを25選集めました。グリッドベースのレイアウトは様々なウェブサイトで見かけます。特にPinterestのようなポートフォリオやまとめサイトではグリッドレイアウトがよく使われていますよ。

 

モジュールコンテンツブロックレイアウトを使うことにより、色々な利点があります。例えば、コンテンツがきれいに並べられ、上手く構成されているので、ウェブサイトが読みやすくわかりやすくなります。

 

以下に御紹介するサイトでは、タイリングされたブロックが使われ、ほぼ全て1種類のモジュールフォーマットなので、ビューポートサイズに合わせて適切な大きさに表示されます。レスポンシブかつ構成を練ったコンテンツで、パワフルな特徴もあります。モジュールコンテンツブロックレイアウトはいいことばかりですね。あなたのスタイルや必要性に応じて変えることができますよ。

 

 

Mercer Tavern

こちらはグリッドレイアウトを使った美しいウェブサイトのいい例です。1ページにハイクオリティーの写真とアニメーションが収まっています。

Mercer Tavern Modular Content Block Layouts

 

DesignersMX

こちらのレイアウトでインスピレーションをもらいましょう。デザイナーがコンテントを賢く一つにまとめていますね。

DesignersMX Modular Content Block Layouts

 

ChadMiller

こちらはフルサイズのレイアウトで、大きめのブロックを使っています。おしゃれなアニメーションをクリックすると、そのページに行けますよ。

ChadMiller Modular Content Block Layouts

 

RED Interactive Agency

こちらのサイトは、モダンなデザインのポイントをよく押さえることで、素晴らしいレイアウトに仕上がっています。パララックスエフェクトやアニメーションエフェクト、グリッドレイアウト、フルサイズのハイクオリティー画像などが使われています。

RED Interactive Agency Modular Content Block Layouts

 

BL:ND – Brand Strategy Design Consultancy

こちらの例では、フルサイズのグリッドレイアウトでおしゃれな画像が使われていますね。コンテンツがきれいに整えられ見やすくなっています。

BL:ND - Brand Strategy Design Consultancy Modular Content Block Layouts

 

Everlovin’ Press

こちらもグリッドレイアウトの参考になる例の一つです。小さめと大き目のレイアウトが使われ、全体的にコンパクトに上手くまとまっています。

 Modular Content Block Layouts

 

Bernd Kammerer Portfolio

ポートフォリオページのレイアウトをお探しならこちらがおすすめです。目に留まりやすいようにアニメーションエフェクトを使った、おしゃれなブロックレイアウトです。

Bernd Kammerer Portfolio Modular Content Block Layouts

 

Neighborhood Studio

美しいこちらのウェブサイトデザインは、グリッドレイアウトと素晴らしいアニメーションで仕上がっています。背景の画像もおしゃれです。

Neighborhood Studio Modular Content Block Layouts

 

DB Works

コンテンツをプロ仕様かつスマートな構成でみせたいなら、こちらを参考にしましょう。もちろんグリッドレイアウトが使われています。

 Modular Content Block Layouts

 

Claire Coullon

こちらのモジュールコンテンツブロックレイアウトは、たくさんの小さな画像と短い文字を上手く使っています。すべてのデザインが四角のボックスになっていて、コンパクトな印象を与えます。

Claire Coullon Modular Content Block Layouts

 

AXT

こちらのデザインを参考にしてウェブサイトを作ってみませんか?グリッドレイアウトが使われ、全てが上手くまとまっています。

AXT Modular Content Block Layouts

 

United Pixelworkers

こちらもグリッドレイアウトを上手く使った例の一つです。きれいな構成が印象に残ります。

United Pixelworkers Modular Content Block Layouts

 

Berger & Föhr

白黒のブロックレイアウトのこちらのサイトは、画像をクリックするとフルカラーのページに移ります。

 grid Layouts

 

NationalTraveller

グリッドレイアウトを使ってきれいにまとめられたサイトです。影を上手く利用したり、他の効果を使うことで3Dに見せることに成功しています。

NationalTraveller grid Layouts

 

Webdesigner Depot

大きな見出しが目をひくグリッドレイアウトのウェブサイトです。コンテンツが伝わりやすくなっています。

Webdesigner Depot grid Layouts

 

Pinterest

こちらのサイトはおなじみの人も多いのではないでしょうか。グリッドレイアウトを使ったウェブサイトの例として完璧ですね。

Pinterest grid Layouts

 

Designspiration

モジュールコンテンツレイアウトを使った、わかりやすくおしゃれなウェブサイトの例です。ページを除いてあなたの目で確かめてみてください。

Designspiration grid Layouts

 

Hatch

Hatch San Francisco Modular Grid Layouts

 

Lees Ferry

Lees Ferry Modular Grid Layouts

 

Leodis Lager

Journal Modular Grid Layouts

 

MAP

こちらのサイトは美しく並べられたモジュールコンテンツブロックレイアウト仕様のニュースページが目をひきます。早速、サイトを訪れて確かめてみてください。

MAP grid Layouts

 

My Poor Brain

こちらも洗練されたデザインのグリッドレイアウトです。並び方も構成も完璧です。様々なデバイスでみることができます。

My Poor Brain grid Layouts

 

Nowy Teatr

こちらはグリッドレイアウトを使いながらもクリエイティブなデザインのウェブサイトです。各ブロックの間にあるスペースがそれぞれ違っていて、クリックするとカスタムページに行くことができます。

Nowy Teatr grid Layouts

 

Silk Tricky

こちらもオリジナリティ溢れるデザインです。グリッドブロックを使い、クリエイティブなデザインで写真を表示しています。

Silk Tricky grid Layouts

 

Spazoidipaolo

グリッドレイアウトを使ったおしゃれなデザインのサイトです。ページを訪れて、新しいデザインや機能を探してみてください。

Spazoidipaolo grid Layouts

 

 

いかがでしたか?グリッドレイアウトのウェブサイトはとてもおしゃれで印象に残るデザインですね。是非、お好みのデザインを見つけて参考にしてみてください!

 

おすすめ新着記事

おすすめタグ