ふろしき Blog

コンテンツサービスを科学する株式会社ブートストラップ代表のブログ

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は利用されていないということが発覚しました。そして時代としては、可変グリッドレイアウトに少し傾きかけているという印象です。

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

このブログの筆者について

川田 寛

コンテンツサービスの開発や運営代行を専門とする集団「株式会社ブートストラップ」の社長です。ネットではふろしきと呼ばれています。

2009年にNTTグループへ新卒入社し、ITエンジニアとしてクラウド技術・Web技術の研究開発と技術コンサルティングに従事。2015年よりピクシブに入社し、エンジニアリングマネージャー・事業責任者・執行役員CCOなど、様々な立場からコンテンツサービスの事業づくりに関わりました。2021年にメディアドゥへVPoEとしてジョインし出版関係の事業に関わったのち、2023年に独立しています。

関わってきたインターネット事業としては、ECサービスのBOOTH、UGCプラットフォームのpixiv(主に海外展開)、制作ツールのpixiv Sketch、VR・VTuber関連ではVRoid、Wikiサービスのピクシブ百科事典など、10を超える多様なCtoCコンテンツサービス。また、NTTドコモのすご得コンテンツ、メディアドゥのWeb3サービスであるFanTopなど、いくつかのBtoCコンテンツサービスにも関わってきました。

幸運なことに、私はコンテンツに関係する幅広いインターネットサービスのテクノロジー&ビジネスの知識を得ることができました。これを日本のコンテンツ発展に役立てたいと思い、株式会社ブートストラップを創業しました。

このブログでは現在、出版社やIPホルダー、ライセンサーといったコンテンツに関わる人々に向けて、インターネット事業に関するTipsや業界内のトレンドなどの情報を発信しています。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム