Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for 出口 裕貴

出口 裕貴

January 23, 2024
Tweet

More Decks by 出口 裕貴

See All by 出口 裕貴
Tripo MCP × Cursorで始める 手軽な3Dモデル生成の世界
Avatar for 出口 裕貴 degudegu2510
0
240
はじめての自作キーボード制作
Avatar for 出口 裕貴 degudegu2510
0
17
Figma Plugin開発は面白い!
Avatar for 出口 裕貴 degudegu2510
1
180
社内を動かすアクセシビリティ戦略
Avatar for 出口 裕貴 degudegu2510
1
320
ダークテーマとアクセシビリティの融合したカラートークンの設計
Avatar for 出口 裕貴 degudegu2510
9
7.2k
最速で価値を届けるUXリサーチ
Avatar for 出口 裕貴 degudegu2510
5
1.4k
Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~
Avatar for 出口 裕貴 degudegu2510
0
2.9k
CSS Anchor Positioning のきほん！
Avatar for 出口 裕貴 degudegu2510
2
2.3k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
Avatar for 出口 裕貴 degudegu2510
0
530

Other Decks in Design

See All in Design
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
8
2.4k
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
920
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
0
130
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
970
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
1
3.9k
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
410
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
660
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
860
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
1
220
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
700
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
560
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
500

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
980
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

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