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

Slide 1

Slide 1 text

デザインと、マーケティングと、デザインツールについて “ ” 会場としての In the file: SmartHRに学ぶ、組織の壁を超えるヒント 2024.10.15　In the file: SmartHRに学ぶ、組織の壁を超えるヒント@Figmaウェビナー SmartHR ブランディング統括本部ブランドデベロップメント本部コミュニケーションOpsユニット関口裕 @sekig

Slide 2

Slide 2 text

もくじ自己紹介 1. SmartHRでの実践例 2. 実践例からわかること大事なことは？

Slide 3

Slide 3 text

コミュニケーションデザイン？

Slide 4

Slide 4 text

自己紹介

Slide 5

Slide 5 text

関口裕 (sekig) 株式会社SmartHR ブランディング統括本部ブランドデベロップメント本部コミュニケーションOps 株式会社コンセント → 株式会社日本デザインセンター → 現職タイポグラフィ／パブリッシング／情報設計／半公共 x インダストリアルデザイs x エディトリアルデザイン／グラフィックデザイs x ウェブデザイs x アートディレクション／クリエイティブディレクション

Slide 6

Slide 6 text

ブランディング統括本部内で最適化プロダクトデザイン統括本部コミュニケーションデザイン領域プロダクトデザイン本部アクセシビリティ本部 SmartHR デザイン組織の概念図

Slide 7

Slide 7 text

コムデ領域サポートプロダクト総務経理採用・人事カスタマーサクセスマーケティングセールス広報・PR etc.

Slide 8

Slide 8 text

本日お持ち帰りの内容

Slide 9

Slide 9 text

本日お持ち帰りの内容デザインツールを場として捉える（より有機的な働き方を検討できるようになる）

Slide 10

Slide 10 text

1. SmartHRでの実践例 SmartHR ブランディング統括本部（デザイン領域）での実例

Slide 11

Slide 11 text

https://smarthr.design

Slide 12

Slide 12 text

SmartHR Design System https://bnn.co.jp/products/9784802512480

Slide 13

Slide 13 text

デザインリソースの構造化と展開ふわっとはじめる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

Slide 14

Slide 14 text

ふわっとふわっと

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

sekig sekig is typing...

Slide 17

Slide 17 text

sekig いいかんじのFigma事例くれ〜

Slide 18

Slide 18 text

sekig いいかんじのFigma事例くれ〜 hoge これ

Slide 19

Slide 19 text

sekig いいかんじのFigma事例くれ〜 hoge これ mogu これ

Slide 20

Slide 20 text

sekig いいかんじのFigma事例くれ〜 hoge これ mogu これ fuga ふつうのデザインデータじゃないものが集結している………。

Slide 21

Slide 21 text

とあるメンバーの言葉

Slide 22

Slide 22 text

とりあえず “会場” つくっときました！とあるメンバーの言葉

Slide 23

Slide 23 text

とりあえずつくっときました！ “会場” 捉え方が直感的。自分たちにメリットがあることを前提にした、身体性のある語彙

Slide 24

Slide 24 text

“会場” としてのFigma

Slide 25

Slide 25 text

（非同期で同期的なコミュニケーション）

Slide 26

Slide 26 text

1. SmartHRでの実践例 SmartHR ブランディング統括本部（デザイン領域）での実例改めて

Slide 27

Slide 27 text

ポップアップ広告を担当者がプレビューできる仕組み @solty ※最新の製品画面とは異なります

Slide 28

Slide 28 text

メルマガ施策の検証を多職種チームでサクッと実施 @solty

Slide 29

Slide 29 text

1on1をスライダー・ふせん形式でフィジカルに @tajimaru

Slide 30

Slide 30 text

月次の振り返りは掛け合いを重視してカジュアルに @bebe

Slide 31

Slide 31 text

ブランディングの練り込みを横断的・巻き込み型で推進 @nawaaan

Slide 32

Slide 32 text

ブランディングの練り込みを横断的・巻き込み型で推進 @nawaaan 発散発散収束収束スナップショット（定着）

Slide 33

Slide 33 text

プロダクト内で利用する機能アイコンを並行制作するディレクション @sayuriko

Slide 34

Slide 34 text

プロダクト内で利用する機能アイコンを並行制作するディレクション @sayuriko プラグインのチェックボックス等を利用検討制作サイドの管理情報初稿その後の検討 etc. 機能Ａ機能Ｂ機能Ｃ機能Ｄ個々の検討は発散しないが、全社横断した俯瞰も同時に担保している

Slide 35

Slide 35 text

抽象的な課題を扱うプロジェクトの要件定義と推進 @sayuriko

Slide 36

Slide 36 text

抽象的な課題を扱うプロジェクトの要件定義と推進 @sayuriko 担当者の事前検討セクションの背景色があるだけでメンバーにとって内容と構造がつかみやすいドキュメントではなくワークシートとしてひらくことで参加しやすい状況にたたき台（提案）コンテキストの補足、エビデンスなど

Slide 37

Slide 37 text

レクリエーションとしてのLT @sekig

Slide 38

Slide 38 text

ペーストボード。作業台・雑紙としてひとつのファイルを常に開いている @sekig

Slide 39

Slide 39 text

2. 実践例からわかること実例から見えないこと

Slide 40

Slide 40 text

SmartHR ブランディング統括本部のデザイナーがやっていること： Y フレームワークを、案件ごとに都度工夫して作るような動き方 Y そこにステークホルダーをあつめて、プロジェクトを推進 Y プロジェクト単位のなめらかさそれをひたすら愚直にやるのが、マーケティングサイドのデザインワークで大事なことのひとつ

Slide 41

Slide 41 text

具体的に活用しているポイント： $ 作業がシームレスに実施できる R Figma Design/Dev/Jam/Slide間のシームレスな繋ぎ込み。作業が途切れない。 $ 周囲の巻き込みやすさ R セクションやページ機能、コメント機能、デザイン言語の抽象化（styles/components/variants/library）や、使い分け可能なモード（Design/Dev/Jam）など。関わり方＝使う言葉にグラデーションが作れる。 $ 詳細に設計して作り込むこともできるし、  ただのホワイトボードやキャンバスとしても使える自由度。

Slide 42

Slide 42 text

つまり： 3 場の使われ方を「先に決めなくてよい」拡張性がポイントなのでは。 3 道具の使い方を、決めない・とらわれないことも重要かもしれない。 3 ただ置くだけ／場を設置するだけで機能することもあるし、精緻に作って管理することに意味がある場合も。ふわっとカッチリ

Slide 43

Slide 43 text

これを

Slide 44

Slide 44 text

こう

Slide 45

Slide 45 text

プロジェクトルーム War Room（作戦室）大部屋

Slide 46

Slide 46 text

https://doomsdaymachines.net/p/dr-strangeloves-war-room

Slide 47

Slide 47 text

https://doomsdaymachines.net/p/dr-strangeloves-war-room

Slide 48

Slide 48 text

https://www.officelovin.com/2014/07/ubers-san-francisco-headquarters-studio-oa-mashstudios/

Slide 49

Slide 49 text

https://www.aqworks.com/ja-blog/physical-space-ideas-ja

Slide 50

Slide 50 text

https://www.894651.com/column/toyota-seisan-035/

Slide 51

Slide 51 text

https://www.axismag.jp/posts/2014/03/44666.html

Slide 52

Slide 52 text

デザインツールを、会場＝プロジェクトルームとして捉える動き方。ソフトに、柔軟に使う。場としてツールを使う身軽さ SmartHR ブランディング統括本部（コミュニケーションデザイン領域）ではそういった実践がされている

Slide 53

Slide 53 text

まとめ大事なことは？

Slide 54

Slide 54 text

“デザインツール”は何を生むか？

Slide 55

Slide 55 text

デザインは仮説しかアウトプットしないデザインは、アウトカムのためのアウトプット（問い≒仮説≒プロトタイプ）をつくる行為