はじめに
この記事では、京セラコミュニケーションシステム株式会社（以下、KCCS）で取り組んでいる「業務システム向けUX/UIデザイン」についてご紹介します。前編では背景、課題、目的について詳しくご紹介しましたが、本編では実際の取り組みとその成果に焦点を当てて解説します。特に、エンジニアの視点からUX/UIデザインの重要性とその効果を深掘りしていきます。
対象読者
- デザインに課題意識のある方
- 業務システムにおけるデザインの効果に興味のある方
- デザインシステムに興味のある方
UX/UIデザインプロセスの導入
当初の課題
KCCSの業務システム開発ではウォーターフォール方式が主流でしたが、機能重視のアプローチが採用されており、デザインに対する十分な考慮が欠けていました。デザインプロセスやルールが未確立で、明確なデザイン仕様が存在していませんでした。
取り組みと効果
私たちは、デザイン設計プロセスとルールを根本から見直し、アジャイル開発の原則を取り入れて、設計段階からプロトタイプを用いてフィードバックを集めることで、クライアントと共にデザインを練り上げるアプローチを採用しました。これによりユーザー中心のデザインプロセスを確立し、以下の成果物を定義しました。
- ワイヤーフレーム： 基本的な構造やレイアウトを示す、シンプルなスケッチ
- デザインカンプ：色やフォント、画像などを含む、完成に近いデザインイメージ
- プロトタイプ：アプリ上で実際に動作する試作品
ユーザーからのフィードバックはポジティブな声が多く、「設計段階で実物に近いものが見られるのは嬉しい、具体的な意見や課題を出しやすい」との声が多く寄せられました。機能重視のアプローチから、ユーザー中心のアプローチへのシフトにより、デザインのクオリティが大幅に向上しました。
また、プロトタイプを中心に行われた議論は、認識の齟齬や手戻りを減らし、生産性の向上に貢献しました。これこそが、SIerがデザインプロセスを導入する際の隠れたメリットだと考えています。
Figmaの導入
当初の課題
従来のKCCSの設計プロセスではExcelを使用した画面デザインが主で、作業効率が悪く、細かなデザインの表現にも限界がありました。Excelで作成した画面デザインは、仕様書として機能しておらず、開発者に明確なデザイン仕様を伝えることができていませんでした。そのため、開発者が各々の感覚で画面をデザインしていました。
取り組みと効果
Figmaの導入により、リアルタイム共同作業が可能となり、直感的なUI操作と豊富な機能でデザイナーの作業効率が劇的に向上しました。また、デザイナーとエンジニアのコミュニケーションロスが減少しました。
KCCSオリジナルのUIコンポーネントをFigma内で作成することで、デザインの一貫性が保たれ、作業時間の短縮にも繋がりました。また、画面テンプレートを作成しておくことで、設計書が0から画面設計をすることなく、過去の画面デザインを再利用できるため、作業効率が格段に向上しました。UICを常にアップデートし続けることで、デザインのクオリティも継続的に向上していく効果も期待できます。
また、Figmaのプロトタイプ機能は、ユーザーとの議論を活発にし、潜在的なニーズや課題を引き出す効果があります。ユーザーからのフィードバックを設計段階でプロダクトに反映することができるようになりました。
デザインシステムの導入
当初の課題
従来のKCCSの開発プロセスでは、コンポーネントを再利用することができておらず、非効率な開発作業が発生していました。手戻りや認識齟齬などによる生産性の低下も課題となっていました。
取り組みと効果
デザインシステム（UXHub）の導入により、ガイドラインとルールを明確にし、再利用可能なUICをコードで効率的に管理することができるようになりました。これにより、開発の生産性が著しく向上しました。
デザインシステムには、Figmaで作成されたUICと同一のものが再利用可能なコードとして管理されており、必要なコードをダウンロードし、実装を行うことができます。また、UICは常にアップデートしていくため、案件への適応が進むにつれてデザインシステムの中身も拡充していきます。これにより開発効率が向上し、一貫性や整合性の確保が可能になりました。
Figmaのプロトタイプによって十分に議論されたデザイン仕様書を元に、デザインシステムを活用して実装する。この一貫したアプローチによって、デザインのクオリティが向上するだけでなく、認識齟齬や手戻りが減少し、プロジェクト全体の生産性も向上しました。こうして「良いデザインを簡単に設計・実装できる仕組み作り」を実現していきました。
実際に取り組んでみて
得られた効果
デザインのクオリティが格段に向上し、開発者の生産性向上にも効果がありました。特にお客様からは「設計段階で実物に近いものが見られる」点が好評で、完成品だけでなく、お客様と一緒にプロダクトを開発していく一体感の醸成にも効果を感じました。
今後の課題
デザインプロセスと、必要なデザインツールは準備が整いました。今後の課題は、最も重要なデザイナーとしてのスキルアップです。お客様と現場を深く理解した設計者が画面をデザインし、開発者がその意図を正しく理解して実装する。この一連の流れが生まれて初めてデザインの本質的な効果が提供できると考えています。設計者と開発者が、デザインに対する基礎スキルを習得し、各種デザインツールの操作をマスターすることが直近の課題となります。
今後について
教育プログラムの展開
スキルアップを図り、より高品質な上流設計を提供できるように、事業部内で教育プログラムを展開していきます。業務システムにおけるデザインは、かっこいい・お洒落なデザインは優先度が高くありません。工場現場の特殊な環境を想定し、視認性と操作性を追求したシンプルなデザインでなければなりません。
私たちは「業務システムにおけるUX/UIデザイン」に焦点を当てた教育プログラムを作成しました。情報設計を得意とするエンジニアがデザインのスキルを習得することで、現場視点・ユーザー視点・エンジニア視点を持ち合わせたUX/UIデザイナーとして成長していくことを目指していきます。
外部デザイナーとの協業
Figmaとデザインシステムを構築したことで、KCCS独自のデザインガイドラインと、UICを準備することが出来ました。これらのツール群を利用したデザイン及び、実装を依頼できるようになったことで、外部デザイナーやエンジニアとの協業時にも、一定以上のクオリティや一貫性を担保できるようになりました。デザイナーごとに生まれる表現の違いや、エンジニアごとに生まれるコードのバラつきを最小限に留めることが出来るようになりました。今後は案件の規模や専門性を考慮した上で、外部から柔軟にリソースを確保できる体制作りにも、積極的に取り組んでいきます。
終わりに
デザインのトレンドや技術は日々進化しており、ユーザーからの期待は高まる一方です。デザインプロセスの定義とツールの準備により、土台を構築できました。今後は、社内のスキルアップを図ると共に、デザイン改革を組織全体に広げることで、より高品質な上流設計ができる組織へと成長していきます。
部署紹介
「鹿児島 Innovation Lab（イノベーションラボ）」は、京セラグループのデジタル化を支える中核拠点として工場などのシステム開発を行うとともに、KCCSが持つ技術を活用し地域活性化を支援することを目的に開設した拠点です。業務システムにおけるUX/UIデザインの専門チームも所属しております。