Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
デザインテクノロジストが先導する プロダクト開発の世界 Qiita株式会社 出口 裕貴
Slide 2
Slide 2 text
Qiita株式会社 デザインG マネージャー・Qiita PdM X:@degudegu2510 デザイン, フロントエンドに関連する情報を中心に発信している DEGUCHI HIROKI 出口 裕貴
Slide 3
Slide 3 text
「デザインテクノロジスト」 という役割をご存知ですか?
Slide 4
Slide 4 text
デザインとエンジニアリングの領域を理解して その2つの領域のスキルを使って働く役割 デザインテクノロジストとは Designer Engineer
Slide 5
Slide 5 text
最近は、デザインとエンジニリングの壁がなくなっている デザインテクノロジストとは Designer Engineer
Slide 6
Slide 6 text
デザインとエンジニアリングのスキルを使いプロダクト開発をする デザインテクノロジストとは Designer Engineer
Slide 7
Slide 7 text
デザインエンジア 工学分野のデザインとハードウェアのエンジニアリングを専門とする役割 デザインエンジニアとUXエンジニア Designer インダストリアル 組み込み技術 ハードウェア開発 ソフトウェア開発 製造技術 構造・電気設計 Engineer
Slide 8
Slide 8 text
UXエンジア デザインの知識を用いてプロダクトを開発するエンジニア デザインエンジニアとUXエンジニア Designer UX / UI フロントエンド コンポーネント設計 SEO リサーチ 体験設計 Engineer
Slide 9
Slide 9 text
デザインテクノロジスト 「リサーチ〜設計〜実装〜リリース」全般を担当する役割 デザインエンジニアとUXエンジニア Designer UX / UI フロントエンド コンポーネント設計 SEO リサーチ 体験設計 Engineer
Slide 10
Slide 10 text
Qiitaの事例を紹介しながら デザインテクノロジストが プロダクト開発において どのような役割があるのかを説明します!
Slide 11
Slide 11 text
エンジニアに関する知識を記録・共有するための記事投稿サービス Qiitaとは
Slide 12
Slide 12 text
デザインG 全員がデザインテクノロジスト 機能の企画〜リリースまで担当しています。 QiitaのデザインG
Slide 13
Slide 13 text
Qiitaのデザインテクノロジストの役割 GF UXを向上させるこ4 8F アクセシビリティを向上させるこ4 CF ユーザーの声を聞くこと
Slide 14
Slide 14 text
UXを向上させること
Slide 15
Slide 15 text
デザインとエンジニアリングのスキルがあるからこそ UXを向上させること デザインデータで表現できないような体験にも こだわってデザイン・開発することができる etc. アニメーション, キーボード操作 デザインデータで表現できないような体験にも こだわってデザイン・開発することができる etc. アニメーション, キーボード操作
Slide 16
Slide 16 text
記事投稿体験の改善 Before After エディタのUIの変更・キーボード操作できるようにする
Slide 17
Slide 17 text
記事投稿体験の改善 投稿中の画面 投稿後の画面 アニメーションやライディングもこだわる
Slide 18
Slide 18 text
UXを向上させること デザインデータで表現できないような体験にも こだわってデザイン・開発することができるため プロダクトのUX向上が役割の1つ デザインデータで表現できないような体験にも こだわってデザイン・開発することができるため プロダクトのUX向上が役割の1つ
Slide 19
Slide 19 text
アクセシビリティを向上させること
Slide 20
Slide 20 text
アクセシビリティの改善 デザインとエンジニアリングのスキルがあるからこそ アクセシビリティ改善にも こだわってデザイン・開発することができる etc. WCAG, コントラスト比 アクセシビリティ改善にも こだわってデザイン・開発することができる etc. WCAG, コントラスト比
Slide 21
Slide 21 text
アクセシビリティの改善 コントラスト比を考慮した配色 スクリーンリーダーのため改善 UI上・コード上 両面からアクセシビリティの対応ができる
Slide 22
Slide 22 text
アクセシビリティの改善 UI上・コード上 両面から改善が必要な アクセシビリティ改善も役割の1つ UI上・コード上 両面から改善が必要な アクセシビリティ改善も役割の1つ
Slide 23
Slide 23 text
ユーザーの声を聞くこと
Slide 24
Slide 24 text
ユーザーの声を聞く ヒアリング 〜 デザイン 〜 開発を全てできるから スピード感を持ってユーザーの意見を プロダクトに反映させることができる etc. 開発リードタイムが短くできる スピード感を持ってユーザーの意見を プロダクトに反映させることができる etc. 開発リードタイムが短くできる
Slide 25
Slide 25 text
ユーザーの声を聞く Qiita Discussions 実装 開発リードタイムが短いことで、ユーザー満足度が高い
Slide 26
Slide 26 text
ユーザーの声を聞く スピード感を持ってユーザーの意見を プロダクトに反映させるこも役割の1つ スピード感を持ってユーザーの意見を プロダクトに反映させるこも役割の1つ
Slide 27
Slide 27 text
まとめ Designer UX / UI フロントエンド コンポーネント設計 SEO リサーチ 体験設計 Engineer デザインテクノロジストは、DesignとEngineeringのスキルを使って 「リサーチ〜デザイン〜実装」全般を担当する役割
Slide 28
Slide 28 text
プロダクト開発を先導して ユーザーに価値を提供している デザインテクノロジストは プロダクト開発おいて不可欠な存在