Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for 出口 裕貴 出口 裕貴
January 23, 2024
Design
740
2

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

2024/01/23 に開催された、Spectrum Tokyo Meetup #08 で発表したスライドです。

Avatar for 出口 裕貴

出口 裕貴

January 23, 2024

More Decks by 出口 裕貴

See All by 出口 裕貴
初めてのClaude Code
Avatar for 出口 裕貴 degudegu2510
0
39
AIを活用したアクセシビリティ改善フロー
Avatar for 出口 裕貴 degudegu2510
1
270
Tripo MCP × Cursorで始める 手軽な3Dモデル生成の世界
Avatar for 出口 裕貴 degudegu2510
0
570
はじめての自作キーボード制作
Avatar for 出口 裕貴 degudegu2510
0
53
Figma Plugin開発は面白い!
Avatar for 出口 裕貴 degudegu2510
1
230
社内を動かすアクセシビリティ戦略
Avatar for 出口 裕貴 degudegu2510
1
380
ダークテーマとアクセシビリティの融合したカラートークンの設計
Avatar for 出口 裕貴 degudegu2510
9
8.4k
最速で価値を届けるUXリサーチ
Avatar for 出口 裕貴 degudegu2510
5
1.5k
Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~
Avatar for 出口 裕貴 degudegu2510
0
3.1k

Other Decks in Design

See All in Design
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
13
7.4k
20260802東京都市大学オープンキャンパス授業
Avatar for Kimura Atsunobu a2k
0
120
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
1
410
デザイン組織の"次の"強みづくり
Avatar for 井斉花織（いおり） isaikaori
2
350
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
890
[Unity] VAT×VFX Graphがいま個人的にアツイという話
Avatar for sakiama sakiyama
0
140
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
290
The decksh tutorial
Avatar for Anthony Starks ajstarks
1
140
Design_Harness_and_Loop.pdf
Avatar for 長津孝輔 nagatsu
0
140
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
700
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
400
泥臭く語るUIデザイン会｜ホワイトボードチャレンジ【RAMEN TECH 2026】
Avatar for @Garyuten garyuten
1
260

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
770
HDC tutorial
Avatar for Michiel Stock michielstock
2
1k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.2k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
330
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
470
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.9k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
380
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
47k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
470
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
740
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
350

Transcript

  1. デザインテクノロジストが先導する プロダクト開発の世界 Qiita株式会社 出口 裕貴

  2. Qiita株式会社 デザインG マネージャー・Qiita PdM X：@degudegu2510 デザイン, フロントエンドに関連する情報を中心に発信している DEGUCHI HIROKI 出口

    裕貴

  3. 「デザインテクノロジスト」 という役割をご存知ですか？

  4. デザインとエンジニアリングの領域を理解して その２つの領域のスキルを使って働く役割 デザインテクノロジストとは Designer Engineer

  5. 最近は、デザインとエンジニリングの壁がなくなっている デザインテクノロジストとは Designer Engineer

  6. デザインとエンジニアリングのスキルを使いプロダクト開発をする デザインテクノロジストとは Designer Engineer

  7. デザインエンジア 工学分野のデザインとハードウェアのエンジニアリングを専門とする役割 デザインエンジニアとUXエンジニア Designer インダストリアル 組み込み技術 ハードウェア開発 ソフトウェア開発 製造技術 構造・電気設計

    Engineer

  8. UXエンジア デザインの知識を用いてプロダクトを開発するエンジニア デザインエンジニアとUXエンジニア Designer UX / UI フロントエンド コンポーネント設計 SEO

    リサーチ 体験設計 Engineer

  9. デザインテクノロジスト 「リサーチ〜設計〜実装〜リリース」全般を担当する役割 デザインエンジニアとUXエンジニア Designer UX / UI フロントエンド コンポーネント設計 SEO

    リサーチ 体験設計 Engineer

  10. Qiitaの事例を紹介しながら デザインテクノロジストが プロダクト開発において どのような役割があるのかを説明します！

  11. エンジニアに関する知識を記録・共有するための記事投稿サービス Qiitaとは

  12. デザインG 全員がデザインテクノロジスト 機能の企画〜リリースまで担当しています。 QiitaのデザインG

  13. Qiitaのデザインテクノロジストの役割 GF UXを向上させるこ4 8F アクセシビリティを向上させるこ4 CF ユーザーの声を聞くこと

  14. UXを向上させること

  15. デザインとエンジニアリングのスキルがあるからこそ UXを向上させること デザインデータで表現できないような体験にも こだわってデザイン・開発することができる etc. アニメーション, キーボード操作 デザインデータで表現できないような体験にも こだわってデザイン・開発することができる etc.

    アニメーション, キーボード操作

  16. 記事投稿体験の改善 Before After エディタのUIの変更・キーボード操作できるようにする

  17. 記事投稿体験の改善 投稿中の画面 投稿後の画面 アニメーションやライディングもこだわる

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

  19. アクセシビリティを向上させること

  20. アクセシビリティの改善 デザインとエンジニアリングのスキルがあるからこそ アクセシビリティ改善にも こだわってデザイン・開発することができる etc. WCAG, コントラスト比 アクセシビリティ改善にも こだわってデザイン・開発することができる etc.

    WCAG, コントラスト比

  21. アクセシビリティの改善 コントラスト比を考慮した配色 スクリーンリーダーのため改善 UI上・コード上 両面からアクセシビリティの対応ができる

  22. アクセシビリティの改善 UI上・コード上 両面から改善が必要な アクセシビリティ改善も役割の1つ UI上・コード上 両面から改善が必要な アクセシビリティ改善も役割の1つ

  23. ユーザーの声を聞くこと

  24. ユーザーの声を聞く ヒアリング 〜 デザイン 〜 開発を全てできるから スピード感を持ってユーザーの意見を プロダクトに反映させることができる etc. 開発リードタイムが短くできる

    スピード感を持ってユーザーの意見を プロダクトに反映させることができる etc. 開発リードタイムが短くできる

  25. ユーザーの声を聞く Qiita Discussions 実装 開発リードタイムが短いことで、ユーザー満足度が高い

  26. ユーザーの声を聞く スピード感を持ってユーザーの意見を プロダクトに反映させるこも役割の1つ スピード感を持ってユーザーの意見を プロダクトに反映させるこも役割の1つ

  27. まとめ Designer UX / UI フロントエンド コンポーネント設計 SEO リサーチ 体験設計

    Engineer デザインテクノロジストは、DesignとEngineeringのスキルを使って 「リサーチ〜デザイン〜実装」全般を担当する役割

  28. プロダクト開発を先導して ユーザーに価値を提供している デザインテクノロジストは プロダクト開発おいて不可欠な存在