メイソンリーレイアウトはコンテンツを同時多数に見せることができる

最近のWebサイトでは、写真などのコンテンツをタイル状に配置していくレイアウトもよく見かけるようになりました。
 
タイル状に配置していくレイアウトをメイソンリーレイアウトといいます。
 
pinterest(ピンタレスト)がメイソンリーレイアウトの代表例です。ピンタレスト風のデザインともいわれることも多いです。
 
Pinterest
 
ちなみに、メイソンリー(Masonry)は、石工職、石造建築を意味する言葉です。
 

メイソンリーレイアウトのメリット

メイソンリーレイアウトはインパクトがあり、複数のコンテンツを同時多数に見せることができるというメリットがあります。
 
メイソンリーレイアウトは、「jQuery Masonry」というブラウザの幅に応じてコンテンツをタイル状に配置するJavaScriptライブラリを使用します。
 
表示領域のサイズが変更されてもブラウザの幅に応じて配置し直すので、PCやタブレットなどの様々なデバイスで活用できます。
 
そのため、メイソンリーレイアウトはマルチデバイス対応の一つともいえます。
 

メイソンリーレイアウトの注意点

整理整頓されたレイアウトではないので、テキスト主体の場合は向いていないレイアウトといえます。
 
メイソンリーレイアウトは使われるケースとしては現状、写真がメインであったり、雑貨や趣味についてのものが多いです。
 
また、「jQuery Masonry」はブラウザの古いバージョンには非対応なので、導入の際はターゲットとするブラウザについて確認が必要です。
 

まとめ・感想

タイル状に配置していくメイソンリーレイアウトはpinterest(ピンタレスト)の代表例で、複数のコンテンツを同時多数に見せることができるというメリットがあります。
 
また、表示領域のサイズが変更されてもブラウザの幅に応じて配置し直すので、マルチデバイス対応でもあります。