デザイナー↔︎エンジニア デザイン引き継ぐ技術

2023/5/26 社内ゼミ（エンジニアvsデザイナー合同会）登壇資料

Frontend Weekly #406で紹介されていた「The Best Handoff Is No Handoff」を邦訳＋意訳しました

スライド内URLまとめ
p2：https://twitter.com/rom1000_yksbpn
p5：https://www.smashingmagazine.com/2023/03/best-handoff-is-no-handoff/
p9：https://uxdesign.cc/ending-design-handoff-this-is-our-fight-b376d2b58e4a
p15：https://note.com/nokowashiyama/n/ne4e0396f1700

Transcript

1. デザイナー↔︎エンジニア デザインを引き継ぐ技術 The Best Handoff Is No Handoff 2 0 2 3 . 0 5 . 2 6 デ ザ イ ナ ー / エ ン ジ ニ ア 合 同 ゼ ミ R O M 専
2. もはや夏バテしているフロントエンド 去年の夏はどうやって乗り越えたか忘 れた LLMに興味あり、 GPT4に課金しようか迷っている 猫も撫でたい 自 己 紹 介 @rom1000_yksbpn R O M 専
3. は じ め に N o H a n d o f f H o t P o t a t o 外 部 委 託 の 場 合 ま と め ア ジ ェ ン ダ 01. 02. 03. 04. 05.
4. は じ め に 01 今 日 の テ ー マ
5. は じ め に T h e B e s t H a n d o f f I s N o H a n d o f f 今回のLTテーマは、Frontend Weekly#406で紹介されていた、 V i t a l y F r i e d m a n https://www.smashingmagazine.com/2023/03/best-handoff-is-no-handoff/ を邦訳し、みなさんにご紹介します。 ※一部私の意訳も入っていることご了承ください
6. は じ め に デ ザ イ ナ ー か ら エ ン ジ ニ ア へ の デ ザ イ ン を 引 き 継 ぎ を 無 く す 技 術 「デザインをエンジニアに引き継ぐ（受け渡す）作業は、 一度で終わることは稀で、何度も行き来することになったりし、 非効率で苦痛である」 この記事ではそれを回避する手法を紹介しています
7. は じ め に 多くの企業では、要求や仕様があちこちに移動することが多く、会議やチャ ットの間に挟まれたり、設計チームと制作チームの間の終わりのない旅で 「洗練」されたりすることも少なくない こうなってしまうと、デザインの引き継ぎ（デザイナーが役割を終えエンジ ニアに引き継ぐ瞬間）はどう行えば最善か疑問が湧いてくる
8. 02 N o H a n d o f f 「 引 き 継 ぎ の な い 」 手 法
9. N o H a n d o f f Shamsi Brinn氏の書いた記事で、今までの典型的なデザイン引き継ぎ 手法に代わる「No Handoff法」を示した記事がある https://uxdesign.cc/ending-design-handoff-this-is-our-fight-b376d2b58e4a この記事では、この手法は機能的なプロトタイピングが共同作業の中心 とする方法であると述べている N O H A N D O F F
10. N O H A N D O F F N o H a n d o f f 上が典型的なデザイン引き継ぎ方法、下が「No Handoff法」
11. N O H A N D O F F N o H a n d o f f デザインチームと開発チームが常に反復的にプロジェクトに取り組む 流動的なモデル
12. N o H a n d o f f このプロセスにより、 プロトタイプは常に生きた仕様書となる 全員が同じプロトタイプで作業するため、デ ザイナーがリソースを割いていた引き継ぎが 必要がなくなる N O H A N D O F F
13. N o H a n d o f f 「No Handoff法」では、問題空間と解決空 間がデザイナーとエンジニアが共同で探求さ れ、ワークフローの全体は会社の内部構造で はなくプロジェクトを中心に構成される方法 になるのがこの図でわかる N O H A N D O F F
14. 03 H o t P o t a t o コ ラ ボ レ ー シ ョ ン 重 視
15. H o t P o t a t o 「No Handoff」の手法は、Dan Mall氏とBrad Frost氏による 「Hot Potato」法によく似ている https://note.com/nokowashiyama/n/ne4e0396f1700　※邦訳・意訳されています Hot Potatoとは？ 対処が難しく、意見の不一致を多く引き起こす問題や状況などを指す H O T P O T A T O
16. H o t P o t a t o デザイナーとエンジニアがモックアップやプロトタイプを投げ合ってお り、コラボレーションを重視している H O T P O T A T O
17. H o t P o t a t o 同時に作業が行われることで、シームレスに 仕事が流れていく プロジェクト進行の全体を通じて問題が発生 した場合は、その都度議論する H O T P O T A T O
18. H o t P o t a t o 進捗状況を頻繁に話し合い、 何が実現可能で、何が実現不可能かを検討し その結果、将来的に潜む問題をも回避するこ とができる H O T P O T A T O
19. N o H a n d o f f H o t P o t a t o 最良のコラボレーションには、チーム間の引き継ぎがない H O T P O T A T O H o t P o t a t o
20. 外 部 委 託 の 場 合 04 外 部 と の コ ミ ュ ニ ケ ー シ ョ ン
21. 今まで紹介してきた手法は内部制作している場合に効果的であるが、一部を 外部に委託している場合はどうなるか？ 多くの企業は、そのプロジェクトに込めた戦略やデザインの背景にある考え 方を説明する概要書とともに、最後の1ピクセルまで徹底的にドキュメント を作成する方法を選択するが、これだけでは十分ではない 外 部 委 託 の 場 合
22. その従来の方法にプラスして、コラボレーションを重視した 「No Handoff」法や「Hot Potato」法を取り入れると、格段にコミュ ニケーションの密度が高くなり、無駄な時間を費やすことはなくなるだろう 社内外問わず、プロジェクトはチームで動かしている 外 部 委 託 の 場 合
23. ま と め 05 手 法 の 導 入 の コ ツ と 双 方 の 意 識 の 持 ち 方
24. ま と め 2つの手法を紹介したが、 既存のワークフローを完全に変えるように説得するには どうしたらいいだろうか？
25. ま と め 小 さ な プ ロ ジ ェ ク ト で 小 さ く 実 験 を 重 ね る こ と 2つの手法を紹介したが、 既存のワークフローを完全に変えるように説得するには どうしたらいいだろうか？ それは、
26. 01 プ ロ ジ ェ ク ト 選 定 お試しで共同作業を 提案できるようなプロジェクトを 選んでみる ま と め 03 デ ザ イ ナ ー が で き る こ と エンジニアが実装間 デザイナーは何ができるか尋ねる 02 エ ン ジ ニ ア が で き る こ と デザイナーがイテレーションしている 間、エンジニアは何ができるか尋ねる
27. そ し て 両 チ ー ム が 同 時 に 協 力 で き る よ う に す る ま と め 01 プ ロ ジ ェ ク ト 選 定 お試しで共同作業を 提案できるようなプロジェクトを 選んでみる 03 デ ザ イ ナ ー が で き る こ と エンジニアが実装間 デザイナーは何ができるか尋ねる 02 エ ン ジ ニ ア が で き る こ と デザイナーがイテレーションしている 間、エンジニアは何ができるか尋ねる
28. ま と め 最 終 的 に 成 功 す る か は 、 そ れ ぞ れ の チ ー ム が ど れ だ け う ま く 連 携 で き て い る か と い う 、 と て も シ ン プ ル な こ と に か か っ て い る
29. ご 清 聴 あ り が と う ご ざ い ま し た Thank you!