ふろしき.js

Web + Mobile + UX + Performance Tech

1300の優良サイトが選んだ「ページレイアウト(Page Layout)」ライブラリ集 - タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインなど

1300の優良サイトを調査してみたシリーズ、第13回は「ページレイアウト(Page Layout)」です。

タイルレイアウト・可変グリッドレイアウト・レスポンシブWebデザインと、様々なページレイアウトの思想が時代の流れとともに生み出されてきました。

ふろしき.jsの調査では1300中110サイト(8.46%)にて、ライブラリ・フレームワークによる対策が確認されました。以下が、その一覧です。

heightline.js (56件 - 8.46%)

f:id:furoshiki0223:20131023003500p:plain
ブロック要素の高さを制御するライブラリです。文字列が含まれているブロック要素は、環境によって高さが変動します。本ライブラリは、複数のブロック要素の高さを一番大きいものに統一させることで、タイルレイアウトの実装を助けます。

jQuery Masonry (13件 - 1.00%)

f:id:furoshiki0223:20131023002726p:plain
各ブロック要素をウィンドウ内で、大きさに合わせてレンガのように隙間なく埋める見た目となる可変グリッドレイアウト向けのフレームワークです。

jQuery Tile (10件 - 0.76%)

f:id:furoshiki0223:20131023002823p:plain
heightline.jsと類似した機能を持つ、タイルレイアウトの実装を助けるライブラリです。

jQuery vgrid (10件 - 0.76%)

f:id:furoshiki0223:20131023002913p:plain
可変グリッドレイアウト向けの和製フレームワークです。

jQuery AutoHeight (7件 - 0.53%)

f:id:furoshiki0223:20131023003119p:plain
heightline.js/jQuery Tileと類似した機能を持つ、jQueryライブラリです。

jQuery isotope (6件 - 0.46%)

f:id:furoshiki0223:20131023003156p:plain
可変グリッドレイアウト向けのフレームワークです。

fixheight.js (5件 - 0.38%)

f:id:furoshiki0223:20131023003255p:plain
heightline.jsと類似した機能を持つ、タイルレイアウトの実装を助けるライブラリです。

Twitter Bootstrap (3件 - 0.23%)

f:id:furoshiki0223:20131023003010p:plain
ウィンドウの横幅が広い時はブロック要素を12分割で幅指定、狭い時はタブレット・スマホ向けの分割無しの状態で表示する、レスポンシブWebデザイン向けフレームワークです。

所感

世の中で騒がれているよりも、Twitter Bootstrapは利用されていないということが発覚しました。そして時代としては、可変グリッドレイアウトに少し傾きかけているという印象です。

どちらにせよ、マルチデバイス対応が必須の要件になっているのが興味深いですね。っというか、最近はネイティブアプリでさえ、こういうデザインに変わっていってますよね。

広告を非表示にする