🥭
【OOUI 初級編】🏗 オブジェクト指向UI（OOUI）とは？体系的にやさしく解説 🌸
こんにちは！🎨 UIデザインに興味がある方なら、「オブジェクト指向UI（Object-Oriented User Interface）」という言葉を聞いたことがあるかもしれません。
本記事では、「タスク指向UI」との違いを明確にしつつ、OOUIの基本原則や設計手順を体系的に解説します！✨
🏆 OOUIとは？
オブジェクト指向UI（OOUI）は、「ユーザーの目当て＝オブジェクト」にフォーカスしたUIデザイン手法です。
従来の「タスク指向UI」との違いをざっくり説明すると…👇
| 🎯 OOUI（オブジェクト指向） | 📝 タスク指向UI |
|---|---|
| 何を操作するか（オブジェクト）を見せる | 何をするか（タスク）を先に指示する |
| 例: 📚 本の一覧から1冊を選んで「削除」 | 例: 「削除」ボタンを押してから本を選ぶ |
| 「名詞 → 動詞」の流れ | 「動詞 → 名詞」の流れ |
| ユーザーの主体性を重視 👏 | システムの都合で流れが決まる 🥺 |
🔑 OOUIの基本原則 🛠
OOUIでは、次の4つの原則が重要です！
🎨 1. オブジェクトを知覚でき、直接操作できる
- ユーザーが操作対象を視覚的に把握し、直接触れられることが大事！
✅ 良い例: スマホのギャラリーアプリ📷（写真一覧から1枚をタップ→編集）
❌ 悪い例: 「編集」ボタンを押すまで写真が見えないアプリ
🔄 2. オブジェクトは自身の状態を体現する
- オブジェクトが何なのか・どんな状態なのかを自分で示すべし！
✅ 良い例: ゴミ箱🗑アイコン（空or満杯の状態を視覚化）
❌ 悪い例: ファイルが削除可能かどうか、選択しないと分からないUI
👉 3. 「オブジェクト選択 → アクション選択」の順序を守る
- ユーザーは、まず対象（名詞）を選んでから、やること（動詞）を選ぶのが自然！
✅ 良い例: メール📩を選択 → 「既読にする」「削除」ボタンが表示
❌ 悪い例: 先に「削除」ボタンを押してから対象を選ぶ
🎭 4. すべてのオブジェクトがUIの中で協調する
- オブジェクト同士の関係性を意識し、システム全体の一貫性を持たせよう！
✅ 良い例: SNSの投稿📢（投稿ごとに「いいね❤️」「コメント💬」が統一されたUI）
❌ 悪い例: ある画面では「削除」が左、別の画面では右
🏗 OOUIの設計プロセス
1️⃣ オブジェクトを抽出する（名詞を見つける）
- アプリが扱うデータを洗い出し、「名詞」をピックアップ 📝
- 例: ペット管理アプリ → 「🐶ペット」「🍖食事」「👤飼い主」
2️⃣ ビューとナビゲーションを設計する
- メインオブジェクトを一覧で表示（コレクションビュー）
- 1つのオブジェクトの詳細ページを作る（シングルビュー）
| 🏷️ ビューの種類 | 📌 内容 |
|---|---|
| 📂 コレクションビュー | ペット一覧、予定一覧、診察履歴一覧など |
| 📖 シングルビュー | 各ペットの詳細、個別の診察記録、予定の詳細 |
[🐶 ペット一覧] → [📖 ペット詳細]
├─> [💉 健康記録一覧] → [📖 診察記録詳細]
├─> [📅 予定一覧] → [📖 予定詳細]
├─> [🍖 食事管理] → [📖 食事履歴詳細]
3️⃣ レイアウトパターンを適用する
- 「コレクションビュー → シングルビュー」**の関係を整理 🗂
- 例: ペット管理アプリ → 🐶ペット一覧 → 📖ペット詳細
🚀 まとめ
✅ OOUIは「オブジェクト（名詞）」を基準にUIを設計する考え方！
✅ 「オブジェクトを見せる → 操作させる」の順序を守るとUXが向上！
✅ オブジェクト同士の関係を意識し、一貫したUIを作ることが重要！
💡 タスク指向UIから脱却して、オブジェクト指向UIを取り入れるだけで、UIは劇的にシンプルで直感的になります！
ぜひOOUIを意識して、自分のプロダクトのUIを見直してみてください！💖
👉 あなたのアプリはタスク指向？OOUI？ コメントで教えてね！💬
Discussion