縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック
書籍情報
発売日 : 2023年04月21日
著者／編集 : 池田 拓司
出版社 : 技術評論社
発行形態 : 単行本
書籍説明
内容紹介
普段ユーザーとしてサービスを使っていても、「なぜこの配色になったのか」「ボタンがなぜここにあるのか」といったことを考えることは少ないと思います。しかし、そのような普段目に留まることのないような何気ないデザインも、すべて意図があって作られています。そして、使いやすい・わかりやすい・楽しいと感じられるサービスの陰には、細かなＵＩデザインの工夫が丁寧に積み重ねられているはずです。本書では、そういった工夫をテーマごとに分けて掘り下げました。色や文字といったＵＩデザインを構成する基本的な要素から入り、具体的な機能やコンポーネントについて、そしてサービスを使うユーザーの体験を意識したデザイン、ツールやコミュニケーションにも着目します。最後の章では、実践から少し離れて考えたことにも触れています。
目次
目次
第1章：色、文字、動きによる見せ方の工夫
赤の使い方──色が与える直感的な印象を活かす
赤が与える基本的な印象
数字表現での赤
赤の効果的な利用法
あえて赤を避けている事例
削除ボタンでの赤
赤の効果的な利用法
赤を使わないほうがよい場面
インジケータでの赤
多い状態が赤の効果的な利用シーン
少ない状態が赤の効果的な利用シーン
上手に配色するためのコツとテクニック
完成イメージが湧く配色を早くから考える
テーマカラー以外の色も合わせて検討する
構成と配色をセットで検討する
無彩色に一手間加えた表現
寂しい印象に見えるときには少しだけ色を入れる
グレーではなく「透過」も意識する
ユーザーに使い方を文字で説明するためのUI
1 特定の条件でだけ（たとえば初回に一度）見ることができる
2 常に説明を見ることができる
3 ユーザーが見たいときにだけ表示させて見ることができる
動きによる楽しさの演出──コンテンツの変化や操作へのフィードバック
変化があるコンテンツ
アニメーションとトランジション
タップ時のフィードバックアニメーション
画面移動時のトランジション
第2章：機能表現の工夫
「いいね！」の効果的な使い方
ライトフィードバックの目的と設計
直感的に簡単に操作できるボタン設計
「いいね！」の言い換えについて
コンテキストを読んだライトフィードバック
ネガティブなライトフィードバック
送り手の感情に強弱を付ける
保存とライトフィードバックの違いを明確にする
コンテンツ作者と読者の良い循環を作る
保存のデザインの使い分け
さまざまな保存のUI
一覧編集画面での実践事例
(a)★自動保存
(b)★行ごとに保存ボタン
(c)★すべて保存ボタン
未読と既読のデザイン
無駄な未読表現を控える
未読数を出すもの、出さないものを分ける
数字が意味している情報を明確にする
未読を既読にするタイミングを考える
情報の更新をどう表現するか
(a)★お知らせ画面で更新情報を伝える
(b)★モーダルを使って伝える
(c)★詳細画面に更新情報のスペースを設ける
(d)★一覧と詳細にアイコンで組み込む
(e)★履歴管理機能を備える
(f)★メールや通知を送る
第3章：UIコンポーネントの使い方による工夫
ボタンのデザインと使い分け
状態によるバリエーションとデザインのポイント
形状のバリエーションとデザインのポイント
同じアクションを異なるボタンで実現する事例
ガイドライン上での考え方
プライマリボタンとセカンダリボタン
複数のボタンを画面内で利用する場合の考え方
数値の入力・選択に適したUI
テキストフィールド（キーボード入力）
プルダウンメニュー
スライダー（シークバー）
ステッパー
カードUIの向き不向き
カードUIが効果的な場面
不均一な情報をきれいに整理する
個々のコンテンツの主張を強くする
テーブルをカードUIに置き換えるときの注意点
レスポンシブデザインを作りやすい
情報の比較がしにくくなる
メッセンジャーサービスにおけるデザインの工夫
基本的な画面設計
複数の状態設計
テキスト以外の情報要素の配置と優先度
多くの要素をコンパクトに見せる工夫
第4章：ユーザーの行動への配慮
エラーと確認──スムーズな手続きを実現するには
効果的にエラーを伝えるには
自由な振る舞いをさせるためのUI
文体や色への気配り
状況に応じた確認手段を用いる
確認をできるだけ減らして完了
何を確認してもらうことが大切か
ストレスのないスムーズな流れを意識する
受動的な体験のデザイン──「なんとなく眺める」を快適にするには
受動的な体験とは
ゴールが明確ではない体験
潜在的なユーザーニーズをさぐる
受動的な体験をデザインするための工夫
ハンズフリー（操作しなくてよい）な体験作り
コンテンツの重みとフィードのデザイン
興味の範囲と深さのバランス
異なるユーザー層へのデザイン
重なり合わないユーザー層
ユーザー層によって画面を分ける
もう片方のユーザー層のことをイメージしやすくする
重なり合うユーザー層
リテラシーの異なるユーザー層
慣れやすい体験を作る
習熟度の高いユーザー向けのUI
待ち時間中のユーザーへの配慮
待ち時間を表す代表的な2つの表現
スピナー
プログレスバー
待ち時間をデザインするうえでの工夫
別の操作をできるようにする
キャンセル、時間制限
手間をかけた表現
待ち時間を短く感じさせる方法
待ち時間を短くするための2つの手段
エンジニアがオーナーシップを持ちやすい施策
デザイナーがオーナーシップを持ちやすい施策
待ち時間が減ったように感じさせるための事例 110
スケルトンスクリーン
読み込み時間を細分化する演出
Tipsの表示や世界観の演出
コンテンツがないときに考えること
画面全体が空の状態と画面の一部が空の状態
画面全体が空の状態での対応策
ユーザーの行動によって状態を解消できるケース
ユーザーの行動によって状態が解消できないケース
画面の一部が空の状態での対応策
そのままにする
ないことを伝える
コンテンツを可変にする
第5章：画面と画面遷移の設計
画像はどう置く？──位置、大きさ、そろえ方
左側に置く？ 右側に置く？
要素の位置関係と情報の重要性
画像が入らない場合と読みやすさ
画像をメインに使い感性に訴えかける
写真を全面にゆとりをもって配置
あえてそろえない雑誌的な体験
一覧をタップした先の情報量を意識した画面デザイン
長くなりがちなコンテンツをどう見やすくするか
要素を追加する際に意識すること
すでにある要素を削る。または分け合う
効果の最大化を意識する
面積比率をルール化する
長くなった場合の対応法
画面内のキーとなる要素を知る
追加要素を分散させる
一部の要素を隠す
横配置メニューの項目数が多くなった場合の表現
横に配置するメニューを使うときの注意点
縦方向に比べ、一度に表示できるメニュー件数が少ない
複数の階層構造を一度に表示しにくい
横配置メニューの件数が増えた場合の対応事例
スクローラブルにするパターン
最後のメニューにまとめるパターン
複数段にするパターン
長押しで表示するパターン
「もっと見る」をちゃんとデザインする
「もっと見る」を使うシーン
(a)★複数の切り口をコンパクトに見せるために使う場合
(b)★連続する情報を途中で切るときに使う場合
「もっと見る」をどう配置するか
「画面遷移する」か「その場で開く」か
「もっと見る」か「カルーセル」か
快適な閲覧なら「もっと見る」
気軽に情報を横断するには「カルーセル」
入力フォームを1画面にする？ 分割する？
分割するかしないかの基準
コンバージョン重視ならできるだけ分割しない
モバイルならスクロールよりタップ移動のほうが行いやすいので分割する
じっくり編集したり、あとからの更新が多かったりする場合は分割する
分割しないときの工夫
チャットUIで受動的に入力を完了させる
入力タイミングを分ける
分割する場合の2つの方法
種類で分ける
重要度で分ける
画面単位ではなく、画面遷移を意識した改善
画面単位での改善の落とし穴
画面遷移を意識した改善の手順
体験をストーリー単位で考える
すべての画面変化を書き出す
「課題」と「解決案」を記載する
第6章：コミュニケーションとツール
エンジニアに意識してほしいこと
実装の認識合わせ
実装方法を知りたい
デザインに制限がかかるライブラリを利用するかを知りたい
負荷による制限を教えてほしい
デザイナーのこだわりとの付き合い
再現の精度を上げてほしい
リッチな表現や細やかな表現を行いたい
初期リリースにおける理想像とのずれをどうするか
考えておかなければいけない観点
情報がどれくらい充実するか
ミニマム状態から理想状態まで継続して開発できる体制
意識すべきデザインのポイント
選択肢を絞った検索体験を提供する
情報を自動ではなく手動で選んで表示する
件数の多さではなく、一つ一つの情報の密度を高める
「○○っぽいデザイン」のエッセンス
「〇〇っぽさ」の3つの観点
1 UIデザインを指すパターン
2 体験そのものを指すパターン
3 利用者の傾向を指すパターン
具体的な活用事例
UIデザインのエッセンスを引き出す
対象サービスに適したエッセンスを考える
デザインシステムで、使い勝手・デザイン・コードに統一感を持たせる
デザインシステムとはどういうものか
構築メリット
含まれる要素
エンジニアとデザイナーの役割分担
具体的な実践事例
Googleの事例
GitHubの事例
UIデザインのためのGoogle アナリティクス
見ておきたいユーザーデータ
タップ数を計測して仮説検証をする
どういう仮説があって何を検証するか
どのように定義するか
実際のデータを見て仮説が正しかったかを考える
説得力・納得感のあるデザインにする工夫
一緒に仕事をする人の好みや癖を読み取る
できるだけ言葉を添えてデザインを説明する
他社の事例などの情報を上手に参考にする
デザインに関連する知識を役立てる
示差性について
第7章：考察、雑感
今、iOS/Androidアプリのデザインガイドラインにどう向き合うか
HIGとMaterial Designの現状
AndroidとiPhone、それぞれ別のUIを作るのか
基本的なコンポーネントの類似性の向上
開発環境の変化
人気アプリの画面構造の実態
常にガイドラインに従うべきか
ガイドラインのコンポーネントと、体験に適した自由な表現
スマートフォン画面の巨大化と標準コンポーネントのギャップ
業務利用サービスのデザイン──多くの情報、専門用語をどう見やすく表示するか
ウィンドウの幅を意識する
テーブルレイアウトを工夫する
右隅に重要な要素を配置する場合に注意する
横幅が可変なサイドバー
文字情報を工夫する
ボタンの文字を動詞にする
説明することを惜しまない
中国のスマートフォンアプリの共通項──所変わればデザイン変わる
見た目の共通項
アイコンとグラデーションを使った下層への動線
ディテールの作り込み
使い勝手の共通項
画面キャプチャのUI
場所選択のUI
長押しを使ったデザインの可能性
長押しが使われている身近な事例
イヤホンのBluetoothペアリング
ゲームでのスキップ
アプリやWebサービスでの利用
ガイドラインでの言及
アプリで利用されている事例
ゲームでの利用方法をスマートフォンで検証
「当然そうなるだろう」という思い込みを考慮する
メンタルモデルとは？
思い込みと違う動きによる苛立ち
思い込みのアップデート
ユーザーの思い込みを逆手にとった楽しさの演出
終わりに
索引
第1章：色、文字、動きによる見せ方の工夫
赤の使い方──色が与える直感的な印象を活かす
赤が与える基本的な印象
数字表現での赤
赤の効果的な利用法
あえて赤を避けている事例
削除ボタンでの赤
赤の効果的な利用法
赤を使わないほうがよい場面
インジケータでの赤
多い状態が赤の効果的な利用シーン
少ない状態が赤の効果的な利用シーン
上手に配色するためのコツとテクニック
完成イメージが湧く配色を早くから考える
テーマカラー以外の色も合わせて検討する
構成と配色をセットで検討する
無彩色に一手間加えた表現
寂しい印象に見えるときには少しだけ色を入れる
グレーではなく「透過」も意識する
ユーザーに使い方を文字で説明するためのUI
1 特定の条件でだけ（たとえば初回に一度）見ることができる
2 常に説明を見ることができる
3 ユーザーが見たいときにだけ表示させて見ることができる
動きによる楽しさの演出──コンテンツの変化や操作へのフィードバック
変化があるコンテンツ
アニメーションとトランジション
タップ時のフィードバックアニメーション
画面移動時のトランジション
第2章：機能表現の工夫
「いいね！」の効果的な使い方
ライトフィードバックの目的と設計
直感的に簡単に操作できるボタン設計
「いいね！」の言い換えについて
コンテキストを読んだライトフィードバック
ネガティブなライトフィードバック
送り手の感情に強弱を付ける
保存とライトフィードバックの違いを明確にする
コンテンツ作者と読者の良い循環を作る
保存のデザインの使い分け
さまざまな保存のUI
一覧編集画面での実践事例
(a)★自動保存
(b)★行ごとに保存ボタン
(c)★すべて保存ボタン
未読と既読のデザイン
無駄な未読表現を控える
未読数を出すもの、出さないものを分ける
数字が意味している情報を明確にする
未読を既読にするタイミングを考える
情報の更新をどう表現するか
(a)★お知らせ画面で更新情報を伝える
(b)★モーダルを使って伝える
(c)★詳細画面に更新情報のスペースを設ける
(d)★一覧と詳細にアイコンで組み込む
(e)★履歴管理機能を備える
(f)★メールや通知を送る
第3章：UIコンポーネントの使い方による工夫
ボタンのデザインと使い分け
状態によるバリエーションとデザインのポイント
形状のバリエーションとデザインのポイント
同じアクションを異なるボタンで実現する事例
ガイドライン上での考え方
プライマリボタンとセカンダリボタン
複数のボタンを画面内で利用する場合の考え方
数値の入力・選択に適したUI
テキストフィールド（キーボード入力）
プルダウンメニュー
スライダー（シークバー）
ステッパー
カードUIの向き不向き
カードUIが効果的な場面
不均一な情報をきれいに整理する
個々のコンテンツの主張を強くする
テーブルをカードUIに置き換えるときの注意点
レスポンシブデザインを作りやすい
情報の比較がしにくくなる
メッセンジャーサービスにおけるデザインの工夫
基本的な画面設計
複数の状態設計
テキスト以外の情報要素の配置と優先度
多くの要素をコンパクトに見せる工夫
第4章：ユーザーの行動への配慮
エラーと確認──スムーズな手続きを実現するには
効果的にエラーを伝えるには
自由な振る舞いをさせるためのUI
文体や色への気配り
状況に応じた確認手段を用いる
確認をできるだけ減らして完了
何を確認してもらうことが大切か
ストレスのないスムーズな流れを意識する
受動的な体験のデザイン──「なんとなく眺める」を快適にするには
受動的な体験とは
ゴールが明確ではない体験
潜在的なユーザーニーズをさぐる
受動的な体験をデザインするための工夫
ハンズフリー（操作しなくてよい）な体験作り
コンテンツの重みとフィードのデザイン
興味の範囲と深さのバランス
異なるユーザー層へのデザイン
重なり合わないユーザー層
ユーザー層によって画面を分ける
もう片方のユーザー層のことをイメージしやすくする
重なり合うユーザー層
リテラシーの異なるユーザー層
慣れやすい体験を作る
習熟度の高いユーザー向けのUI
待ち時間中のユーザーへの配慮
待ち時間を表す代表的な2つの表現
スピナー
プログレスバー
待ち時間をデザインするうえでの工夫
別の操作をできるようにする
キャンセル、時間制限
手間をかけた表現
待ち時間を短く感じさせる方法
待ち時間を短くするための2つの手段
エンジニアがオーナーシップを持ちやすい施策
デザイナーがオーナーシップを持ちやすい施策
待ち時間が減ったように感じさせるための事例 110
スケルトンスクリーン
読み込み時間を細分化する演出
Tipsの表示や世界観の演出
コンテンツがないときに考えること
画面全体が空の状態と画面の一部が空の状態
画面全体が空の状態での対応策
ユーザーの行動によって状態を解消できるケース
ユーザーの行動によって状態が解消できないケース
画面の一部が空の状態での対応策
そのままにする
ないことを伝える
コンテンツを可変にする
第5章：画面と画面遷移の設計
画像はどう置く？──位置、大きさ、そろえ方
左側に置く？ 右側に置く？
要素の位置関係と情報の重要性
画像が入らない場合と読みやすさ
画像をメインに使い感性に訴えかける
写真を全面にゆとりをもって配置
あえてそろえない雑誌的な体験
一覧をタップした先の情報量を意識した画面デザイン
長くなりがちなコンテンツをどう見やすくするか
要素を追加する際に意識すること
すでにある要素を削る。または分け合う
効果の最大化を意識する
面積比率をルール化する
長くなった場合の対応法
画面内のキーとなる要素を知る
追加要素を分散させる
一部の要素を隠す
横配置メニューの項目数が多くなった場合の表現
横に配置するメニューを使うときの注意点
縦方向に比べ、一度に表示できるメニュー件数が少ない
複数の階層構造を一度に表示しにくい
横配置メニューの件数が増えた場合の対応事例
スクローラブルにするパターン
最後のメニューにまとめるパターン
複数段にするパターン
長押しで表示するパターン
「もっと見る」をちゃんとデザインする
「もっと見る」を使うシーン
(a)★複数の切り口をコンパクトに見せるために使う場合
(b)★連続する情報を途中で切るときに使う場合
「もっと見る」をどう配置するか
「画面遷移する」か「その場で開く」か
「もっと見る」か「カルーセル」か
快適な閲覧なら「もっと見る」
気軽に情報を横断するには「カルーセル」
入力フォームを1画面にする？ 分割する？
分割するかしないかの基準
コンバージョン重視ならできるだけ分割しない
モバイルならスクロールよりタップ移動のほうが行いやすいので分割する
じっくり編集したり、あとからの更新が多かったりする場合は分割する
分割しないときの工夫
チャットUIで受動的に入力を完了させる
入力タイミングを分ける
分割する場合の2つの方法
種類で分ける
重要度で分ける
画面単位ではなく、画面遷移を意識した改善
画面単位での改善の落とし穴
画面遷移を意識した改善の手順
体験をストーリー単位で考える
すべての画面変化を書き出す
「課題」と「解決案」を記載する
第6章：コミュニケーションとツール
エンジニアに意識してほしいこと
実装の認識合わせ
実装方法を知りたい
デザインに制限がかかるライブラリを利用するかを知りたい
負荷による制限を教えてほしい
デザイナーのこだわりとの付き合い
再現の精度を上げてほしい
リッチな表現や細やかな表現を行いたい
初期リリースにおける理想像とのずれをどうするか
考えておかなければいけない観点
情報がどれくらい充実するか
ミニマム状態から理想状態まで継続して開発できる体制
意識すべきデザインのポイント
選択肢を絞った検索体験を提供する
情報を自動ではなく手動で選んで表示する
件数の多さではなく、一つ一つの情報の密度を高める
「○○っぽいデザイン」のエッセンス
「〇〇っぽさ」の3つの観点
1 UIデザインを指すパターン
2 体験そのものを指すパターン
3 利用者の傾向を指すパターン
具体的な活用事例
UIデザインのエッセンスを引き出す
対象サービスに適したエッセンスを考える
デザインシステムで、使い勝手・デザイン・コードに統一感を持たせる
デザインシステムとはどういうものか
構築メリット
含まれる要素
エンジニアとデザイナーの役割分担
具体的な実践事例
Googleの事例
GitHubの事例
UIデザインのためのGoogle アナリティクス
見ておきたいユーザーデータ
タップ数を計測して仮説検証をする
どういう仮説があって何を検証するか
どのように定義するか
実際のデータを見て仮説が正しかったかを考える
説得力・納得感のあるデザインにする工夫
一緒に仕事をする人の好みや癖を読み取る
できるだけ言葉を添えてデザインを説明する
他社の事例などの情報を上手に参考にする
デザインに関連する知識を役立てる
示差性について
第7章：考察、雑感
今、iOS/Androidアプリのデザインガイドラインにどう向き合うか
HIGとMaterial Designの現状
AndroidとiPhone、それぞれ別のUIを作るのか
基本的なコンポーネントの類似性の向上
開発環境の変化
人気アプリの画面構造の実態
常にガイドラインに従うべきか
ガイドラインのコンポーネントと、体験に適した自由な表現
スマートフォン画面の巨大化と標準コンポーネントのギャップ
業務利用サービスのデザイン──多くの情報、専門用語をどう見やすく表示するか
ウィンドウの幅を意識する
テーブルレイアウトを工夫する
右隅に重要な要素を配置する場合に注意する
横幅が可変なサイドバー
文字情報を工夫する
ボタンの文字を動詞にする
説明することを惜しまない
中国のスマートフォンアプリの共通項──所変わればデザイン変わる
見た目の共通項
アイコンとグラデーションを使った下層への動線
ディテールの作り込み
使い勝手の共通項
画面キャプチャのUI
場所選択のUI
長押しを使ったデザインの可能性
長押しが使われている身近な事例
イヤホンのBluetoothペアリング
ゲームでのスキップ
アプリやWebサービスでの利用
ガイドラインでの言及
アプリで利用されている事例
ゲームでの利用方法をスマートフォンで検証
「当然そうなるだろう」という思い込みを考慮する
メンタルモデルとは？
思い込みと違う動きによる苛立ち
思い込みのアップデート
ユーザーの思い込みを逆手にとった楽しさの演出
終わりに
索引
著者情報
池田 拓司
2002年多摩美術大学卒業後、ニフティ㈱、㈱はてな、にて様々なサービスの開発及び新規サービスの立ち上げにデザイナーとして関わる。2012年よりクックパッド㈱にて、スマートフォン向けのUIデザイン及びフロントエンド開発を担当。グローバル向けプラットフォームアプリの設計、デザインマネジャー、執行役なども経験。2017年にデザインアンドライフ㈱を設立し代表取締役に（現任）就任。2021年に㈱くふうカンパニー
執行役（現任）に就任しデザイン開発領域を管掌。2022年よりデザイナーのコミュニティ組織㈱CLAN、多摩美術大学 情報デザイン学科
非常勤講師としても活動を行う。ウェブ・アプリなどのサービスの設計、及びデザインシステムの構築支援、デザイナーの組織づくりを中心に活動中。
twitter：@tikeda
池田, 拓司
