メッセージアプリ UIデザイン試作｜業務向け管理画面 UI設計（自主制作）
業務利用を想定した管理画面において、情報整理と操作設計により効率的な利用体験を構築
制作時間 約6時間
担当範囲 UI設計 / 画面構成 / 情報設計
ツール Figma
リンク（Figma）
https://www.figma.com/design/EBQ4T4XesFzFxYHVWZcebO/%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2_%E8%A9%A6%E4%BD%9C?node-id=0-1&t=leejwQSbvpevC2o8-1
プロジェクト概要
業務利用を想定したメッセージ管理画面のUI設計を自主制作として行いました。
既存ツールに見られる「情報過多」「操作の煩雑さ」を課題とし、一覧性・検索性・誤操作防止を軸に、効率的な管理体験を目指しました。
役割とアプローチ
要件定義からUI設計までを一貫して担当。
ユーザーの操作頻度や判断フローを前提に、「何を優先して見るか」「どこで操作するか」を整理し、情報と操作の関係性を設計しました。
設計の意思決定
・一覧画面は「操作」ではなく「判断」に特化
・操作は詳細画面に集約し誤操作を防止
・デバイスごとに操作特性を踏まえてUIを最適化
画面紹介
メッセージ一覧画面（送信予約 / 下書き / 送信済み）
背景・目的
送信状況の異なるメッセージを大量に扱う中で、状態の把握・必要な対応の判断を素早く行えるUIが求められると考えました。
そのため、一覧画面では操作要素を増やしすぎず、情報のスキャン性を最優先した設計を目指しました。
UI設計のポイント
・ステータスをチップ（Chip）形式で色分けし、一覧上で状態を直感的に判別できるよう設計
・チェックボックスによる複数選択・一括削除に対応し、運用時の作業効率を向上
・ステータスフィルター、管理No・日時によるソート機能を設け、目的の情報へ素早くアクセスできる構成に整理
・「編集・送信・再送・キャンセル」などの操作は行クリック後の遷移先に集約し、一覧画面では誤操作を防ぐため操作要素を最小限に抑制
結果
状態把握と検索性に優れた一覧UIとすることで、確認作業のしやすさと運用効率を両立した管理画面を実現しました。
実務での利用を想定した際にも、スムーズに運用できるUI構成になったと考えています。
PC版 / スマホ版 UIの違いへの対応
背景・目的
PCとスマートフォンでは操作特性が異なるため、同じ情報構造を保ちつつ、操作体験は最適化することを目的としました。
UI設計のポイント
・PC版では行ホバー時に背景色を変更し、削除アイコンを表示することで操作可能範囲を明確化
・スマホ版ではホバー操作が使えないため、右スワイプで削除ボタンを表示する仕様を採用
・PC版ではチェックボックスによる複数選択を常時可能とし、選択状態がひと目で分かるUIで、複数メッセージをまとめて削除できる仕様としました。マウス操作を前提に、一覧画面上で効率よく作業できる設計としています。
・スマホ版では通常時はチェックボックスを非表示とし、「選択」ボタン押下時のみチェックボックスを表示することで、画面の煩雑さを抑えつつ、PC版と同様に複数選択・まとめて削除が可能な設計としました。誤タップを防ぎながら、限られた画面サイズでも操作性を確保しています。
結果
デバイスごとの操作特性を踏まえた設計により、PC・スマホ双方で直感的に使える管理UIを実現しました。
プロジェクト全体の成果
情報量の多い業務画面において、「一覧性」と「操作の分離」を軸にUIを設計することで、状態把握と操作判断を素早く行える管理画面を構築。
ステータスの可視化や操作導線の整理により、誤操作リスクを抑えつつ、日常的な運用作業の効率化を実現した。
また、PC・スマートフォンそれぞれの操作特性に最適化した設計により、デバイスを問わず一貫した使いやすさを提供できるUIとしてまとめた。
この案件から得たこと
・一覧画面では「何ができるか」よりも「何が一目で分かるか」が重要であること
・操作を増やすのではなく、操作を分離・整理することで誤操作を防げるというUI設計の考え方
・同一機能でも、デバイス特性に合わせたUIの最適化がUXに直結するという学び
