---
# System prepended metadata

title: UI/UXをめぐるワイの1年
tags: [UI/UX]

---

---
title: UI/UXをめぐるワイの1年
tags: UI/UX
type: slide
slideOptions:
    theme: white
    slideNumber: 'c/t'
    center: false
    keyboard: true
    width: '93%'
    height: '100%'
    transition: 'slide'

---


<!-- --------------------------------------------------------------------------------------- -->

# KT#29-kanejun 
# UI/UXをめぐるワイの1年

###### tags:`UI/UX`

---


## 今日話すこと
UI/UXをめぐるワイの1年を回顧し思うところを述べます。
ちゃんとまとまっているわけではないし、何かをKnowledge Transferできる感じでもないので軽〜く聞いてください。

---

## 全ての始まりは
全ては2021年7月にアサインされたプロジェクトから始まります。 
* 某小売大手のECサイトUIUX改善プロジェクト
* サイトの見た目を整え、顧客体験を向上する動線整備・機能開発を行うことで、EC売上向上に寄与する
* フロントはReactで構築されている

結構楽しそうに見えるわけですが、結構大変な案件でした

---

## フロントの実装課題が噴出
* 一部の端末でUIがカクツクなどの問題が多発
* Reactのバージョンが古くデザインコンポーネントのバージョンが上げられない
* カクカクでリリース判定NG喰らいまくる


---

## そもそもPJの進め方がイケてない
* クライアントのこだわりが強すぎぃぃぃなのに要件定義後にデザインを作るので、要件がひっくり返しまくられる
* デザインモックとやらを作っているがHTML+CSS+JSで作られており、そのままReactに組み込めないため時間の無駄

---

## なんとか頑張って...
2021年3月になんとか全てリリースしました

---

## 最近はその後継PJが始まってます

でもなんかうまくいってない感ある

---

## 最近はいい兆しも

* クライアントがつよつよエンジニアを採用し活躍している
* フロントのリアーキやテスト自動化、API性能改善とかやるらしい
* つよつよエンジニアが色々情報流してくれるので勉強になる

---

## Smart HR すげー
https://smarthr.design/

---

## StoryBook 良さそうー
https://fintan.jp/page/378/


---

## Chromatic へー
https://www.chromatic.com/docs/

---

## 本を買ってみた

![](https://i.imgur.com/FBWFCAd.png)

---

## 本をやっと一冊読んだ

![](https://i.imgur.com/j3Jw7ZO.png)

---

## 書いてあったこと
* サービスを考えるときに気をつけること
* サービスを実装するときに気をつけること
    * もう一冊の方の方が内容濃そう
* どうやったらUIUX中心にサービス開発できるか

---

## サービスを考えるときに気をつけること

---

UI/UXの違い

![](https://i.imgur.com/orUuy7H.jpg)

---

視点の偏り・詳しくなりすぎてしまいがち

![](https://i.imgur.com/xXiXSg6.jpg)


---

Google Analyticsだと見えないこともたくさんある

![](https://i.imgur.com/ORiQJj1.jpg)

---

## サービスを実装するときに気をつけること

---

ボタンのラベルは心理障壁が小さくなるように

![](https://i.imgur.com/SU2Adqk.jpg)


---

コードのコピペ要注意。システム目線では同じでもユーザ目線では異なるものである可能性がある。

![](https://i.imgur.com/Ujvq1DZ.jpg)

---

ユーザは頭が悪い。

![](https://i.imgur.com/u9J6l2d.jpg)

---

真摯であれ。

![](https://i.imgur.com/lj72iPj.jpg)

---

## どうやったらUIUX中心にサービス開発できるか

---

プロセス・仕組み

* サービスのリリース判定にユーザテストの点数基準を設ける
* デザイン(CDO)責任者を置き横串し組織を作る
* 社内統一されたUIUX基準を作る



---

組織・人材

* 企画と開発が分かれているのはNG
    * 開発中に問題があっても立ち返りにくいから
* 徹底的に UCD(User Centered Design) HDC(Human Centered Design) をメンバーに刷り込む



---

## 俺の中で見えてきたこと

結局ヒトなんだなあ

---

## まとめ

UIUXを意識したサービス開発をするには

* きちんとデザインを作るプロセスと仕組みが必要
* それにも増してUIUX中心で考える人材・組織づくりが重要
* UIUXの評価は定量的に測るのは難しそう
    * ユーザテストで声を集めるの大事。(著者がユーザテストサービス運営の社長だから洗脳されているかもしれないが)

もう一冊読んだらまた共有します


