[BONOの課題]出張申請サービス「SUSUMU」

BONOはUIとUXデザインを学べるオンラインコミュニティです。課題への取り組みやメンターからのフィードバックを通じて、実践的なデザインスキルを身につけることができます。

BONOの課題「出張申請アプリ」の制作過程をまとめた記事です。
noteでは詳細に書いていますので、お時間のある方は以下をご覧ください。

🔽完全版

制作の流れ

まず出張申請の実態を理解するところから始めました。実際の出張申請サービスを調べましたが、法人契約前提のサービスが多く画面の動きまで確認できなかったため、紙テンプレートの調査・他の受講生の作品参考・Figma MakeによるAI生成プロトタイプの作成を並行して進めました。

ただしAIに頼りすぎた結果、情報設計がおざなりになってしまい、BONOのフィードバックで「情報設計をやり直した方がいい」と指摘を受けました。

その後、BONOの情報設計講座をもとに以下の順で仕様を整理し、デザインに落とし込みました。

• ユースケース整理:
  ユーザーがいつ・何のためにこのサービスを使うかを洗い出す作業です
• ユーザーフロー作成:
  ユーザーが目的を達成するまでの画面の流れを図に起こす作業です
• OOUIによるオブジェクトとアクションの整理:
  画面に「何を表示するか」と「それに対して何ができるか」を分けて整理する考え方です
• アクションの優先度設定:
  申請・削除・編集といった操作をどれが重要かで順位付けし、ボタンの見た目に反映させる作業です

デザインの変遷(Ver1→Ver3)

Ver1

Ver2

Ver3

以下はVer1〜3の修正点です

表示と操作の食い違いをなくす

Ver1では交通費の追加ボタンだったのに、モーダルを表示すると「交通費の編集」と言う見出し名になっていました。ボタンラベルと見出しの表記揺れがあったため、わかりづらいUIになっていると指摘を受けました。

Ver2では行動計画を追加するボタンにラベルをつけず、+アイコンのみにしてみました。アイコンだけでも「新しく追加する」という意味は伝わるため、ラベルがなくても問題ないと考えていたためです。

補足：ただVer2のUIでもわかりにくさはあったので、交通費のセクションを表形式に変更したためモーダル表示になりました。結果見出し自体はなくなり、表示と入力を一致させるという問題は解決したと思います。

行動計画という項目を廃棄

Ver2→Ver3では「行動計画」という項目を廃止しました。
同じ内容が複数行に重複して登録される問題が起きており、そもそも「行動計画が何のためにあるのか」が整理されていないという指摘を受けました。
検討の結果、出張目的の入力だけで内容は伝わること・承認者が確認したいのは経費が主体であるという推測を理由に、出張目的の1項目に統合しています。

参考のUIを変更

ビジュアル面では「AIが生成した画面の方が今っぽい」という指摘を受け、Linearのデザインを参考に余白を広げて視認性を高める方向に修正しました。

配色についても、一部Linearを参考にしています。

Linearを選んだ理由は、出張申請は申請件数が多くない業務であるため情報を詰め込むより余白重視の方が適していると判断したこと、BONOでも洗練されたUIとして紹介されていたことの2点です。

振り返り

機能を増やすことよりも、本当に必要なものを見極める方が難しいと気づきました。まず最低限の機能で設計し、必要性を確認してから追加するという順番を今後は意識していきます。

ビジュアル面では、実際のサービスUIを日頃から観察し、洗練されたデザインの感覚を少しずつ身につけていきたいです。