スマートフォンUIデザインパターン
~心地よいユーザーインターフェースの原則~

書籍の概要

この本の概要

スマートフォンのアプリ,サイトをデザインするうえで,知っておかなければならない基礎知識を1冊にまとめました。
「とにかく機能は豊富だけど,いまいち使いづらく,イライラする…」というありがちな落とし穴を抜け出し,使いやすく魅力的なスマートフォンアプリにするためのポイントを「情報検索」「情報入力」「情報共有」「情報閲覧」といったスマートフォンの操作シーンごとに,デザインパターンを体系化して解説しています。

こんな方におすすめ

  • スマートフォンアプリやスマートフォン用Webサイトのデザインの基礎を知りたいデザイナー,プランナー

著者の一言

「スマートフォンのUI 設計を,もっと効率的に行えないだろうか?」
この本を執筆するきっかけは,そんな些細な悩みから始まりました。
2012 年,スマートデバイスの台頭に合わせて,私のところにやってくる相談依頼の多くが,これまでのPC 向けから「スマートフォンのWeb 制作」や「アプリケーションの開発」へと移っていきました。手に取るように実感できる変化の中で,私と同じような悩みを抱える人たちの一助になればと思い,完成したのが「スマートフォンUI デザインパターン」です。
一般的に,Web 系と言われる開発現場の,「プランナー」「ディレクター」「デザイナー」など,少なくとも「インタフェースの設計」に関わる方たちは,日々,目の前の業務に追われています。単なる論評としてではなく,あくまでも「実用書」として活用できるよう,これまでの経験と実例をもとに,設計のポイントがすぐにわかるよう心がけました。
ヒントを得た本は,クリストファー・アレグザンダーの『パタン・ランゲージ -環境設計の手引-』です。
アレグザンダーは,著書の中で「個々のパターンが集合しランゲージを形成することで,1つのコミュニティが成り立つ」と説明しています。
これをWeb に置き換えると,いくつかの「デザインパターン」が集まって,情報と機能を併せ持つ「インタフェース」が形成され,1 つの「Webサイトやアプリケーション」が成立する,と言えると思います。
Web サイトやアプリケーションも,言うなれば「デザインパターンの集合体」でしかありません。
デザインパターンの集合体として,完成したWeb サイトやアプリケーションは,意匠家のそれと同じで「設計思想」が感じられるものです。スマートフォンUI のデザインパターンは複数ありますが,何かひとつの目的を達成させる画面を別々の人に設計してもらうと,各人が考えた様々なインタフェースが出来上がります。ただ,その中でも,うまくデザインパターンを組み合わせて設計された「よいインタフェース」と,そうでない「悪いインタフェース」ができることがあります。
その違いはどこにあるのでしょう?
ひとつ鍵になるのは,それが「利用者の行動を想定した設計なのかどうか」というところにあると思います。
そこで,本書は次の4 つのシーンに分けて構成しました。

  1. 情報検索
  2. 情報入力
  3. 情報共有/ 発信
  4. 情報閲覧
これらは,スマートフォンを手にしたユーザーの行動を大別したものです。それぞれのシーンごとに,実際,よく目にするWeb サイトやアプリケーションの事例を踏まえながら,スマートフォンUI のデザインパターンの考察とメリット/ デメリットをまとめてあります。
これから,スマートフォン向けのWeb サイトやアプリケーション開発に関わる方々が,いざ設計となった場合に,本書を手に取って想定される利用シーンをひもとけば,そのデザインパターンの善し悪しがわかってくることと思います。
「スマートフォンならではの,何か特別な技巧を使わない限り,ユーザーが満足するUI なんてできないのでは?」
決して,そんなことはないのです。
むしろ,「普遍的に使いやすいスマートフォンUI」は,「基本的なデザインパターンの組み合わせ」から成り立っていることのほうが多いと感じます。
設計者の腕の見せ所は,まさにここにあるのです。1 つ1 つのデザインパターンの集合が「単なる部分の総和」ではなく「相乗効果を持つインタフェース」となり得るには,そこにどんな設計思想を「シグナル」として打ち込むかに尽きると思います。
  • なぜ,このデザインパターンなのか?
  • どうしてこれが効果的なのか?
  • その妥当性はどこにあるのか?
設計したインタフェースに対して,クライアントから説明を求められることもあるかもしれません。「もっと,華やかなギミックを取り入れたUI の方がいいのではないか」と詰め寄られることもあるかもしれません。
そんな時は,ぜひ本書を活用いただき,基本に立ち返ってインタフェースを設計いただければと思います。設計者の意思,その思想が感じられる「最良のインタフェース」が提供できることを願って。

目次

第1章 よいスマートフォンUIの4原則

原則1.無駄な要素が削ぎ落とされている

小さすぎる画面

要素は情報と機能に分けられる

  • 情報
  • 機能

原則2.指で操作しやすい設計がなされている

指先を使った操作

目標のサイズと位置関係

  • 1.目標のサイズ
  • 2.位置関係

原則3.目的達成までの手順が少ない

情報入力の難易度

ユーザーの仕事を減らす工夫

  • 1.画面遷移のフローが少ない
  • 2.タップ数を減らす
  • 3.要素そのものを減らす

原則4.高速化に配慮した工夫がされている

低速なモバイルデバイス

  • 1.スマートフォン用の画像を準備する
  • 2.画像ファイルを1つにしてリクエスト数を削減する
  • 3.必要ない画像は削除する
  • 4.JavaScriptによる動的表現を最少限に留める
  • 5.メモリ消費を小さくする

第2章 情報検索のデザインパターン

アイコンはアクションと1対1で対応させる

なぜ,アイコンの内容が伝わらないのか

直感的にイメージしやすいアイコンにするには

  • ステップ1:アイコンの機能ごとにカテゴリを分ける
  • ステップ2:ユーザーに伝わらなければならないことを明確にする
  • ステップ3:単純なイメージの組み合わせで表現する

アイコンではなくテーブル形式のナビゲーションにしてみる

アイコン型メニューのデメリット

カテゴリの特徴をとらえ,最適なナビゲーションを提供するためのポイント

  • ポイント1:同階層のメニュー数を把握する
  • ポイント2:各メニューのラベリングの長さを調べる
  • ポイント3:アイコンとしてイメージ化しやすいかどうかを調べる

ナビゲーションは直感的に操作できる形状と質感にする

ナビゲーションとして機能するかどうか分かりにくいメニュー

ウェブでは当たり前のことが,スマートフォンでは実現できない

手がかりのポイントは形状,質感,記号追加にあり

  • ポイント1:形状
  • ポイント2:質感
  • ポイント3:記号追加

アイキャッチとなる記号や図形には一貫性を持たせる

手がかりがあっても使いにくいナビゲーション

まずは,手がかりのパターンを知る

  • 1.遷移
  • 2.開閉
  • 3.展開
細部にこだわったUIこそ,使いやすさの第一歩

  • ポイント1.別々の記号や図形に,同じ意味を持たせない
  • ポイント2.同じ記号や図形なのに,異なる意味を持たせない

テーブル型ナビゲーションの選択範囲は最大限確保する

押してみても反応しないナビゲーション

押せる範囲が分からないことは,ユーザーのストレスを助長させる

  • 構成要素を把握する
  • 選択範囲を最大限保証する

ユーザーが全体像を想像できるメニューはプルダウンにする

知ってる場所をすぐに選択したいのに,思うようにいかないメニュー

鍵は階層構造の整理とプルダウンメニュー化にあり

  • 1.階層構造を整理する
  • 2.全体像を想像できるものはプルダウンメニューにする

主要画面に遷移するグローバルナビゲーションは,どの画面からも起動できるようにボタンで配置する

トップに戻らないと別のコンテンツを表示できない

大通りとなる道筋を示し,ボタン1つで表示できるようにする

  • 1.このサイト(アプリ)の主要画面は何かを整理する
  • 2.ヘッダーエリアにボタンを設置する
  • 3.ボタン押下時のアクションを考える
  • ドリルダウン型
  • ポップアップウインドウ型
  • 画面スライド型
  • メガドロップダウン型

ラジオボタンはラベル部分も選択可能にする

タップしてもチェックが変わらないラジオボタン

選択可能領域を大きくする

  • 1.ラベル部分も選択可能にする
  • 2.選択領域の囲みを作る

検索結果が表示されていると分かるようにする

検索実行ボタンを押しても,何も切り替わらない画面

スマートフォンでは,ブラウザの縦スクロールに気づきにくい

アクション実行後の結果をファーストビューで見せるために気をつけること

  • 1.検索連動型広告は非表示とするか,末端に移動させる
  • 2.キーワード検索,詳細検索などの検索エリアをファーストビューに表示させない
  • 3.検索結果だと分かるように,タイトル,ヒット数,表示件数などを強調する

検索実行までのステップが発生する場合には,現在のステップが何かを明示するとともに,エラーメッセージに注意する

検索の条件指定が分かりにくい画面

開閉するテーブル型ボタンに隠された入力欄

入力が複数ステップに分かれる場合のインタフェース設計

  • 1.入力ステップを示す道標を作る
  • 2.ボタンの表現を具体化する
  • 3.ユーザーに伝わるエラーメッセージにする

第3章 情報入力のデザインパターン

性別,年齢など,ユーザーにとって明白なものはラジオボタンで選択させる

機能的に問題のない問い合わせフォームだが,どこか使いにくいのはなぜか

最適な入力方法を検討せずに設計されたフォーム

  • ポイント1:ユーザーにとって自明なものかどうかを考える
  • ポイント2:選択項目の数を把握する
  • ポイント3:テキスト入力は,複数の入力エリアに分けすぎない

入力項目,記入例,フォームの3つの関係を分かりやすくレイアウトする

「どこに」,「何を」,「どのように」,入力すればよいか分からないフォーム

表組のレイアウトではなく,画面横幅を最大限活用したデザインにする

横幅を広げた「1ブロックで1つの入力が完結する」レイアウトのメリット

  • 1.入力項目とフォームの関係性が分かりやすい
  • 2.入力例やサンプル表記を詳しく掲載できる
  • 3.エラー表記をブロック単位で行えるため,どこを直せばよいかすぐに分かる
  • 4.拡大・縮小をしなくとも閲覧できる

アプリでは二者択一の選択項目に,スライドバー型のチェックボックスを活用する

PC版ウェブアプリと同じ構成が,スマートフォンでは操作性に弊害をもたらす

スライドバー型のチェックボックスを有効活用する

  • 1.選択範囲が大きいため,1回のタップで切り替えが可能となる
  • 2.スライド内部のテキストで,実行後にどのような設定になるか想像できる
  • 3.タップだけでなく,左右のスライドでも変更できる
  • 4.iOSの各種設定画面と似ているため,学習効率がよい

プルダウンメニューやチェックボックスは,ラベル部分も選択可能とする

何度押しても反応しないメニュー

ユーザーは自分の思い込みで操作してしまうもの

選択項目の使い勝手をよくする3つのポイント

  • ポイント1.ラベルを選択できるようにする
  • ポイント2.選択可能領域を囲む
  • ポイント3.アイキャッチを追加する

ユーザーが読み取りにくいエラー内容の表示は行わない

全体を確認できないエラーメッセージ

吹き出し型のエラーメッセージをスマートフォンで表示させる場合の注意点

  • 1.簡潔なメッセージとなる文字数
  • 2.入力項目は1行に1つずつ配置する

プルダウンは1つのメニューの文字数に注意し,10文字を超えるような場合にはラジオボタンを採用する

全体を把握できないプルダウンメニュー

1.プルダウンメニューを採用し続ける場合

  • メニューの文字数
  • メニュー名の抽象度
2.プルダウンメニューを採用しない場合

エラー内容の表示順序は入力項目の順番と同じ扱いにする

どこを直せばよいか分かりにくいエラーメッセージ

上部表示のエラーメッセージで注意すべき3つのポイント

  • 1.配置
  • 2.遷移
  • 3.表現

第4章 情報共有/発信のデザインパターン

情報共有のための機能をまとめる場合には,冗長なアイコンにならないようにデザインする

一体,どこからシェアするのか分からない

アイコンの意図が伝わらず,ページ末端にもシェア機能が存在しない

  • 問題点1.アイコンの持つ意味合いが伝わらない
  • 問題点2.ページの途中と末端にシェア機能が存在しない
アイコンのカテゴリを見直し,各所にシェア機能を配置する

  • 1.無理にアイコン化しない
  • 2.コンテンツエリア内にシェア機能を配置する

シェアボタン選択後に,現在どのような状況なのかをユーザーに伝える

シェアボタンを押してみたが,何の応答もなくなってしまう

システム側のステータスが分からない

表現の違いだけで本質は同じ意味を持つ

  • 1.プログレスバーを表示する
  • 2.ロード中を示す矢印を表示する
  • 3.ポップアップウィンドウを表示する

シェアアイコンは指で問題なくタップできる大きさにする

シェアアイコンが小さすぎて使いづらい

アイコンをきれいに並べても,使い勝手がよくなるとは限らない

  • 1.アイコンの大きさが小さすぎる
  • 2.アイコン同士が近すぎる
アイコンは指でタップできる大きさを確保し,配置する個数に応じて距離のバランスを取るようにする

  • 1.アイコンの大きさの見直し
  • 2.アイコンの個数の見直し

共有先が複数ある場合には,アイコンではなくボックス型のボタンにする

シェアアイコンが複数あって操作しにくい

アイコンが複数ある場合の対処法

  • 対処法1.アイコンはアイキャッチに使用し,ボックス型のレイアウトで選択範囲を大きく取る
  • 対処法2.最も使われる共有機能をボックス型で配置し,それ以外をアイコンとしてまとめる
  • 対処法3.利用頻度の状況から共有機能の取捨選択をし,アイコンの個数を減らす

同一画面内に複数のシェア機能を設置しにくい時には,シェア機能のみをポップアップ表示させる

ページ下部にメニューやリンクなどの要素が多すぎて分かりにくい

共有機能以外に掲載しなければならない情報が多すぎる

  • 他の要素があっても,共有機能の見落としがないようにする
  • 複数の共有機能をポップアップ表示させる
  • 1.ポップアップ内に複数のアイコンを配置する
  • 2.ポップアップ内に複数のブロック要素をボタンとして配置する

第5章 情報閲覧のデザインパターン

ローテーションメニューは,左右のフリックに対応していると分かるデザインにする

複数のイメージが切り替わることが分からないデザイン

フリックの存在に気づかせる3つの方法

  • 方法1:フリックだけでなく「矢印」ボタンを配置する
  • 方法2:複数のローテーションメニューがあることを伝えるためのアイキャッチを配置する
  • 方法3:左右に半透過状態のビジュアル要素を配置する

縦長のフリック領域を連続させない

縦にスクロールできないトップページ

連続した左右フリック対応領域により,本来の閲覧が阻害される

改善のポイント

  • 1.フリック領域を連続させない
  • 2.フリック領域の大きさを各種端末で調べる

スマートフォンサイトではページ上部にすぐに戻れる機能を追加する

ページ上部にすぐに戻りたいのだが…

各端末の基本機能でも違いがある

ページ上部に戻る機能を設置する

  • 1.コンテンツ終了部分にテキストリンクを設置する場合
  • 2.フッターエリア部分にテキストリンクを設置する場合

文字の読みやすさをサポートするフォント切替/サイズ変更機能を実装する

長文が延々と続くコンテンツ,スマートフォンで見るのは至難の技

閲覧しやすいフォント,フォントサイズはユーザーごとに異なる

  • 1.フォントの種類
  • 2.フォントサイズ

複数の画像表示では,ページ切り替えではなく追加読み込み機能を実装する

ページ切り替えに手間がかかるインタフェース

PCと同じページング機能は,スマートフォンには不向きである

  • 1.操作方法の違い
  • 2.画面解像度の違い
ページングさせずに,追加読み込み機能で対応する

  • パターン1:画像一覧の末端に追加読み込みボタンを設置する
  • パターン2:画像一覧の末端までくると,自動的に追加読み込みが動作する

画像を見やすくするには,「拡大後のフリック切り替え」か「一覧での表示切り替え」を実装する

小さすぎてよく分からない画像

ユーザーは大きい画像で比較したい

  • パターン1:拡大ページで左右フリックに対応させる
  • パターン2:サムネイルの大きさを切り替えるサブメニューを用意する

ユーザーの閲覧を妨げる過度な宣伝や案内は表示しない

サイト訪問と同時に突然表示されるバルーン

意図しない情報は表示させない

  • パターン1:閉じるボタンを明確にする
  • パターン2:表示時間を設定する
  • パターン3:バルーン型の告知/案内をやめる

著者プロフィール

鈴木雅彦(すずきまさひこ)

1978年生まれ。株式会社インクスにて,金型設計のインタフェース開発に従事後,独立行政法人高齢・障害・求職者雇用支援機構にて,主に発達障害,視覚障害など様々な障害者に対する職業支援やPCを使った職場環境適応訓練などのコンサルティング業務を経験。
その後,株式会社ミツエーリンクスにて,ウェブサイト構築に関わるプランナーとして上流工程の要件定義から情報構造の設計業務に従事。2008年,インクスの同期だった山谷,木下とともに株式会社ミルの設立に参画。2013年4月,スマートフォン向けのUI設計やUXデザインを専門とする株式会社サインを設立。ウェブおよびスマートフォンアプリのUI/AIなど全般を手がけている。
東北大学大学院情報科学研究科修士課程修了(情報科学)