概要

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

こんな方におすすめ

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

著者から一言

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

1. 情報検索
2. 情報入力
3. 情報共有/ 発信
4. 情報閲覧

• なぜ，このデザインパターンなのか？
• どうしてこれが効果的なのか？
• その妥当性はどこにあるのか？

目次

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

サポート

正誤表

このたび発行いたしました弊社発行物「スマートフォンUIデザインパターン」に以下の誤植がありました。

謹んで訂正いたしますとともに，読者および関係者の皆様にご迷惑をおかけしたことを深くお詫び申し上げます。

（2013年6月25日更新）

柱全編

以下のpdfも合わせてご確認ください。

• 柱部分の誤植について