Case Study 1
「するする稟議くん」
社内申請・承認業務をスムーズに完了させる業務アプリ
Overview
概要
2010年以前に構築されたことを想定した社内の申請・承認ツールを題材に、UI/UXの改善前後を比較したコンセプトケーススタディです。多すぎたメニューを機能ごとに見直し、似た機能をまとめながら項目数を減らしました。あわせて情報の階層を整理し、申請者の操作ステップを分けることで、画面を見るだけで次の行動に進めるような設計を意識しています。
本ケーススタディでは画面全体の構成と主要なインタラクションに焦点をあて、Beforeは静止画、Afterは主要フローを抜粋したプロトタイプとしてまとめました。
Role
UI/UXデザイン
一人制作
Tool
Figma
Type
自己課題
ポートフォリオ用
Target
社内稟議の申請者／承認者
ITリテラシーに幅あり
Device
Desktop用アプリ
Scope
主要画面5箇所のBefore/After比較
静止画＋プロトタイプ
解決すべき３つの課題
情報過多で階層がない画面
何が重要か判別できず、内容把握に時間がかかる
アプリ内で対話ができない
差戻しのやり取りが画面外に流出し、作業が完結しない
業務の全体像が見えない
承認ルートや進捗が分からず、次のステップが想像しにくい
Before/After 1
主画面の比較①
ホーム画面（申請者側）の改善:『今やるべきこと』が伝わるダッシュボードへ
Before
課題
ダッシュボードでありながら情報を詰め込みすぎていて、「今の状態を一目で把握する」というダッシュボード本来の役割を果たせていない。
グローバルメニューに優先度の低い項目まで同列に並んでいて、次に取るべき行動を想像しづらい
一覧テーブルの列数が多く、横スクロールしないと全項目を把握できない
優先度の低い指標が多く、視覚的にノイズが多い
再設計
After
改善点
ホーム画面を「今やるべきこと」を集約するための画面と考え、それ以外の機能はワンクリック先に整理した。
本アプリの機能は「全体の要約」「進行中の申請の管理」「完了した申請の確認」の3つに大きく分けられると考え、グローバルメニューをこの3項目に整理した
ユーザーがこのアプリを開いた時に何を一番やりたいかという観点で項目を絞り、それをもとに4種類のクイックアクセスカードを厳選して配置した
「最近の申請」は5件だけカード形式で表示し、それ以外の申請は「マイ申請」「履歴」から辿れるよう分けた
ステータスごとにハイライト色を変え、差し戻しなど対応優先度の高い案件に自然と視線が向くようにした
Before/After 2
主画面の比較②
申請詳細画面（申請者側）の改善：差戻し体験の再設計
Before
課題
以前の差し戻し画面は、申請詳細の項目がただ羅列されており、情報の階層が明確でないため、状況把握に時間がかかった。
ステータスが画面上で埋もれ、差戻しかどうかを一目で判断できない
承認者からのコメントが一元化されているので、誰からの指摘なのかを推測する必要がある
修正理由が文章のみで、何を直せば良いかを読み解く手間が発生する
再設計
After
改善点
再設計では、画面を開いた瞬間に状況がわかること、そして次に何をすればいいかが自然に伝わることを目指した。
画面最上部に通知バナーを配置し、開いた瞬間に差戻し状態を認識できるようにした
承認ルートを表示し、進捗状況と現在の位置を可視化した
コメントを吹き出し形式で時系列に並べ、誰が何を言ったかを迷わず追えるようにした
コメント内に指摘箇所のタグを設け、クリックで画面内の該当アイコンがハイライトされる仕組みを設けた
返信機能を追加し、画面内でやり取りを完結できるようにした
Other Key Screens
他の主要画面
新規申請画面の改善:入力負担を減らし、ユーザーのやる気を引き出すフォーム設計
承認者側ホーム画面の改善:急ぎ案件が一目で見える一覧設計
Outcome
成果と学び
Before画面は、以前の職場で出会った「年数を重ねるうちに必要な機能を後付けで足し続けた結果、メニューが溢れ、機能があちこちに散らばってしまったシステム」をイメージして作成しました。設計の起点は、機能を減らすことではなく、ユーザーがこのシステムでやりたいことに優先順位をつけることです。優先順位を整理していった結果として、自然とメニューが減り、迷いの少ない動線につながったと感じています。あわせて、ユーザーがやりたいことを丁寧に追っていく中で、コメント機能や指摘箇所のハイライトのように、新たに必要だと気付いた機能も生まれました。設計とは、ただ削ることではなく、必要なものを足したり引いたりしながら整えていく作業なのだと学びました。