Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアから考える デザインチーム ビルディング
Search
takanorip
January 31, 2018
Design
2
2.1k
エンジニアから考える デザインチーム ビルディング
takanorip
January 31, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
350
Bulletproof Design System with TypeScript
takanorip
6
3.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
150
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
900
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Design
See All in Design
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
250
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
DC Style Redesign
mcduckyart
0
140
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
200
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
680
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.8k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.3k
freee + Product Design FY25Q4
freee
4
15k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
470
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Designing for humans not robots
tammielis
253
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Into the Great Unknown - MozCon
thekraken
40
1.9k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Ace a Technical Interview
jacobian
278
23k
Transcript
エンジニアから考える デザインチーム ビルディング Takanori Oki ( @takanorip ) @デザイナーミーツエンジニア (以下略)
自己紹介 - 大木尊紀(オオキタカノリ)/@takanorip - 株式会社スマートドライブ フロントエンドエンジニア - React、Vue、Polymer、Web制作全般 - 「イヌでもわかるWeb
Components」
職歴 1. デザイン会社 ディレクター兼マークアップエンジニア 2. Web制作会社 フロントエンドエンジニア 3. 自社サービス フロントエンドエンジニア
注意 - 今日話すことは、僕が所属している組織の話なので、 全てのパターンに当てはまるわけじゃないです - 正解みたいなものを提示する話ではないので「そういう こともあるのかー」くらいの感じで聞いてください
フロントエンドとデザイン デザイン マークアップ JavaScript バックエンド UIデザイン デザイナー エンジニア デザイナー エンジニア
フロントエンドが複雑になり、 マークアップをエンジニアが 担当することが増えてきた
フロントエンドエンジニアが デザインの一部を担うように 変化してきた (フロントエンドデザイナー、フロントエンドエンジニアみたいな話ありましたよね)
フロントエンドとデザイン - フロントエンドとデザインは密に関わり合っている - デザインチームがうまく機能することで、 フロントエンドエンジニアも気持ちよく仕事できる - エンジニアがデザインチームビルディングに関わることで、 お互いの理解を深めたい
弊社の構成 - デザイナー - CDO - UIデザイナー - エンジニア -
フロントエンドエンジニア - サーバーサイドエンジニア
弊社の使用ツール - Figma (デザインツール) - GitHub - JIRA、Confluence - Google
Docs
課題 - デザインチームがうまく回ってない感じがあった - エンジニアとうまく連携できるようにしたい - タスクが滞らないようにしたい
やったこと① - タスクやドキュメントの管理ツールを整備 - デザイナーにエンジニアのフローに乗ってもらった - PRD(Product Requirements Document)、 デザインDoc(Why,
What, Howを示すもの)などで 仕様を共有 - JIRAでタスク管理
PRD、デザインDoc 実装 レビュー
PRD、デザインDoc デザイン レビュー
PRDの項目
項目 説明 概要 背景 どんな背景があるから実現する必要性があるのか? 目的 何を実現するか? 検討 機能や要件に対して検討した内容を記載する 調査・検証
R&D要素の強い場合のみ記載する 市場調査 機能要求 主な機能的要件や仕様を記載する スコープ やること、やららないことを定義する 主要な結果 製品化の成功をどうやって評価するのか? 対象ユーザー だれのためにこの問題を解決しようとしているのか? UX要求 ユースケースやUIモックアップ ユースケース ユーザーの視点でシステムの利用例の全てのパターンを表現する UIモックアップ (Optional) イメージが伝われば、軽めのメモ書き程度のものでもOK
やったこと② - デザインフローの整備 - 担当する部分を明確にする - デザイン決定フローも明確にしようとしている - エンジニアがデザインにレビューできる環境をつくる -
エンジニアがデザインを理解するため
成果 - デザイナーの進捗が可視化され作業しやすくなった - 仕様をお互いに議論することで、エンジニアとデザイナー の認識の齟齬がなくなってきた - 今のところ、うまくエンジニアのフローにのれている
デザイナー、エンジニアそれぞれが やりやすくなる方法を一緒に考える
課題 - デザイナー同士のコミュニケーションが不足している… - 言語の壁が乗り越えられない - デザイナー同士のこだわりがぶつかる - 人が足りない -
足りない中でうまくまわす体制は整ったけど、 スケールできる体制じゃない…
コミュニケーションで 気をつけていること
気をつけていること - 気になることがあったら、すぐに言う - 特に実装に関わる部分 - 細かく議論することが大事 - 早めに確認することが何よりも大事 -
デザインに関してきちんと意見する - 「エンジニアだから…」とか遠慮しない - デザイン勉強する
おわり! (フォント:コーポレートロゴ)