UI/UXデザイン時に気を付けた点まとめ

京セラコミュニケーションシステム株式会社 技術開発センター
ICT技術開発部 先端技術開発課の小出と申します。
先端技術開発課では、主にXR案件を担当しています。


## はじめに

私の所属する先端技術開発課としては初めてのQiita投稿となります。

今回、私はWebGLを用いたUnityアプリケーションの全体的なUI/UX改修を担当いたしました。
実作業にあたり、UI/UXの観点で気を付けた点が多数ありましたので、実際に完成した制作物をもとに解説いたします。

### 投稿経緯と目的

今日において、UI/UXに関する情報は書籍やWeb上の記事として沢山存在していますが、
その一方で、***いち担当者が、どのような観点でどのようにしたか*** という記事は
少ないように感じています。

本記事は元々、社内ナレッジサイトに投稿予定でしたが、
***実は同じような点に悩んでいる人が多いのではないか？*** と思い、
Qiitaへ投稿させていただく運びとなりました。

本記事が、同じように悩まれている方の一助となれば幸いです。

### 対象読者

- 全体的なUI/UXデザインで悩んでいるUnityエンジニア
- uGUIの配置方法に悩んでいるUnityエンジニア



### 開発環境

- Unity
- WebGL
- uGUI


## 完成品

こちらが実際に制作した画面となります。
ブラウザを使って図書館での書架ブラウジングを楽しむことができる ***バーチャル図書館*** 向けの、
***設定および操作説明画面*** です。

本画面ベースで、それぞれの観点を記載していきます。

<img width="512" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/aa31b489-30bd-5ca3-65cd-509c445a8ee1.png">

## 全体の調整

### フォントサイズとスタイルを揃える

フォントがバラバラだと煩雑な印象を受けます。
主となるUI要素については***大/中/小 3パターン***ほど、サイズとスタイルを決めて揃えます。

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/fb830c76-31aa-8b48-abac-70e557def848.png">

### マージンを揃える

UI要素間のマージンを揃えます。

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/aac20b62-7b21-e812-512d-66aa6514e390.png">

可能であればpx(ピクセル)単位で調整されていることが望ましいですが、元画像データにすでにマージンが入っていたり、解像度の関係で間延びしてしまう場合もあるので、本件についてはUnityエディタ上で最終調整しました。

## UI要素の調整


### 原色/警戒色の使用を控える

| 改善前 | 改善後 |
|:-:|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/265cafdd-47e7-c628-c0ab-057314e65898.png)　 |![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/2d32424f-91a6-0882-6a4f-78711426658b.png)  |
|「初期設定に戻す」ボタンが目立ちすぎる |  |

原色/警戒色は要素の強調や操作の警告として使うこともありますが、全ての文字列に適用することは控えましょう。
長時間見ていると目が疲れやすくなる方もいます。

### 不可逆な動作はマウスオーバー時に警戒色を使う

<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/c887fc12-34ec-8452-27bd-5a0ea3d0fb20.gif">

ひとつ前の項目に関連していますが、
こちらは***マウスオーバー時に警戒色を使う***点がポイントです。
通常時に警戒色だと、画面全体を見たときに、ユーザーの視線がそのボタンに引き付けられてしまいます。

### 操作可能な領域をグルーピングする

操作可能な領域と、操作できない領域をグルーピングします。

<img width="512" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/86afc0e1-2adf-b70b-1315-1ffbcb0e0e80.png">

この例では、操作可能な領域は赤枠内の***色が濃い背景***、
操作できない領域は***色が薄い背景***としています。

また、全体的に***PCのUIに合わせたデザイン***としています。

### ボタンを機能別にグルーピングする

<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/991f7e22-f54e-1100-e235-a9abf766f012.png">


不可逆な操作である「初期設定に戻す」ボタンと、「再読み込み」「閉じる」ボタンの
***位置を離して配置***することで、よく使う操作と、そうでない操作をグルーピングしています。

### ダイアログは背景をクリックすると閉じるようにする

<details><summary><b>クリックで画像を展開</b></summary>

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59328/38b77e26-5abd-659c-7cef-39b8bd7727d8.gif">
</details>

これはUX的な部分ですが、モダンなアプリケーションやゲームと同様に、
***背景の余白部分をクリックして閉じる***ようにすると、
いちいちX(バツ)ボタンや閉じるボタンまでマウスを移動させる必要がなく、フラストレーションの解消につながります。

## 日常で触れるUIからインスピレーションを得てみましょう

この記事で紹介したUI/UXデザインのポイントは、日々の日常生活でも様々な場所で見かけられます。
例えば駅や飲食店の券売機、自動車のナビ、スマホアプリなど・・・

どれもよく見てみると、***押せそうなボタンは押せる***ようにしてあると思います。

逆に***押せそうで押せないボタン風の表示***や、そもそも***ボタンであることを認識されない***デザインは、ユーザーのフラストレーションを誘発することでしょう。
また***強調したい要素を大きくし過ぎたり***、***文字量を増やすとかえって読まれない***こともあります。

最近は二次元コードの台頭で、販売機のコードを読み取るとスマホから購入操作できるものがありますが、
***二次元コードを見つけたらカメラアプリを起動してかざすであろう***という、ユーザーの行動を予測した一連のデザインと言えます。

## デザイン時に心がけたい点

今回は、担当案件ベースで「このデザインでどうですか」と、私から提案型でUI/UX改修を担当させていただきました。
一方で、このデザインが必ずベストではないと思っていますし、もっと良いUI/UXもあると考えながら作業していました。

ここで重要なのは、アプリケーションを使うユーザーの視点に立ったうえで、
***自分がもしユーザーなら、どのようなデザインだと嬉しいか？***
***どのようなデザインが使いやすいかどうか？***
という観点を持ちながらデザインしていくことだと思っています。


## 参考文献

【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由

https://game.watch.impress.co.jp/docs/news/1139303.html

## 所属部署について


### ITエンジニアが活躍する地方拠点「長崎 Innovation Lab」

https://www.kccs.co.jp/contents/nagasaki-innovation-lab/

長崎 Innovation Labでは、IT技術を活用して、工場などものづくりの現場で活用できるシステムの開発に取り組んでいます。自由な発想でこれまでにない社会に役立つ製品・サービスを生み出し、長崎から発信していくことを目指しています。


### XR技術検証

近未来で活用できる技術開発の一環として、XR関連の技術開発を行っています。
XRとは、AR（拡張現実）、VR（仮想現実）、MR（複合現実）など、現実世界と仮想世界を融合する先端技術の総称です。Microsoft HoloLens 2、Meta Quest 2、Google Glassなどの先進的なデバイスを、どのように実務現場に適用できるかという視点で技術開発・検証を行っています。
京セラグループに所属している私たちは、これらの技術を工場DXにいかに適用できるのかに注力しながら活動しています。

## おわりに

以上、先端技術開発課としての初めての投稿でした。
今後も記事を投稿していく予定ですので、お楽しみに！