WD Online

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

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

Web技術の進化とともに、その表現方法も多様化し、伝達手段の可能性も広がってきた。この連載では、Webを通じたコミュニケーションを行う際の課題、それをUIで解決している実例、そのシンプルな実装方法を解説していく。今回は、多くの下層ページ(記事など)がある場合に一覧ページを作成する際、有名サイトで使われているグリッド型のUI表現を紹介するとともに、シンプルな実装を解説する。

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

一覧ページにおけるグリッドレイアウトのUI表現

「人が集まるWeb」というテーマでサイト構築を考える際、「誰に」「何を」伝えたいのかということが重要になってくる。その主役は、あくまでもコンテンツであり、UIはそれをアシストする道具となる。そのコンテンツは、「ユーザーの不便や課題を解決する」「ユーザーに喜びを与え、新しい発見を提供する」ものでなければならない。これは必ずプロジェクトメンバーと共有しておこう。そして、そのKPIは、回遊率や滞在時間などで測定することになる。

その際、回遊率を高める手法として、大きく三つのポイントが存在する。一つ目は、コンテンツの質にあわせた情報整理を行い、視認性の高い一覧ページを制作すること。二つ目が、偶発性を高めることで、ユーザーにとって価値ある情報を届ける機会を最大化すること。3つ目が、読了したユーザーに対し、タイミングよく他のコンテンツをレコメンドすることだ。

そこで今回は、一つ目のポイントである一覧ページに焦点を絞り、よく使われているUIを紹介するとともに、その実装方法を簡単に解説する。実は、一覧ページは、二つ目の「偶発性」にも関わってくる。ここで実装を紹介するのは、非常にシンプルな例だが、それゆえカスタマイズの幅も広い。自分のサイトにどんなUIが適しているのかを考える際の一助にしてほしい。

6970bd61368ca48ea79ffddc8ba9ac.jpg
さまざまな下層ページを集約した例
ローソンの「商品・おトク情報
新製品やキャンペーンの情報が、同じ大きさの画像とテキストで表示されている。典型的な「均等グリッド型」の一覧ページ

画像付きの記事一覧ページの例
AdGang
高さの違うパネルを並べて一覧表示している。「ランダムグリッド型」の一つの形だ。横幅も異なる実装の場合もある

 

【Case Study】有名サイトにおける回遊性を上げるための一覧ページの例

メディアサイトなどでは、記事の一覧をどのように見せるかは非常に悩ましい問題である。一覧ページは、回遊率を上げるために非常に重要なUIパーツであるが、画像やテキストの量も多いため、うまく整理するのが難しいからだ。そこで、有名サイトで使われている一覧ページのUI表現を見てみよう。

均等グリッド型

均等グリッド型は、一つひとつの記事の高さが揃えられ、1列に二つ以上の記事が含まれるUIである。一覧性も高く、画面サイズによって段組が変わるレスポンシブWebデザインに対応しやすい。

これを非常にうまく活用しているのが「北欧、暮らしの道具店」のWebサイトだ(01)。均等な高さで商品を並べることできれいな印象を与え、配置が予想しやすい。サイトのデザインともマッチしてわかりやすいUIとなっている。

f22a81a272b401a44e0df662e2450384.jpg
01 均等グリッド型の例
北欧、暮らしの道具店
北欧の家具や雑誌を始め、ライフスタイルに関連する商品を販売しているECサイト。商品の販売以外にも、「お花と上手に暮らすコツ」や「はじめてのDIY」、お弁当特集やおやつ特集など、メディアとしてのファンも多い

 

ランダムグリッド型

高さをあわせず、かつ余分なスペースをつくらないで敷き詰めるUIである。こちらもレスポンシブWebデザインに対応しやすい。無駄な余白がないため、ページ全体の高さが抑えられるという特徴がある。JavaScriptを使うと簡単に実装できるが、CSSのみで実装することも可能であり、CMSと組み合わせた例もよく見かける。

このUIは、「Pinterest」に代表されるように写真をきれいに見せるサイト(02)や、コンテンツの更新が頻繁なサイトによく使われる。また、異なるサイズで画像を表示できるので、画像サイズが統一できない場合でも対応できる。

資生堂の広報サイトでは、数多くの記事をランダムグリッドで配置することで、1画面で多くの記事が見られる状態にしている(03)。このサイトのように更新が多いサイトでは、新規追加された項目がすぐにわかるので、非常に有効だ。

0988f3a4ca7718bcb92e9e1943247f64.jpg
02 ランダムグリッド型の例 その1
Pinterest
Web上にある画像を「ピン」をすることで集めることができ、画像のブックマークツールとして世界的に急成長している。SNS的な要素も内包し、他ユーザーのボードを見ることもできる
904bd3e111666a56f2ecd0b2a192090a.jpg
03 ランダムグリッド型の例 その2
こちら、銀座 資生堂 センデン部 資生堂
自社商品のパッケージやグラフィックのデザイン、コピーライティングなど、クリエイティブに関わる背景を発信している。また、世界で活躍するクリエイターとの対談など、読み応えのある記事も掲載している

 

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」に人はどう向き合えばいい?

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

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