デザインと、マーケティングと、“会場”としてのデザインツールについて

2024年10月15日に開催した、FigmaJapan主催の「In the file: SmartHRに学ぶ、組織の壁を超えるヒント」で発表したスライドです。
https://x.com/FigmaJapan/status/1840712466499829970

Transcript

1. デザインと、 マーケティングと、 デザインツールについて “ ” 会場 としての In the file: SmartHRに学ぶ、 組織の壁を超えるヒント 2024.10.15　In the file: SmartHRに学ぶ、組織の壁を超えるヒント@Figmaウェビナー SmartHR ブランディング統括本部 ブランドデベロップメント本部 コミュニケーションOpsユニット 関口 裕 @sekig
2. もくじ 自己紹介 1. SmartHRでの実践例 2. 実践例からわかること 大事なことは？
3. コミュニケーションデザイン？
4. 自己紹介
5. 関口 裕 (sekig) 株式会社SmartHR ブランデ ィ ング統括本部 ブラン ドデベロップメン ト本部 コ ミ ュニケーシ ョ ンOps 株式会社コンセント → 株式会社日本デザインセンター → 現職 タイポグラフ ィ／ パブリ ッシング ／情報設計／半公共 x インダスト リアルデザイs x エディ ト リアルデザイン／グラフ ィ ックデザイs x ウェブデザイs x アートディ レクション／クリエイティ ブディ レクション
6. ブランディング統括本部 内で最適化 プロダクトデザイン統括本部 コミュニケーション デザイン領域 プロダクトデザイン本部 アクセシビリティ本部 SmartHR デザイン組織の概念図
7. コムデ領域 サポート プロダクト 総務 経理 採用・人事 カスタマー サクセス マーケ ティング セールス 広報・PR etc.
8. 本日お持ち帰りの内容
9. 本日お持ち帰りの内容 デザインツールを場として捉える （より有機的な働き方を検討できるようになる）
10. 1. SmartHRでの実践例 SmartHR ブランディング統括本部（デザイン領域）での実例
11. https://smarthr.design
12. SmartHR Design System https://bnn.co.jp/products/9784802512480
13. デザインリソースの構造化と展開 ふわっとはじめるSSOT SSOT for Communication Design Single source of truth TOKYO 2024.8.28 SmartHR コミュニケーションOps @sekig ふわっとはじめるSSOT SSOT for Communication Design Single source of truth TOKYO 2024.8.28 SmartHR コミュニケーションOps @sekig
14. ふわっと ふわっと
16. sekig sekig is typing...
17. sekig いいかんじのFigma事例くれ〜
18. sekig いいかんじのFigma事例くれ〜 hoge これ
19. sekig いいかんじのFigma事例くれ〜 hoge これ mogu これ
20. sekig いいかんじのFigma事例くれ〜 hoge これ mogu これ fuga ふつうのデザインデータじゃないものが集結している………。
21. とあるメンバーの言葉
22. とりあえず “会場” つくっときました！ とあるメンバーの言葉
23. とりあえず つくっときました！ “会場” 捉え方が直感的。自分たちにメリットがあることを前提にした、身体性のある語彙
24. “会場” としてのFigma
25. （非同期で同期的なコミュニケーション）
26. 1. SmartHRでの実践例 SmartHR ブランディング統括本部（デザイン領域）での実例 改めて
27. ポップアップ広告を担当者がプレビューできる仕組み @solty ※最新の製品画面とは異なります
28. メルマガ施策の検証を多職種チームでサクッと実施 @solty
29. 1on1をスライダー・ふせん形式でフィジカルに @tajimaru
30. 月次の振り返りは掛け合いを重視してカジュアルに @bebe
31. ブランディングの練り込みを横断的・巻き込み型で推進 @nawaaan
32. ブランディングの練り込みを横断的・巻き込み型で推進 @nawaaan 発散 発散 収束 収束 スナップショット（定着）
33. プロダクト内で利用する機能アイコンを並行制作するディレクション @sayuriko
34. プロダクト内で利用する機能アイコンを並行制作するディレクション @sayuriko プラグインの チェック ボックス等を 利用 検討 制作サイドの 管理情報 初稿 その後の検討 etc. 機 能 Ａ 機 能 Ｂ 機 能 Ｃ 機 能 Ｄ 個々の検討は発散しないが、 全社横断した俯瞰も 同時に担保している
35. 抽象的な課題を扱うプロジェクトの要件定義と推進 @sayuriko
36. 抽象的な課題を扱うプロジェクトの要件定義と推進 @sayuriko 担当者の事前検討 セクションの 背景色があるだけで メンバーにとって 内容と構造が つかみやすい ドキュメントではなく ワークシートとしてひらくことで 参加しやすい状況に た た き 台 （ 提 案 ） コ ン テ キ ス ト の 補 足 、 エ ビ デ ン ス な ど
37. レクリエーションとしてのLT @sekig
38. ペーストボード。作業台・雑紙としてひとつのファイルを常に開いている @sekig
39. 2. 実践例からわかること 実例から見えないこと
40. SmartHR ブランディング統括本部のデザイナーがやっていること： Y フレームワークを、案件ごとに都度工夫して作るような動き方 Y そこにステークホルダーをあつめて、プロジェクトを推進 Y プロジェクト単位のなめらかさ それをひたすら愚直にやるのが、 マーケティングサイドのデザインワークで 大事なことのひとつ
41. 具体的に活用しているポイント： $ 作業がシームレスに実施できる R Figma Design/Dev/Jam/Slide間のシームレスな繋ぎ込み。作業が途切れない。 $ 周囲の巻き込みやすさ R セクションやページ機能、コメント機能、デザイン言語の抽象化（styles/components/variants/library） や、使い分け可能なモード（Design/Dev/Jam）など。関わり方＝使う言葉にグラデーションが作れる。 $ 詳細に設計して作り込むこともできるし、
 ただのホワイトボードやキャンバスとしても使える自由度。
42. つまり： 3 場の使われ方を「先に決めなくてよい」拡張性がポイントなのでは。 3 道具の使い方を、決めない・とらわれないことも重要かもしれない。 3 ただ置くだけ／場を設置するだけで機能することもあるし、精緻に作って管理する ことに意味がある場合も。 ふわっと カッチリ
43. これを
44. こう
45. プロジェクトルーム War Room（作戦室） 大部屋
46. https://doomsdaymachines.net/p/dr-strangeloves-war-room
47. https://doomsdaymachines.net/p/dr-strangeloves-war-room
48. https://www.officelovin.com/2014/07/ubers-san-francisco-headquarters-studio-oa-mashstudios/
49. https://www.aqworks.com/ja-blog/physical-space-ideas-ja
50. https://www.894651.com/column/toyota-seisan-035/
51. https://www.axismag.jp/posts/2014/03/44666.html
52. デザインツールを、 会場＝プロジェクトルームとして捉える動き方。 ソフトに、柔軟に使う。場としてツールを使う身軽さ SmartHR ブランディング統括本部（コミュニケーションデザイン領域）ではそういった実践がされている
53. まとめ 大事なことは？
54. “デザインツール”は 何を生むか？
55. デザインは仮説しか アウトプットしない デザインは、アウトカムのためのアウトプット（問い≒仮説≒プロトタイプ）をつくる行為
56. “デザインツール”は 設計図をつくるもの
57. “デザインツール”は 設計室
58. “デザインツール”は 現代のプロジェクトルーム
59. プロジェクトルームの ドアを開けよう
60. まず、いますぐに、 “会場”をつくろう
61. ありがとうございました。