デザインの目的とUI/UX
デザインとは設計のこと。デザインの良し悪しはソフトウェア・顧客満足度の向上に重要。
UIとUXは別物。
UIとはサービスなどのインターフェイスをより使いやすく設計するということ。
UXとはユーザーがサービスによって受ける全ての体験のこと。
UIとUXの違いは客観的か主観的か。UIを良くしてもUXが上がらない仕様だと意味がない。
UIはUXの中核である。
物理的な制約
大体これ
1. スマホ
2. タブレット
3. PC
4. TV
デバイスの違いでUIの影響の仕方が変わる。
- マウスは細かい操作（ホバーなど）が可能
- スマホ・タブレットは細かい操作できない。そのため、リンク先など目視で確認できる必要がある。またスマホなどのタッチで操作するものはある程度の大きさのデザインが必要。
- TVはフォーカス移動・音声入力が特徴。直接画面の対象を操作できないので、フォーカスが今どこにあるのかわかることが重要。要素の連続性も重要。表現の差別化。リモコン操作が簡単になるほど良い。
クリックやタッチは直接操作できる。フォーカスはできない。
デバイスによって画面の近さは変わる。サイズの可変性大事。画面の形固定 -> アスペクト比（大体16:9）
画面サイズ大きいと情報多く載せれる。距離が遠いほど要素を大きくするといい。
画面の大きさのポイントは「可変性」「アスペクト比」「サイズ」
視覚的に距離が遠くなるほど要素を大きくするべし。あと縦横の向きも大事。
Androidは戻るボタンないけどIphoneはある。思想による。シンプルさとか。
ソフトウェアの影響
Webとアプリの違いとして、ブラウザ（凡庸ツール）かアプリ（専用ツール）の違い。ハードウェアが違う。
WebアプリはURLと不可分に結びついてる。WebはOSの違いに影響を受けないが、スマホアプリは影響を受ける。
アプリはインタラクションが豊富。
サービスの目的によって使い分けるといい。
-
Webサイト
- 実装の容易さ
- ひとまず使ってもらう手軽さ
- マルチデバイスの対応力
-
アプリ
- 動きのスピードや操作の軽快さ
- 単機能/単サービスの専用性
- インタラクションの対応力
情報は、「テキスト」「画像」「動画」の3つに集約される。
解像度はOSとハードウェアによってきまる。
ハードウェアによって表示できる解像度を「物理解像度」、OSによって表示される解像度を「理論解像度」
最近はハードウェアが向上して物理解像度の方が大きい。
テキストは最強のデータ。テキストで表現できるものであれば画像などは使わずテキストのままでいい。
画像は環境やOSの違いによらず全ての状況で同じデータに見えること。テキストなどはOSによって最適化されてしまう。
速度重要
- HTTP2（複数リクエスト・レスポンス非同期）
- ファイルの先読み
- AMP
人間の認知性
色は判別する速度を早めるためにはあったほうがいいかもしれないが、増やし過ぎは良くない。
動きの役割は、「注目のための動き」「理解のための動き」「装飾のための動き」。UIでは「理解のための動き」が基本。
インタラクションコストとは、ユーザーが受ける負担のことで、要するにUXの負担が少なければ使いやすいサービスである。
インタラクションコストを下げるには、「一貫性」「シンプルさ」「共通概念」が必要。
一貫性: ある規則に基づいてサービス内のデザイン要素全てがその基準に従っていること。ユーザーが予測しやすくなること、機能の追加や改善が簡単になる、信頼性が生まれる。一貫性の例外を生みにくいルールを作るといい。
シンプルさ: 「単純にする」ではなく「明快にする」
複雑さ: サービスに精通している方であればワンタップでできたりするボタンが豊富にある方が。
ユニバーサルデザイン大事。日本と世界の違いを理解する。
ユーザーは基本的にページの階層は浅く広くがいい。階層が広ければカテゴリのラベリングがわかりやすい名前をつけやすくなったり、ユーザーのインタラクションコストが少なくて済む。
PCではパンくずリストが有効だが、スマホだと現在地表記が有効。
Webサイトのわからないとは、「場所がわからない」「操作がわからない」の２つ。
ナビゲーションとインタラクション
画面エリアの制約によってフッターを無くしたり（TV）、縦長の画面など制約を理解すること。
インタラクションとは、ユーザーの入力に対する動きや変化を伴ったフィードバックのこと。「理解のためのインタラクション」と「演出のためのインタラクション」の2種類がある。
使いやすさとは、認知負荷をいかに低減させるかに大きく関わっており、インタラクションはそのための有効な手段。
演出のためのインタラクションとは素敵な体験を通じてサービスの魅力を向上させる動き。
無限スクロールではユーザーが全てのコンテンツを見ることができない。またフッターを使うことができない。また、戻るボタンとの親和性が悪い。
ページングは横向きの操作（タブの切り替え、機能切り替え）と親和性が高い。（ペジネーション）
スクロールの方向としては、テキストの量が多ければ下向き、画面の形が長ければ長い方向、要素の形が縦長であれば横向き、横長であれば縦向き、要素の隙間が大きい方向に。
デザインを形にする
スキューモーフィズムからミニマリズムへ。要するにリアルに表現するために細かく描くよりもミニマムにフラットなデザインが今は流行り。
ミニマルデザインのポイントは、「どこが押せるか判断できるようにする」「色を絞って余白を活かす」「ミニマルとシンプルの違いを理解する」