jQueryMasonry002

Masonry jQuery!混沌としたCSSでのグリッドレイアウトを、Masonry メーソンリーが救う!はず。

桜新町ポータルで新聞や雑誌のようにグリッドで配置させようとしている。ポータルサイトなので、ブログのように一覧でだすよりも、小さなグリッドで情報が詰まった感をだしたい。それにグリッドレイアウトは、見やすい!!

雑誌や新聞も小さな枠で小さな文字でぎっしり詰まっている。「情報を伝える」ことに特化した結果、グリッドレイアウトになったんだと思う。

グリッドレイアウトならレスポンシブルもしやすいじゃん!!だって、スマホの最小画面でグリッド構成をすればよいし、ちょーーいいじゃん!!と、勝手に盛り上がっている・・・。

グリッドレイアウトをCSSだけでやってみた・・・・

そんな訳で頑張って、頑張って、頑張って、CSSのfloatで実現させたのだけど、グリッド枠の高さが異なると、どうしても隙間ができてしまう。

色んなサイトや、Webデザイナーさんに聞いてみたのだけど、CSSだけではこれが限界のようだ。

桜新町ポータルグリッド

救世主、めーそんりーー!!

悩んでいると、とあるデザイナーさんから、「メーソンリーーー!!!!」と言われた。

そんな訳で教えてもらったのが、jQueryで動的にグリッドを配置してくれるプラグインMasonry(メーソンリー)。

公式サイトはこちら。

Masonry

ちなみに僕は、JavaScriptやjQueryは触ったことがないので、今回は解説しない!!そのかわり、Masonryでできたサイトをピックアップしてみた。成果物を見て、どんなことができるのか?というイメージを持ちたいからだ。

Masonry(メーソンリー)でできたサイトを勝手にピックアップして、勝手にコメントしてみる。

TOKYO KI

トップ | TOKYO KI ケイアイスター不動産

ちょーーかっこいい!!

当然、レスポンシブルで動的にレイアウトを調整してくれる。

キーカラーにブラックを使っているので、ハッキリとした印象を与える。

ピンク、グリーンなどのパステル系がオシャレを感じて、アパレル系かと思いきや、実は一戸建てのサイト。

国風第三幼稚園

国風第三幼稚園 | 愛知県名古屋市西区の幼稚園です。

 

非常に構成が綺麗にまとまっている。写真の使い方も上手いと思います。

 キーカラーはブルーで、配色がバランスがよく、落ち着いてみれる。

グリッドがどんな記事なのか、見出しのアイコンと配色でだいだいわかるように配慮されている。

子供も預けたいと思わせてくれる、よいサイト。

アバランチの制作実績サイト

株式会社アバランチ ホームページ制作実績サイト|AVALANCHE WEB PRODUCTS

なるほど、こういう使い方もできるのかと思わせてくれるサイト。会社の制作実績が綺麗に並んでいる。

ストロベリーフィールズ

福岡市で人気のケーキ店の老舗ストロベリーフィールズ

 

2ページ目は、スィーツの写真は高さがバラバラだけど、パズルのようにきれいに並んでいる。レイアウトの隙間には一定のマージンが入っている。

高さの違う写真が追加されても、再び計算して、隙間がないように配置してくれる。このあたりが、便利なところだ。

バーグハンバーグバーグ

株式会社バーグハンバーグバーグ

配色やキャラクタ-を除けば(笑)、もっともイメージに近い。通常サイトバーに表示されるような内容もまとめてグリッドにしている。

1つのボックスのタイトル、日付、キャッチ画像、本文のバランスや文字の大きさなどレイアウトする上で参考になる。

Radim

Radim Malinic Brand Nu – Art Direction, Illustration, Graphic Design & Web Design

非常にきれいなサイト。1つの写真にマウスオーバーすると、背景がブラックになり詳細が表示される。フォトギャラリーの見本としてもよい。

個人的にはかなり好き(#^.^#)。いつでも見ていたい感じだ。

NHKスタジオパーク

NHKスタジオパーク

もはや神の領域!!大きなのことなるグリッドを見事に配置している。当然、スマートフォンのときは最適化されて表示される。

やはり、見やすく楽しいのが、グリッドレイアウトでうねーーー(*^_^*)

SENKIDO

千金堂 : 1000万円均一の住宅会社。家づくりの常識を変える千金堂の公式Webサイト – SENKINDO –

 

キーカラーのブラックがよく効いている。とても見やすい。従来ならサイドバーにあるようなメニューもバラバラにして、グリッドレイアウトの一部になっている。

グリッドの最少幅が190pxで、写真が170pxとかなり小さいが十分に伝える力をもっている。これぐらい小さいグリッドにしても、問題なくコンテンツとして成り立つことを教えてくれる。

SG_BOOKMARK

Webデザインブックマークサイト・Webデザインリンク集 .SG_BOOKMARK

デザイン性の高い海外のサイトをリンクしているサイト。

ブラウザの画面幅を変えたときのアクションが美しい(^u^)。

Masonry(メーソンリー)の記載があるWeb書籍

なにはともあれ、まとまった情報がほしいので僕が購入した書籍の中からMasonryが記載されている箇所を調べてみた。

Webデザインテクニックブック

Webデザインの小技集みたいな書籍で重宝しているのだが、よく読んでみるとP129あたりからMasonryが登場する。

レスポンシブWebデザイン入門

先日、セミナーで講師をされていた小川さんの書籍。jQuery Masonryとして、P138から紹介されている。ダイナミックに可変するボックスシステムを実装するために使用されている。

jQueryプラグイン徹底活用

jQueryだけに絞った書籍。そこで、な、なんと、最初のプラグインとしてMasonryが紹介されている!!

Masonryを愛してそうなブログ

Masonryのブログエントリーは結果ある。エントリーの中で後でじっくり読んで取り組みたいと感じたのが次の3つ。

jQuery Masonryでサイズの異なるBOXをタイル状に整列 [ホームページ作成] All About

レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント: 小粋空間

WordPressのトップページを雑誌や新聞のような段組にする方法 | Stocker.jp / diary