【D2-S3】デザイン組織のコミュニケーション課題を解決するSlack活用法 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MIXI TECH DESIGN CONFERENCE 2024 - SESSION ARCHIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3/19(火) 15:50〜 16:10｜D2-S3

デザイン組織内に設けられたエンジニアグループが、組織の活性化や情報共有の向上を目指し、Slack x GAS x 各種デザインツールを組み合わせて、コミュニケーション課題を改善しているお話をします。

梅山 直樹 / Naoki Umeyama
デザイン本部 プロダクトデザイン室 コミュニケーションエンジニアリンググループ

────────────────────────────
□セッション情報
https://techcon.mixi.co.jp/2024/d2-s3.html
□イベントハッシュタグ
#MTDC2024
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

◇◆◇ Information ◇◆◇
note | MIXI DESIGN
https://note.com/mixi_design/
Cocoda | MIXI DESIGN
https://cocoda.design/teams/mixi-design
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_design/

採用情報
https://mixigroup-recruit.mixi.co.jp/
Webサイト
https://mixi.co.jp/

Transcript

1. ©MIXI デザイン組織の コミュニケーション課題を解決するSlack 活用法 梅山直樹 デザイン本部 プロダクトデザイン室 コミュニケーションエンジニアリンググループ
2. ©MIXI 2 目次 - 自己紹介 - デザイン組織内のエンジニアグループ？ - デザイン横断組織のコミュニケーション課題 - 課題事例と対策 - 事例1：Slack 通知に気が付けない - 事例2：Slack スレッド問題 - 事例3：Web制作のタスクをSlackと連携して管理する - 事例4：Slackに雑談の場を作りたい - Slack通知で心がけていること - まとめ
3. ©MIXI 3 【名前】 梅山 直樹（うめやま なおき） 【所属】 株式会社MIXI デザイン本部 プロダクトデザイン室 コミュニケーションエンジニアリンググループ 【来歴】 • 2017年 ミクシィ（現：MIXI）入社 • モンスターストライクをはじめとする、MIXIで展開している各事業の、 特設・公式サイトのデザイン（フロントエンド）実装を担当 • 2021年 他事業部（TIPSTAR）へ社内異動。Webサービス開発を経験 • 認定スクラムマスター取得 • 現在は、デザイン本部に所属 デザイン組織をエンジニアリング観点から支援する取り組みをしています 自己紹介 【好きなもの】 • 猫 • コーヒー • Chrome拡張作り
4. ©MIXI デザイン組織内の エンジニアグループ？
5. ©MIXI 5 コミュニケーションエンジニアリングGについて ライフスタイル スポーツ デジタル エンター テインメント 投資 その他 デザイン本部（デザイン事業横断） コミュニケーションエンジニアリング G 開発本部（エンジニアリング事業横断） 各事業部の エンジニア組織 各事業部の エンジニア組織 各事業部の エンジニア組織 各事業部の エンジニア組織
6. ©MIXI 6 • 主な業務は、社内の公式サイト・特設サイトの制作 • 最近では、組織内の業務課題を解決するツール制作 • デザインに関わるメンバーと同じ目線から 技術的解決を目指すグループ コミュニケーションエンジニアリングGについて
7. ©MIXI デザイン横断組織の コミュニケーション課題
8. ©MIXI 8 ライフスタイル スポーツ デジタルエンター テインメント 投資 その他 デザイン本部（デザイン事業横断組織） コミュニケーションエンジニアリング G • 関わる事業が多い、コミュニケーション方針・使うツールが違う • 情報が共有される場所・タイミングが違いキャッチアップ漏れが発生する • 事業部とのコミュニケーションが増えた反面、デザイン組織内での会話が減っていった デザイン横断組織のコミュニケーション課題 Zeplin Adobe XD YouTube DocBase Google Sheets Figma GitHub Jenkins Jira Confluence CMS Google Analytics
9. ©MIXI 9 • 各事業部では、「スクラム」といった開発手法を取り入れたりすることで、 コミュニケーションの型を研ぎ澄ましていくことができる • 横断組織には、各組織にあわせて、 コミュニケーションの形を柔軟に変化させることが期待されていた デザイン横断組織のコミュニケーション課題 できるだけ、人に依存しないやり方で、 既存の仕組みに影響がでないように、 Slackをうまく活用して解決してみよう！
10. ©MIXI 「いろいろなツールを使っているため通知 に気が付きにくい」 事例１
11. ©MIXI 11 @naoki.umeyama わたしのSlackのユーザ名は です 事例１ Zeplin Adobe XD Figma GitHub Jira @直樹 梅山 @naoki_umeyama @梅山直樹 @直樹梅山 @naoki-umeyama デザイン実装お願いします！ デザイン修正の箇所をこちらにまとめました！ WFをこちらに用意しました！ 問題なさそうかご確認お願いします！ スケジュールをこちらにまとめました！ ご確認お願いします！ PRレビューお願いします！ 課題：各ツールメンション形式が違う
12. ©MIXI 12 事例１ 対策：自動でメンションをつける @mention-botを作成 通知がきたぞ！ @付きのメンションがあれば お知らせします
13. ©MIXI 「スレッドで会話が続いて気が付けない」 事例２
14. ©MIXI 14 課題：スレッドで会話が続いて気が付けない 事例２ スレッド 「今度、ご相談があります！」 「そういえばこの件ってどうなりました？」 「詳細決まりました！ 　こちらです！」 あっ！？ スレッドで会話が進んでいた！？ 「この間、スレッドで 　Bさんと会話済みですよ」 「そういえば 3週間前に 　会話した件てどうなりました？」 3週間後 「なるほどです！ 　では連絡お待ちしておりますね！」 「はい！また詳細決まりましたら 　ご連絡します！」 1週間後 「これならこちらで 　できそうなので進めますね！ 　（Aさんには連絡して 　　おいてくれるよね）」 「よろしくお願いします！ 　（Aさんと連携してくれていそうだから 　　あとはお任せしよう）」
15. ©MIXI 15 対策：スレッドを自動展開する@thread-bot を作成 事例２ スレッドで会話が続いているので お知らせします！ あ、まだあの件は、解決してなくて スレッドで会話中なのか！ スレッド 2日後 112件に及ぶとても長い相談
16. ©MIXI 16 • Slack api の conversations.replies という メソッドでスレッド内容を取得 • スレッド内のメッセージ数を判定して、 指定件数になったらメッセージリストに展開 • botに setting コマンドを用意して、 通知条件をチャンネル毎にカスタマイズ可 事例２ 仕組み
17. ©MIXI 「残タスク・進捗状況を把握しやすくしたい」 事例３
18. ©MIXI 18 課題：残タスク・進捗状況を把握しやすくしたい 事例３ 仕様書はスプレッドシート、 不具合報告はJira、 Slackでも急な修正依頼が。。。 • Webサイトの制作進行で使うツール ◦ 仕様書はGoogleスプレッドシート ◦ 不具合報告は Jira ◦ コミュニケーションはSlack • 大きな依頼はJiraでチケット化される • 細かい変更依頼がSlackで飛んでくる • 複数事業部のプロジェクトが同時進行していると Slackでのタスク管理は困難
19. ©MIXI 19 対策：仕様書と不具合報告場所を一体型にしてSlackへ連携 事例３ #案件_通知部屋 残タスク共有が ありました 不具合報告が ありました 企画変更による 修正依頼 不具合報告 残タスク共有 修正指示が ありました Googleスプレッドシート
20. ©MIXI 20 対策：Googleスプレッドシートに更新を入れるとSlackの専用チャンネルへ通知 ステータス更新でSlackへ通知 対応を報告 事例３ そのまま スレッドで相談
21. ©MIXI 21 回答待ち 確認待ち 完了 対策：ステータス毎に色分けして状態を把握しやすく Google スプレッドシート Slack Google スプレッドシート Google スプレッドシート Slack Slack 事例３
22. ©MIXI 22 • プロモーション領域のサイト制作では仕様が細かく修正されるので、 仕様書と同じ場所で、修正指示・不具合報告ができるのが効率よかった • 外部の制作会社様とも連携がしやすい （社外の方をスポットで Jira へ招待するフローを省ける） • 「テキストが1文字違った」のような軽いタスクを、 どの職種も気軽に書き込むことができる Gooleスプレッドシート＆Slack通知 にして良かった点 事例３ Gooleスプレッドシート＆Slack通知の仕組みは いろいろ都合が良く、制作メンバーに定着
23. ©MIXI 「Slackで雑談する場を作りたい」 事例４
24. ©MIXI 24 課題：Slackで雑談する場を作りたい • ある日、デザイナーさんから コミュニケーションのきっかけを作りたく Slackに雑談アプリを導入したいという相談があった 事例4
25. ©MIXI 25 対策：Slack雑談アプリを作った 事例4 雑談のきっかけになる 質問をランダムでメンションします！
26. ©MIXI 26 仕組み • 実装は、ChatGPT + Google スプレッドシート（GAS） + Slack App 事例4 グループのメンバーが苦手そうな質問は あらかじめ除外できます！ 質問一覧
27. ©MIXI 27 「夢中」になってた雑談の紹介 事例4 「もし何かが起こって「フォントサイズ」に転生することになったら、何pxになりたいですか？」
28. ©MIXI 28 Slack雑談アプリ • １ヶ月ほど運用してアンケートを実施 所属メンバーの半数以上が継続を希望 • 有料アプリ契約はせず代替アプリをそのまま利用することに • 雑談アプリを入れる前後3ヶ月の会話量を調べたところ、 Slackでの会話が 2.5倍に増加 事例4 ご継続ありがとうございます！
29. ©MIXI 「その他」
30. ©MIXI 30 • Jira, Confluence の起票・コメント • Figma, Zeplin, XD のコメント • GitHubや各種CIからの更新通知 ／ リリース通知 • Google Analytics で運用サイトの PV・ユーザ数・端末使用率等を定期通知 • CMSによるお知らせ更新の通知 • 運営している YouTubeのプレイリストの更新を通知 • 業務報告・日報を書いていないメンバーに記入を促す通知 • Notionの更新通知 • DocBaseで共有されたナレッジ ◦ ブックマークレットで一覧を抽出する仕組みを作成して収集 • シャッフルランチのメンバー振り分け ◦ グループの振り分けを半自動化、コピペで Slackに貼り付けられる仕組み • etc… その他 Slack通知しているもの 各事業部・各職種から、様々な課題相談がある。 デザイン組織の内部にエンジニアがいることで、 小さな課題を素早く改善している。
31. ©MIXI Slack通知で心がけていること
32. ©MIXI 32 Slack通知で心がけていること • エンジニア職は通知やログに慣れているが他職種ではそうとは限らない • コミュニケーション（通知）はできるだけやわらかくすること • そのコミュニケーションは 　「豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。」 というMIXIのPURPOSE（パーパス）を実現できているか？
33. ©MIXI 33 Slack通知で心がけていること やわらかく タイトルとアイコンをやわらかく。 Default 報告遅れたメンバーに プレッシャーを与えてそう。 日報報告忘れリマインド通知の例
34. ©MIXI 34 Slack通知で心がけていること 日報報告忘れリマインド通知の例 MIXI PURPOSE 吹き出しもつけてさらにやわらかく。絵文字はランダムに。 ただのリマインドにスタンプでメンバーから反応が！
35. ©MIXI 35 試行錯誤 • 受け入れられるやり方もあれば、そうでないものも多い ▪ なかなかこのバランスは難しく、何回も失敗もしている • 仕組みを入れてもメンテナンスしていかないと、 コミュニケーションは減っていく ▪ 今後も、AI等をうまく活用して良いコミュニケーションを作りたい Slack通知で心がけていること
36. ©MIXI まとめ
37. ©MIXI 37 • MIXIには、コミュニケーションをエンジニアリングする組織がある • コミュニケーション課題を解決するために、 Slackに様々な通知を飛ばしている・工夫して活用している • Slack通知はできるだけやわらかくするように心がけている 各組織にあわせた形がみつかるまで、試行錯誤を繰り返している • 今後もMIXIのパーパス「豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。」を、 事業と組織の両面から実現できるよう取り組んでいきたい まとめ
38. ©MIXI