モバイルWebのUIデザインことはじめ : 第2回レイアウトのこと〜モバイルWebのレイアウトパターン

モバイル用の画面設計はPC以上にパターン化されています。デザイナーは部品の組み合わせのバリエーションを用いて、サイトの画面を設計します。

レイアウトでなくモジュールで考える

モバイルコンテンツの画面は、部品をいくつか組み合わせた「モジュール」で構成します。目的に合ったモジュールを選んで、さらにそれを組み合わせると「モバイルのウェブページ」が出来上がります。モジュールの種類と用途を覚えてしまえば画面設計は簡単です。今回はよく見かけるモジュールを紹介します。

なぜモバイルのWebはモジュールによって、PCよりうんとパターン化された外観や用途を持つのでしょうか。その理由は、モバイルコンテンツにとって「移動中やちょっとしたスキマ時間に迷うことなく操作がわかる」ということがとても重要だからです。

それぞれのコンテンツが独創的な操作性を持っているよりも、共通化、標準化が進んだほうがユーザーの学習コストは下がります。このことは「ユーザーがどういう意図を持ってコンテンツを活用しようとしているのか」をよく理解していることが、適切なモジュール選びには重要だ。という考え方にもつながってきます。

ユーザーの意図に考えを巡らせながら、それぞれのモジュールの例をみてみましょう。

画像と、その画像に関連するリンク先タイトルとをカード型にまとめたモジュールです。画像の場所に場所と時間のようなコンパクトな情報を表示することもあります。リンク先を持たせる場合、カード全体に１つのURLを割り当てます。

カード型は、現時刻と前後１時間程度の交通機関の時刻表。のようにタイムリーな情報をコンパクトに見せたり、記事のサマリーを読ませたりする目的で使います。

カード型モジュールの例

商品一覧や、地名、見出し一覧のように、文字情報を一覧で提供する場合に使います。テキストの右側に矢印を置いて、個々のリストがリンク先を持っていることを強調します。単なるテキストリンクよりも、上下の余白を大きく取ってタップしやすくデザインしているのが特徴です。１つのモジュールの表示高さは統一します。

リスト型モジュールの例

限られたスペースで商品画像や記事の内容を印象づける画像を複数見せる方法です。横長の比率にして最大表示画像数を示すマーカーが１画面に収まるようにします。

カルーセルモジュールの例

別ページを再読み込みせずに表示する情報が切り替えられるモジュールです。縦持ち時の幅サイズに配慮して、２個程度の切り替えが適しています。

タブ切り替え型モジュールの例

別ページを読み込みせずに、１つの親見出しに関連ある子の項目を展開するためのモジュールです。いっけんリスト型のように見えますが、タップで下方向に子リストを展開したり、高さサイズを拡張してコンテンツを表示するといったインタラクションを持たせます。

アコーディオン型モジュールの例

問い合わせ窓口やログインのように、単なるリンク先というよりは道具として積極的に活用してもらいたい入り口はボタン風なデザインにして強調することがあります。リンクボタンと説明をセットにしたモジュールです。

リンクボタンと説明モジュールの例

サムネイルとリンクタイトルのセットを縦持ち時に２列で表示するモジュールです。表示幅が増えたとき列の数も増えるように実装するとなお良いです。カード型に似ていますが、こちらは画像を使ってリンク先への興味をそそることが主な目的で利用します。

２列ブロックモジュールの例

左にサムネイル、右にディスクリプションのセットを１モジュールとして掲載します。ディスクリプションの増減で表示高さが変わる前提です。Eコマースサイトの商品画像と商品名、価格、概要の掲載方法として活用しやすいです。

画像とディスクリプションの例

モジュールは、異なる解像度の画面に配慮して幅や表示サイズが変化することを前提にしてデザインします。グラフィックツールで静的なモックアップを作っていると、この前提を忘れてしまうことがあるので注意しましょう。

最後に、モジュールを組み合わせた例です。

複数のモジュールを組み合わせた例