Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

【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/

MIXI DESIGN

March 19, 2024
Tweet

Video

More Decks by MIXI DESIGN

Other Decks in Design

Transcript

  1. ©MIXI 2 目次 - 自己紹介 - デザイン組織内のエンジニアグループ? - デザイン横断組織のコミュニケーション課題 -

    課題事例と対策 - 事例1:Slack 通知に気が付けない - 事例2:Slack スレッド問題 - 事例3:Web制作のタスクをSlackと連携して管理する - 事例4:Slackに雑談の場を作りたい - Slack通知で心がけていること - まとめ
  2. ©MIXI 3 【名前】 梅山 直樹(うめやま なおき) 【所属】 株式会社MIXI デザイン本部 プロダクトデザイン室

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

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

    G • 関わる事業が多い、コミュニケーション方針・使うツールが違う • 情報が共有される場所・タイミングが違いキャッチアップ漏れが発生する • 事業部とのコミュニケーションが増えた反面、デザイン組織内での会話が減っていった デザイン横断組織のコミュニケーション課題 Zeplin Adobe XD YouTube DocBase Google Sheets Figma GitHub Jenkins Jira Confluence CMS Google Analytics
  5. ©MIXI 11 @naoki.umeyama わたしのSlackのユーザ名は です 事例1 Zeplin Adobe XD Figma

    GitHub Jira @直樹 梅山 @naoki_umeyama @梅山直樹 @直樹梅山 @naoki-umeyama デザイン実装お願いします! デザイン修正の箇所をこちらにまとめました! WFをこちらに用意しました! 問題なさそうかご確認お願いします! スケジュールをこちらにまとめました! ご確認お願いします! PRレビューお願いします! 課題:各ツールメンション形式が違う
  6. ©MIXI 14 課題:スレッドで会話が続いて気が付けない 事例2 スレッド 「今度、ご相談があります!」 「そういえばこの件ってどうなりました?」 「詳細決まりました!  こちらです!」 あっ!?

    スレッドで会話が進んでいた!? 「この間、スレッドで  Bさんと会話済みですよ」 「そういえば 3週間前に  会話した件てどうなりました?」 3週間後 「なるほどです!  では連絡お待ちしておりますね!」 「はい!また詳細決まりましたら  ご連絡します!」 1週間後 「これならこちらで  できそうなので進めますね!  (Aさんには連絡して   おいてくれるよね)」 「よろしくお願いします!  (Aさんと連携してくれていそうだから   あとはお任せしよう)」
  7. ©MIXI 16 • Slack api の conversations.replies という メソッドでスレッド内容を取得 •

    スレッド内のメッセージ数を判定して、 指定件数になったらメッセージリストに展開 • botに setting コマンドを用意して、 通知条件をチャンネル毎にカスタマイズ可 事例2 仕組み
  8. ©MIXI 18 課題:残タスク・進捗状況を把握しやすくしたい 事例3 仕様書はスプレッドシート、 不具合報告はJira、 Slackでも急な修正依頼が。。。 • Webサイトの制作進行で使うツール ◦

    仕様書はGoogleスプレッドシート ◦ 不具合報告は Jira ◦ コミュニケーションはSlack • 大きな依頼はJiraでチケット化される • 細かい変更依頼がSlackで飛んでくる • 複数事業部のプロジェクトが同時進行していると Slackでのタスク管理は困難
  9. ©MIXI 22 • プロモーション領域のサイト制作では仕様が細かく修正されるので、 仕様書と同じ場所で、修正指示・不具合報告ができるのが効率よかった • 外部の制作会社様とも連携がしやすい (社外の方をスポットで Jira へ招待するフローを省ける)

    • 「テキストが1文字違った」のような軽いタスクを、 どの職種も気軽に書き込むことができる Gooleスプレッドシート&Slack通知 にして良かった点 事例3 Gooleスプレッドシート&Slack通知の仕組みは いろいろ都合が良く、制作メンバーに定着
  10. ©MIXI 26 仕組み • 実装は、ChatGPT + Google スプレッドシート(GAS) + Slack

    App 事例4 グループのメンバーが苦手そうな質問は あらかじめ除外できます! 質問一覧
  11. ©MIXI 30 • Jira, Confluence の起票・コメント • Figma, Zeplin, XD

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