🚀
Nuxt.jsでWebアプリケーション開発メモ33
概要
カスタムトレーニング項目の追加検討。
→ ClaudCodeの提案により、トレーニングメニュー追加。
プロンプト33
33-1
# 命令33
# 命令33-1
- カスタムトレーニング項目の登録機能を実装したいのですが、どのような導線がよいか検討して提案してください。
- 当方が考えているのは、以下いずれかです。
- 1. 既存の右上のユーザーメニューに`カスタムトレーニング`項目を追加する
- 2. ヘッダのタイトル左側に新規にアイコン（よくある漢数字の三に似たアイコン）を追加し、そこに`カスタムトレーニング`を追加する。
ClaudCodeの回答
● 現在のヘッダー構造を分析し、両方のオプションを検討した結果、以下の提案をします。
推奨案：オプション2（新しいメインメニューアイコンの追加）
理由とメリット：
1. 将来的な拡張性
- カスタムトレーニング以外にも「トレーニングテンプレート管理」「目標設定」「レポート出力」等の機能を追加可能
- トレーニング関連機能を一箇所に集約できる
2. 論理的な情報アーキテクチャ
- 現在：Mock（開発）→ 管理（システム）→ ユーザー（個人設定）
- 追加後：トレーニング（機能） → Mock（開発）→ 管理（システム）→ ユーザー（個人設定）
3. ユーザビリティの向上
- メイン機能として位置づけられ、発見しやすい
- ユーザーメニューが肥大化せず、設定系機能と分離
具体的な実装提案：
// ヘッダー構成（左から右へ）
[タイトル] ← [トレーニングメニュー🎯] [Mock] [管理⚙️] [ユーザー👤]
// トレーニングメニュー内容（初期）
- カスタムトレーニング項目
- （将来）トレーニングテンプート
- （将来）目標設定
- （将来）レポート出力
アイコン提案：
- i-heroicons-adjustments-horizontal（調整バー）
- i-heroicons-cog-8-tooth（歯車、管理メニューと差別化）
- i-heroicons-squares-plus（カスタマイズ的な意味）
オプション1との比較：
| 観点 | オプション1（ユーザーメニュー） | オプション2（新メニュー） |
|--------|------------------|---------------|
| アクセス性 | 2クリック必要 | 1クリックでアクセス |
| 拡張性 | 制限あり | 高い |
| UI一貫性 | 既存パターン | 新パターン（統一感は保持） |
| 発見しやすさ | 中程度 | 高い |
段階的実装のすすめ：
フェーズ1： カスタムトレーニング項目のみ
フェーズ2： トレーニングテンプレート機能追加
フェーズ3： 目標設定・レポート機能追加
33-2
# 命令33-2
- `推奨案：オプション2`のイメージを確認したいので、ひとまずアイコンの追加だけ実施してください。
対応内容
- トレーニングメニューアイコンとポップアップメニューの追加。
- メニュー項目はまだモック。
- ヘッダタイトルのフォントを変更。
- ヘッダの高さを狭くした。(手動修正)
画面
ソース差分
Discussion