UI / UX デザイン
既存プロダクト UI改善
プロジェクト内容
自社Webアプリケーション「AI Shorts」の運用・機能拡張に伴い、既存UIで生じた課題に対する改善案を提案。
業務内容
- 他製品への組み込みに対応するためのサブヘッダー検討・作成
- 大規模な階層データを扱うグループ・カテゴリー選択UIの改善作成
担当フェーズ
要件整理 / 情報設計 / UIデザイン / Vueモック作成
期間
2026年1月～3月
使用ツール
課題と設計方針
リリース後に加わった仕様への対応とユーザーの使いづらさを解消するための改善案
現職である株式会社エージェンテックのAI動画生成ツール「AI Shorts」は、単体のWebアプリケーションとして開発された後、自社の他製品から一部機能を利用するなど、利用範囲が拡大していきました。
また、グループやカテゴリーなどリリース当初から存在していた機能についても、仕様の検討が不十分なまま実装されたUIとなっており、扱いにくい場面が生じていました。
そこで、既存の画面構成やコンポーネントをそのまま維持するのではなく、製品の利用方法や仕様に合わせてUIを見直すことを基本方針としました。
改善にあたっては、新しいUIを追加するだけでなく、既存製品との一貫性や実装への影響も考慮し、可能な限り既存の構造を活かしながら再設計しています。
考えたこと・工夫した点
他製品への組み込みを考慮したサブヘッダー
課題
「AI Shorts」ではもともと、製品ロゴとユーザーメニューを配置したヘッダー（AppBar）内に各画面で使用する操作ボタンも表示していましたが、他の自社製品でAI Shortsの一部機能をiframeで読み込んで利用することになり、ヘッダーにあるAI Shortsロゴやユーザーメニューを表示しない構成が必要になりました。
AppBarを非表示にするとその中に配置していた画面操作用のボタンまで利用できなくなるため、製品共通の要素と各画面の操作要素を分離する必要があると考え、改善案を検討しました。
判断と改善案
各画面で必要となるボタン類をAppBarから切り離し、一段下のサブヘッダーとしてコンポーネント化することを提案しデザイン作成ました。
製品ロゴやユーザーメニューはAppBar、画面固有の操作はサブヘッダーという役割に整理することで、AI Shorts単体で利用する場合と、他製品からiframeで利用する場合の双方で同じ操作UIを使用できる構成としました。
大規模な階層データを扱う選択UI
課題
グループ・カテゴリーなどの選択にはPrimeVueのTreeSelectコンポーネントを使用していましたが、最大500グループ・13階層まで登録できる仕様が考慮されておらず、データ量が多い環境では目的の項目を探しにくいという課題がありました。
選択形式をセレクト（TreeSelect）からモーダルで表示する方法を開発チームから提案されましたが、この選択は登録モーダル内で行うケースが多くあるため、別のモーダルを重ねる構成は避けたいと考え、TreeTableコンポーネントをモーダル内に表示させる改善案を提案しました。
判断と改善案
「グループ選択」「カテゴリー選択」など、これまでTreeSelectだったパーツをボタンとし、クリックで現在開いているモーダル自体を水平方向に拡張してTreeTableで選択させるという構成を提案しました。
モーダルを重ねることなく十分な表示領域を確保し、階層構造と現在の選択内容を同時に確認できるようになり、UI改善に貢献できたと考えています。
