エンジニアもUIを作るならユーザーについて知ろう！（スライド・原稿）


この記事は、[Qiita株式会社のカレンダー | Advent Calendar 2023 - Qiita](https://qiita.com/advent-calendar/2023/qiita-inc)の4日目の記事です。

https://qiita.com/advent-calendar/2023/qiita-inc

---

## この記事について

2023/11/24に開催された [[ハイブリッド開催] Wantedly x Qiita Meetup #1 フロントエンドのあれこれ - connpass](https://wantedly.connpass.com/event/300025/) での発表内容です。

https://wantedly.connpass.com/event/300025/

実際に発表したときのスライドはこちらです。

https://speakerdeck.com/ohakutsu/enziniamouiwozuo-runarayuzanituitezhi-rou

## 内容

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/3710a2db-0f28-0dbd-be15-bd665564c790.jpeg)

「エンジニアもUIを作るならユーザーについて知ろう」について発表します。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/5d743569-c156-1de7-924a-91e520328766.jpeg)

宣伝になりますが、今週の月曜日にQiitaのAIサジェスト機能をクローズドベータ版としてリリースしました。
（後にAIサジェスト機能の話題があるため、載せています）

https://corp.qiita.com/releases/2023/11/ai-suggest-closed-beta/

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/ba6c044c-daf3-5e40-bdbb-9a18b9c7e370.jpeg)

今回話すテーマは「ユーザーにとって使いやすいUIを開発するために、エンジニアはどうユーザーと接すると良いか」です。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/e6c9b1a0-dcd4-3843-3301-f22d1f9801b6.jpeg)

いきなりですが、みなさん、開発した機能がユーザーにどう使われているか知っていますか？
「イベント等の数値を見ているけど、あまり知らないな...」「会社ではユーザーヒアリングをやっているけど、自分は参加したことないな...」ってエンジニアが多いのではないかなと思います。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/9369be8b-b1b3-e017-3f26-93cc95771f90.jpeg)

ですが、やはりユーザーの行動には数値上では見えない情報が隠れています。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/11e919ee-cec8-8f58-8fd2-18ad62ddce48.jpeg)

ここで、実際のエピソードを紹介します。
このエピソードは冒頭で宣伝させていただいたAIサジェスト機能を開発中の出来事です。

AIサジェスト機能の開発では、いくつかのプロトタイプをつくっていました。
記事のタイトルやタグを提案してくれるものだったり、記事の文章校正をしてくれるもの、あとは今回リリースした機能のような文章の続きを提案してくれるものなどです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/2885581f-68eb-140c-309f-87a18835448a.jpeg)

そのプロトタイプの1つに、GitHub Copilot風のインターフェースで、文章の続きを提案してくれるものがありました。
文章を入力しているとAIから続きの提案がされ、それを受け入れることができるといったものです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/b073cd78-edb5-53b0-f62f-a9f40478d695.jpeg)

このGitHub Copilot風のAIサジェスト機能を社内向けにリリースをしていました。
その段階では提案スピード等の課題はあったものの、改善していければかなり良い体験を提供できるのではないかとポジティブな評価でした。
ですが、その後に一部のユーザーの方に試していただき、ユーザーヒアリングをしてみて、かなり使いづらそうということがわかりました。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/78fa7e1d-acbe-ced4-daf6-0afd804addfa.jpeg)

そして、その「使いづらい」というのはユーザーの行動に現れていました。
不自然なカーソルの移動をしていたり、「あれ、何考えていたっけ」のような呟きであったり、一時停止していたりなど。ユーザーを困惑・邪魔するUIになっていることがわかりました。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/dec9c332-4d1f-9496-f464-18d2886c6d0f.jpeg)

このことからわかることとしては、エンジニア（開発者）が良いと感じるものを、ユーザーも良いと感じるとは限らないということです。特に、エンジニアは統一したルールで処理がされることを好みますが、ユーザーにとってそれが好ましいかは別です。
また、「うちはデザイナーがつくってくれたUIを実装しているから大丈夫だよ」って場合でも注意が必要です。実際にユーザーが触れるUIは、デザインのような静止したものではなく動きのあるものであり、その動きをイメージし、つくるのは **エンジニアであるから** です。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/ee2dacdb-a67b-3f11-f19b-e150b6d6443e.jpeg)

だからこそ、エンジニアも1ユーザーの操作や行動を直接見て、知っておくべきだと思います。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/1c0d50c9-8d6d-4ba9-e144-1c3356d55139.jpeg)

そして、このような発見をできるようにするためのノウハウを紹介します。
僕はこれまでAIサジェスト機能と2022年のエディタアップデートの2回、ユーザーヒアリングに参加してきました。そこで、学んだノウハウとして以下の3つがあります。

### 1. 「普段通りに使ってもらう」

当たり前のようですが、ヒアリング時には時間やディスプレイの有無など、ユーザーの普段通りとは少し異なる環境になってしまうことが多いと思います。また、その差があることは認知しておく必要があります。

### 2. 「使っている際のつぶやきや行動も記録する」

画面ばかりに注意が向いてしまうことが多いと思いますが、ユーザー自身の視線や手の動き、心から漏れ出た言葉からもヒントをもらえることがあります。また、その姿も映像に残しておくと画面と一緒に繰り返し見て分析ができるので便利です。

### 3. 「ささいなことにも注意をはらう」

ユーザーのどんな小さな動きにもその行動を取った理由があるはずだという目で見るということです。ユーザーさえ気がついていない課題がそこにはあります。

この3つを意識することで、ユーザーについて深く知ることができます。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/3103ac65-71c8-7d78-edca-35262dcfb99f.jpeg)

最後に、今回伝えたかったことは、

- エンジニアは実際のユーザーにどう使われるのかを知っているようで知らない
- だからこそ、1ユーザーの操作を直接見て知っておくべき

でした。

ユーザーフレンドリーな機能開発を僕たちエンジニアが主導して行きましょう！

---

記事を読んでいただきありがとうございます！
ぜひ、[Qiita株式会社のカレンダー | Advent Calendar 2023 - Qiita](https://qiita.com/advent-calendar/2023/qiita-inc)を購読設定して、明日の記事もご覧いただけると嬉しいです。