UI/UXデザイナーのSaiです。
東京を拠点に、企業のプロダクトやサービスをより直感的で快適な体験へと導く設計を手がけています。
クライアント
freee株式会社
カテゴリ
SaaS × Fintech
期間
6ヶ月
課題
1. 多様なユーザー層に対応するプロダクト設計
2. ユーザー視点を重視したデザインプロセスの導入・推進
3. 日々の業務を効率的に進めるためのUI/UX改善
4. 新しいインボイス制度への対応
役割
リサーチ、ペルソナ、カスタマージャーニーマップ、ユーザーフロー設計、プロトタイプ
クラウド会計サービス
画面フローUX改善
ユーザーの混乱や業務負担を軽減するために、導線設計や直感的なUI/UX、さまざまなユーザー層への配慮を重視し、デザイナー、エンジニア、プロジェクトマネージャーと緊密に連携しました。技術的およびビジネス的な観点を考慮しながら迅速な改善サイクルを実施し、誰もが効率的に業務を遂行できるプロダクトを実現しました。
背景・課題
・ユーザー認識の混乱
freeeIDと各サービスのアカウントの違いがわかりにくく、ユーザーが「freeeIDを忘れた」「アカウントを忘れた」と頻繁に問い合わせる状況が発生。
・サポート負荷の増大
ログイン時の混乱によって、カスタマーサポートへの問い合わせ件数が増加し、対応コストが高まっていた。
ログインページのUX改善
改善前
改善後
Information Architecture
デザインプロセス
1.
ユーザー調査と実際データの分析
実際にどのようなユーザーが、どんな状況でログイントラブルを起こしているかを整理・可視化し、ユーザーモデリングを実施。
2.
ユーザーの役割ではなく、問題ベースでの設計
会計サービスには、社員や管理者、外注スタッフなど多様な役割のユーザーが存在する。「ユーザーはどの立場で利用しているか」を確認させるより、「ユーザーはどんなの問題が起こった」にフォーカスすることで、どの役割にも共通するトラブルを幅広くカバー。
3.
直感的なガイドと補足情報
問題の種類に応じて、わかりやすい文言やUIで解決策を案内し、ややこしい用語で混乱しないよう、ヘルプやFAQへのリンクも強化。
成果
・サポート対応の負担が軽減
問い合わせ件数の削減と、ユーザー自身で問題を解決できるケースが増加。
・ユーザー理解の向上
「freee ID ＝ 各サービスをひとまとめに管理するためのID」という概念が浸透し、ログイン時のトラブルが減少した。
背景・課題
・既存業務ロジックとの両立
freeeには既に多数のサービスと利用フローが存在し、そこに新たな適格請求書発行事業者の登録番号の入力項目・管理フローを加える必要があった。すでに業務が回っているユーザーのフローを無理に変更しない、新たな番号が必要となる利用者層（または必要になるタイミング）が多岐にわたる
・ユーザーの状態/ステータスの多様性
すでに番号が発行済みのユーザー、取得申請中だが未発行、申請対象外・必要ない、制度自体をよく知らないユーザーなど、多様なユーザーを同じサービス上でシームレスに扱う設計が求められた。
将来的に項目や手続きが増える可能性を見据えて、拡張性のあるUI設計にする必要があった。
・今後の段階的な政策移行に対応
新政策に関するUI/UX対応
一部適格請求書発行事業者に関する入力フォーム
Information Architecture
デザインプロセス
1.
既存機能を壊さない拡張性重視の設計
既存のユーザーが、番号の入力欄や新しい手続きフローの登場に戸惑わないよう、基本のUIレイアウトは大きく変更せず、必要な箇所に追加する形で実装。
まだ番号が必要ないユーザーには関連画面を極力出さないか、もしくは“後から登録可能”なオプションを用意し、業務が滞るリスクを回避。
2.
ステータス別フロー設計
ユーザーが自分のステータスに合う情報だけを見られるようにし、不要なステップを踏ませないUIを提供。
番号を申請中のユーザーには、後日番号が確定した際に追加登録がしやすい導線を用意するなど、状態変化を見越した導線を設計。
3.
関連サービスとの連携＆一貫性維持
freee内の会計や請求管理など、複数のサービス・モジュールにまたがって適格事業者登録番号を扱う必要があるため、表示タイミングや入力項目の命名ルールを統一。
他のモジュールに新制度対応の影響が波及しないよう、APIやデータベース上のフィールド整理にも着手し、ユーザーが一度入力した番号をどこでも活用できる仕組みを構築。
4.
ユーザーへの段階的な周知とガイド
「適格事業者登録番号とは何か」を簡潔に説明する短い説明文を追加すると同時に、詳細ヘルプやFAQへのリンクを用意。
必要なときにだけ情報が表示されるため、一度に膨大な情報が流れ込まず、段階的に移行ができる。
成果
・既存業務への影響を最小化しつつ、新制度への移行をスムーズに
大幅なUI変更がないため、現行の操作フローを維持したまま番号入力や管理機能を追加でき、ユーザーが余計に混乱しにくい環境を実現。
・あらゆるユーザーステータスをカバー
取得済み、申請中、対象外など、多様な状態を持つユーザーが“自分に必要な操作だけ”を行えるガイド設計によって、問い合わせや操作ミスの減少に寄与。
・連携モジュールとの一貫性向上
会計、請求書発行など他のサービスと番号データを同期しやすくすることで、運用が煩雑にならず、将来的な拡張(新しい手続き・連携先の増加)にも対応可能。
背景・課題
・料金計算の複雑さ
freeeのサービスは利用人数、権限レベル、プラン期間など複数の要素によって料金が変動し、一般的な定期購入サービスよりわかりにくい。
定期購入サービスページの最適化
一部プロジェクトのプラン購入流れ
Information Architecture
デザインプロセス
1.
分かりやすい料金シミュレーション機能
「利用人数」「サービスレベル」「契約期間」などの項目をユーザーが変更すると、リアルタイムで料金を確認できるインタラクティブなUIを導入。
2.
プラン情報の公平な提示
特定のプランだけを押し付けるのではなく、各プランの特徴や費用対効果をわかりやすく並列表示し、ユーザーが自分に合ったプランを自分の意思で選べるようにする。