Figmaを起点としたデザインコミュニケーション

Relic Tech Meetup Online #10
「エンジニア、ディレクターと共に仕事を進めるためのデザイナー的コミュニケーションハック」
https://relic-inc.connpass.com/event/276749/

Transcript

1. Figmaを起点とした デザインコミュニケーション Relic Tech Meetup Online #10
2. スタートアップテクノロジーについて
3. スタートアップテクノロジーの事業 プロダクト開発支援 Webエンジニア教育 Webやスマホのアプリを中心としたクライアントワーク プログラミングスクール「RUNTEQ（ランテック）」 プロダクト立ち上げ支援サービス
4. クライアントさんの属性 7 初期の立ち上げフェーズが中i 7 スタートアップ企( 7 代表やCTOの0 7 中小、大手企( 7 新規事業やプロダクトの責任者の0 7 業界はさまざC 7 毎回新しいお題を学びながら プロダクト開発支援
5. プロダクトづくりの流れ 小さくつくって試して改善するサイクルを回す プロダクト開発支援
6. デザイン組織とコミュニケーション さまざまなチームや職種のメンバーと共創する ディレクター プロダクト オーナー デザイン組織 ユーザー CS エンジニア マーケター 合計8人：クライアントワークチーム5人、RUNTEQチーム3人 プロダクト開発支援
7. コミュニケーションハック集
8. ①情報を表に出して可視化する ②情報の持ち手が多めに伝える ③デザインとの距離を縮める
9. ①情報を整理して可視化する
10. 集約してアクセスしやすく V プロダクトに関する情報、資料をほぼすべて Figmaに集約してい3 V サービス紹介資料、LPを集約するのもあR V スケジュールなどはスプシで管4 V Slackからもショートカット配置 Slack Figma スプシ ①情報を整理して可視化する V 覚えておくべきことはなるべく少な3 V 見る機会、触れる機会を増やす
11. 文字だけで終わらせず図におこす ①情報を整理して可視化する 利用フローやサービス概念図、登場人物、関係性などはビジュアルのほうが言葉よりも早い
12. プロダクトイメージを可視化する（配色設計） 配色イメージをプロダクトのモックにあてこんでコミュニケーションする ①情報を整理して可視化する ＋ 白黒のワイヤーで仕上がりイメージを想像するのは難しい ワイヤーとは別で序盤に制作し、デザインフェーズとの差分を埋めておく
13. 例）間取りだけで実物を想像するのは難しい https://www.homemate.co.jp/guide/navi/step/collection/004.html 参照：【ホームメイト】間取図の見方 | 賃貸物件情報を収集 ①情報を整理して可視化する - プロダクトイメージを可視化する（配色設計） 正直内見しないとわからない！ けど条件面はOK！ ワイヤーフレームの役割と同じ
14. 完全に理解しきれていなくてもメリットは大きい 言葉を整理整頓して目線合わせ x Wikiなどで用語集をつくT x 医療や不動産など、専門用語が多いプロダクトもあT x 言葉がわからないとスピードが落ちT x ユーザーとしてわかる言葉か？の視点も大7 x UIとしても呼称がゆれているものを統一していく ①情報を整理して可視化する 小テク：前提知識のインプッŽ x 新卒一年目だとして何を読んでもらう？などと聞くと便y x 書籍や業界の情報誌、記事、ニュースなど
15. 毎回やることはテンプレ化しておく 序盤はとにかく効率よく進めたいので、知見をためてまとめる活動もしておく ①情報を整理して可視化する
16. ②情報の持ち手が多めに伝える
17. デザインを見る人の負荷を下げる c 情報を多く持ってるのは見せるV c これから見る人、確認する人の負荷をさげる動b c チェック観点もあわせて伝えるとよR c チャットでデータを渡すとき、リンクに画像も添えC c デザイナー以外はFigmaひらくの大変という事実を 忘れなR c スキマ時間や出先でもサッと見れるように ②情報の持ち手が多めに伝える Slackでのコミュニケーション Figmaの仕様メモコンポーネント レスポンシブ対応 ブレイクポイントは767px レスポンシブ対応 ブレイクポイントは767px
18. ステータスをアイコンで可視化する 7 ページをわけて、冒頭にアイコンをつけてお5 7 開発手前で何がどうゆうステータスなのか、毎回聞かなくても大丈夫なように ②情報の持ち手が多めに伝える
19. ③デザインとの距離を縮める
20. デザインを一緒にさわる d 魔法の言葉「ちょっと見ながら話せませんか？w d mtgだと提案っぽくて距離が遠くなるので、可能なら共創に持っていm d 全部を説明せずに、さわってもらっているのを観察するのもあd d デザインだけで解決しようとしな‚ d エンジニアをつかまえて実現可能か、他にもやり方あるかな？などを聞m d 必要におうじて、その場で話しながらつく4 d 持ち帰って検討するのも大事だけど、その場で試せることは試す（時間があれ ば＆手がはやければY d ついでにFigmaの見方や使い方を覚えてもらえる効果もあ4 d 画面共有でもいいけど、Figmaひらいてアイコンクリックすると追従できます よ〜とかもできるとよい ③デザインとの距離を縮める Figmaは共同作業もラク！
21. 小さなことからはじめる エンジニアのスキルマップ作成 s 素材を使って並び替えるだけでOF s 一緒にさわってもらって、その場でカ ジュアルに疑問質問を解消していA s もともとはデザインチーム内のコミュ ニケーションで使っていたもY s 1on1などのコミュニケーションに取 り入れていく ③デザインとの距離を縮める
22. 遊ぶ I Figmaカタ‡ I カタンは陣取りボードゲーe I コミュニティで配布されていA I 部品がコンポーネント化されていてすぐ遊べA I 効& I デザインツール慣れしている人が使っているところ を見れA I 何でもすぐ聞けるので、デザインツールこわいわか らないという気持ちが解消できA I いつのまにかFigmaが使えるようになる…！ ③デザインとの距離を縮める
23. Figmaに慣れるならカタンしか勝たん件について note記事 → https://note.com/saitokensuke/n/n638c3ab9fae4 ③デザインとの距離を縮める - 遊ぶ
24. まとめ
25. コミュニケーションの壁は 専門性であることが多い
26. フェーズにあわせて、情報が偏らないように工夫する P 集約してアクセスしやすf P 文字だけで終わらせず図におこx P プロダクトイメージを可視化する（配色設計Y P 言葉を整理整頓して目線合わd P 毎回やることはテンプレ化しておく P デザインを見る人の負荷を下げg P ステータスをアイコンで可視化する P デザインを一緒にさわg P 小さなことからはじめg P 遊ぶ ①情報を整理して可視化する ②情報の持ち手が多めに伝える ③デザインとの距離を縮める 日々のコミュニケーション ＋ プロジェクト初期 デザイン＆開発フェーズ
27. エンジニア、ディレクターと共に仕事を進めるために デザイナーが積極的に コミュニケーションハックしていきましょう！
28. Twitterなどに生息しているので プロダクトづくり、デザイナー採用、組織づくりなどなど カジュアルなご相談からでも是非！ https://twitter.com/saitokensuke_
29. ご清聴ありがとうございました