Share
Embed

Slide 1

Slide 1 text

社内のフロントエンドエンジニア 同士をつなぐ ― 大規模組織でも人見知りを作らない取り組み 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイス2ブロック 揚原 博志 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

© ZOZO, Inc. https://zozo.jp/ 2 ● ファッションEC ● 1,600以上のショップ、9,000以上のブランドの取り扱い ● 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新着 商品を掲載（2025年3月末時点） ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など

Slide 3

Slide 3 text

© ZOZO, Inc. 3 Front End Start Today FEST 社内のフロントエンドを盛り上げる

Slide 4

Slide 4 text

© ZOZO, Inc. 4 チームが大きくなってきた！ 仕事も増えてきた！ 人も増えてきた！ みんなが効率的に働けるように、 うまく分業しよう！ A 機能は X 部署の S さんに、 B ページは Y 部署の T さんに

Slide 5

Slide 5 text

© ZOZO, Inc. 5 X years later …

Slide 6

Slide 6 text

© ZOZO, Inc. 6 「その機能は担当じゃないので知りません」 「（対応簡単そうだけど、なんか知らない文 脈とかルールあるかもだし、面倒だし…） B部署に連絡して対応依頼してください」 「このバグ、A部署で同じこと悩んでたん だ、１日溶かしちゃったよ」 「なんか仕事に慣れてきて刺激がないな」

Slide 7

Slide 7 text

© ZOZO, Inc. 7 業務最適化を突き詰めれば、組織は自壊する (気がする) サイロ化: 組織・情報が縦割りで共有・連携できていない状態。 個人プレーになり、「わざわざチームで働く意味がない」と感じる。 ▶ 組織（会社）で働く意味がないと感じる社員が増え、離職者が増える ▶ 孤立化が進み、チームで頑張ろうとする人を冷笑するようになる ▶ 会社全体として、パフォーマンス・競争力・スピード・利益が下がる

Slide 8

Slide 8 text

© ZOZO, Inc. 8 業務効率化は大事 横展開も、同じくらい大事 どちらも開発パフォーマンスを上げる

Slide 9

Slide 9 text

© ZOZO, Inc. 9 この発表で得られること Web フロントエンドエンジニアが、 業務効率化を進めながら、 効果的なチームワークを発揮する、 アイデアを得られる

Slide 10

Slide 10 text

© ZOZO, Inc. 10 FEST の取り組み ▶ Web フロントエンド技術共有会の主催 ▶ 技術顧問の (株)リクルート古川氏をゲストに、社内ラジオの配信 ▶ 外部登壇イベントの呼びかけ・サポート ▶ オフライン・オンラインイベントの企画 ▶ 横断的なルール等の取り決め (a11yガイドラインなど) ▶ 共有ツール・拡張の開発

Slide 11

Slide 11 text

© ZOZO, Inc. 11 FEST の取り組み ▶ Web フロントエンド技術共有会の主催 ▶ 技術顧問の (株)リクルート古川氏をゲストに、社内ラジオの配信 ▶ 外部登壇イベントの呼びかけ・サポート ▶ オフライン・オンラインイベントの企画 ▶ 横断的なルール等の取り決め (a11yガイドラインなど) ▶ 共有ツール・拡張の開発

Slide 12

Slide 12 text

© ZOZO, Inc. 12 Web フロントエンド技術共有会の主催 目的は 交流 です。 最新技術のキャッチアップではありません。 技術のキャッチアップは、1人でもできます。 工夫するポイントは 1. 実際に使ってみた感想・ユースケースの共有をする 2. 些細な悩み、オチがない話でもしやすくする 3. リアクションをとにかくする

Slide 13

Slide 13 text

© ZOZO, Inc. 13 社内ラジオの配信 技術顧問との相談会を設けていたが… ▶ その時間の参加が難しい ▶ なんか技術的な話が聴きたいが、何を聞いたらいいかはわからない ▶ なんとなく聴きたいけど、ガッツリ参加するほどの温度感ではない なので、 ラジオ（収録形式）でトピックを決めて、配信することにした

Slide 14

Slide 14 text

© ZOZO, Inc. 14 社内ラジオの配信 - メリット ▶ 話し手と質問者が人の目を気にしないので、会話のテンポがよくなる ▶ 会話のテンポがよくなるので、濃い話ができる ▶ 「自分からは振りづらい話」を聴ける

Slide 15

Slide 15 text

© ZOZO, Inc. 15 社内ラジオの配信 - 取り扱ったトピックの例 ▶ エラーハンドリングとロギング ▶ DDDってプロレス技ですか？ ▶ カンファレンスには参加すべき?! ▶ パパエンジニアの働き方 ▶ エンジニアの「人事評価」について など

Slide 16

Slide 16 text

© ZOZO, Inc. 16 社内ラジオの配信 - 気をつけるポイント アジェンダを作っておく。ただし、遵守しすぎない ▶ 用意したものを読み上げるだけなら、テキスト（ブログ）でいい ▶ とはいえ、まごまごしている時間はもったいない 脱線は歓迎する ▶ むしろ、話者が熱を持っている部分。面白い話を聞ける可能性が高い

Slide 17

Slide 17 text

© ZOZO, Inc. 17 オフライン・オンラインイベントの企画 こんなことをしています ▶ 外部イベントへの参加・登壇呼びかけ ▶ 外部とのオンラインイベントの企画 ▶ 社内のオフラインイベントの企画

Slide 18

Slide 18 text

© ZOZO, Inc. 18 オフライン・オンラインイベントの企画 - 工夫ポイント ▶ 外部イベントへの参加・登壇呼びかけ 「遠足」という名目で、参加を呼びかける みんなでわいわい楽しみことを目的にしてハードルを下げる ▶ 外部とのオンラインイベントの企画 外部に遠慮せずリアクションしまくる ▶ 社内のオフラインイベントの企画 普段聞けない上位レイヤーの対談や、クイズなどを企画する

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

© ZOZO, Inc. 20 4 minutes later … ※終わりません

Slide 21

Slide 21 text

© ZOZO, Inc. 21 なぜフロントエンドがやるのか

Slide 22

Slide 22 text

© ZOZO, Inc. 22 最も感情に近いレイヤーである

Slide 23

Slide 23 text

© ZOZO, Inc. 23 感情と論理の間に立つ

Slide 24

Slide 24 text

© ZOZO, Inc. 24 感情 と 論理 As Is

Slide 25

Slide 25 text

© ZOZO, Inc. 25 感情 と 論理 To Be

Slide 26

Slide 26 text

© ZOZO, Inc. 26 精緻化見込みモデル 人は行動を起こすとき、2パターンある 1⃣ 元々関心があって、論理的に判断（中心ルート） 2⃣ 興味ないから、感覚的に判断（周辺ルート） エンジニアは、「全員1⃣である」と仮定しがち

Slide 27

Slide 27 text

© ZOZO, Inc. 27 B=MAT(フォッグモデル) B: 行動 (Behavior) M: モチベーション (Motivation) A: 能力 (Ability) T: きっかけ (Trigger) と、祝福 (Shine) MAT + 祝福 で、行動をはじめる

Slide 28

Slide 28 text

© ZOZO, Inc. 28 参考文献 「態度変容」の仕組み・精緻化見込みモデルとは？【試験に出る心理用語】 https://www.5academy.com/2022/09/18790 【B=MAT】だけじゃない！フォッグモデルを真に理解するための2つのカギ https://note.com/segaxd/n/n2f7c08a6dae3#b44476dd-f71b-4717-8e8d-4ddf433f56f0

Slide 29

Slide 29 text

© ZOZO, Inc. 29 発表をもう一周します

Slide 30

Slide 30 text

© ZOZO, Inc. 30 業務最適化を突き詰めれば、組織は自壊する (気がする) サイロ化: 組織・情報が縦割りで共有・連携できていない状態。 個人プレーになり、「わざわざチームで働く意味がない」と感じる。 ▶ めんどくさいから

Slide 31

Slide 31 text

© ZOZO, Inc. 31 Web フロントエンド技術共有会の主催 工夫するポイントは 1. 実際に使ってみた感想・ユースケースの共有をする 2. 些細な悩み、オチがない話でもしやすくする 3. リアクションをとにかくする ▶ A: 能力 (Ability) のハードルを下げる ▶ S: 祝福 (Shine) たくさん賞賛する

Slide 32

Slide 32 text

© ZOZO, Inc. 32 社内ラジオの配信 技術顧問との相談会を設けていたが… ▶ その時間の参加が難しい ▶ なんか技術的な話が聴きたいが、何を聞いたらいいかはわからない ▶ なんとなく聴きたいけど、ガッツリ参加するほどの温度感ではない ▶ A: 能力 (Ability) のハードルを下げる ▶ T: きっかけ (Trigger) ラジオで与える

Slide 33

Slide 33 text

© ZOZO, Inc. 33 オフライン・オンラインイベントの企画 - 工夫ポイント ▶ 外部イベントへの参加・登壇呼びかけ 「遠足」という名目で、参加を呼びかける ▶ 外部とのオンラインイベントの企画 外部に遠慮せずリアクションしまくる ▶ 社内のオフラインイベントの企画 普段聞けない上位レイヤーの対談や、クイズなどを企画する きっかけを作り、 「楽しい」という感情を持ってもらう

Slide 34

Slide 34 text

© ZOZO, Inc. 34 人は感情で動きはじめる

Slide 35

Slide 35 text

© ZOZO, Inc. 35 この発表で得られること Web フロントエンドエンジニアが、 業務を効率化を進めながら、 効果的なチームワークを発揮する、 アイデア とは、 感情駆動 のこと。

Slide 36

Slide 36 text

© ZOZO, Inc. 36 最後に

Slide 37

Slide 37 text

© ZOZO, Inc. 37 業務効率化は大事 横展開も、同じくらい大事 社外との関わりも横展開

Slide 38

Slide 38 text

社内のフロントエンドエンジニア 同士 と社外をつなぐ ― ZOZO フロントエンドMeetup 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイス2ブロック 揚原 博志 Copyright © ZOZO, Inc. 38

Slide 39

Slide 39 text

No content