UI / UX デザイン
SaaS製品アプリデザイン

プロジェクト内容
販売中のSaaS製品「ABookBiz」の全面リニューアルとその別エディションとなる営業・プレゼンに特化した製品の企画・開発
これまでWindowsとiOSとでまったく異なっていたデザインを統一し、開発後変わっておらず時代に即していないUIUXの改善
業務内容
Windows / iOSアプリケーションのUI / UXデザイン
担当フェーズ
ワイヤーフレーム作成 / UIデザイン / コーディング / デザインガイドライン策定
期間
2024年4月~現在(開発中)
使用ツール
デザインのコンセプト
2014年から変わっていないデザインを近年のトレンドに即した形にリニューアル
長期間更新されていなかったUIを現代的なデザイントレンドに合わせて刷新しました。特に注力したのは以下の点です:
- シンプルで軽快なフラットデザインへ移行
- ホワイトスペースを効果的活用し視認性と可読性を向上
- カラーパレットの刷新
これまでユーザーが不便に感じていた部分を大幅に刷新しUXを改善
ユーザーレビューから抽出した主要な不満点に焦点を当て、徹底的な改善を実施しました:
- 複雑な操作フローを改善しステップ数を削減
- 階層構造を見直し、重要機能へのアクセス性を向上
- スマートフォンでの操作性を根本から見直し、タッチ操作に最適化
開発側の管理の観点から、WindowsとiOSを同じHTMLで作成
開発・保守効率を高めるため、単一のHTMLコードベースで複数プラットフォームに対応するアプローチを採用しました:
- デバイスの画面サイズや向きに応じて最適なレイアウトを提供
- プラットフォーム固有の操作感を維持、共通のコアエクスペリエンスを提供
- 再利用可能なUIコンポーネントを構築し、一貫性と効率性を両立
ベンチマークする製品、メインのターゲット・ペルソナを明確に定め、確実にリーチするデザイン
データに基づいた設計アプローチを採用し、競合分析とユーザーリサーチを徹底的に実施しました。
このリサーチ主導のアプローチにより、「何となく良さそう」ではなく「なぜこのデザインが最適か」を明確に説明できる根拠に基づいた設計が可能になりました。特に、ターゲットユーザーの実際の業務フローに合わせたUIの最適化が、高い評価につながりました。
工夫した点・実績
Windows / iOS、デザインが違うUIを同一HTMLで実現
クリックするWindowsとタップするiOS、UIが違う2つでも同じUXをもたらすデザインを実現しました(iOSの場合はレスポンシブも細かく考慮)。マルチプラットフォーム対応の課題を創造的に解決するため、以下のアプローチを採用しました:
- デバイスを自動検出し、最適なインタラクションパターンを提供
- 画面サイズだけでなく、デバイスの使用コンテキスト(デスクトップ/モバイル)に応じたレイアウト最適化
- 共通のビジュアル言語を維持しながら、各プラットフォームの操作習慣を尊重


トレンドUXを分析
世界中で幅広く使われているアプリのUXを分析し本製品分野に最適になるようUI / UX設計を取り入れました。最新のUXトレンドを単に模倣するのではなく、本製品の特性と目的に合わせて戦略的に取り入れるアプローチを採用しました:
- 成功している製品の共通点と差別化ポイントを体系的に調査
- 複数のデザイン案をテストし、定量的なデータに基づいて意思決定
- 一般的なトレンドを基盤としつつ、業界特有のニーズに対応した独自パターンを構築

ユーザー目線でのUX徹底改善
現行アプリの使いにくいところをユーザー目線ですべて洗い出し、既存ユーザーに愛着されている点を考慮しながらUXを改善しました。
- ユーザーレビューと使用状況分析を組み合わせた多角的調査
- 頻度と影響度に基づいて問題点を優先順位付け
- 愛着のある機能は操作感を維持しながら視覚的に刷新

デザインシステムの構築と標準化
リニューアルを機に、将来の拡張性と一貫性を確保するための包括的なデザインシステムを構築しました。
- 再利用可能なUIコンポーネントを体系化し、デザインと開発の効率を向上
- デザイン原則の明文化
デザインチームと開発チーム間のコミュニケーションが効率化され、業務時間の短縮にも貢献しました。