はじめてのUIデザイン
このドキュメントについて
佐藤まみhealthy-sato.iconのインプットメモ
https://scrapbox.io/files/64c8519a4676c1001cb638df.png
目次
■目次
1章 はじめに
1-1 なぜ今UIデザインなのか
1-2 この本で学べること
1-3 UIデザインは大切？
1-4 UIデザイナーは何をする人なのか
1-5 デジタルプロダクトにおけるUIデザインの変遷
2章 UIの見える部分を学ぶ
2-1 コンポーネント
2-2 ビジュアル要素
2-3 アイコン
3-1 UIデザインの前に
3-2 情報設計
3-3 この章の流れと成果物
3-4 ペルソナを動かすシナリオを作る
3-5 必要な要素を整理する
3-6 UIモデルを設計する
3-7 プロトタイピング
4章 UIが機能する環境を学ぶ
4-1 スマートフォンアプリのデザイン
4-2 Webサービスのデザイン
4-3 タブレットやウォッチ、TVのアプリデザイン
5-1 UIを作る（1）情報をUIに落とし込む
5-2 UIを作る（2）デザインツールについて知る
5-3 UIを作る（3）一貫性を意識する
5-4 UIを作る（4）具体的な制作プロセス
5-5 UIトレースで観察力を鍛える
5-6 UIデザインについて改めて考える
6章 UIデザインができたら
6-1 体験をデザインする
6-2 開発者と連携する
6-3 運用を考える
7章 UIをデザインする前の心得
7-1 サービスを作る
7-2 サービスコンセプトの検証
7-3 サービスロゴ制作の心得
7-4 これからUIデザインを始める方へ
終わりに
3章 メモ
情報設計の必要性
しかし、実際に目に見える形に落したものの印象は強いため、その見えたものを変えるのが難しく、柔軟な考え方ができなくなってしまう可能性があります。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.178). Kindle 版.
この章の流れ
行動、操作のシナリオの作成：ユーザーが目的達成するまでの理想的な状態の仮説を立てる
コンテンツの分類軸の設計：シナリオからユーザーの性質を理解し、それに合わせたコンテンツの分類をおこなう
UIモデルの設計：コンテンツの見え方ごとにユーザーが何を見てどうするのかを整理して、フロー図を作成する
レイアウトとインタラクションの設計：ペーパープロトタイプでレイアウトとインタラクションを設計する
この章の成果物
このようなプロセスを進めていく中で、次のような成果物を準備していきます。
ユーザーシナリオ：ユーザーシナリオは、作成したペルソナとペルソナが目的を達成した状態までをつなぐ、価値、シーン、行動、操作を具体的にするためのものです。
コンテンツの分類軸：ユーザーはどのようにコンテンツを探すのかというユーザー視点の分類と、コンテンツはどのような属性を持っていて、どのようにカテゴライズすれば探しやすくなるのかをまとめたものです。
フロー図：シナリオ、コンテンツの分類軸を元に、情報のまとまり単位でユーザーが「何を見てどうするか」を整理して、線でつないで図示化したものです。
ペーパープロトタイプ：開発をおこなう前に、アプリがどのように見え、動作し、機能するのかをシミュレーションするツールです。紙は手書きですばやく作成できて、手元で操作もしやすいので、おすすめです。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (pp.181-182). Kindle 版.
シナリオ：ユーザーが目的達成するまでの理想的な状態の仮説を立てる
「価値シナリオ」
ユーザーの欲求、何をしたいのか（価値）
その価値が関連するシーン・文脈
「行動シナリオ」
シーン・文脈において、目的を達成するためのストーリーと行動
ストーリー
ペルソナの欲求に対する課題や価値を感じたいシーンから、アプリを使った結果どのように変化して、どうなったから目的を達成できたように感じたのか、その理想的な状態を物語のように書いていきます。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.195). Kindle 版.
行動
アプリ上でおこなう必要がある具体的なタスク
各タスクには優先度をつけアプリの対象となる範囲を明確にする
ペルソナの目的と照らし合わせて精査する
必須なもの、必須ではないがあったほうがよいもの
将来はあったほうがよいが今はやらないもの
「操作シナリオ」
タスクを実行するためのアプリ上の実際の操作・操作手順
その操作に必要な情報や、操作に対するアプリからのフィードバックなどの「ふるまい」
コンテンツの分類軸の設計：シナリオに合わせたコンテンツの分類を決める（理解しやすく探しやすく見やすく）
2つの分類方針：①コンテンツの属性軸 ②シナリオ軸
①コンテンツの属性軸
②シナリオ軸
決め手を書き出す
これは「行動シナリオ」に反映されている内容から、ユーザーはふだんスマートフォンやPCをどれくらい使っているのか、どんなことへの理解が深く、あまり詳しくないことは何か、そういった知識を他にどれくらい活かせそうか、などの観点から導き出す方法です。また、作るアプリにおいて「何をどのようなまとまりで探しているのか」も重要です。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.204). Kindle 版.
ユーザーがコンテンツをどのように探していくのかを、シナリオ、コンテンツの持つ属性それぞれの視点で検討し、当てはめて分類軸を考えていきます。
さらに、アーティスト一覧やアルバム一覧、検索結果がどのような順序で並ぶのがいいかなども合わせて分類軸に反映していきます。
例えば、聴きたいアルバムを探すとき「誰の何というアルバム」と思い出すとするなら、アルバムの一覧もアルバムアーティスト名順（AtoZ）に並べるなどして、ふだんの思い出し方で探せるようにします。この場合も、すでにあるアプリやWebサイトなどを参考に、ユーザーが認識しやすいものを選択するとよいでしょう。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.206). Kindle 版.
分類軸は一度で決めるより、検証して改善する
UIモデルの設計：コンテンツの見え方ごとにユーザーが何を見てどうするのかを整理して、フロー図を作成する
整理されたコンテンツと機能をどのような手順で操作すべきか決める
流れ
オブジェクト抽出→フロー図作成
フロー図とは
ユーザーが「何を（オブジェクト）」見て 「どうするのか（アクション）」を線でつなぎ、アプリとユーザーのやりとりを視覚的に表現したUIの流れを表わすもの
画面遷移図との違い
画面遷移図では画面に収められる情報量に制約を設ける
ある程度UIデザインが進んだ状態で全体像を把握するために利用する
https://scrapbox.io/files/64c846b940b4c3001bcae202.png
https://scrapbox.io/files/64c845b5ed346d001b4b27a5.png
考慮する観点
シングルビュー（個別詳細）とコレクションビュー（一覧）
モーダルとモードレス
モーダルはユーザーの操作を限定して、決まったタスクの実行に集中しておこなえるように支援するなどの使い方ができます。つまり、ユーザーは「何をするか（動詞）」を選択し、「何を操作するか（名詞）」という順に操作します（図311）。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.224). Kindle 版.
レイアウトとインタラクションの設計：ペーパープロトタイプでレイアウトとインタラクションを設計する
プロトタイプの作成
手順：プロトタイプの方向づけ→具現化→検証議論
ナビゲーションの設計
ナビゲーションはユーザーがアプリ上で何を認識してどのように移動するのか、目的を達成するところまでユーザーをどうやって連れていくのかを考えながら、複数のパターンを比較するとよいでしょう。
1つのプロトタイプを複数のナビゲーションパターンで試すのが理想的です。
ナビゲーションの設計を進めながら、ユーザーが目的地に到着するまで、できるだけ意思決定したと感じさせないようにするにはどうすればいいか。分類軸を見直す必要も出てくるかもしれません。
ユーザーがコンテンツを探す方法や、コンテンツをどういう属性で探したいのかを改めて考えてみましょう。またナビゲーションは、ユーザーがどこにいるのかをいつでも把握できるようにする役割を持っています。ユーザーに現在地をわかりやすく伝えるとともに、どちらに行けば、あとどれくらいで目的地に到着するのかを示す道しるべでもあります。できるだけ移動する場所を増やさないように設計できると、ユーザーは現在地や目的地までの道筋を把握しやすくなります。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.244). Kindle 版.
インタラクションの設計
ユーザーのアクションに対するアプリの反応、ビューの移り変わりをどう行うのか
5章メモ
企画から画面構成を具体化するコツ
言語化された企画（UI Flows シナリオ 「何を見てほしいか」「どのようなアクションを取ってほしいか」「最終的にどんな目的を達成してほしいか」）をもとに画面構成を具体化する
3つのポイント
コンセプトとシナリオからコア機能（メイン機能）を抽出する
シナリオ：ペルソナが「何ができると目的を達成できるのか」や「それはどのように実行していくものなのか」といった目的達成までの道のりを具体的にするためのもの
要素の情報量と重要度
目的に直結する重要度の高い要素をランキング化
前項で解説したように、各画面のレイアウトにも「目的」が存在します。ここで言う目的とは「ユーザーに対して、その画面でどのような行動を促したいか」です。目的達成のために、シナリオを参照しながら画面の構成要素の量と重要度を考えましょう。配置される要素によってどのようなアクションが誘発できるのか、そのアクションは画面内においてどのアクションよりも重要で、どのアクションより重要でないかを意識してみてください。
Ikeda Takuji,Uno Yu,Kaminogoya Taichi,Tsubota Tomo,Motoyama Kazuyuki,Yoshitake Ryo. Hajimete no UI design kaiteiban (Japanese Edition) (p.381). Kindle 版.
場合によっては文章の展開 / 収納や別画面への遷移を選択肢に入れる
オブジェクトとアクション
オブジェクト：名詞にできる
アクション：動詞にできる