【Design Technologist】デザインテクノロジストが先導する プロダクト開発の世界

## はじめに
![Slide 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/afbe923b-0352-c772-3a97-73578240deda.png)
この記事は、2024年1月23日に開催された[Spectrum Tokyo Meetup #08](https://spctrm.design/jp/events/meetup-08/) で発表した内容です。

## 内容
### 導入
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/73ebef44-960a-777c-0cfb-d8da2b4080e4.png)

こんにちは、私はQiita株式会社の出口 裕貴です。

普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/eaba91ef-546a-0bb1-74e4-1ffdfa471a3b.png)

早速ですが、みなさん デザインテクノロジスト という役割はご存知ですか？

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f1c7ed78-16a9-bd6a-d88e-d2d8e138887e.png)

デザインテクノロジストを簡単に説明すると、

> デザインとエンジニアリングの両領域を理解して、その２つの領域のスキルを使って働く役割

です。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a06f22a8-5ee6-696c-8d44-caa6c62f9b6b.png)

最近では、デザイナーでも開発しやすい環境が用意されていたり、エンジニアでも簡単にデザインできるツールが開発されることで、デザインとエンジニアリングの領域の壁がどんどんなくなっています。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b6cacb52-576b-b3e1-1eea-f0a578ddeab7.png)

そんな中でデザインテクノロジストは、デザインとエンジニアリングの両領域のスキルを用いて、プロダクト開発していきます。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fec1f581-56fe-0717-8df1-7379320d59dd.png)

デザインテクノロジストと近い言葉として、「デザインエンジニア」や「UXエンジニア」というものがありますが、役割は微妙に違います。

「デザインエンジニア」 は、
工学分野のデザインとハードウェアのエンジニアリングの領域を専門とする役割です。

---
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1f349fc1-fd61-c800-b195-c8d4a033d79b.png)

また「UXエンジア」 は、
デザインの知識を用いてプロダクトを開発するエンジニアです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a1e927d3-f52e-0b17-8de8-b0dabbd4bccb.png)

それらと比べると
「デザインテクノロジスト」 は、
プロダクト開発のプロセスである「企画・リサーチ〜プロトタイプ作成〜実装・リリース」までが役割です。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b4bdb771-6f4a-e593-1a52-f23e18abf50b.png)

今日は、Qiitaのプロダクト開発を参考にデザインテクノロジストがプロダクト開発においてどのような役割があるのかを説明します！

### Qiitaのデザインテクノロジスト

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9cb898ce-71cc-0ebb-a4f1-74060cb5f2b7.png)

その前にQiitaについて簡単に説明します。
Qiitaは、エンジニアに関する知識を記録・共有するための記事投稿サービスです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/51d4fd87-8053-3a26-f93b-5637e60e8c93.png)

QiitaのデザインGは、全員が自分たちで企画した機能を実装し、リリースまで担当しています。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1b0cfc82-9367-74ab-5117-6dc1f09a69ff.png)

そんなQiitaでのデザインテクノロジストの役割はこちらです。

1. UXを向上させること
1. アクセシビリティを向上させること
1. ユーザーの声をプロダクトに反映させること

それぞれについて話して行きます。

### UXを向上させること
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c54dd33f-0e6c-c813-b1b3-8ff5b35e92a7.png)
まずは、「UXを向上させること」についてです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a396f2f8-d039-d484-7db8-08cf154781ce.png)

デザインテクノロジストは、デザインの知識・エンジニアリングの知識両方を有しているので、デザインデータ上で表現できないような体験にもこだわってデザイン・開発することができるので、プロダクトのUX向上することが役割の1つです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d051bfb1-738e-ab4b-d3c7-ab335f9bba9a.png)

例えば、6月頃リリース記事投稿体験の改善では、このようにエディタのデザインを変えるだけではなく、キーボード操作をできるようにしたり開発しました。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4e68c8b6-6699-4d7e-f263-d0cc6e24d3f3.png)

また、エディタの変更だけでなく、投稿中のアニメーションや投稿完了した時に表示させるモーダルのライディングにも気を付けるなどしておりました。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e06ad60d-900e-3d51-103b-988830128666.png)

このように、デザインデータで表現できないような体験にも、こだわってデザイン・開発することができるため、プロダクトのUX向上が役割の1つとなっています。

### アクセシビリティを向上させること
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9ebc4dcf-1cf7-f524-e496-0d3d303582e0.png)
次に、「アクセシビリティを向上させること」についてです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/71471803-86b6-93b5-7eea-34eb76e4b08b.png)
デザインテクノロジストは、デザインの知識・エンジニアリングの知識両方を有しているので、アクセシビリティ改善も役割の1つです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e9cee181-0c89-db62-ba27-1c89bb2ee778.png)
例えば、現在進行中のアクセシビリティの改善では、コントラスト比4.5以上になるように配色を考えて実装したり、スクリーンリーダを使っている方でもちゃんと情報にアクセスできるようにしたりなどをしております。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/013dcf3e-c060-51cc-9ba0-772165080a2a.png)

このように、UI上・コード上 両面から改善が必要なアクセシビリティ改善も役割の1つとなっています。

### ユーザーの声を聞くこと
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6963195c-9470-4888-de21-e62eb9d3f73a.png)

最後は、ユーザーの声を聞くことについてです。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/cc2e9949-1303-f497-8da0-58838d1ba1bd.png)

デザインテクノロジストは、スピード感を持ってユーザーの意見を、プロダクトに反映させることができるので、ユーザーの声を聞くことも役割の1つです。


---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fbe1b832-9611-8d27-d4d3-772b58cdb1db.png)

例えば、Qiitaでは、Qiita Discussionという、ユーザーと意見交換できるコミュニティを運営して、ユーザーからもらった意見や改善案を短い開発リードタイムでプロダクトに反映しています。

開発リードタイムが短くすることで、意見をあげたユーザーの満足度は高いです。


---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ce394b7f-15cb-2289-484d-b4e256bee400.png)

このように、ユーザーから頂いた意見を元にデザイナーがUIを作って、そのあとエンジニアが開発するといったことをせずに、意見をもらってからリリースまでデザインエンジニアだけで完結しているからこそ、スピード感を持って、ユーザーの声をプロダクトに反映できます。

## まとめ
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ed990042-1fd2-dc1a-a106-6c141840c91a.png)

最後にまとめです。

デザインテクノロジストは、デザインとエンジニアリングのスキルを活かして、「リサーチ〜デザイン〜実装」全般を担当する役割です。

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a2599c33-546d-ed6a-8bbe-a2b7959ce86e.png)

プロダクト開発を先導して、ユーザーに価値を提供しているデザインテクノロジストは、最高のプロダクトを作っていくためのプロダクト開発において不可欠な存在になると僕は考えています。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510