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

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

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

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

saitokensuke

April 05, 2023
Tweet

Other Decks in Design

Transcript

  1. Figmaを起点とした

    デザインコミュニケーション
    Relic Tech Meetup Online #10

    View Slide

  2. スタートアップテクノロジーについて

    View Slide

  3. スタートアップテクノロジーの事業
    プロダクト開発支援 Webエンジニア教育
    Webやスマホのアプリを中心としたクライアントワーク プログラミングスクール「RUNTEQ(ランテック)」
    プロダクト立ち上げ支援サービス

    View Slide

  4. クライアントさんの属性
    7 初期の立ち上げフェーズが中i
    7 スタートアップ企(
    7 代表やCTOの0
    7 中小、大手企(
    7 新規事業やプロダクトの責任者の0
    7 業界はさまざC
    7 毎回新しいお題を学びながら
    プロダクト開発支援

    View Slide

  5. プロダクトづくりの流れ
    小さくつくって試して改善するサイクルを回す
    プロダクト開発支援

    View Slide

  6. デザイン組織とコミュニケーション
    さまざまなチームや職種のメンバーと共創する
    ディレクター
    プロダクト

    オーナー
    デザイン組織
    ユーザー
    CS
    エンジニア
    マーケター
    合計8人:クライアントワークチーム5人、RUNTEQチーム3人
    プロダクト開発支援

    View Slide

  7. コミュニケーションハック集

    View Slide

  8. ①情報を表に出して可視化する

    ②情報の持ち手が多めに伝える

    ③デザインとの距離を縮める

    View Slide

  9. ①情報を整理して可視化する

    View Slide

  10. 集約してアクセスしやすく
    V プロダクトに関する情報、資料をほぼすべて
    Figmaに集約してい3
    V サービス紹介資料、LPを集約するのもあR
    V スケジュールなどはスプシで管4
    V Slackからもショートカット配置
    Slack
    Figma スプシ
    ①情報を整理して可視化する
    V 覚えておくべきことはなるべく少な3
    V 見る機会、触れる機会を増やす

    View Slide

  11. 文字だけで終わらせず図におこす
    ①情報を整理して可視化する
    利用フローやサービス概念図、登場人物、関係性などはビジュアルのほうが言葉よりも早い

    View Slide

  12. プロダクトイメージを可視化する(配色設計)
    配色イメージをプロダクトのモックにあてこんでコミュニケーションする
    ①情報を整理して可視化する

    白黒のワイヤーで仕上がりイメージを想像するのは難しい
    ワイヤーとは別で序盤に制作し、デザインフェーズとの差分を埋めておく

    View Slide

  13. 例)間取りだけで実物を想像するのは難しい
    https://www.homemate.co.jp/guide/navi/step/collection/004.html
    参照:【ホームメイト】間取図の見方 | 賃貸物件情報を収集
    ①情報を整理して可視化する - プロダクトイメージを可視化する(配色設計)
    正直内見しないとわからない!
    けど条件面はOK!
    ワイヤーフレームの役割と同じ

    View Slide

  14. 完全に理解しきれていなくてもメリットは大きい
    言葉を整理整頓して目線合わせ
    x Wikiなどで用語集をつくT
    x 医療や不動産など、専門用語が多いプロダクトもあT
    x 言葉がわからないとスピードが落ちT
    x ユーザーとしてわかる言葉か?の視点も大7
    x UIとしても呼称がゆれているものを統一していく
    ①情報を整理して可視化する
    小テク:前提知識のインプッŽ
    x 新卒一年目だとして何を読んでもらう?などと聞くと便y
    x 書籍や業界の情報誌、記事、ニュースなど

    View Slide

  15. 毎回やることはテンプレ化しておく
    序盤はとにかく効率よく進めたいので、知見をためてまとめる活動もしておく
    ①情報を整理して可視化する

    View Slide

  16. ②情報の持ち手が多めに伝える

    View Slide

  17. デザインを見る人の負荷を下げる
    c 情報を多く持ってるのは見せるV
    c これから見る人、確認する人の負荷をさげる動b
    c チェック観点もあわせて伝えるとよR
    c チャットでデータを渡すとき、リンクに画像も添えC
    c デザイナー以外はFigmaひらくの大変という事実を
    忘れなR
    c スキマ時間や出先でもサッと見れるように
    ②情報の持ち手が多めに伝える
    Slackでのコミュニケーション
    Figmaの仕様メモコンポーネント
    レスポンシブ対応
    ブレイクポイントは767px
    レスポンシブ対応
    ブレイクポイントは767px

    View Slide

  18. ステータスをアイコンで可視化する
    7 ページをわけて、冒頭にアイコンをつけてお5
    7 開発手前で何がどうゆうステータスなのか、毎回聞かなくても大丈夫なように
    ②情報の持ち手が多めに伝える

    View Slide

  19. ③デザインとの距離を縮める

    View Slide

  20. デザインを一緒にさわる
    d 魔法の言葉「ちょっと見ながら話せませんか?w
    d mtgだと提案っぽくて距離が遠くなるので、可能なら共創に持っていm
    d 全部を説明せずに、さわってもらっているのを観察するのもあd
    d デザインだけで解決しようとしな‚
    d エンジニアをつかまえて実現可能か、他にもやり方あるかな?などを聞m
    d 必要におうじて、その場で話しながらつく4
    d 持ち帰って検討するのも大事だけど、その場で試せることは試す(時間があれ
    ば&手がはやければY
    d ついでにFigmaの見方や使い方を覚えてもらえる効果もあ4
    d 画面共有でもいいけど、Figmaひらいてアイコンクリックすると追従できます
    よ〜とかもできるとよい
    ③デザインとの距離を縮める
    Figmaは共同作業もラク!

    View Slide

  21. 小さなことからはじめる
    エンジニアのスキルマップ作成
    s 素材を使って並び替えるだけでOF
    s 一緒にさわってもらって、その場でカ
    ジュアルに疑問質問を解消していA
    s もともとはデザインチーム内のコミュ
    ニケーションで使っていたもY
    s 1on1などのコミュニケーションに取
    り入れていく
    ③デザインとの距離を縮める

    View Slide

  22. 遊ぶ
    I Figmaカタ‡
    I カタンは陣取りボードゲーe
    I コミュニティで配布されていA
    I 部品がコンポーネント化されていてすぐ遊べA
    I 効&
    I デザインツール慣れしている人が使っているところ
    を見れA
    I 何でもすぐ聞けるので、デザインツールこわいわか
    らないという気持ちが解消できA
    I いつのまにかFigmaが使えるようになる…!
    ③デザインとの距離を縮める

    View Slide

  23. Figmaに慣れるならカタンしか勝たん件について
    note記事 → https://note.com/saitokensuke/n/n638c3ab9fae4
    ③デザインとの距離を縮める - 遊ぶ

    View Slide

  24. まとめ

    View Slide

  25. コミュニケーションの壁は

    専門性であることが多い

    View Slide

  26. フェーズにあわせて、情報が偏らないように工夫する
    P 集約してアクセスしやすf
    P 文字だけで終わらせず図におこx
    P プロダクトイメージを可視化する(配色設計Y
    P 言葉を整理整頓して目線合わd
    P 毎回やることはテンプレ化しておく
    P デザインを見る人の負荷を下げg
    P ステータスをアイコンで可視化する
    P デザインを一緒にさわg
    P 小さなことからはじめg
    P 遊ぶ
    ①情報を整理して可視化する ②情報の持ち手が多めに伝える ③デザインとの距離を縮める
    日々のコミュニケーション

    プロジェクト初期 デザイン&開発フェーズ

    View Slide

  27. エンジニア、ディレクターと共に仕事を進めるために

    デザイナーが積極的に

    コミュニケーションハックしていきましょう!

    View Slide

  28. Twitterなどに生息しているので

    プロダクトづくり、デザイナー採用、組織づくりなどなど

    カジュアルなご相談からでも是非!
    https://twitter.com/saitokensuke_

    View Slide

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

    View Slide