「人が集まるWeb」のための一覧ページの作り方（2/2）

2015年9月4日

【Implement 01】jQueryプラグインを使った「均等グリッド型」一覧ページの実装

こういった一覧ページのUIは、具体的にどのように実装するのかをサンプルで見てみよう。非常にシンプルに実装しているので、ひとまずは、どんな要素が必要になるのか、基本的な動きなどを理解しておこう。これをベースに、どのようなカスタマイズや見せ方があるのかを調べていくとよいだろう。

jQueryプラグインで簡単実装

まずは均等グリッド型レイアウトを実装してみよう。ここでは、jQueryとプラグインを使うことで、非常に簡単に実装している。ここで利用しているのは、「matchHeight」というjQueryプラグインだ。

jQueryは、いまやWeb制作では欠かせないJavaScriptライブラリ（ほかのプログラムで使うために、さまざまな機能をまとめたもの）だ。また、jQueryは足りない機能を追加できるようになっており、拡張するためのさまざまなjQueryプラグインがリリースされている。「matchHeight」も、その一つだ。

では、実際のコードを見てみよう。01、02、03のように記述するだけで高さを均等に揃えることができる。画像のサイズやコンテンツのサイズが異なった場合は、もっとも高い要素にあわせられることになる。このように非常に簡単に実装ができるので、動きをつけたり要素の配置に工夫を施したい。たとえば、グリッド型の一覧ページのUIではリンクできる領域がわかりにくくなるため、動きをつけるという方法がある。04のようなコードを追加すれば、マウスを合わせるとサムネイルが大きくなる。

なお、ここでは、見た目をわかりやすくするために、マテリアルデザイン風なデザインのように仕上がる「Materialize」というCSSフレームワークを利用している。手軽に見た目を調整したいときに重宝するので、こちらも研究してみるとよいだろう。

<body>
 
  <div class="list">
 
  <div class="list-item">
 
  a<br>df
 
  </div>
 
  <div class="list-item">
 
  b
 
  </div>
 
  <div class="list-item">
 
  c
 
  </div>
 
  <div class="list-item">
 
  d
 
  </div>
 
 </div>
 
 <script src="lib/jquery-1.11.0.min.js"></script>
 
 <script src="lib/jquery.matchHeight-min.js"></script>
 
 <script src="js/match-height-demo.js"></script>
 
 </body>

01 HTMLの抜粋。シンプルなリストで構成されている。list-item クラスが一つのタイルとなる

$(‘.list-item’).matchHeight({
 
 byRow: true,
 
 property: 'height',
 
 target: null,
 
 remove: false
 
 });

02 JavaScript の抜粋

.list {
 
 display: -webkit-flex;
 
 display: -ms-flexbox;
 
 display: flex;
 
 -webkit-flex-wrap: wrap;
 
 -ms-flex-wrap: wrap;
 
 flex-wrap: wrap;
 
 }
 
 .list-item {
 
 display: -webkit-flex;
 
 display: -ms-flexbox;
 
 display: flex;
 
 }

03 CSSの抜粋。リストを装飾している部分。ここをカスタマイズすることで、独自の表現にすることが可能だ

.card-thumb {
 
 transition: 0.2s ease-out all;
 
 }
 
 .list-item:hover .card-thumb {
 
 transform: scale(1.2,1.2);
 
 }

04 マウスをあわせるとサムネイルが大きくなり、クリックできる領域であることを視覚的に示す

【Implement 02】masonry.jsによる「ランダムグリッド型」一覧ページの実装

Pinterestのように、ランダムな高さのグリッドレイアウトのサンプルも紹介しよう。コンテンツの高さにあわせて表示させるには「masonry.js」というjQueryプラグインを使うことで簡単に実装できる。このプラグインは高性能なので、いろいろと研究してみるとよいだろう。

ランダムグリッドの実装

このサンプルで利用している「masonry.js」は非常にカスタマイズ性が高いライブラリであるため、ここではシンプルな使い方を解説する。

01と02のように、非常にシンプルなコードで、異なる高さの記事を隙間なく整列させることができる。また、masonry.jsはレスポンシブWebデザインにも対応しているため、このサンプルでは画面サイズを変えると、アニメーションしながらレイアウトが変更される（03）。

また、このサンプルでは、画像が読み込み終わってから実行されるため、レイアウトが確定するまでに少し時間がかかっている。そういう場合には、CSSでいったん非表示にしたり、ローディング画像を表示したりといったことが有効であることも覚えておこう。

<body>
 
  <div class="list">
 
  <div class="list-item">
 
  a<br>df
 
  </div>
 
  <div class="list-item">
 
  b
 
  </div>
 
  <div class="list-item">
 
  c
 
  </div>
 
  <div class="list-item">
 
  d
 
  </div>
 
 </div>
 
 <script src="lib/jquery-1.11.0.min.js"></script>
 
 <script src="lib/masonry.pkgd.min.js"></script>
 
 <script src="js/demo.js"></script>

01 HTMLの抜粋。前ページの均等グリッド型と、ほぼ同様に、リストで構成されている

 
 
 (function() {
 
 $(window).on('load', function() {
 
 $('.list').masonry({
 
 // options
 
 itemSelector: '.list-item'
 
 });
 
 });
 
 })();

02 JavaScript の抜粋。maonry.js を使うことで、これだけで、動きのあるランダムグリッドが可能になる

03 ウインドウサイズを変えると、それに連動して隙間を埋めるように要素が移動する

グリッドレイアウトの使い分け

記事の一覧ページは、同じサイト内でもコンテンツの性質によって使い分けているケースもある。それぞれのメリット・デメリットを理解して、うまく組み合わせよう。

たとえば、時系列が重要なコンテンツをランダムグリッド型で実装してしまうと、順番がわかりにくくなり、ユーザーを迷わす原因となってしまう。一覧表示する際にもっとも重要な要素が、時系列に並ぶことなのか情報を多く目視できることなのか、写真なのかタイトルなのかなどをきちんと優先付けして、どのようなUIが最適なのかを考えよう。

一覧画面は情報過多になりやすい。「誰に」「何を」伝えるのかを考えて、レイアウトとUIを両立させて構築していこう。