307 lines
9.0 KiB
Markdown
307 lines
9.0 KiB
Markdown
# 詳細セクションのUX改善提案
|
||
|
||
## 📅 作成日時
|
||
2026年2月7日
|
||
|
||
## 🐛 現状の問題
|
||
|
||
### ユーザーレポート
|
||
> カード詳細画面の詳細セクションの挙動が、編集アイコンを押してキャンセルボタンと保存ボタンが表示されて展開されたまま詳細セクションタイトルをタップすると、キャンセルと保存ボタンが表示されたまま、詳細項目だけ折りたたまれます。
|
||
> キャンセルか保存ボタンを押さないと編集アイコンに戻らないから、詳細タイトルタップ時の挙動の仕様を検討してください
|
||
|
||
### 現在の挙動
|
||
|
||
```
|
||
【通常状態】
|
||
詳細 [編集アイコン]
|
||
↓ (折りたたまれている)
|
||
|
||
【編集アイコンをタップ】
|
||
詳細 [キャンセル][保存]
|
||
↓ (展開される)
|
||
特定名称: [テキストフィールド]
|
||
精米歩合: [テキストフィールド]
|
||
...
|
||
|
||
【詳細タイトルをタップ（問題）】
|
||
詳細 [キャンセル][保存] ← ボタンはそのまま
|
||
↑ (折りたたまれる)
|
||
```
|
||
|
||
### 問題点
|
||
1. ❌ **混乱するUI**: 編集ボタンが表示されているのに内容が見えない
|
||
2. ❌ **操作の不整合**: タイトルタップで折りたたまれるが、編集状態は継続
|
||
3. ❌ **ユーザーの意図と不一致**: タイトルタップは「編集をキャンセルしたい」意図の可能性が高い
|
||
|
||
---
|
||
|
||
## 🎯 推奨する改善案（3つの選択肢）
|
||
|
||
### 💚 Option A: 編集中は折りたたみを無効化（推奨度: ★★★★★）
|
||
|
||
**挙動**:
|
||
```
|
||
【通常状態】
|
||
詳細 [編集アイコン]
|
||
↓ タップで展開/折りたたみ可能
|
||
|
||
【編集アイコンをタップ】
|
||
詳細 [キャンセル][保存]
|
||
↓ 自動展開
|
||
特定名称: [テキストフィールド]
|
||
精米歩合: [テキストフィールド]
|
||
...
|
||
|
||
【詳細タイトルをタップ】
|
||
→ ❌ 無視される（折りたたみ不可）
|
||
→ 編集状態を継続
|
||
|
||
【キャンセルをタップ】
|
||
詳細 [編集アイコン]
|
||
↓ (展開されたまま or 折りたたまれる)
|
||
|
||
【保存をタップ】
|
||
詳細 [編集アイコン]
|
||
↓ (展開されたまま)
|
||
```
|
||
|
||
**メリット**:
|
||
- ✅ **誤操作防止**: 編集中に誤ってタイトルタップで折りたたむことを防ぐ
|
||
- ✅ **UI一貫性**: 編集中は常に展開状態を維持
|
||
- ✅ **ユーザー混乱防止**: 「編集中なのに見えない」状態を回避
|
||
|
||
**デメリット**:
|
||
- ⚠️ タイトルタップが効かないことに気づかない可能性（微小）
|
||
|
||
**実装難易度**: 🟢 低（ExpansionTile の `enabled` パラメータ or `onExpansionChanged` で制御）
|
||
|
||
---
|
||
|
||
### 🟡 Option B: 詳細タイトルタップで編集をキャンセル（推奨度: ★★★☆☆）
|
||
|
||
**挙動**:
|
||
```
|
||
【編集アイコンをタップ】
|
||
詳細 [キャンセル][保存]
|
||
↓ 自動展開
|
||
特定名称: [テキストフィールド]
|
||
...
|
||
|
||
【詳細タイトルをタップ】
|
||
→ 編集をキャンセル
|
||
→ 詳細 [編集アイコン]
|
||
→ 折りたたまれる
|
||
```
|
||
|
||
**メリット**:
|
||
- ✅ **直感的**: タイトルタップで「編集終了」の意図を実現
|
||
- ✅ **ショートカット**: キャンセルボタンを押さずに編集終了可能
|
||
|
||
**デメリット**:
|
||
- ❌ **誤操作リスク**: 誤タップで編集内容が失われる
|
||
- ❌ **確認ダイアログ不要？**: 編集内容を保存せずに破棄するため、確認が必要かも
|
||
|
||
**実装難易度**: 🟡 中（`onExpansionChanged` で編集中の判定が必要）
|
||
|
||
---
|
||
|
||
### 🔴 Option C: 現状維持 + 警告表示（推奨度: ★☆☆☆☆）
|
||
|
||
**挙動**:
|
||
```
|
||
【詳細タイトルをタップ（編集中）】
|
||
→ SnackBar表示: 「編集中です。キャンセルまたは保存を押してください」
|
||
→ 折りたたみを無効化
|
||
```
|
||
|
||
**メリット**:
|
||
- ✅ ユーザーに状況を通知
|
||
|
||
**デメリット**:
|
||
- ❌ **UX悪化**: エラー表示でユーザーを責める形になる
|
||
- ❌ **根本解決にならない**: 問題を回避しているだけ
|
||
|
||
**実装難易度**: 🟢 低
|
||
|
||
---
|
||
|
||
## 💡 推奨する実装（Option A）
|
||
|
||
### 変更内容
|
||
|
||
#### 1. ExpansionTile の `onExpansionChanged` を追加
|
||
|
||
```dart
|
||
// lib/widgets/sake_detail/sake_detail_specs.dart:166
|
||
|
||
ExpansionTile(
|
||
controller: _expansionController,
|
||
// v1.0.12+24: 編集中は折りたたみを無効化
|
||
onExpansionChanged: (isExpanded) {
|
||
// 編集中に折りたたみを試みた場合、無視する
|
||
if (_isEditing && !isExpanded) {
|
||
// 強制的に展開状態を維持
|
||
Future.microtask(() => _expansionController.expand());
|
||
}
|
||
},
|
||
leading: Icon(LucideIcons.sparkles, color: appColors.iconDefault),
|
||
// ...
|
||
```
|
||
|
||
#### 2. キャンセル時の挙動を調整
|
||
|
||
```dart
|
||
void _cancel() {
|
||
setState(() {
|
||
_isEditing = false;
|
||
_updateControllers();
|
||
});
|
||
// キャンセル後は折りたたむ（オプション）
|
||
// _expansionController.collapse();
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 代替案: Option B の実装（参考）
|
||
|
||
```dart
|
||
ExpansionTile(
|
||
controller: _expansionController,
|
||
// v1.0.12+24: 編集中に折りたたみを試みた場合、編集をキャンセル
|
||
onExpansionChanged: (isExpanded) {
|
||
if (_isEditing && !isExpanded) {
|
||
// 確認ダイアログを表示
|
||
showDialog<bool>(
|
||
context: context,
|
||
builder: (context) => AlertDialog(
|
||
title: const Text('編集を破棄'),
|
||
content: const Text('編集内容を保存せずに閉じますか？'),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context, false),
|
||
child: const Text('キャンセル'),
|
||
),
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context, true),
|
||
child: const Text('破棄'),
|
||
),
|
||
],
|
||
),
|
||
).then((confirmed) {
|
||
if (confirmed == true) {
|
||
_cancel();
|
||
} else {
|
||
// 展開状態を維持
|
||
_expansionController.expand();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// ...
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 実装後のテストシナリオ
|
||
|
||
### Option A のテスト
|
||
|
||
#### テスト1: 編集中の折りたたみ試行
|
||
1. 詳細画面を開く
|
||
2. 編集アイコンをタップ → 展開される
|
||
3. **詳細タイトルをタップ**
|
||
4. **期待結果**: 折りたたまれない（展開状態を維持） ✅
|
||
|
||
#### テスト2: キャンセル後の動作
|
||
1. 編集モードに入る
|
||
2. キャンセルをタップ
|
||
3. **期待結果**: 編集アイコンに戻る、展開状態は維持（または折りたたまれる） ✅
|
||
|
||
#### テスト3: 保存後の動作
|
||
1. 編集モードに入る
|
||
2. データを変更
|
||
3. 保存をタップ
|
||
4. **期待結果**: 編集アイコンに戻る、展開状態を維持 ✅
|
||
|
||
#### テスト4: 通常時の折りたたみ
|
||
1. 編集していない状態で詳細タイトルをタップ
|
||
2. **期待結果**: 正常に展開/折りたたみできる ✅
|
||
|
||
---
|
||
|
||
## 📊 各オプションの比較表
|
||
|
||
| 項目 | Option A | Option B | Option C |
|
||
|------|----------|----------|----------|
|
||
| 推奨度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐☆☆ | ⭐☆☆☆☆ |
|
||
| 誤操作防止 | ✅ 最良 | ⚠️ 確認必要 | ⚠️ 不十分 |
|
||
| UI一貫性 | ✅ 高 | 🟡 中 | ❌ 低 |
|
||
| 実装難易度 | 🟢 低 | 🟡 中 | 🟢 低 |
|
||
| ユーザー混乱 | ✅ 最小 | 🟡 少 | ❌ 多 |
|
||
| 開発工数 | 15分 | 30分 | 10分 |
|
||
|
||
---
|
||
|
||
## 🎯 推奨する次のアクション
|
||
|
||
### 即実施（推奨）
|
||
1. ✅ **Option A を実装**
|
||
- `onExpansionChanged` で編集中の折りたたみを無効化
|
||
- コメントで意図を明確化
|
||
|
||
### 実機テスト
|
||
2. ✅ **上記のテストシナリオを実行**
|
||
- 編集中の折りたたみ試行
|
||
- キャンセル/保存後の動作
|
||
- 通常時の動作
|
||
|
||
### 任意検討
|
||
3. 🟡 **Option B の検討**
|
||
- ユーザーフィードバック次第で Option B に変更も可能
|
||
- 確認ダイアログの追加を検討
|
||
|
||
---
|
||
|
||
## 💬 ユーザーへの質問
|
||
|
||
以下の点についてご意見をお聞かせください：
|
||
|
||
### 質問1: 編集中の折りたたみ
|
||
**Option A（推奨）**: 編集中は折りたたみを無効化
|
||
**Option B**: 編集中にタイトルタップで「編集をキャンセル」（確認ダイアログ付き）
|
||
|
||
どちらが望ましいですか？
|
||
|
||
### 質問2: キャンセル後の動作
|
||
キャンセルボタンを押した後、詳細セクションは：
|
||
- **A**: 展開されたまま（現在の内容を確認できる）
|
||
- **B**: 折りたたまれる（元の状態に戻る）
|
||
|
||
どちらが望ましいですか？
|
||
|
||
---
|
||
|
||
## 🎉 まとめ
|
||
|
||
### 推奨実装
|
||
**Option A: 編集中は折りたたみを無効化**
|
||
|
||
**理由**:
|
||
1. ✅ 誤操作を防ぐ
|
||
2. ✅ UI一貫性を保つ
|
||
3. ✅ ユーザー混乱を最小化
|
||
4. ✅ 実装が簡単（15分）
|
||
|
||
**次のステップ**:
|
||
1. ユーザーの意見を確認
|
||
2. Option A を実装
|
||
3. 実機テストで動作確認
|
||
|
||
---
|
||
|
||
**作成者**: Claude (Sonnet 4.5)
|
||
**作成日時**: 2026年2月7日
|
||
**対象**: sake_detail_specs.dart の UX 改善
|
||
**推奨**: Option A（編集中は折りたたみを無効化）
|