株式会社キングジム様
「TEPRA LINK 2」APPのUX/UI改修
TEPRA LINK 2は、iOS/Android端末で利用できるテプラPRO本体と連携し、優れたラベル編集機能を提供しています。本プロジェクトでは、既存のAPP画面をもとにワイヤーフレームによる情報設計とUIデザインの改修を担当させていただきました。
TEPRA LINKはリリースから大幅な仕様変更はなく、モバイルでの業務利用を想定した仕様には対応しておらず、PC向けの機能に比べて機能が簡易的になっているという課題がありました。
上記の課題を踏まえた上でTEPRA LINK 2では、現代のニーズに合わせた使い勝手を実現するために基本的な画面設計を見直しました。業務用APPの特性上、どうしても画面内の要素が多くごちゃついた印象になりがちです。
既存ユーザーをもとにモバイルでの業務利用を想定し、ユーザーがスムーズかつ効率的に操作できるような情報設計を行いました。また機能追加を行うことでユーザーのさらなるラベル編集体験を向上させました。
QA、画面要件定義
このフェーズでは、既存の簡易的なワイヤーフレームをもとにワイヤーフレームに対するQAと画面要件の定義を行いました。 まず、QAでは既存のワイヤーフレームを理解し、画面遷移の流れや各画面の役割を把握しました。その後、ユーザビリティや機能性に関する課題や不明瞭な点を洗い出し、要件定義のための改善点を特定しました。 機能要件やデザイン要件、データ入力や出力の要件など、必要な機能や制約を明確に定義しました。また、非機能要件（パフォーマンス、セキュリティ、互換性など）も考慮しました。 これにより画面遷移と画面要件が明確になり、開発方針と目標がより具体化されました。次フェーズでのUIデザインや開発作業において、ユーザーの期待に応える機能性と品質を確保するための基盤を整えました。
UXデザイン
このフェーズでは、既存のワイヤーフレームに対するQA結果をもとに画面内の情報設計を見直し、ワイヤーフレームの作成を行いました。 QA結果を分析し、ユーザーが求めるラベル編集機能や操作フローを把握しました。その後、ユーザビリティを向上させるために各機能の配置やワークフローを検討しました。 情報設計では、画面上の情報の配置や階層構造の見直しを行い、ユーザーが直感的に操作できるような情報の組み合わせやグループ化を行いました。 ワイヤーフレーム作成では、情報設計の結果をもとに画面上の要素やコンポーネントの配置を定義。これにより、次フェーズのUIデザインや実装の方針を明確化し、ユーザーにとって操作しやすいAPPの開発に向けた基盤を構築しました。
UIデザイン
このフェーズでは、ユーザーが業務で本APPを長時間使用する際に目の負担を軽減するデザインを追求しました。ユーザーが長時間作業しても目が疲れにくく、快適なラベル編集体験を実現するためのUIデザインの改修を行いました。 目の負担を軽減するデザインを実現するために、視認性や色の使い方に重点を置きました。適切なフォントサイズとカラーパレットを選定し、コントラストを調整してテキストや要素が鮮明に表示されるようにしました。また、視覚的な疲労を軽減するために、適切なスペーシングやレイアウトを採用し、情報の密集感を回避しました。 またシンプルで直感的なナビゲーションやメニュー構造を導入しました。よく使用される機能には優先的なアクセスを与え、頻繁に使用される操作は素早く実行できるような設計を行いました。さらに、機能やオプションの整理やカテゴリ分けを行い、ユーザーが必要な機能を迷わず、直感的に操作できるようにしています。快適な操作体験を提供するために、UIデザインの最適化に取り組みました。