UI / UX デザイン
スライド生成機能 UIデザイン
プロジェクト内容
AIを利用してファイル・テキストからスライド（.pptx）を生成、編集まで行える、自社製品の新機能におけるUI設計。
業務内容
スライド一覧画面・生成画面・編集画面デザイン
担当フェーズ
要件整理・定義 / 情報設計 / UIデザイン / HTMLモック作成
課題と設計方針
既存製品の操作体系を活かした、新機能としてのフロー設計
本機能は、既存のWebアプリケーション「AI Shorts」に追加するスライド生成・編集機能として企画されました。スライド生成機能についてはこれ以前に作成していたため、生成までの基本的なフローについては、その際に整理した内容をベースとしています。
設計にあたって重視したのは、AIによるスライド生成から、生成結果の確認・編集・エクスポートまでを、一連の操作として分かりやすく構成することです。
また、既存製品の追加機能であることから、ユーザーがこれまでの操作経験をそのまま活かせるよう、画面構成や操作方法を可能な限り既存のUIと統一することを基本方針としました。
可能な限り既存のコンポーネントを使用し、ヘッダーなども既存製品の構成を踏襲しています。
一方で、スライドの生成・編集という既存機能とは異なる操作も必要になるため、既存UIをそのまま流用するのではなく、スライドを扱う上で必要となる操作や状態を整理した上で設計しました。
考えたこと・工夫した点
「確認」と「編集」を分ける
初期案では、生成したスライドを一覧から選択すると、そのまま編集画面へ遷移する構成となっていました。
しかし、生成したスライドに対してユーザーが最初に行うのは、必ずしも「編集」ではありません。まず内容を確認し、必要があれば編集する、あるいはそのままエクスポートするという利用も考えられます。
そこで、既存のAI Shortsと同様に一覧画面からまずプレビュー画面へ遷移する構成とし、
一覧 → プレビュー → 編集
と段階を分け、プレビュー画面に「編集」と「エクスポート」を配置することで、生成したスライドを確認した上で、次に行う操作を選択できるようにしています。
作業途中の状態を失わない画面遷移
スライド生成・編集では、ユーザーが入力した内容や編集途中の状態を保持する必要があります。
初期案では生成途中や編集途中であっても他の画面へ自由に遷移できる構成となっており、操作によって作業内容を失う可能性がありました。
そこで、作業中の状態では意図しない画面遷移を防ぐとともに、「一時保存」を設けました。
また、未保存の変更がある状態で別画面へ移動しようとした場合には確認アラートを表示し、ユーザーが意図せず作業内容を失わないようにしています。
既存製品との操作の一貫性
新機能として独立した操作体系を作るのではなく、既存のAI Shortsでユーザーが経験している画面構成やコンポーネントを可能な限り活用することを重視しました。
ボタン、ページヘッダー、ステッパーなど、既に実装済みのコンポーネントを使用し、一覧からプレビューへ遷移する流れやヘッダーの構成なども既存製品との一貫性を持たせています。
新しい機能であっても、ユーザーが既存製品で身につけた操作方法をそのまま利用できることを意識しました。
