目次

第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：バルーン型の告知／案内をやめる