コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota

Friends of Figma Tokyo「相互理解のためのデザイン＆開発交流会 @Gaudiyオフィス」 に提供したプレゼンテーション。

■ イベントURL
相互理解のためのデザイン＆開発交流会 @Gaudiyオフィス

■ 採用情報
タイミーでは、プロダクトデザイナーを募集しています。
ご興味をもっていただいた方はDMないしこちらのリンクからコンタクトいただけたら幸いです。
Wantedly
YOUTRUST カジュアル面談

■ 作成者
Yasuhiro Yokota - Timee, Inc. X

Transcript

1. Collaboration: The foundation of 
 organizational excellence コラボレーションを小さ くはじめ、 大き く広める 50 slides 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo Mar 19, 2024 Yasuhiro Yokota at Timee, Inc.
2. Yasuhiro Yokota 株式会社タイ ミ ー プロダ ク トデザイ ンマネージャー （2024.2 - ） デジタルプロダ ク ト ・ ブラ ンデ ィ ング両面のデザイ ン、
 フ ロン ト エン ド開発 （React, React Native他） 、 プロダ ク ト マネジ メ ン トをやっ てま した。 こんばんは。 Current here
5. タイミン 名 前 ＃212121 ＃FFD700 c0 m15 y100 k0 c50 m40 y40 k100
6. 本日のテーマ デザイナーとエンジニアの 
 コラボレーションを生み出し、 広げる。 （デザイナー人格でお話します）
7. 1 デザイナーがしかける 2 具体的なアクションのススメ 3 組織をゆるやかに変えていく Contents
8. Section 1 デザイナーがしかける
9. デザイナーとエンジニアの
 コラボレーションは重要。
10. よいデザインが生まれるプロセスと同じく、
 決定的に重要。 価値が生まれる質・効率に直結するし、
 実装・デリバリーされてこそのデザイン。 もっというと
11. コラボレーションを実現することはそれ自体が能力であり、
 また、 能力の向上につながる 1 結節点を作りだす 2 高度な協調で成果をだす 3 能力・知識・情報を移転する 個人 個人 組織
12. ...and 世界は協働の魅惑に引きよせられている
13. エンジニアさん デザイナーさんが完成させ てくれたデータだ。
 どれどれ。 エンジニアさん 見積もりしますね デザイナーさん エンジニアさん！
 デザインデータできました！ Figmaご確認ください！ ある現場にて 画像出典: unsplash.com
14. エンジニアさん （実装が難しそうだけど、デザイナーさんの意見 がこうだというなら…） エンジニアさん （前つくったやつと別につくらないとだな…ま あ仕方ないか） デザイナーさん （実装のことを考えてデザインしたつもりだか ら、きっと大丈夫だよね。） デザイナーさん （どう伝えるとスムーズなのかわからないなあ） 心の声さんたち
15. こうした隔たりは自然発生し、
 自己強化されるメカニズムがある
16. Norm of reciprocity 返報性の原理 人は何かを受け取ったら、 それに見合うものを返すべきだ という暗黙の社会的規範のこと。 Ringelmann effect リンゲルマン効果, 社会的手抜き 集団の中で個人が責任を分散させ、
 自分の努力を減らし てしまう現象。 遠慮は連鎖する 遠慮ループ 遠慮 遠慮
17. 遠慮せずに連携しよう ！
18. 遠慮せずに連携しよう ！ 共通の対象を見つめてとりくもう も大事だが、
19. as Interface as Objective プロダク ト われわれ ユーザー 普通に考えるとこうだけど
20. as Interface as Organization as Objective プロダク ト われわれ ユーザー こう考えていきたい 「私たちもプロダク ト」 図 われわれ
21. 組織というプロダクトにとりくもう 共通の対象を見つめてとりくもう 即ち 永遠にWork in Progress
22. プロセス 文化 コミュニケーション 共通言語 記憶 資産 などなど
23. 実装 デザイン 戦略 リサーチ 構想 リリース
24. デザイナーはコラボレーションに
 とりくみやすい立ち位置にあるはず 8 さまざまなプロセスの中間に位置しやすC 8 大抵の場合、 デザイナーチームは小さい
25. プロセス 文化 コミュニケーション 共通言語 記憶 資産 これらを全員でデザインし、自分たちに実装する
26. Section 2 具体的なアクションのススメ
27. とりいれやすいものからご紹介
28. 完成してからシェアするのではなく、 みんなで考える文化をつくる 序盤から議論に参加することで、 断片的な情報をてがかりとして獲得することができる 1 Work in Progressでシェアする デザインをカジュアルなものに
29. どのようにデザイナーがFigmaを使ったり管理しているかは、 聞かれない割にみんな興味ある 勉強会をやってみるのもおすすめです 2 みんなでFigmaをさわる 「また今度」 になりがち スクリーンショット: https://www.figma.com/ja/ 2024.3.14時点
30. 基本的にコード上の概念はすべて英語でつけられるので、 結局誰かが考える 最初から職種間で相談しているとGood。 仕様書やPRDに日英用語集を設けるのがおすすめ ユビキタス言語 ユビキタス言語 データモデル 仕様書 UIコンポーネント 画面名称 Figma Worker ワーカー HomeTab ホームタブ Offering 求人 Client クライアント・事業者様 Badge ワーカー向けバッジ機能 Button ボタン 3 英語で名前をつける 車輪の再発明を防ぐ
31. 4 コードを学んでみる ユーザー体験を知りにいくのとおなじ感覚で 完璧にできる必要はないので、 少し でもやってみること。 デザインもコー ドもイ メージの世界。
32. 再利用性や一貫性の実現はもとより、 職種間が連携するハブになる存在であり、 プロセスを改善するきっかけにつながる Web iOS Android Product Design 共有資産 5 デザインシステム コラボレーションの媒介
33. 1 アイコンライ ブラ リの最適化 2 素材画像のサイ ズを標準化する 3 デザイン トークンを導入する 4 画面とコンポーネン トを全部英語で整理する 参考 デザイ ンシス テ ムで切り出しやすい ・ 合意形成しやすいこ と
34. タイミーではデザインシステムやプロセス改善に、
 プロダクトデザインが中間的な役割で推進 （しはじめたところ） Web iOS Android Product Design
35. Section 3 組織をゆるやかに変え てい く
36. コラボレーションは組織に広まってこそ
 レバレッジが実現する
37. 新しいものの 普及には
 コツがある イノベーションが普及する要件 Everett M. Rogers 新しいアイデアや技術が社会になぜ普及したりしなかっ たりするかや、 どのように普及するかを説明する理論 これまでのやり方よりマシか 個人のやり方に適合するか わかりやすさ 試せるか 他の人がのっていることがわかるか コッターの組織変革プロセス John P. Kotter 組織変革を円滑にすすめ、 浸透させるまでの
 プロセスを体系化したもの 危機意識を醸成する 小さなチームをつくる ビジョンと戦略をつくる 周知徹底する 自発を促す 短期的成果を実現する 成果を活かしてさらに変革する 新しい方法を定着させる
38. 1 仲間をみつけて小さ く と り く む 2 小さい成功事例を創出し、 見えるよ うにする 3 ワークフローに適合させる 4 もっと見えるよ うに広く伝える コンセプ トを抽出すると――
39. 小さなムーブメントをおこす
40. コラボレーションには仲間が必要！ 積極的なご近所さんと、 熱くて一見遠いひとがいると、 連携の面積が大きくなる 1 仲間をみつけて小さくとりくむ 一見遠いひとも巻き込む！ わたし 連携の面積 ご近所さん 一見遠いひと
41. 小さく試す、 はプロダクト開発と同じ。
 小さい成功から、 次の機会につなげていく。 【アーリースモールウィン】 人々の気持ちを変えるには、 小さい成功を少しずつ積み上げ、 「思ったほど悪くない」 「案外行けそうだ」 と いう気にさせていくことが重要です。 また、 スモール・ウィンは反対する人だけではなく、 ニュートラルな人 や戸惑っている人、 そして賛同者にとっても 「この方向で本当に大丈夫なのか」 という不安を払拭する効果 があります。 ですから、 なるべく早いタイミングで成し遂げるのがコツです。 2 小さい成功事例を創出し、 見えるようにする 引用元: グロービス学び放題✕知見録「社内変革や新事業を成し遂げたいなら『初期の成功」を意識せよ』https://globis.jp/article/6473/
42. 既存のプロセスがあるのなら、 それをよりよくする活動からはじめると、 周りもまきこみやすい 実際はもっといったりきたり 3 ワークフローに適合させる コンフリクトがおきにくい！ 企画 仕様 デザイン 実装 リリース
43. 組織内でのコラボレーションのトップラインを多くの人の記憶に残していく 4 もっと見えるように広く伝える @here 
 【ユビキタス言語に英語名称が追加されました 】
44. 組織というプロダクトを プロトタイピングし、 加速する
45. 1 コラボレーションはデザイナーがしかける 2 プロダク トと し ての組織 = わたしたち 3 英語で名前をつける ！ 4 小さ く はじめ、 大き く広め、 記憶に転換する おさ らい
46. Last Section おわりに
47. タイミーでは、 職種間コラボレーションを深めたい
 デザイナーを募集しています 宣伝 ご興味もっていただいた方はぜひお話しましょう ！ ！
48. % メイン業務に集中するなかで、
 こういうことに手を付けていく人は少ない % 一方、 組織の効率や効果性を高める
 とりくみをとめる人もいない ところで仕組みとかコラボレーションとかって、
49. よい連携は、 権限がなくても、 経験が浅くても、
 できることのひとつにして、 高いレバレッジがある。 最後に伝えたいこと
50. ご清聴ありがとうございました