1. デザインの目的と UI/UX
- デザインとは設計のこと
- UI (User Interface) とは：ユーザーとデバイスの接点
- UX (User Experience) とは：ユーザーがサービスから受ける全ての体験
-
UIとUXは別の概念
- UIは 客観的
- UXは 主観的
2. 物理的制約
- インターフェースの起点は、デバイスとの物理的な接触から始まる
-
入力手段の違いが、インターフェースデザインに根本的な影響を与える
- PC：ホバーが使える
- スマホ・タブレット：ホバーが使えない
- PC・スマホ・タブレット：対象を直接選択する
- TV：フォーカスを移動して選択する
-
デバイスによる違い
- 画面との距離、画面の大きさ、向きが異なる
- 画面の大きさとアスペクト比は固定であり、変えられない
-
AndroidとiOSの大きな違い
- 戻るボタンの有無
3. ソフトウェアの影響
-
アプリとWebサイトでは最適なUIが異なる
- アプリ：OSごとに異なる
- Webサイト：環境によらず共通
-
画像の種類による影響
- ラスターデータ画像 (JPG, GIF, PNG)：解像度の考慮が必要
- ベクター画像 (SVG)：解像度によらず最適に表示される
- テキストデータ：解像度の影響を受けず最適に表示される
- パフォーマンス最適化を考慮する（素早く表示されるように）
4. 人間の認知特性（具体例付き）
-
色・形・動きの認知は生得的能力
- 例：赤いボタンは「警告・注意」を示しやすい（例：削除ボタン）。
-
インタラクションコストを最小にするのが良いデザイン
- 例：ログインフォームで「パスワードを表示」ボタンを追加することで、入力ミスを減らす。
-
共通概念を活用する（逆らうと認知負荷が増す）
- 例：「ゴミ箱」アイコンを削除ではなく「保存」に使うと混乱を招く。
5. 階層と構造
- アプリやWebサイトは、縦・横・前後の立体的構造を持つ
- インタラクションは前後関係の理解に役立つ
-
現在地の表現方法
- 太さ・色・大きさ・背景色・目印
-
一覧の操作方法
- 絞り込み・並べ替え・切り替え
6. ナビゲーションとインタラクション
- ナビゲーションとは、インターフェースの集合体
-
最適なナビゲーションは以下の要素で変わる
- コンテンツ量
- 画面の自由度
- 入力手段
7. デザインを形にする（具体例付き）
-
ミニマルデザイン
- 押せる場所を判別できるようにする
-
デザインガイドライン
- 形骸化しないように運用する
-
プロトタイプ・モックアップの注意点
-
作り込みすぎない
- NG例：最初のプロトタイプでデザインを完璧にしようとして時間をかけすぎる
- 良い例：まずは手書きワイヤーフレームやシンプルなFigmaなどでモックアップを作成し、フィードバックをもらう。それを元に改善していく。
-
アイデアの価値や方向性を把握する
- 例：新しいナビゲーションUIを導入する前に、ユーザーに簡単なテストを実施し、理解しやすいかを確認する。
-
早めに何度も失敗する
- NG例：「完璧なデザインを考えてから実装する」と決めると、変更に対応しにくくなる。（サンクコスト）
- 良い例：ABテストを行い、異なるデザインを少人数のユーザーで試しながら最適なUIを決定する。
-
想定外の問題を解決し、サービスの価値を向上
- 例：Google検索の「検索候補表示」は、もともと開発者がテスト中に見つけた使い勝手の改善アイデアから生まれた。（らしい）
-
作り込みすぎない