モバイルWebのUIデザインことはじめ : 第1回 ユースケースで決まるモバイルのファーストビュー

こんにちわ。主にモバイル向けのサービスをデザインしている矢野と申します。

この連載では、モバイル向けの、主に物理的に小さめの画面を対象にしたデザインを始めるにあたり、知っておくとよいことについて解説します。初回は、ファーストビューについてのお話です。

PCサイトのファーストビュー

PCサイトでも「アクセス直後に目に入るもの＝ユーザーが一番欲しい情報」であることが望ましいとされています。このアクセス直後の領域が「ファーストビュー」です。

PCの場合、異なるディスプレイの表示サイズに収まる大きさがファーストビューと考えられています。ファーストビューはディスプレイサイズが変わっても縦横比率にそれほど大きな違いはなく、基本は横長の領域になります。

PCサイトのファーストビューの例

モバイルサイトのファーストビュー

モバイルの場合、PCと違って「縦表示のとき」「横表示のとき」の２つの異なる表示比率があります。

スマートフォンを使っていればそこまでは想像できるでしょう。

では、これから作るWEBサイトはどちらの比率をより「重く見た」レイアウトにするべきか、その判断基準は何だと思いますか？

モバイルサイトのファーストビューの例 （iPhone） モバイルサイトのファーストビューの例 （Android）

それはWEBサイトのユースケースです。

ユースケースを想定したレイアウト

もしあなたのプロジェクトがブログやニュースなどのメディアサービスなら、ユーザーはスキマ時間に長文を読む目的でアクセスすることが多いでしょう。スキマ時間では片手でスマホを片手持ちしているユーザーが一般的ですから、この場合記事そのものの読みやすさを重視して、縦比率のビューを基準にファーストビューを設計します。

メディアサービスの場合のファーストビュー

製品やサービス紹介サイトの場合はどうでしょう。

写真や図などの画像が豊富なサイトにする場合、ユーザーは写真をよく見たいと考えて横方向の比率に切り替えて拡大しながら使う可能性があります。その場合は縦と横、どちらで表示してもちゃんとファーストビューが機能するよう考えます。

製品サイトのファーストビュー

どんな場合でもモバイルサイトの基本的な設計指針は「ナビゲーションではなくコンテンツが一番に目に入ること」です。

モバイル環境ではサイトのナビゲーションをたどってコンテンツを見つけるユーザーはまれで、検索やSNSから直接コンテンツに流入するユーザーが大多数です。ホームページやトップページを重視してファーストビューを設計するよりは、コンテンツがどういうふうに見えるかに集中して設計しましょう。

あまりおすすめできない設計

スマートフォンのように小さい画面では、ファーストビューをナビゲーションで埋め尽くすのはおすすめできません。

画面の大きいPCならページの先頭にナビゲーションが並ぶことに差し支えはないですが、モバイルでそれをやると肝心のコンテンツが見えなくなります。当たり前の話のようですが、PC向けサイトの設計に慣れているとやってしまいがちなので注意しましょう。とくにPC向けとスマートフォン向けで同じソースを使いながらスタイルの一部を変更するタイプの設計にありがちです。

おすすめできない設計例