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

BY 公開

モバイル WEB の UI デザインことはじめ

 

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

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

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

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

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

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

カード型

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

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

 カード型モジュールの例

リスト型

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

 リスト型モジュールの例

カルーセル

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

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

タブ切り替え型

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

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

アコーディオン型

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

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

リンクボタンと説明

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

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

2列ブロック

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

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

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

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

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

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

組み合わせた例

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

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

  AUTHOR

矢野 りん

Baidu Inc. / デザイナーー / Twitter : @yanorin / 北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。 フリーランスのデザイナーとして、メーカのWebコンテンツなどデザイン経験多数。 2011年12月 よりバイドゥ株式会社入社。自社プロダクトのAndroid向け日本語入力アプリ「Simeji」のUI設計を担当しています。その他新規事業企画など、できることはなんでもやる派。深圳と東京をいったりきたりするおかあさんプロダクトデザイナーです。身長152.2cm。/ ブログ(ものづくりにっぽん)