WD Online

課題解決のためのUI実装講座 Web Designing 2015年9月号

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

グリッド型のUI表現の形がわかったところで、そのシンプルな実装をサンプルを使って解説していこう。デザイナーと打ち合わせて、どちらの表現が適切なのかを探っていこう。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

【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 マウスをあわせるとサムネイルが大きくなり、クリックできる領域であることを視覚的に示す
23472844abf8600a3d540199b5e90c9a.jpg
05 シンプルながら、レスポンシブWebデザインになっている

 

【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 を使うことで、これだけで、動きのあるランダムグリッドが可能になる
56bc056a868b2cc7e271133f4f2d0a35.jpg
03 ウインドウサイズを変えると、それに連動して隙間を埋めるように要素が移動する

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

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

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

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

 

5b3919298d9b025eaf8b26da0ba3bdc3.jpg
Text:岩上貴洋
大学在学中から、アーリーステージを対象とした独立系投資会社にて、投資業務、コンサルティング業務に従事。2007年、(株)LIG創業。 http://liginc.co.jp/

 

d74d27337fe634067512aa525bb9a594.jpg
Text:林優一
ソーシャルゲーム開発会社にてUI/UX開発本部本部長として、フロントエンド設計・開発及びマネジメント業務に従事。その後、(株)LIGにフロントエンドエンジニアとして入社し、現在、同社のCTOを務める。

掲載号

Web Designing 2015年9月号

Web Designing 2015年9月号

2015年8月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

ECビジネス、再強化・最強化/LINE@超入門

サンプルデータはこちらから

■ 特集:ECビジネス、再強化・最強化
 越境、O2O、オープン化、キュレーション、メディア化‥‥だけじゃない!

■ 集中企画:これから始めたい人のための『LINE@』徹底ガイド
 リアル店舗やECショップに最適! クーポンなども使える話題のマーケティングツール

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
  倉敷中央病院 研修医実技トライアウト/ちゃんりおメーカー/オクリモヨウ/あいうえお作文RAP プロジェクト/集中.jp/360° Trip in Sunset Beach Corona Extra/Nike ? Ge? Kendini/KAMABOKO ROAD TO 1000 900周年 祝っている場合じゃない。/北千住デザイン

 ナビゲーターが選ぶ注目のデジタルコンテンツ
  眞鍋海里:[バズ施策]悶々としたら手を動かす:#HandsOff
  築地 Roy 良:[デジタルプロモーション]メイクを変えるきっかけ:Makeup Genius
  仲 暁子:[Webサービス]老舗の羊羹のように:Trello
  神谷憲司:[IoT]Less is moreの精神で:Geoph

■ デジタルプロモーションの舞台裏
 6年の歳月が生んだ、オロナインのWeb動画プロジェクト

■ モバイルビジネス最前線
 Yahoo! JAPANスマートフォントップページ:情報は「読む」から「見る」時代へ

■ モノを生むカイシャ
 いま注目したい制作会社の強みを探る:Goodpatch

■ ECサイト業界研究
 越境EC:海外市場で成功するために乗り越えるべき5つの壁

■ 行動デザイン塾
 「行動デザイン」って何?

■ サイト改善基礎講座
 自社のシナリオ磨きは、恋愛術の成長のごとし

■ 課題解決のためのU実装講座
 一覧ページにおけるグリッドレイアウトのUI表現

■ 解析ツールの読み方・活かし方
 コンバージョンにつながるアクセス向上の勘所

■ Bay Area Startup News
 メインはシリコンバレーからサンフランシスコへ。革新を起こすスタートアップが生まれる土壌とは?

■ 知的財産権にまつわるエトセトラ
 よくある家族写真に著作権は発生するのか?

■ 清水幹太の「Question the World」
 Yancey Strickler(Kickstarter 共同創業者・CEO):超文系こじらせ兄ちゃんがつくりたかった「道具」

■ ツクルヒト
 小林和史(美術家):一枚紙で生む昆虫に宿る世界の「切り口」

■ Column
 ハギハラ総研:10年でメディア環境はどう変わったか
 最果タヒの「詩句ハック」:第15回 詩ェイク
 デザインにできることMonologue:Vol.140 花の力
 エキソニモのドーン・オブ・ザ・ボット:誰の呼びかけにも応えるシリ軽「Siri」に人はどう向き合えばいい?

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています