Works / Expense Management SaaS
複雑な経費業務を、迷わず進められる体験へ。
申請・承認・仕訳・可視化までを一元化する経費管理サービス「Calculea」の画面設計とUI/UXを担当。機能の多さを、安心感と使いやすさに変えるインターフェースを設計しました。
- INDUSTRY
- 経費管理・SaaS
- TYPE
- サービスUI / LP
- SCOPE
- 画面設計・UI/UX
- ROLE
- UI/UX Designer
Project Background
多機能であるほど難しく見える業務サービスを、導入後の便利さから理解できる設計に。
経費管理サービスは機能説明が先行すると、担当者にとって自分の課題がどう解決するのか見えにくくなります。日々の申請から管理・内部統制まで、利用場面に沿って価値を整理しました。
機能の全体像が伝わりにくい
4つの主要価値を短い言葉とアイコンで整理し、初見でもサービスの守備範囲を把握できます。
利用者ごとのメリットが曖昧
スマホ申請と経営ダッシュボードを並べ、従業員と管理者双方の利便性を一画面で示しました。
検討行動につながりにくい
資料請求と問い合わせを明確に分け、情報収集段階から導入相談まで選びやすくしています。
DESIGN CONCEPT数字を扱う画面に、
正確さと親しみやすさが共存する、業務サービスの見せ方。
迷いのない秩序を。
Concept
信頼のネイビーと、操作を導くブルー。
会計領域に必要な堅実さを濃いネイビーで表現し、操作箇所やCTAには明るいブルーを使用。十分な余白と規則的なグリッドにより、情報量があっても負担なく読める視覚設計にしています。
価値を4項目に集約
申請、スマホ対応、可視化、内部統制を並列で示し、導入効果を短時間で理解できる構成です。
画面で利用像を具体化
PCの管理画面とスマートフォンの領収書登録を併置し、実際の業務フローを想像しやすくしました。
目的別のCTA設計
資料ダウンロードを主導線、問い合わせを副導線とし、検討温度に合った次の行動を選べます。
Project Scope
業務フローを整理し、PCとスマートフォンの画面設計・UI/UXを担当。
経費精算に関わる複数の利用者を想定し、必要な情報と操作を整理。申請者と管理者がそれぞれ迷わず目的を達成できるよう、情報階層と画面遷移、操作導線を設計しました。
公開資料に基づく設計の解説
設計の背景と判断
対象者と課題｜同じ経費情報でも、目的は異なる
経費を申請する人は必要な情報を登録し、申請を進めます。管理する人は申請内容を確認し、状況を把握します。本事例で扱った複数の利用者を、このように業務の目的から整理すると、同じ情報でも見せる順序や操作の入口を考え分ける理由が分かります。
具体的な判断｜画面の見た目と、業務の流れを分けて考える
画面を見る際は、情報の読みやすさに加えて「次に行う操作を判断できるか」「確認すべき情報にたどり着けるか」を確認します。これは公開中の担当内容をもとに、今回整理した設計の見方です。実際の利用者がそこで迷ったと確認した記録を示すものではありません。
担当範囲には、画面要件・業務フローの整理から、情報階層、PC・スマートフォンのUI、画面遷移の設計までが含まれます。一方、掲載画像は実制作をもとにした再構成資料です。操作時間の短縮や使いやすさの改善を立証するには、元の画面・比較条件・利用者の検証記録を別途揃える必要があります。
Start a Project
複雑なサービスを、選ばれるわかりやすさへ。
業務内容や機能を整理し、検討者が価値を理解して次の行動へ進めるサービスサイト・UIをご提案します。