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
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Design
See All in Design
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
portfolio2025_kanakoohata
kanako106
0
660
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
最速[要出典]アクセシビリティチェック
magi1125
2
200
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
太田博三(@usagisan2020)
otanet
0
220
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Docker and Python
trallard
44
3.3k
Writing Fast Ruby
sferik
628
61k
KATA
mclloyd
29
14k
Designing for humans not robots
tammielis
250
25k
Optimizing for Happiness
mojombo
376
70k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf 2023
tenderlove
29
1k
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
やったこと② - デザインフローの整備 - 担当する部分を明確にする - デザイン決定フローも明確にしようとしている - エンジニアがデザインにレビューできる環境をつくる -
エンジニアがデザインを理解するため
成果 - デザイナーの進捗が可視化され作業しやすくなった - 仕様をお互いに議論することで、エンジニアとデザイナー の認識の齟齬がなくなってきた - 今のところ、うまくエンジニアのフローにのれている
デザイナー、エンジニアそれぞれが やりやすくなる方法を一緒に考える
課題 - デザイナー同士のコミュニケーションが不足している… - 言語の壁が乗り越えられない - デザイナー同士のこだわりがぶつかる - 人が足りない -
足りない中でうまくまわす体制は整ったけど、 スケールできる体制じゃない…
コミュニケーションで 気をつけていること
気をつけていること - 気になることがあったら、すぐに言う - 特に実装に関わる部分 - 細かく議論することが大事 - 早めに確認することが何よりも大事 -
デザインに関してきちんと意見する - 「エンジニアだから…」とか遠慮しない - デザイン勉強する
おわり! (フォント:コーポレートロゴ)