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
450
Bulletproof Design System with TypeScript
takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
2
240
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
240
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
210
デザイナー向けフライル説明資料
toshiblues
0
110
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
430
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
320
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
100
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.2k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
290
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Invisible Side of Design
smashingmag
301
51k
Fireside Chat
paigeccino
39
3.6k
Code Review Best Practice
trishagee
70
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Faster Mobile Websites
deanohume
309
31k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
Thoughts on Productivity
jonyablonski
69
4.8k
Writing Fast Ruby
sferik
628
62k
How GitHub (no longer) Works
holman
315
140k
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
やったこと② - デザインフローの整備 - 担当する部分を明確にする - デザイン決定フローも明確にしようとしている - エンジニアがデザインにレビューできる環境をつくる -
エンジニアがデザインを理解するため
成果 - デザイナーの進捗が可視化され作業しやすくなった - 仕様をお互いに議論することで、エンジニアとデザイナー の認識の齟齬がなくなってきた - 今のところ、うまくエンジニアのフローにのれている
デザイナー、エンジニアそれぞれが やりやすくなる方法を一緒に考える
課題 - デザイナー同士のコミュニケーションが不足している… - 言語の壁が乗り越えられない - デザイナー同士のこだわりがぶつかる - 人が足りない -
足りない中でうまくまわす体制は整ったけど、 スケールできる体制じゃない…
コミュニケーションで 気をつけていること
気をつけていること - 気になることがあったら、すぐに言う - 特に実装に関わる部分 - 細かく議論することが大事 - 早めに確認することが何よりも大事 -
デザインに関してきちんと意見する - 「エンジニアだから…」とか遠慮しない - デザイン勉強する
おわり! (フォント:コーポレートロゴ)