社内のフロントエンドエンジニア 同士をつなぐ ― 大規模組織でも人見知りを作らない取り組み

2026/03/18 に行われた「ZOZO フロントエンドMeetup」で発表した登壇資料です。
https://zozotech-inc.connpass.com/event/385379/

株式会社ZOZO
ZOZOTOWN開発3部 フロントエンドリプレイス2ブロック
揚原 博志

Transcript

1. 社内のフロントエンドエンジニア 同士をつなぐ ― 大規模組織でも人見知りを作らない取り組み 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイス2ブロック 揚原 博志 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. https://zozo.jp/ 2 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新着 商品を掲載（2025年3月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
3. © ZOZO, Inc. 3 Front End Start Today FEST 社内のフロントエンドを盛り上げる
4. © ZOZO, Inc. 4 チームが大きくなってきた！ 仕事も増えてきた！ 人も増えてきた！ みんなが効率的に働けるように、 うまく分業しよう！ A 機能は X 部署の S さんに、 B ページは Y 部署の T さんに
5. © ZOZO, Inc. 5 X years later …
6. © ZOZO, Inc. 6 「その機能は担当じゃないので知りません」 「（対応簡単そうだけど、なんか知らない文 脈とかルールあるかもだし、面倒だし…） B部署に連絡して対応依頼してください」 「このバグ、A部署で同じこと悩んでたん だ、１日溶かしちゃったよ」 「なんか仕事に慣れてきて刺激がないな」
7. © ZOZO, Inc. 7 業務最適化を突き詰めれば、組織は自壊する (気がする) サイロ化: 組織・情報が縦割りで共有・連携できていない状態。 個人プレーになり、「わざわざチームで働く意味がない」と感じる。 ▶ 組織（会社）で働く意味がないと感じる社員が増え、離職者が増える ▶ 孤立化が進み、チームで頑張ろうとする人を冷笑するようになる ▶ 会社全体として、パフォーマンス・競争力・スピード・利益が下がる
8. © ZOZO, Inc. 8 業務効率化は大事 横展開も、同じくらい大事 どちらも開発パフォーマンスを上げる
9. © ZOZO, Inc. 9 この発表で得られること Web フロントエンドエンジニアが、 業務効率化を進めながら、 効果的なチームワークを発揮する、 アイデアを得られる
10. © ZOZO, Inc. 10 FEST の取り組み ▶ Web フロントエンド技術共有会の主催 ▶ 技術顧問の (株)リクルート古川氏をゲストに、社内ラジオの配信 ▶ 外部登壇イベントの呼びかけ・サポート ▶ オフライン・オンラインイベントの企画 ▶ 横断的なルール等の取り決め (a11yガイドラインなど) ▶ 共有ツール・拡張の開発
11. © ZOZO, Inc. 11 FEST の取り組み ▶ Web フロントエンド技術共有会の主催 ▶ 技術顧問の (株)リクルート古川氏をゲストに、社内ラジオの配信 ▶ 外部登壇イベントの呼びかけ・サポート ▶ オフライン・オンラインイベントの企画 ▶ 横断的なルール等の取り決め (a11yガイドラインなど) ▶ 共有ツール・拡張の開発
12. © ZOZO, Inc. 12 Web フロントエンド技術共有会の主催 目的は 交流 です。 最新技術のキャッチアップではありません。 技術のキャッチアップは、1人でもできます。 工夫するポイントは 1. 実際に使ってみた感想・ユースケースの共有をする 2. 些細な悩み、オチがない話でもしやすくする 3. リアクションをとにかくする
13. © ZOZO, Inc. 13 社内ラジオの配信 技術顧問との相談会を設けていたが… ▶ その時間の参加が難しい ▶ なんか技術的な話が聴きたいが、何を聞いたらいいかはわからない ▶ なんとなく聴きたいけど、ガッツリ参加するほどの温度感ではない なので、 ラジオ（収録形式）でトピックを決めて、配信することにした
14. © ZOZO, Inc. 14 社内ラジオの配信 - メリット ▶ 話し手と質問者が人の目を気にしないので、会話のテンポがよくなる ▶ 会話のテンポがよくなるので、濃い話ができる ▶ 「自分からは振りづらい話」を聴ける
15. © ZOZO, Inc. 15 社内ラジオの配信 - 取り扱ったトピックの例 ▶ エラーハンドリングとロギング ▶ DDDってプロレス技ですか？ ▶ カンファレンスには参加すべき?! ▶ パパエンジニアの働き方 ▶ エンジニアの「人事評価」について など
16. © ZOZO, Inc. 16 社内ラジオの配信 - 気をつけるポイント アジェンダを作っておく。ただし、遵守しすぎない ▶ 用意したものを読み上げるだけなら、テキスト（ブログ）でいい ▶ とはいえ、まごまごしている時間はもったいない 脱線は歓迎する ▶ むしろ、話者が熱を持っている部分。面白い話を聞ける可能性が高い
17. © ZOZO, Inc. 17 オフライン・オンラインイベントの企画 こんなことをしています ▶ 外部イベントへの参加・登壇呼びかけ ▶ 外部とのオンラインイベントの企画 ▶ 社内のオフラインイベントの企画
18. © ZOZO, Inc. 18 オフライン・オンラインイベントの企画 - 工夫ポイント ▶ 外部イベントへの参加・登壇呼びかけ 「遠足」という名目で、参加を呼びかける みんなでわいわい楽しみことを目的にしてハードルを下げる ▶ 外部とのオンラインイベントの企画 外部に遠慮せずリアクションしまくる ▶ 社内のオフラインイベントの企画 普段聞けない上位レイヤーの対談や、クイズなどを企画する
20. © ZOZO, Inc. 20 4 minutes later … ※終わりません
21. © ZOZO, Inc. 21 なぜフロントエンドがやるのか
22. © ZOZO, Inc. 22 最も感情に近いレイヤーである
23. © ZOZO, Inc. 23 感情と論理の間に立つ
24. © ZOZO, Inc. 24 感情 と 論理 As Is
25. © ZOZO, Inc. 25 感情 と 論理 To Be
26. © ZOZO, Inc. 26 精緻化見込みモデル 人は行動を起こすとき、2パターンある 1⃣ 元々関心があって、論理的に判断（中心ルート） 2⃣ 興味ないから、感覚的に判断（周辺ルート） エンジニアは、「全員1⃣である」と仮定しがち
27. © ZOZO, Inc. 27 B=MAT(フォッグモデル) B: 行動 (Behavior) M: モチベーション (Motivation) A: 能力 (Ability) T: きっかけ (Trigger) と、祝福 (Shine) MAT + 祝福 で、行動をはじめる
28. © ZOZO, Inc. 28 参考文献 「態度変容」の仕組み・精緻化見込みモデルとは？【試験に出る心理用語】 https://www.5academy.com/2022/09/18790 【B=MAT】だけじゃない！フォッグモデルを真に理解するための2つのカギ https://note.com/segaxd/n/n2f7c08a6dae3#b44476dd-f71b-4717-8e8d-4ddf433f56f0
29. © ZOZO, Inc. 29 発表をもう一周します
30. © ZOZO, Inc. 30 業務最適化を突き詰めれば、組織は自壊する (気がする) サイロ化: 組織・情報が縦割りで共有・連携できていない状態。 個人プレーになり、「わざわざチームで働く意味がない」と感じる。 ▶ めんどくさいから
31. © ZOZO, Inc. 31 Web フロントエンド技術共有会の主催 工夫するポイントは 1. 実際に使ってみた感想・ユースケースの共有をする 2. 些細な悩み、オチがない話でもしやすくする 3. リアクションをとにかくする ▶ A: 能力 (Ability) のハードルを下げる ▶ S: 祝福 (Shine) たくさん賞賛する
32. © ZOZO, Inc. 32 社内ラジオの配信 技術顧問との相談会を設けていたが… ▶ その時間の参加が難しい ▶ なんか技術的な話が聴きたいが、何を聞いたらいいかはわからない ▶ なんとなく聴きたいけど、ガッツリ参加するほどの温度感ではない ▶ A: 能力 (Ability) のハードルを下げる ▶ T: きっかけ (Trigger) ラジオで与える
33. © ZOZO, Inc. 33 オフライン・オンラインイベントの企画 - 工夫ポイント ▶ 外部イベントへの参加・登壇呼びかけ 「遠足」という名目で、参加を呼びかける ▶ 外部とのオンラインイベントの企画 外部に遠慮せずリアクションしまくる ▶ 社内のオフラインイベントの企画 普段聞けない上位レイヤーの対談や、クイズなどを企画する きっかけを作り、 「楽しい」という感情を持ってもらう
34. © ZOZO, Inc. 34 人は感情で動きはじめる
35. © ZOZO, Inc. 35 この発表で得られること Web フロントエンドエンジニアが、 業務を効率化を進めながら、 効果的なチームワークを発揮する、 アイデア とは、 感情駆動 のこと。
36. © ZOZO, Inc. 36 最後に
37. © ZOZO, Inc. 37 業務効率化は大事 横展開も、同じくらい大事 社外との関わりも横展開
38. 社内のフロントエンドエンジニア 同士 と社外をつなぐ ― ZOZO フロントエンドMeetup 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイス2ブロック 揚原 博志 Copyright © ZOZO, Inc. 38