こんにちは！グラフィックデザイナーからUIUXデザイナー目指し勉強中のZIN（じん）と申します。
今回は現在参加している、UIUXデザインが学べるコミュニティ“BONO-ボノ”の情報設計シリーズ『出張申請サービス』の課題制作工程と学びを共有しようと思います！皆様の創作のヒントになることがあれば幸いです。（少し長めの記事になってます💦）

課題の詳細はこちら↓↓↓

今回の課題目的は、「要件と顧客ニーズに適合する機能のデザイン」を目指す内容でした。そのため、情報設計においてオブジェクト指向UI（OOUI）を用いた制作に挑戦してみました！

【概要】出張申請サービスのUIデザイン作ってみた

メインビジュアル

完成プロトタイプ

【申請作成フロー プロトタイプ】はこちら
【承認フロー(差し戻し) プロトタイプ】はこちら
【承認フロー(承認OK) プロトタイプ】はこちら

【コンセプト】

BizQuick｜出張申請サービス

コンセプト決定までのプロセス

【制作プロセス】

最終UIデザインまで、大きく「1. 要件定義」「2. 参考サービス・UI調査」「3. 情報の整理(OOUI)」「4. ラフ作成」「5. パターンだし＆ブラッシュアップ」の5段階の工程を経て制作していきました。
制作フローでは、ラフスケッチを作成し、違和感があれば再度要件定義書や情報設計の内容を見直しながら、5段階の工程を何度も行き来して作業を進めました。

【1. 要件定義】

1-1. 《ユースケース｜UIの利用シーンを整理》

ユースケースの前後を書いて課題と解決策のアイディアだし！
「誰が」「どんなときに」「何をするか」具体的なシーンを想像しながら、仮説としてユースケースをまとめていきます。ユースケースのアイディアだしをしていくことで、課題と解決策を明確化し、サービス全体の方向性や「価値」を定義していきました。
今回は「申請者」「承認者」の2種類のユースケースをそれぞれ仮定しました。

《申請者のユースケース》

《承認者のユースケース》

1-2. 《現状＆理想｜主要課題と解決策の明確化》

ユースケースを基に、「申請者」と「承認者」それぞれの「主要な課題」と「解決策」を特定しました。これによりサービス全体の「価値」をより鮮明に定義することを目指しました。

1-3. 《まとめ｜コンセプトとサービスの価値》

これまで定義した内容を元に、改めてコンセプトとサービスの価値を以下のようにまとめました。

【2. 参考サービス・UI調査】

要件定義を踏まえ、実際に自分がユーザーとなり既存サービスを体験しました。この過程で、重要なページの共通要素を分析し、それを基に各ページのUIを整理して参考にしました。

参考サイトやユースケースを基に、今回は以下のページを作成することにしました。
--------------------------------
《申請一覧》ページ
《申請の新規作成フロー》ページ
《申請の詳細確認》ページ
《承認一覧》ページ
《承認チェックフロー》ページ
--------------------------------

【3. 情報の整理（OOUI）】

オブジェクト特定と構成整理
「主要な課題」と「目標とする理想の状態」を基に「サービスの方向性」を明確にしたので、UIデザイン制作に向けて詳細な情報整理を進めています。具体的には、《行動フロー》《ページフロー》《プロパティ》《タスク》を言語化し、UI画面の中心となる“オブジェクト(コンテンツ内容)”の特定と整理を行いました。

では実際に作成した各ページの《行動フロー》《ページフロー》《プロパティ》《アクション》を詳しくみていきたいと思います。

3-1. サービス全体の《行動フロー》と《ページフロー》

《行動フロー》

《ページフロー》

3-2. 申請フローの《プロパティ》と《アクション》

アクションは★の5段階評価で「優先度」を明記し、UI設計時の強弱を整理していきます。

3-3.承認フローの《プロパティ》と《アクション》

【4.ラフ作成】

整理した情報をとりあえずUIに変換して、方向性の確認をする！
まずは、整理した情報をラフUIに落とし込み、方向性を確認します。書き起こして構造を見ることで、不備を自分で見つけて修正を行います。

【5.パターンだし&ブラッシュアップ】

それでは、UIデザイン作業に移っていきたいと思います！
今回は、以下のステップでデザインを進めていきます。このプロセスを通じて、ユーザーにとってより良いサービス体験を実現し、効果的かつ魅力的なUIデザインに仕上げていきたいと思います。

5-1. 《申請一覧》

• デザインポイント

  • 申請ステータスの強調： 各申請のステータスを色分けし、一番右に表示させることで申請進行状況が一目でわかるUI。

  • 申請一覧にフォーカスしたシンプルなUI：検索や絞り込み機能などの表示を抑え、申請一覧情報にフォーカスし、洗練された一覧表示を実現。

5-2. 《申請の新規作成》

• デザインポイント

  • ステップバイステップのプロセス：新規申請のプロセスをステップごとに分かりやすく案内し、ユーザーの操作負荷を軽減。

  • 現在地がヘッダーで一目でわかる記載：ヘッダーによる現在のプロセス段階の表示。申請プロセスのどの段階にいるかが明確にする。

  • 戻るボタンの配置位置：「戻るボタン」はページ下部ではなく、機能性を考慮してヘッダーに配置する。

  • 申請後、自動で第一承認者に依頼送信：申請完了後に自動的に初期承認者へ通知が行われ、承認フローをサポート。

5-3. 《申請の詳細確認》

• デザインポイント

  • 内容毎にブロック意識、強調部分整理し、みやすいUIに：情報をブロック分けし、重要部分を強調することで、詳細情報の視認性とアクセシビリティを向上。

  • 1カラムレイアウトでの見やすさ：1カラムレイアウトを採用することで表示領域を最大化し、情報の密度を調整。

  • 承認状況のリアルタイムフロー表示：承認の進行状況がリアルタイムで視覚化され、現在の進捗を瞬時に把握させる。

5-4. 《承認一覧》

• デザインポイント

  • 未承認の新着申請通知：未承認の申請に関するアラート機能。承認作業の優先順位を瞬時に把握させる。

  • 承認待ち項目の強調：新規申請や承認待ちの項目は太文字表記で際立たせ、対応の必要なタスクに注意を促す。

5-5. 《承認チェック》

• デザインポイント

  • 項目を一つ一つチェックする仕組み： 「承認」か「差し戻す」を選ぶダイアログUIを採用し、各項目を確認しながら進める仕様。全項目確認後のみ次へ進む仕組みで、申請の漏れ防止に効果的。

  • どの箇所に不備があるかわかりやすいコメント機能：各申請項目に直接コメントを追加するUIにより、不備の特定と連絡のスムーズ化に寄与。

【まとめ】学びと課題

■ ユーザー視点の使いやすさ

今回の深く悩んだ点は、
参考サイトに例がない独自のUIデザインをどう取り入れるか
でした。具体的に言うと、「承認プロセス中の差戻しコメントUI」の設計において、既存のサービスUI調査＆実際のビジネスユーザーへのインタビューから、多くのサービスが「最終的にコメントを一箇所にまとめて記載する」方式を採用している事が判明しましたが、私は各項目に直接コメントを付ける方がユーザーフレンドリーだと考えました。このような状況に対する適切な決断は難しくかなり悩みましたが、最終的には「最も良いと思うユーザー中心のデザインを追求すべき」という結論に至りました。
今回は「各項目に直接コメントを付ける」という方法を採用しましたが、実際のプロジェクトでは、理想的なUI（Aパターン）と実装効率を考慮した現実的なUI（Bパターン）の両方を提案し、理想と現実のバランスを取ることが望ましいと感じています。参考UIはあくまで参考であって、「既存サービスでこうしているから」は根拠にならない。どのような状況でも、ユーザー視点を優先することが重要であると、この課題を通じて学びました。

■ 機能中心のUI設計

もう一つ深く考えた点は、
どのようにして目指す作業体験をUIに反映させ、最適な方法を決定するか、
ということでした。具体的に言うと「承認時の各項目チェック」における適切なUIの選定に、なかなか苦労しました。複数のアプローチを検討した結果、表現したい「機能」を中心に考えることが重要であると気づきました。最終的に選んだUIは「申請内容の項目がYESかNOか」を示すダイアログ形式ですが、この過程を経て、最適なUIパターンを見極めるための知識不足を痛感しました。参考サービスや市場のトレンド、基礎UIの知識を学び、実際に制作して吸収する必要があると感じました。

これにて出張申請サービスの制作は終了です！
以上、大変、大変、大変なが〜い記事になってしまいましたが、最後まで読んで頂きありがとうございました！