1300の優良サイトを調査してみたシリーズ、第13回は「ページレイアウト(Page Layout)」です。
タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインと、様々なページレイアウトの思想が時代の流れとともに生み出されてきました。
ふろしき.jsの調査では1300中110サイト(8.46%)にて、ライブラリ・フレームワークによる対策が確認されました。以下が、その一覧です。
heightline.js (56件 - 8.46%)
ブロック要素の高さを制御するライブラリです。文字列が含まれているブロック要素は、環境によって高さが変動します。本ライブラリは、複数のブロック要素の高さを一番大きいものに統一させることで、タイルレイアウトの実装を助けます。
- 公式サイト：http://blog.webcreativepark.net/2007/07/26-010338.html
- ライセンス：MIT License
- 開発：西畑 一馬(にしはた かずま)
jQuery Masonry (13件 - 1.00%)
各ブロック要素をウィンドウ内で、大きさに合わせてレンガのように隙間なく埋める見た目となる可変グリッドレイアウト向けのフレームワークです。
- 公式サイト：http://masonry.desandro.com/
- ライセンス：MIT License
- 開発：David DeSandro
jQuery Tile (10件 - 0.76%)
heightline.jsと類似した機能を持つ、タイルレイアウトの実装を助けるライブラリです。
- 公式サイト：http://urin.github.io/jquery.tile.js/
- ライセンス：MIT and GPL Licenses
- 開発：Hayato Takenaka (日本人)
jQuery vgrid (10件 - 0.76%)
可変グリッドレイアウト向けの和製フレームワークです。
- 公式サイト：http://blog.xlune.com/2009/09/jqueryvgrid.html
- ライセンス：MIT License
- 開発：Xlune (日本人)
jQuery AutoHeight (7件 - 0.53%)
heightline.js/jQuery Tileと類似した機能を持つ、jQueryライブラリです。
- 公式サイト：https://github.com/tinybeans/jQueryAutoHeight/releases
- ライセンス：MIT License
- 開発：Tomohiro Okuwaki (日本人)
jQuery isotope (6件 - 0.46%)
可変グリッドレイアウト向けのフレームワークです。
- 公式サイト：http://isotope.metafizzy.co/
- ライセンス：MIT License
- 開発：Metafizzy
fixheight.js (5件 - 0.38%)
heightline.jsと類似した機能を持つ、タイルレイアウトの実装を助けるライブラリです。
- 公式サイト：http://www.starryworks.co.jp/blog/tips/javascript/fixheightjs.html
- ライセンス：MIT License
- 開発：Koji Kimura
Twitter Bootstrap (3件 - 0.23%)
ウィンドウの横幅が広い時はブロック要素を12分割で幅指定、狭い時はタブレット・スマホ向けの分割無しの状態で表示する、レスポンシブWebデザイン向けフレームワークです。
- 公式サイト：http://getbootstrap.com/
- ライセンス：Apache License, Version 2.0
- 開発：Twitter Inc.
所感
世の中で騒がれているよりも、Twitter Bootstrapは利用されていないということが発覚しました。そして時代としては、可変グリッドレイアウトに少し傾きかけているという印象です。
どちらにせよ、マルチデバイス対応が必須の要件になっているのが興味深いですね。っというか、最近はネイティブアプリでさえ、こういうデザインに変わっていってますよね。
