チームでの開発をより強化できる デザイナーが持ちたい協力と共感 サイボウズ株式会社 プロダクトデザイナー 上村 安廣

上村 安廣（かみむら やすひろ） 2021年サイボウズに中途入社。 現在は開発本部でサイボウズ Officeのデザインを担当。 デザイナー10年目に最近突入。冬のふもとっぱらキャン プ場に行ってみたい。 @kamimudesign

スケジュール、掲示板など社内の情報共有に使える機能がオールインワン。 20年以上続き80,000社近くご利用いただいている製品です。

今回は「サイボウズ Officeモバイルチーム」でのお話をさせていただきます。

突然ですが チームで開発をするデザイナーなら こんなこと、一度は思ったことあるのではないでしょうか？

社内受託開発のようにデザイン物をエンジニアに渡すだけで終わっている 一連の開発プロセスにデザインタスクが組み込まれていない故の疎外感 デザイン業務以外の解像度の低さ

このデザイナーのもやもやを どういうアクションで乗り越えたのか、 今日はお話したいと思います。

サイボウズ Officeモバイル開発チーム iOS PO×1 ライター×1 エンジニア×4 QA×1 デザイナー×1 エンジニア×3 QA×1 デザイナー×1 Android

サイボウズ Officeモバイル開発チーム iOS PO×1 ライター×1 エンジニア×4 QA×1 デザイナー×1 エンジニア×3 QA×1 デザイナー×1 Android こちらでの お話がメインです

ちなみに、サイボウズOfficeモバイルチームは 「スクラム開発」という開発フレームワークを採用し 日々開発を行っています。 スクラム開発とは 「スクラム開発」とは「アジャイル開発」のひと つで、通常5〜9人ほどのチームメンバーが2〜4 週間程度かけて新しい機能を開発します。 「スプリント」と呼ばれる短い開発期間の中で機 能の実装とその成果物の評価を行い、それを何度 も繰り返してシステムを開発していきます。 引用：アジャイル開発の手法であるスクラム開発とは？メリットや流れを解説｜TECH STOCK MAGAZINE https://tech-stock.com/magazine/features-and-merits-of-scrum-which-is-a-methodology-of-agile-development/

スクラム開発 での デザイナーの取り組みについて 内外

スクラム内 スクラム 内 のデザイナーの取り組み 各スクラムイベントへの参加 スプリント開始時のプランニング デザインラフ段階でのデザインフィードバック 画面実装後のデザイン調整

PdM,POとPBIのタネ探しなど施策について壁打ち デザインの先行検討 リサーチ関連業務 スクラム 外 のデザイナーの取り組み スクラム外

社内受託開発のようにデザイン物をエンジニアに渡すだけで終わっている 一連の開発プロセスにデザインタスクが組み込まれていない故の疎外感 デザイン業務以外の解像度の低さ 話は戻りまして

Action 1 デザインをチーム全体で考える状態にする Action 2 チームで話す時間をとにかく増やす Action 3 デザイン以外の業務を理解・吸収する

デザインをチーム全体で考える状態にする Action 1

①デザインをチーム全体で考える状態にする 開発プロセスとデザインが分断されていると、 デザインをただお渡ししただけで終わりのような コミュニケーションにはなっていないでしょうか？

①デザインをチーム全体で考える状態にする

G このような進め方だとデザイナーが頭の中で 考えているユーザー体験と実際に出来上がる 画面とで差分が大きく発生する可能性が高い G 一方的なやり取りはエンジニアからすると 社内受託開発のような印象を持つことにな り、チームの精神衛生上も良くない ①デザインをチーム全体で考える状態にする

①デザインをチーム全体で考える状態にする この状況を良くないと思い、 デザイン作業を都度都度でチームで共有をすることに デザイン作業を デザイナーだけに閉じない

要件をワイヤーやラフデザインに落とし込んだ後に エンジニアとQAで集まってデザインフィードバックに 協力してもらいその場でFigmaを即修正 ①デザインをチーム全体で考える状態にする

場合によってはラフを作る最初の段階でエンジニアと一緒に実現可能かを 相談しながらデザインモブをしたり、見落としているエッジケースがない かQA観点でチェックしてもらってデザインをやり直してみる、ということ も行っていました ①デザインをチーム全体で考える状態にする

①デザインをチーム全体で考える状態にする スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 会議 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 予定の詳細 編集 会議 ボウズマン株式会社様 大型案件 受注の件に ついてのすり合わせMTGをお願いします！ 参加者：高橋健太 日時：9:00~10:00 デザイナー デザイン粗めに作ってみたんです がどうでしょうか！？ デザイナー OKです、工数感把握しておきま す！ 予定をタップ時に表示されるbottom sheetのデザイン検討 公式で用意されている ◯◯◯◯というAPIを利用す れば実現できそうなデザイン かな〜 エンジニアA でも、今回の要件は◯◯◯◯ なので「閉じる挙動」のみ独 自実装する必要がありそうで すね エンジニアB とある日のデザインフィードバックの様子 A

①デザインをチーム全体で考える状態にする スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 会議 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 予定の詳細 編集 会議 ボウズマン株式会社様 大型案件 受注の件に ついてのすり合わせMTGをお願いします！ 参加者：高橋健太 日時：2023/11/16 (木) 9:00~10:00 デザイナー デザイン的に実現は大丈夫そうで すが、なにか懸念点とかありそ うですか？ デザイナー たしかに…！bottom sheetで高 さが出るとメインのコンテンツ も隠れる懸念もありますね とある日のデザインフィードバックの様子 B 端末設定で文字サイズを大き くしていると表示が崩れるバ グが最近報告されたので、そ こ気をつけたいですね〜 QA そうなると行数は1行か2行 ぐらいで省略が正解かもです ね エンジニア

①デザインをチーム全体で考える状態にする スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 外出 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 外出 〇〇株式会社様 大型案件 受注の件に ついてプレゼン 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 編集 会議 ボウズマン株式会社様 大型案件 受 注の件についてのすり合わ...（省略） 日時 2023/11/16 (木) 9:00~10:00 参加者 佐藤 裕子,田中 雄太郎,鈴木 美咲,高橋 健太, 渡辺 さくら,伊藤 大輔,山本 …（全20人） そういえば少し先ですけど、今 後このbottom sheetを指で引き 伸ばしてフル表示しようと考えて いるんですよね デザイナー でもそうしたらこのbottom sheetは指で伸ばせること ユーザー気づかないんじゃな いですか？ エンジニアA とある日のデザインフィードバックの様子 C

①デザインをチーム全体で考える状態にする スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 外出 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 外出 〇〇株式会社様 大型案件 受注の件に ついてプレゼン 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 編集 会議 ボウズマン株式会社様 大型案件 受 注の件についてのすり合わ...（省略） 日時 2023/11/16 (木) 9:00~10:00 参加者 佐藤 裕子,田中 雄太郎,鈴木 美咲,高橋 健太, 渡辺 さくら,伊藤 大輔,山本 …（全20人） あ〜たしかに。どうしようか な… それなら を置くこ とでヒントは与えられそうですよ ね。（Figmaでさっと作る） こういったバー デザイナー なるほど、そういうバーはあ りですね。 ちなみにそういうバーのこと をHundleとよく呼びます。 コードを見ると角丸の線を置 くだけでいけそうなので割と かんたんに実装できますよ。 エンジニアA エンジニアB ここのこと とある日のデザインフィードバックの様子 C

①デザインをチーム全体で考える状態にする スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 外出 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 外出 〇〇株式会社様 大型案件 受注の件に ついてプレゼン 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 予定の詳細 編集 会議 ボウズマン株式会社様 大型案件 受注の件に ついてのすり合わせMTGをお願いします！ 参加者：高橋健太 日時： スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 外出 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 外出 〇〇株式会社様 大型案件 受注の件に ついてプレゼン 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 編集 会議 ボウズマン株式会社様 大型案件 受 注の件についてのすり合わ...（省略） 日時 2023/11/16 (木) 9:00~10:00 参加者 佐藤 裕子,田中 雄太郎,鈴木 美咲,高橋 健太, 渡辺 さくら,伊藤 大輔,山本 …（全20人） スケジュール 2023年11月16日 木曜日 09 10 11 12 13 14 15 16 17 18 19 外出 ボウズマン株式会社様 大型案件 受注 の件についてすり合わせMTGをお願… 会議 株式会社ボウズ販売 プレゼンの打ち 合わせ（zoomで行います） 外出 〇〇株式会社様 大型案件 受注の件に ついてプレゼン 会議 営業会議営業会議営業会議営 トップページ 通知 99+ アプリ 設定 会議 ボウズマン株式会社様 大型案件 受 注の件についてのすり合わせMTG... 日時 2022/2/10 (水) 16:00~17:00 参加者 佐藤 裕子,田中 雄太郎,鈴木 美咲,高橋 健太, 渡辺 さくら,伊藤 大輔,山本 由香,中村 啓太… 完成案 たたき台をフィードバックもらい、 それを数回繰り返して…

チームで協力することでデザインは全員で考えていくものというある種の共 通認識ができてきたような手応えを感じ、これ以降話し合いの場では「デザ イン観点では〜」といった風にデザインについて気軽に会話ができる文化 をチームに根付いた。 ①デザインをチーム全体で考える状態にする

スプリントレビューでも気軽にデザインの話題をする機会が増えた結果、 エンジニアやQAだけではなく 不定期で参加する営業さんやカスタマーサポートの方にも デザインの意図について質問をもらうようになった ①デザインをチーム全体で考える状態にする

チームで話す時間をとにかく増やす Action 2

②チームで話す時間を増やす プロジェクトが始まってまもなくは エンジニアやQAと会話量の少なさからくる コミュニケーション不足により、 仕様やデザインを話す際の認識のズレも発生することも

②チームで話す時間を増やす

②チームで話す時間を増やす デザイナーが持っている他職能をぐいぐい巻き込んで状況を いい方向へ変えていく力を信じ、コミュニケーション量を増 やせる環境にしようと画策

②チームで話す時間を増やす C 「言う会」と称したフリーテーマな集まりを夕方 に始めてみることに。（夕会だけに） C この会で大事にしているのは「どんなふんわり している状態でもまずは話してみる」「共感を し合う」 † 直近スプリントの相談や、Figma見ながらデザ インの相談、試験範囲の相談、考えがまとまっ ていない状態の粗めな相談、全然業務に関係な い雑談など

②チームで話す時間を増やす 1泊2日のチームビルディングイベントも実施。 メンバー間の価値観や業務への姿勢を再認識。

②チームで話す時間を増やす コミュニケーション量が増加するにつれて 会話が常にハイコンテクストになり、 メンバー間の認識合わせがとてもスムーズになりましたが…

②チームで話す時間を増やす ハイコンテクストになった弊害も

②チームで話す時間を増やす 会話がハイコンテクストになるにつれ d プランニング時、会話ですぐ完結するため議論の過程 のログを取らなくなるor取り忘れが発生する d 新しくジョインしたメンバーが会話に追いつけない状 況を生みやすく、属人化にも繋がる d 最低限の文字数のコミュニケーションになるので日本 語ネイティブではないメンバーが追いつけない 一方的なコミュニケーションに なっていたことに全員が反省

②チームで話す時間を増やす 日本語はハイコンテクストな言語だということを 常に念頭に置く 要件やメモなどドキュメント共同編集ツールで書きながら会話をす るなど、チーム全員誰でも優しい形で会話ができることを目指す

②チームで話す時間を増やす Q そんなトラブルもあったが、短い時間で効率の 良いプランニング、開発が可能となり、テンポ の良いコミュニケーションによって全体的には 開発スピードが向上 Q その結果、ユーザーに価値を素早く提供するこ とができプロジェクトに貢献

デザイン以外の業務を理解・吸収する Action 3

③デザイン以外の業務を理解・吸収する デザイナーは当然デザインに集中すべきですが、 チームでの開発ならデザイン以外にも 興味を持つことは非常に大事

③デザイン以外の業務を理解・吸収する 開発チームでスクラムガイド*¹を読み合わせする読書会が ちょうどありそちらに参加 *¹ Ken Schwaber & Jeff Sutherland（ケン・シュウェイバー｜ジェフ・サザーランド）／Scrum Guide(2020 ver)

③デザイン以外の業務を理解・吸収する デザイナーもコードを見る、コードを書くのにトライしてみる Android開発に最適なAndroid Studio

③デザイン以外の業務を理解・吸収する QAのテスト業務もとりあえず理解する前に手を動かして体験してみる Excelでテスト項目を確認しながらテスト実施（一部内容を変更しています） ◯◯画面に遷移ができる 以下が表示されてい™ o 画面k o 画面Aの◯◯e o 画面Aの文t o 画面Aのリンi o 画面AからBへの繊‰ o ボタン

③デザイン以外の業務を理解・吸収する 異なる職種や仕事に興味を持ち共感する、主 体的に挑戦することは、相手に対する歩み寄 りの態度と深い理解を示すことにも繋がる。 信頼関係をより強化できる。

Action 1 デザインをチーム全体で考える状態にする Action 2 チームで話す時間をとにかく増やす Action 3 デザイン以外の業務を理解・吸収する

今回意識して取り組んだ3つすべてには 協力と共感が大きく関係していると思います。 この協力と共感が生み出すチームの力は、強力な武器になりますし とても素晴らしいプロダクトの創出にも繋がってくると信じています。

ご清聴ありがとうございました。