Tweet
Tweet

Slide 1

Slide 1 text

Collaboration: The foundation of 
 organizational excellence コラボレーションを小さ くはじめ、 大き く広める 50 slides 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo Mar 19, 2024 Yasuhiro Yokota at Timee, Inc.

Slide 2

Slide 2 text

Yasuhiro Yokota 株式会社タイ ミ ー プロダ ク トデザイ ンマネージャー （2024.2 - ） デジタルプロダ ク ト ・ ブラ ンデ ィ ング両面のデザイ ン、
 フ ロン ト エン ド開発 （React, React Native他） 、 プロダ ク ト マネジ メ ン トをやっ てま した。 こんばんは。 Current here

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

タイミン 名 前 ＃212121 ＃FFD700 c0 m15 y100 k0 c50 m40 y40 k100

Slide 6

Slide 6 text

本日のテーマ デザイナーとエンジニアの 
 コラボレーションを生み出し、 広げる。 （デザイナー人格でお話します）

Slide 7

Slide 7 text

1 デザイナーがしかける 2 具体的なアクションのススメ 3 組織をゆるやかに変えていく Contents

Slide 8

Slide 8 text

Section 1 デザイナーがしかける

Slide 9

Slide 9 text

デザイナーとエンジニアの
 コラボレーションは重要。

Slide 10

Slide 10 text

よいデザインが生まれるプロセスと同じく、
 決定的に重要。 価値が生まれる質・効率に直結するし、
 実装・デリバリーされてこそのデザイン。 もっというと

Slide 11

Slide 11 text

コラボレーションを実現することはそれ自体が能力であり、
 また、 能力の向上につながる 1 結節点を作りだす 2 高度な協調で成果をだす 3 能力・知識・情報を移転する 個人 個人 組織

Slide 12

Slide 12 text

...and 世界は協働の魅惑に引きよせられている

Slide 13

Slide 13 text

エンジニアさん デザイナーさんが完成させ てくれたデータだ。
 どれどれ。 エンジニアさん 見積もりしますね デザイナーさん エンジニアさん！
 デザインデータできました！ Figmaご確認ください！ ある現場にて 画像出典: unsplash.com

Slide 14

Slide 14 text

エンジニアさん （実装が難しそうだけど、デザイナーさんの意見 がこうだというなら…） エンジニアさん （前つくったやつと別につくらないとだな…ま あ仕方ないか） デザイナーさん （実装のことを考えてデザインしたつもりだか ら、きっと大丈夫だよね。） デザイナーさん （どう伝えるとスムーズなのかわからないなあ） 心の声さんたち

Slide 15

Slide 15 text

こうした隔たりは自然発生し、
 自己強化されるメカニズムがある

Slide 16

Slide 16 text

Norm of reciprocity 返報性の原理 人は何かを受け取ったら、 それに見合うものを返すべきだ という暗黙の社会的規範のこと。 Ringelmann effect リンゲルマン効果, 社会的手抜き 集団の中で個人が責任を分散させ、
 自分の努力を減らし てしまう現象。 遠慮は連鎖する 遠慮ループ 遠慮 遠慮

Slide 17

Slide 17 text

遠慮せずに連携しよう ！

Slide 18

Slide 18 text

遠慮せずに連携しよう ！ 共通の対象を見つめてとりくもう も大事だが、

Slide 19

Slide 19 text

as Interface as Objective プロダク ト われわれ ユーザー 普通に考えるとこうだけど

Slide 20

Slide 20 text

as Interface as Organization as Objective プロダク ト われわれ ユーザー こう考えていきたい 「私たちもプロダク ト」 図 われわれ

Slide 21

Slide 21 text

組織というプロダクトにとりくもう 共通の対象を見つめてとりくもう 即ち 永遠にWork in Progress

Slide 22

Slide 22 text

プロセス 文化 コミュニケーション 共通言語 記憶 資産 などなど

Slide 23

Slide 23 text

実装 デザイン 戦略 リサーチ 構想 リリース

Slide 24

Slide 24 text

デザイナーはコラボレーションに
 とりくみやすい立ち位置にあるはず 8 さまざまなプロセスの中間に位置しやすC 8 大抵の場合、 デザイナーチームは小さい

Slide 25

Slide 25 text

プロセス 文化 コミュニケーション 共通言語 記憶 資産 これらを全員でデザインし、自分たちに実装する

Slide 26

Slide 26 text

Section 2 具体的なアクションのススメ

Slide 27

Slide 27 text

とりいれやすいものからご紹介

Slide 28

Slide 28 text

完成してからシェアするのではなく、 みんなで考える文化をつくる 序盤から議論に参加することで、 断片的な情報をてがかりとして獲得することができる 1 Work in Progressでシェアする デザインをカジュアルなものに

Slide 29

Slide 29 text

どのようにデザイナーがFigmaを使ったり管理しているかは、 聞かれない割にみんな興味ある 勉強会をやってみるのもおすすめです 2 みんなでFigmaをさわる 「また今度」 になりがち スクリーンショット: https://www.figma.com/ja/ 2024.3.14時点

Slide 30

Slide 30 text

基本的にコード上の概念はすべて英語でつけられるので、 結局誰かが考える 最初から職種間で相談しているとGood。 仕様書やPRDに日英用語集を設けるのがおすすめ ユビキタス言語 ユビキタス言語 データモデル 仕様書 UIコンポーネント 画面名称 Figma Worker ワーカー HomeTab ホームタブ Offering 求人 Client クライアント・事業者様 Badge ワーカー向けバッジ機能 Button ボタン 3 英語で名前をつける 車輪の再発明を防ぐ

Slide 31

Slide 31 text

4 コードを学んでみる ユーザー体験を知りにいくのとおなじ感覚で 完璧にできる必要はないので、 少し でもやってみること。 デザインもコー ドもイ メージの世界。

Slide 32

Slide 32 text

再利用性や一貫性の実現はもとより、 職種間が連携するハブになる存在であり、 プロセスを改善するきっかけにつながる Web iOS Android Product Design 共有資産 5 デザインシステム コラボレーションの媒介

Slide 33

Slide 33 text

1 アイコンライ ブラ リの最適化 2 素材画像のサイ ズを標準化する 3 デザイン トークンを導入する 4 画面とコンポーネン トを全部英語で整理する 参考 デザイ ンシス テ ムで切り出しやすい ・ 合意形成しやすいこ と

Slide 34

Slide 34 text

タイミーではデザインシステムやプロセス改善に、
 プロダクトデザインが中間的な役割で推進 （しはじめたところ） Web iOS Android Product Design

Slide 35

Slide 35 text

Section 3 組織をゆるやかに変え てい く

Slide 36

Slide 36 text

コラボレーションは組織に広まってこそ
 レバレッジが実現する

Slide 37

Slide 37 text

新しいものの 普及には
 コツがある イノベーションが普及する要件 Everett M. Rogers 新しいアイデアや技術が社会になぜ普及したりしなかっ たりするかや、 どのように普及するかを説明する理論 これまでのやり方よりマシか 個人のやり方に適合するか わかりやすさ 試せるか 他の人がのっていることがわかるか コッターの組織変革プロセス John P. Kotter 組織変革を円滑にすすめ、 浸透させるまでの
 プロセスを体系化したもの 危機意識を醸成する 小さなチームをつくる ビジョンと戦略をつくる 周知徹底する 自発を促す 短期的成果を実現する 成果を活かしてさらに変革する 新しい方法を定着させる

Slide 38

Slide 38 text

1 仲間をみつけて小さ く と り く む 2 小さい成功事例を創出し、 見えるよ うにする 3 ワークフローに適合させる 4 もっと見えるよ うに広く伝える コンセプ トを抽出すると――

Slide 39

Slide 39 text

小さなムーブメントをおこす

Slide 40

Slide 40 text

コラボレーションには仲間が必要！ 積極的なご近所さんと、 熱くて一見遠いひとがいると、 連携の面積が大きくなる 1 仲間をみつけて小さくとりくむ 一見遠いひとも巻き込む！ わたし 連携の面積 ご近所さん 一見遠いひと

Slide 41

Slide 41 text

小さく試す、 はプロダクト開発と同じ。
 小さい成功から、 次の機会につなげていく。 【アーリースモールウィン】 人々の気持ちを変えるには、 小さい成功を少しずつ積み上げ、 「思ったほど悪くない」 「案外行けそうだ」 と いう気にさせていくことが重要です。 また、 スモール・ウィンは反対する人だけではなく、 ニュートラルな人 や戸惑っている人、 そして賛同者にとっても 「この方向で本当に大丈夫なのか」 という不安を払拭する効果 があります。 ですから、 なるべく早いタイミングで成し遂げるのがコツです。 2 小さい成功事例を創出し、 見えるようにする 引用元: グロービス学び放題✕知見録「社内変革や新事業を成し遂げたいなら『初期の成功」を意識せよ』https://globis.jp/article/6473/

Slide 42

Slide 42 text

既存のプロセスがあるのなら、 それをよりよくする活動からはじめると、 周りもまきこみやすい 実際はもっといったりきたり 3 ワークフローに適合させる コンフリクトがおきにくい！ 企画 仕様 デザイン 実装 リリース

Slide 43

Slide 43 text

組織内でのコラボレーションのトップラインを多くの人の記憶に残していく 4 もっと見えるように広く伝える @here 
 【ユビキタス言語に英語名称が追加されました 】

Slide 44

Slide 44 text

組織というプロダクトを プロトタイピングし、 加速する

Slide 45

Slide 45 text

1 コラボレーションはデザイナーがしかける 2 プロダク トと し ての組織 = わたしたち 3 英語で名前をつける ！ 4 小さ く はじめ、 大き く広め、 記憶に転換する おさ らい

Slide 46

Slide 46 text

Last Section おわりに

Slide 47

Slide 47 text

タイミーでは、 職種間コラボレーションを深めたい
 デザイナーを募集しています 宣伝 ご興味もっていただいた方はぜひお話しましょう ！ ！

Slide 48

Slide 48 text

% メイン業務に集中するなかで、
 こういうことに手を付けていく人は少ない % 一方、 組織の効率や効果性を高める
 とりくみをとめる人もいない ところで仕組みとかコラボレーションとかって、

Slide 49

Slide 49 text

よい連携は、 権限がなくても、 経験が浅くても、
 できることのひとつにして、 高いレバレッジがある。 最後に伝えたいこと

Slide 50

Slide 50 text

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