エンジニア視点で捉えるデザインの力（前編）

# 自己紹介
京セラコミュニケーションシステム株式会社 
ICT技術開発部 先端技術開発課 （兼 クラウドソリューション課）の西本です。
GCPを活用したデータ収集基盤の構築、業務システム向けUX/UIデザインの案件を担当しています。

# はじめに
この記事では京セラコミュニケーションシステム株式会社（以下 KCCS）で取り組んでいる「業務システム向けUX/UIデザイン」の取り組みについてご紹介いたします。なぜKCCSがデザインに取り組むのか、どのような効果が得られたのか、前編と後編の2つに分けて、順番にご紹介したいと思います。

前編では背景・課題や目的について、後編では実際に取り組んだ施策や得られた効果についてご紹介いたします。
![Mask-group-2-1200x630.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588910/ba5418ca-6081-d5a8-9ebb-2538645b2951.jpeg)

# 対象読者
- デザインに課題意識のある方
- 業務システムにおけるデザインの効果に興味のある方
- デザインシステムに興味のある方

# 背景
私たちがデザインに目を向けたきっかけは主に2つあります。
- お客様からの「<font color="#1e90ff">**デザインもう少し良くならないの？**</font>」という指摘
- Reactなど技術スタックの移行に伴い、デザインの自由度が高まったこと

これまで私たちは、開発時に社内のフレームワークを活用していたので、エンジニアがデザインを意識することはありませんでした。良くも悪くも、そのフレームワークに則る形で、どのシステムも同じ様なデザインで仕上がっていました。

しかし、お客様からデザインに対して指摘を受けたことがきっかけで、デザインを良くするとは具体的にどういうことなのか、考えるきっかけになりました。また、Reactなどの新しい技術スタックへの移行により、デザインの自由度が高まったこと。デザインに対するニーズが高まってきたことを受け、デザイン品質を意識するようになりました。

お客様からの「デザインもう少し良くならないの？」の裏には、どのような改善ポイントがあるのか、お客様に求められているのはどのようなデザインなのか、一から理解する必要がありました。

しかし、私たちの所属している部門には、デザイナーがいなかったので、自分で研修を受けてデザインの基本から学ぶことにしました。

# デザイン研修の受講
学習を始める前はデザインに対して、下記のようなイメージを持っていました。
- かっこいい、お洒落なデザインが喜ばれる
- 画面をデザインするには、お洒落なセンスが必要
- デザイン ＝ 見た目の美しさ

しかし、UX/UIデザインの概念を知り、基本を学んでいくことで、当初のイメージはガラリと変わりました。

まず、最初の学びは「**デザインとアートは別物である**」という点でした。アートは作者の自己表現が目的である為、受け手がどのように感じてもそこに正解はありません。それに対して、デザインは**課題を解決するために施される装飾**であると言う点です。要するに、デザインはかっこいい、お洒落だと感じるだけでは意味がなく、<font color="#1e90ff">**課題解決のツールとして、画面上で正しく機能すること**</font> が重要であると理解しました。


また、デザインはセンス任せではなく、**ロジックや設計プロセス**が存在しているということ。そして、私たちの当時の設計プロセスは、機能重視のアプローチになっており、デザインに対する考慮が足りていないことが分かりました。

デザインによって解決できる課題があり、デザインは見た目を綺麗にするだけでなく、<font color="#1e90ff">**ユーザーの使い勝手や作業効率に直結している**</font>という点を本質的に理解することで、デザインの必要性を強く感じました。

研修を受けたことで「デザインの領域に伸びしろがある！」と感じた私たちは、本格的に改善活動を始動していくことになりました。

# ヒアリング
改善活動を進めていくにあたり、まずは設計チームと開発チームにデザインの課題についてヒアリングを実施しました。
1. 設計者の声
    - そもそも、デザインのやり方が分からない
    - デザイナーがいないので、エンジニアが感覚で作っている
    - デザインに時間をかけたくない
2. 開発者の声
    - デザインのルールがないので、感覚で実装している
    - デザインに対する明確な仕様が設計チームから出てこない
    - html/cssを案件ごとに触らないといけない
    - デザインの手戻りや認識齟齬で、開発コストがかかっている

デザインの設計プロセスやルールが定義されていない為、**デザイン品質が低下**していること。また、デザインの明確な仕様が決められていないことで、お客様との間で認識齟齬や手戻りが発生し、**開発の生産性の低下**に直結していることが分かりました。

デザイン品質を向上させるためには、組織として「なぜデザインに取り組むのか」という必要性の周知（Whyの部分）と、デザインガイドラインの策定やデザインプロセスの定義（Howの部分）が必要であることが分かりました。また、エンジニア集団である為、どうしてもフォーカスがバックエンドやビジネスロジックに偏ってしまう点も、意識改革と仕組み作りで解決していく必要があると感じました。

# ディスカッション
次に私たちは外部のデザインベンダーとディスカッションを実施しました。このディスカッションの中で、エンジニアとデザイナーが、**デザインに対して異なる捉え方**をしていることが分かりました。
- エンジニアの捉え方：デザインは<font color="#1e90ff">**見た目を整えるもの**</font> 
- デザイナーの捉え方：デザインは<font color="#1e90ff">**ユーザー体験を作るもの**</font>

要するに、エンジニアが「**デザインと設計は別物、デザインは仕上げの作業**」と捉えているのに対して、デザイナーは「**デザイン＝根本的な設計**」と捉えていました。この本質的な違いを理解することで、私たちのデザインへのアプローチも変わり始めました。現行の設計プロセスの最後に、デザインによるお化粧を施すのではなく、設計プロセスの最も根本的な部分に、デザインの概念を組み込んでいく必要があると理解しました。

# 目指すべきゴール
デザインの必要性を理解し、現場の課題を把握したことで、全体像が明確になってきました。私たちは、このデザインの改善活動で目指すゴール（目的）を下記のように定義しました。

1. **お客様に喜んでもらえるUX/UIデザインを実現し、顧客満足度を向上させる**
2. **フロントエンドの実装を効率化し、開発の生産性を向上させる**

お客様にとって本当の意味で見やすく、使いやすいシステムを作ることで、喜んでもらうこと。また、生産性向上のためにも、エンジニア集団が「<font color="#1e90ff">**良いデザインを簡単に設計・実装できる仕組み作り**</font>」が必要になると考えました。

![IMG_6768 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588910/6a6d6fde-eb15-ff33-409c-3ac224fd26ef.jpeg)

# おわりに
今回はUX/UIデザインに取り組んだ背景・課題と目的についてご紹介しました。後編では具体的に取り組んだ施策や、それによって得られた効果について解説していきたいと思います。後編もお楽しみに！

# 部署紹介
https://www.kccs.co.jp/contents/kagoshima-innovation-lab/

「鹿児島 Innovation Lab（イノベーションラボ）」は、京セラグループのデジタル化を支える中核拠点として工場などのシステム開発を行うとともに、KCCSが持つ技術を活用し地域活性化を支援することを目的に開設した拠点です。業務システムにおけるUX/UIデザインの専門チームも所属しております。