Slide 1

Slide 1 text

©MIXI デザイン組織の コミュニケーション課題を解決するSlack 活用法 梅山直樹 デザイン本部 プロダクトデザイン室 コミュニケーションエンジニアリンググループ

Slide 2

Slide 2 text

©MIXI 2 目次 - 自己紹介 - デザイン組織内のエンジニアグループ? - デザイン横断組織のコミュニケーション課題 - 課題事例と対策 - 事例1:Slack 通知に気が付けない - 事例2:Slack スレッド問題 - 事例3:Web制作のタスクをSlackと連携して管理する - 事例4:Slackに雑談の場を作りたい - Slack通知で心がけていること - まとめ

Slide 3

Slide 3 text

©MIXI 3 【名前】 梅山 直樹(うめやま なおき) 【所属】 株式会社MIXI デザイン本部 プロダクトデザイン室 コミュニケーションエンジニアリンググループ 【来歴】 ● 2017年 ミクシィ(現:MIXI)入社 ● モンスターストライクをはじめとする、MIXIで展開している各事業の、 特設・公式サイトのデザイン(フロントエンド)実装を担当 ● 2021年 他事業部(TIPSTAR)へ社内異動。Webサービス開発を経験 ● 認定スクラムマスター取得 ● 現在は、デザイン本部に所属 デザイン組織をエンジニアリング観点から支援する取り組みをしています 自己紹介 【好きなもの】 ● 猫 ● コーヒー ● Chrome拡張作り

Slide 4

Slide 4 text

©MIXI デザイン組織内の エンジニアグループ?

Slide 5

Slide 5 text

©MIXI 5 コミュニケーションエンジニアリングGについて ライフスタイル スポーツ デジタル エンター テインメント 投資 その他 デザイン本部(デザイン事業横断) コミュニケーションエンジニアリング G 開発本部(エンジニアリング事業横断) 各事業部の エンジニア組織 各事業部の エンジニア組織 各事業部の エンジニア組織 各事業部の エンジニア組織

Slide 6

Slide 6 text

©MIXI 6 ● 主な業務は、社内の公式サイト・特設サイトの制作 ● 最近では、組織内の業務課題を解決するツール制作 ● デザインに関わるメンバーと同じ目線から 技術的解決を目指すグループ コミュニケーションエンジニアリングGについて

Slide 7

Slide 7 text

©MIXI デザイン横断組織の コミュニケーション課題

Slide 8

Slide 8 text

©MIXI 8 ライフスタイル スポーツ デジタルエンター テインメント 投資 その他 デザイン本部(デザイン事業横断組織) コミュニケーションエンジニアリング G ● 関わる事業が多い、コミュニケーション方針・使うツールが違う ● 情報が共有される場所・タイミングが違いキャッチアップ漏れが発生する ● 事業部とのコミュニケーションが増えた反面、デザイン組織内での会話が減っていった デザイン横断組織のコミュニケーション課題 Zeplin Adobe XD YouTube DocBase Google Sheets Figma GitHub Jenkins Jira Confluence CMS Google Analytics

Slide 9

Slide 9 text

©MIXI 9 ● 各事業部では、「スクラム」といった開発手法を取り入れたりすることで、 コミュニケーションの型を研ぎ澄ましていくことができる ● 横断組織には、各組織にあわせて、 コミュニケーションの形を柔軟に変化させることが期待されていた デザイン横断組織のコミュニケーション課題 できるだけ、人に依存しないやり方で、 既存の仕組みに影響がでないように、 Slackをうまく活用して解決してみよう!

Slide 10

Slide 10 text

©MIXI 「いろいろなツールを使っているため通知 に気が付きにくい」 事例1

Slide 11

Slide 11 text

©MIXI 11 @naoki.umeyama わたしのSlackのユーザ名は です 事例1 Zeplin Adobe XD Figma GitHub Jira @直樹 梅山 @naoki_umeyama @梅山直樹 @直樹梅山 @naoki-umeyama デザイン実装お願いします! デザイン修正の箇所をこちらにまとめました! WFをこちらに用意しました! 問題なさそうかご確認お願いします! スケジュールをこちらにまとめました! ご確認お願いします! PRレビューお願いします! 課題:各ツールメンション形式が違う

Slide 12

Slide 12 text

©MIXI 12 事例1 対策:自動でメンションをつける @mention-botを作成 通知がきたぞ! @付きのメンションがあれば お知らせします

Slide 13

Slide 13 text

©MIXI 「スレッドで会話が続いて気が付けない」 事例2

Slide 14

Slide 14 text

©MIXI 14 課題:スレッドで会話が続いて気が付けない 事例2 スレッド 「今度、ご相談があります!」 「そういえばこの件ってどうなりました?」 「詳細決まりました!  こちらです!」 あっ!? スレッドで会話が進んでいた!? 「この間、スレッドで  Bさんと会話済みですよ」 「そういえば 3週間前に  会話した件てどうなりました?」 3週間後 「なるほどです!  では連絡お待ちしておりますね!」 「はい!また詳細決まりましたら  ご連絡します!」 1週間後 「これならこちらで  できそうなので進めますね!  (Aさんには連絡して   おいてくれるよね)」 「よろしくお願いします!  (Aさんと連携してくれていそうだから   あとはお任せしよう)」

Slide 15

Slide 15 text

©MIXI 15 対策:スレッドを自動展開する@thread-bot を作成 事例2 スレッドで会話が続いているので お知らせします! あ、まだあの件は、解決してなくて スレッドで会話中なのか! スレッド 2日後 112件に及ぶとても長い相談

Slide 16

Slide 16 text

©MIXI 16 ● Slack api の conversations.replies という メソッドでスレッド内容を取得 ● スレッド内のメッセージ数を判定して、 指定件数になったらメッセージリストに展開 ● botに setting コマンドを用意して、 通知条件をチャンネル毎にカスタマイズ可 事例2 仕組み

Slide 17

Slide 17 text

©MIXI 「残タスク・進捗状況を把握しやすくしたい」 事例3

Slide 18

Slide 18 text

©MIXI 18 課題:残タスク・進捗状況を把握しやすくしたい 事例3 仕様書はスプレッドシート、 不具合報告はJira、 Slackでも急な修正依頼が。。。 ● Webサイトの制作進行で使うツール ○ 仕様書はGoogleスプレッドシート ○ 不具合報告は Jira ○ コミュニケーションはSlack ● 大きな依頼はJiraでチケット化される ● 細かい変更依頼がSlackで飛んでくる ● 複数事業部のプロジェクトが同時進行していると Slackでのタスク管理は困難

Slide 19

Slide 19 text

©MIXI 19 対策:仕様書と不具合報告場所を一体型にしてSlackへ連携 事例3 #案件_通知部屋 残タスク共有が ありました 不具合報告が ありました 企画変更による 修正依頼 不具合報告 残タスク共有 修正指示が ありました Googleスプレッドシート

Slide 20

Slide 20 text

©MIXI 20 対策:Googleスプレッドシートに更新を入れるとSlackの専用チャンネルへ通知 ステータス更新でSlackへ通知 対応を報告 事例3 そのまま スレッドで相談

Slide 21

Slide 21 text

©MIXI 21 回答待ち 確認待ち 完了 対策:ステータス毎に色分けして状態を把握しやすく Google スプレッドシート Slack Google スプレッドシート Google スプレッドシート Slack Slack 事例3

Slide 22

Slide 22 text

©MIXI 22 ● プロモーション領域のサイト制作では仕様が細かく修正されるので、 仕様書と同じ場所で、修正指示・不具合報告ができるのが効率よかった ● 外部の制作会社様とも連携がしやすい (社外の方をスポットで Jira へ招待するフローを省ける) ● 「テキストが1文字違った」のような軽いタスクを、 どの職種も気軽に書き込むことができる Gooleスプレッドシート&Slack通知 にして良かった点 事例3 Gooleスプレッドシート&Slack通知の仕組みは いろいろ都合が良く、制作メンバーに定着

Slide 23

Slide 23 text

©MIXI 「Slackで雑談する場を作りたい」 事例4

Slide 24

Slide 24 text

©MIXI 24 課題:Slackで雑談する場を作りたい ● ある日、デザイナーさんから コミュニケーションのきっかけを作りたく Slackに雑談アプリを導入したいという相談があった 事例4

Slide 25

Slide 25 text

©MIXI 25 対策:Slack雑談アプリを作った 事例4 雑談のきっかけになる 質問をランダムでメンションします!

Slide 26

Slide 26 text

©MIXI 26 仕組み ● 実装は、ChatGPT + Google スプレッドシート(GAS) + Slack App 事例4 グループのメンバーが苦手そうな質問は あらかじめ除外できます! 質問一覧

Slide 27

Slide 27 text

©MIXI 27 「夢中」になってた雑談の紹介 事例4 「もし何かが起こって「フォントサイズ」に転生することになったら、何pxになりたいですか?」

Slide 28

Slide 28 text

©MIXI 28 Slack雑談アプリ ● 1ヶ月ほど運用してアンケートを実施 所属メンバーの半数以上が継続を希望 ● 有料アプリ契約はせず代替アプリをそのまま利用することに ● 雑談アプリを入れる前後3ヶ月の会話量を調べたところ、 Slackでの会話が 2.5倍に増加 事例4 ご継続ありがとうございます!

Slide 29

Slide 29 text

©MIXI 「その他」

Slide 30

Slide 30 text

©MIXI 30 ● Jira, Confluence の起票・コメント ● Figma, Zeplin, XD のコメント ● GitHubや各種CIからの更新通知 / リリース通知 ● Google Analytics で運用サイトの PV・ユーザ数・端末使用率等を定期通知 ● CMSによるお知らせ更新の通知 ● 運営している YouTubeのプレイリストの更新を通知 ● 業務報告・日報を書いていないメンバーに記入を促す通知 ● Notionの更新通知 ● DocBaseで共有されたナレッジ ○ ブックマークレットで一覧を抽出する仕組みを作成して収集 ● シャッフルランチのメンバー振り分け ○ グループの振り分けを半自動化、コピペで Slackに貼り付けられる仕組み ● etc… その他 Slack通知しているもの 各事業部・各職種から、様々な課題相談がある。 デザイン組織の内部にエンジニアがいることで、 小さな課題を素早く改善している。

Slide 31

Slide 31 text

©MIXI Slack通知で心がけていること

Slide 32

Slide 32 text

©MIXI 32 Slack通知で心がけていること ● エンジニア職は通知やログに慣れているが他職種ではそうとは限らない ● コミュニケーション(通知)はできるだけやわらかくすること ● そのコミュニケーションは  「豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。」 というMIXIのPURPOSE(パーパス)を実現できているか?

Slide 33

Slide 33 text

©MIXI 33 Slack通知で心がけていること やわらかく タイトルとアイコンをやわらかく。 Default 報告遅れたメンバーに プレッシャーを与えてそう。 日報報告忘れリマインド通知の例

Slide 34

Slide 34 text

©MIXI 34 Slack通知で心がけていること 日報報告忘れリマインド通知の例 MIXI PURPOSE 吹き出しもつけてさらにやわらかく。絵文字はランダムに。 ただのリマインドにスタンプでメンバーから反応が!

Slide 35

Slide 35 text

©MIXI 35 試行錯誤 ● 受け入れられるやり方もあれば、そうでないものも多い ■ なかなかこのバランスは難しく、何回も失敗もしている ● 仕組みを入れてもメンテナンスしていかないと、 コミュニケーションは減っていく ■ 今後も、AI等をうまく活用して良いコミュニケーションを作りたい Slack通知で心がけていること

Slide 36

Slide 36 text

©MIXI まとめ

Slide 37

Slide 37 text

©MIXI 37 ● MIXIには、コミュニケーションをエンジニアリングする組織がある ● コミュニケーション課題を解決するために、 Slackに様々な通知を飛ばしている・工夫して活用している ● Slack通知はできるだけやわらかくするように心がけている 各組織にあわせた形がみつかるまで、試行錯誤を繰り返している ● 今後もMIXIのパーパス「豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。」を、 事業と組織の両面から実現できるよう取り組んでいきたい まとめ

Slide 38

Slide 38 text

©MIXI