Tweet
Tweet

Slide 1

Slide 1 text

デザイナー↔︎エンジニア デザインを引き継ぐ技術 The Best Handoff Is No Handoff 2 0 2 3 . 0 5 . 2 6 デ ザ イ ナ ー / エ ン ジ ニ ア 合 同 ゼ ミ R O M 専

Slide 2

Slide 2 text

もはや夏バテしているフロントエンド 去年の夏はどうやって乗り越えたか忘 れた LLMに興味あり、 GPT4に課金しようか迷っている 猫も撫でたい 自 己 紹 介 @rom1000_yksbpn R O M 専

Slide 3

Slide 3 text

は じ め に N o H a n d o f f H o t P o t a t o 外 部 委 託 の 場 合 ま と め ア ジ ェ ン ダ 01. 02. 03. 04. 05.

Slide 4

Slide 4 text

は じ め に 01 今 日 の テ ー マ

Slide 5

Slide 5 text

は じ め に 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/ を邦訳し、みなさんにご紹介します。 ※一部私の意訳も入っていることご了承ください

Slide 6

Slide 6 text

は じ め に デ ザ イ ナ ー か ら エ ン ジ ニ ア へ の デ ザ イ ン を 引 き 継 ぎ を 無 く す 技 術 「デザインをエンジニアに引き継ぐ（受け渡す）作業は、 一度で終わることは稀で、何度も行き来することになったりし、 非効率で苦痛である」 この記事ではそれを回避する手法を紹介しています

Slide 7

Slide 7 text

は じ め に 多くの企業では、要求や仕様があちこちに移動することが多く、会議やチャ ットの間に挟まれたり、設計チームと制作チームの間の終わりのない旅で 「洗練」されたりすることも少なくない こうなってしまうと、デザインの引き継ぎ（デザイナーが役割を終えエンジ ニアに引き継ぐ瞬間）はどう行えば最善か疑問が湧いてくる

Slide 8

Slide 8 text

02 N o H a n d o f f 「 引 き 継 ぎ の な い 」 手 法

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

N O H A N D O F F N o H a n d o f f 上が典型的なデザイン引き継ぎ方法、下が「No Handoff法」

Slide 11

Slide 11 text

N O H A N D O F F N o H a n d o f f デザインチームと開発チームが常に反復的にプロジェクトに取り組む 流動的なモデル

Slide 12

Slide 12 text

N o H a n d o f f このプロセスにより、 プロトタイプは常に生きた仕様書となる 全員が同じプロトタイプで作業するため、デ ザイナーがリソースを割いていた引き継ぎが 必要がなくなる N O H A N D O F F

Slide 13

Slide 13 text

N o H a n d o f f 「No Handoff法」では、問題空間と解決空 間がデザイナーとエンジニアが共同で探求さ れ、ワークフローの全体は会社の内部構造で はなくプロジェクトを中心に構成される方法 になるのがこの図でわかる N O H A N D O F F

Slide 14

Slide 14 text

03 H o t P o t a t o コ ラ ボ レ ー シ ョ ン 重 視

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

H o t P o t a t o デザイナーとエンジニアがモックアップやプロトタイプを投げ合ってお り、コラボレーションを重視している H O T P O T A T O

Slide 17

Slide 17 text

H o t P o t a t o 同時に作業が行われることで、シームレスに 仕事が流れていく プロジェクト進行の全体を通じて問題が発生 した場合は、その都度議論する H O T P O T A T O

Slide 18

Slide 18 text

H o t P o t a t o 進捗状況を頻繁に話し合い、 何が実現可能で、何が実現不可能かを検討し その結果、将来的に潜む問題をも回避するこ とができる H O T P O T A T O

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

外 部 委 託 の 場 合 04 外 部 と の コ ミ ュ ニ ケ ー シ ョ ン

Slide 21

Slide 21 text

今まで紹介してきた手法は内部制作している場合に効果的であるが、一部を 外部に委託している場合はどうなるか？ 多くの企業は、そのプロジェクトに込めた戦略やデザインの背景にある考え 方を説明する概要書とともに、最後の1ピクセルまで徹底的にドキュメント を作成する方法を選択するが、これだけでは十分ではない 外 部 委 託 の 場 合

Slide 22

Slide 22 text

その従来の方法にプラスして、コラボレーションを重視した 「No Handoff」法や「Hot Potato」法を取り入れると、格段にコミュ ニケーションの密度が高くなり、無駄な時間を費やすことはなくなるだろう 社内外問わず、プロジェクトはチームで動かしている 外 部 委 託 の 場 合

Slide 23

Slide 23 text

ま と め 05 手 法 の 導 入 の コ ツ と 双 方 の 意 識 の 持 ち 方

Slide 24

Slide 24 text

ま と め 2つの手法を紹介したが、 既存のワークフローを完全に変えるように説得するには どうしたらいいだろうか？

Slide 25

Slide 25 text

ま と め 小 さ な プ ロ ジ ェ ク ト で 小 さ く 実 験 を 重 ね る こ と 2つの手法を紹介したが、 既存のワークフローを完全に変えるように説得するには どうしたらいいだろうか？ それは、

Slide 26

Slide 26 text

01 プ ロ ジ ェ ク ト 選 定 お試しで共同作業を 提案できるようなプロジェクトを 選んでみる ま と め 03 デ ザ イ ナ ー が で き る こ と エンジニアが実装間 デザイナーは何ができるか尋ねる 02 エ ン ジ ニ ア が で き る こ と デザイナーがイテレーションしている 間、エンジニアは何ができるか尋ねる

Slide 27

Slide 27 text

そ し て 両 チ ー ム が 同 時 に 協 力 で き る よ う に す る ま と め 01 プ ロ ジ ェ ク ト 選 定 お試しで共同作業を 提案できるようなプロジェクトを 選んでみる 03 デ ザ イ ナ ー が で き る こ と エンジニアが実装間 デザイナーは何ができるか尋ねる 02 エ ン ジ ニ ア が で き る こ と デザイナーがイテレーションしている 間、エンジニアは何ができるか尋ねる

Slide 28

Slide 28 text

ま と め 最 終 的 に 成 功 す る か は 、 そ れ ぞ れ の チ ー ム が ど れ だ け う ま く 連 携 で き て い る か と い う 、 と て も シ ン プ ル な こ と に か か っ て い る

Slide 29

Slide 29 text

ご 清 聴 あ り が と う ご ざ い ま し た Thank you!