SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

MarkeZine Day(マーケジンデイ)は、マーケティング専門メディア「MarkeZine」が主催するイベントです。 「マーケティングの今を網羅する」をコンセプトに、拡張・複雑化している広告・マーケティング領域の最新情報を効率的にキャッチできる場所として企画・運営しています。

直近開催のイベントはこちら!

MarkeZine Day 2025 Retail

UIウォッチング ~マルチデバイス時代のインターフェースを考察する~

一覧表示のインターフェースがUXを向上させる

一覧表示のインターフェースに見られる工夫2〜同じ要素の異なる見せ方〜

 次は、ブロック表示の例です。

iOS版 IMDb
iOS版 IMDb

 映画と俳優のデータベースであるIMDbでは、スマートフォン版のアプリのみ、一覧表示をブロックとリストのどちらで表示するか、切り替えができるようになっています。タブレット版のアプリではこの機能は存在しません。スマートフォンのように画面が小さく縦に長いデバイスでは、パネルを段々に並べるよりも、リストを縦に積むほうが、より見やすいためでしょう。特に、文字情報を含む度合いが増すほど、縦に積んでゆくほうが読みやすくなります。

Webサイト版 Google+
Webサイト版 Google+

 Webサイト版のGoogle+では、ブロックの段数を、レスポンシブ的に画面幅に合わせ1~3段で可変する状態と、1段固定の状態で、恣意的に切り替えることができます。これはアプリ版にはなく、Webサイト版のみの機能です。一覧のスクロール表示では、目を左右に動かさない1段表示のほうを見やすく思う人もいるから、という配慮から来ていると思われます。

一覧表示のインターフェースに見られる工夫3〜同じ機能の異なる見せ方〜

 最後にカレンダー表示についても見てみましょう。

iOS7標準 カレンダー
iOS7標準 カレンダー

 iOS7標準カレンダーは、年・月・日の、3段階のカレンダー表示を下ってゆき、日レベルのカレンダー表示で、設定した各々の予定を見ることができます。月レベルのカレンダー表示では、予定の有無までを確認できます。

iOS版 Sunrise
iOS版 Sunrise

 対して、Sunriseというカレンダーアプリでは、画面の上下をエリアで分け、上をカレンダー、下を予定のリストで表示し、スクロールによって両方が同期して動くインターフェースとしています。加えて、「今日」の日時に戻る「赤い三角印」のボタンと、その三角印の傾き加減によって「今日」からどれだけ離れているかを示すよう、工夫を施しています。カレンダー、予定一覧、三角印の傾き、これらが一緒に連動するところが気持ちよく、秀逸なポイントです。さらに、左右のスワイプによって表示形式を切り替えることができます。他のカレンダーアプリでは見ることがない独特なインターフェースですが、使いやすく、よく練られています。

 カレンダーでは「年月日」と「予定」を、どのようなインターフェースで見せるかがポイントとなりますが、同じカレンダーという機能であっても、インターフェースによって機能性や魅力は大きく変わってきます。

次のページ
なぜ一覧表示がUXに直結しやすいのか

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
UIウォッチング ~マルチデバイス時代のインターフェースを考察する~連載記事一覧

もっと読む

この記事の著者

原田 秀司(ハラダ ヒデシ)

Webサイトやアプリの設計を行うインターフェースデザイナー、Webディレクター。また、TV画面で表示するインターフェースや、ゲームコントローラなどを使った設計なども行っている。自著『UIデザインの教科書』(翔泳社)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2014/07/23 10:00 https://markezine.jp/article/detail/20390

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング