デザイン

デザイン

ウェブデザインをもっと素敵に!モジュールコンテンツのブロックレイアウト例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
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

    143 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

     

     

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

     

    おすすめタグ