• はじめに
• 初出一覧
• 目次

第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つの手段
  • エンジニアがオーナーシップを持ちやすい施策
  • デザイナーがオーナーシップを持ちやすい施策
• 待ち時間が減ったように感じさせるための事例
  • スケルトンスクリーン
  • 読み込み時間を細分化する演出
  • Tipsの表示や世界観の演出

コンテンツがないときに考えること

• 画面全体が空の状態と画面の一部が空の状態
• 画面全体が空の状態での対応策
  • ユーザーの行動によって状態を解消できるケース
  • ユーザーの行動によって状態が解消できないケース
• 画面の一部が空の状態での対応策
  • そのままにする
  • ないことを伝える
  • コンテンツを可変にする

第5章：画面と画面遷移の設計

画像はどう置く？──位置，大きさ，そろえ方

• 左側に置く？ 右側に置く？
  • 要素の位置関係と情報の重要性
  • 画像が入らない場合と読みやすさ
• 画像をメインに使い感性に訴えかける
  • 写真を全面にゆとりをもって配置
  • あえてそろえない雑誌的な体験
• 一覧をタップした先の情報量を意識した画面デザイン

長くなりがちなコンテンツをどう見やすくするか

• 要素を追加する際に意識すること
  • すでにある要素を削る。または分け合う
  • 効果の最大化を意識する
  • 面積比率をルール化する
• 長くなった場合の対応法
  • 画面内のキーとなる要素を知る
  • 追加要素を分散させる
  • 一部の要素を隠す

横配置メニューの項目数が多くなった場合の表現

• 横に配置するメニューを使うときの注意点
  • 縦方向に比べ，一度に表示できるメニュー件数が少ない
  • 複数の階層構造を一度に表示しにくい
• 横配置メニューの件数が増えた場合の対応事例
  • スクローラブルにするパターン
  • 最後のメニューにまとめるパターン
  • 複数段にするパターン
  • 長押しで表示するパターン

「もっと見る」をちゃんとデザインする

• 「もっと見る」を使うシーン
  • a複数の切り口をコンパクトに見せるために使う場合
  • b連続する情報を途中で切るときに使う場合
• 「もっと見る」をどう配置するか
• 「画面遷移する」か「その場で開く」か
• 「もっと見る」か「カルーセル」か
  • 快適な閲覧なら「もっと見る」
  • 気軽に情報を横断するには「カルーセル」

入力フォームを1画面にする？ 分割する？

• 分割するかしないかの基準
  • コンバージョン重視ならできるだけ分割しない
  • モバイルならスクロールよりタップ移動のほうが行いやすいので分割する
  • じっくり編集したり，あとからの更新が多かったりする場合は分割する
• 分割しないときの工夫
  • チャットUIで受動的に入力を完了させる
  • 入力タイミングを分ける
• 分割する場合の2つの方法
  • 種類で分ける
  • 重要度で分ける

画面単位ではなく，画面遷移を意識した改善

• 画面単位での改善の落とし穴
• 画面遷移を意識した改善の手順
  • 体験をストーリー単位で考える
  • すべての画面変化を書き出す
  • 「課題」と「解決案」を記載する

第6章：コミュニケーションとツール

エンジニアに意識してほしいこと

• 実装の認識合わせ
  • 実装方法を知りたい
  • デザインに制限がかかるライブラリを利用するかを知りたい
  • 負荷による制限を教えてほしい
• デザイナーのこだわりとの付き合い
  • 再現の精度を上げてほしい
  • リッチな表現や細やかな表現を行いたい

初期リリースにおける理想像とのずれをどうするか

• 考えておかなければいけない観点
  • 情報がどれくらい充実するか
  • ミニマム状態から理想状態まで継続して開発できる体制
• 意識すべきデザインのポイント
  • 選択肢を絞った検索体験を提供する
  • 情報を自動ではなく手動で選んで表示する
  • 件数の多さではなく，一つ一つの情報の密度を高める

「○○っぽいデザイン」のエッセンス

• 「〇〇っぽさ」の3つの観点
  • 1UIデザインを指すパターン
  • 2体験そのものを指すパターン
  • 3利用者の傾向を指すパターン
• 具体的な活用事例
  • UIデザインのエッセンスを引き出す
  • 対象サービスに適したエッセンスを考える

デザインシステムで，使い勝手・デザイン・コードに統一感を持たせる

• デザインシステムとはどういうものか
  • 構築メリット
  • 含まれる要素
  • エンジニアとデザイナーの役割分担
• 具体的な実践事例
  • Googleの事例
  • GitHubの事例

UIデザインのためのGoogle アナリティクス

• 見ておきたいユーザーデータ
• タップ数を計測して仮説検証をする
  • どういう仮説があって何を検証するか
  • どのように定義するか
  • 実際のデータを見て仮説が正しかったかを考える

説得力・納得感のあるデザインにする工夫

• 一緒に仕事をする人の好みや癖を読み取る
• できるだけ言葉を添えてデザインを説明する
• 他社の事例などの情報を上手に参考にする
• デザインに関連する知識を役立てる
  • 示差性について

第7章：考察，雑感

今，iOS/Androidアプリのデザインガイドラインにどう向き合うか

• HIGとMaterial Designの現状
• AndroidとiPhone，それぞれ別のUIを作るのか
  • 基本的なコンポーネントの類似性の向上
  • 開発環境の変化
  • 人気アプリの画面構造の実態
• 常にガイドラインに従うべきか
  • ガイドラインのコンポーネントと，体験に適した自由な表現
  • スマートフォン画面の巨大化と標準コンポーネントのギャップ

業務利用サービスのデザイン──多くの情報，専門用語をどう見やすく表示するか

• ウィンドウの幅を意識する
  • テーブルレイアウトを工夫する
  • 右隅に重要な要素を配置する場合に注意する
  • 横幅が可変なサイドバー
• 文字情報を工夫する
  • ボタンの文字を動詞にする
  • 説明することを惜しまない

中国のスマートフォンアプリの共通項──所変わればデザイン変わる

• 見た目の共通項
  • アイコンとグラデーションを使った下層への動線
  • ディテールの作り込み
• 使い勝手の共通項
  • 画面キャプチャのUI
  • 場所選択のUI

長押しを使ったデザインの可能性

• 長押しが使われている身近な事例
  • イヤホンのBluetoothペアリング
  • ゲームでのスキップ
• アプリやWebサービスでの利用
  • ガイドラインでの言及
  • アプリで利用されている事例
  • ゲームでの利用方法をスマートフォンで検証

「当然そうなるだろう」という思い込みを考慮する

• • メンタルモデルとは？
  • 思い込みと違う動きによる苛立ち
  • 思い込みのアップデート
  • ユーザーの思い込みを逆手にとった楽しさの演出

• 終わりに
• 索引