デザインに関するセッション。情報設計が主な内容。普遍的な内容なので開発者やデザイナーだけでなく、プロダクトに携わるあらゆるロール・ポジションが把握するべき内容。
0:00 – Introduction
- デザインエバンジェリズムチームによる、アイデアからインターフェースまでのデザイン基盤について紹介
- アプリが「うまく動作する」体験と「動作しない」体験の違いを理解し、シームレスな体験を構築する方法を説明
- 構造、ナビゲーション、コンテンツ、ビジュアルデザインの 4 つの基盤要素を体系的に解説
1:11 – Structure
- 次の質問に明確に答えられるか？
- Where am I?：現在地と、どう辿り着いたかがすぐに分かる
- What can I do?：動作は明確で理解しやすく、推測が不要である
- Where can I go?：次のステップを明確に意識できる
- 情報アーキテクチャの重要性：情報を整理し、優先順位をつけて、ユーザーが必要なものを簡単に見つけられるようにする
- 1 List every feature：アプリの機能、ワークフロー、ニーズをリストアップし、ユーザーの使用シーンを想像して整理（ここでは省かない）
- 2 Learn from peaple：ユーザーがどう使うかを想像する。いつどこで？ルーチンにどう合わせる？助けや邪魔になるもの。答えをリスト化
- 3 Organize insight：本質的でない機能を削除し、明確でないものを名前変更し、自然にグループ化
- 明確な構造により、ユーザーが「どこにいるか」「何ができるか」「どこに行けるか」を理解しやすくなる
4:55 – Navigation
- Tab bar コンポーネントを使用して主要機能へのアクセスを提供
- What deserves a tab?：タブ数を最小限に抑え、本質的な機能のみをタブに配置
- アクション（Add）はタブではなく、使用される場所（Records）に配置
- 迷ったら HIG に立ち返る
- SF Symbols を使用して視覚的に一貫性のあるアイコンを提供
- Toolbar でスクリーン固有のアクションを配置し、ユーザーの方向感覚を向上
- タイトルと画面の名称を表示：画面が明確になり、移動やスクロール時の方向感覚を維持
- アクション：タブバーの代わりに使用
- Where am I? / What can I do? が明確化
8:19 – Content
- コンテンツを重要度順に整理し、ユーザーが期待する順序で表示
- Progressive disclosure（段階的開示）で、必要最小限の情報から始めて、インタラクションに応じて詳細を表示
- Disclosure control の使用
- 遷移前後でレイアウトを一致させ、前後の繋がりを与える
- Grid の代わりに List コンポーネントを使用して構造化された情報を効率的に表示
- コンテンツを時間、進捗、パターンでグループ化して整理
- Collection を使用して画像やビデオのグループを動的に表示
13:28 – Visual Design
- カラフルな要素にまっさきに目がいってしまう
- 視覚的階層でユーザーの視線を重要な要素から順に誘導
- 重要なものを大きく、コントラストを高く
- テキストを長く、大きくしたり、言語を変えて検証：柔軟性が重要
- System text styles を使用して一貫した階層と可読性を実現
- テキストと画像の重なりでは、グラデーションやブラーで可読性を確保
- 必要なのはまとまりのあるビジュアルスタイル（Use a cohesive style）
- アプリの個性を表現する色パレットとビジュアルスタイルを確立
- Semantic colors（label, secondarySystemBackground など）を使用して動的な色の変化に対応（外観でなく目的にちなんで命名）
- コントラスト設定、画面環境、ダーク／ライトモード…