[参加レポ] DXEL.02 ~エンジニアとデザイナーが「いい関係」を築くために~

この記事をざっくり言うと…

  • デザイナーとエンジニアが気持ちよく働くにはお互いの信頼関係が大切!
  • ツールを使って最適化、効率化を徹底的にしてモヤモヤしにくい環境づくりをしよう
  • 相互の仕事の中身に興味を持っていくと思いやりが自然と生まれコミュニケーションコストが下がり、プロダクト精度が上がる

こんにちは!iOSエンジニアをしている@grnboy_twです。
今回DXELの第2回に参加しました。登壇者の課題に対するアプローチは参考になるものが多いし、皆さん実行力がすごいなぁと圧倒されました。
私も少しずつアプローチしていかないとなぁ🤔と感じさせられました。

今回ブログ枠での参加だったので、各登壇者の発表で出てきた共通の課題感ごとに、どのようにアプローチしているのかを纏めていこうと思います。

皆さんが抱えている課題感とマッチしたものについて、どうするのが自分の組織に合っているのか発想を広げる助けになれば幸いです。

コミュニケーションがスムーズじゃない問題

そもそもコミュニケーション量が少ないと課題の発見や共有ができずに改善のきっかけを作ることすら出来なくなるので課題の重要度は高いですよね。そもそもそんな環境に居たら精神的に辛そう🙄

キーワードとして多く出てきたのは”信頼関係”でした。登壇者の方々はどのようにアプローチしたのでしょうか。

@akatsuki174さんの場合

課題として上げていたのは、絵では伝えきれないインタラクションを的確に伝える点やデザイナー、エンジニア相互に生じるお互いへの疑問(仕様や背景、進捗など)を抱えている点。

  • Slackやメールなどでの文字越しのやりとりから、実際に顔を合わせての会話によるやりとりをする
  • 仕様書のGithub管理によって仕様の変更理由や経緯を見える化

大きく2つの軸でアプローチしているように感じました。文字でのやりとりで生じる認識の齟齬をコミュニケーションの質を上げることで解消していくものと、過剰なコミュニケーションを回避するための見える化。

直接の対話は伝えられる情報量が多いから伝わるけれど、それに頼ると過剰な会議体やいつも誰かの相談を受けてる人が出てきたりして新たな課題になってしまうので、ツールを用いてうまくその負荷を逃がそうとしていてバランス良いなぁと感じます。

@nikoko45さんの場合

デザイナーさん視点でのコミュニケーションで気をつけることとして以下の点をあげていました。

  • ゴールと背景を明文化する
  • 複数案作ってジャブを打つ
  • 点ではなく流れで語る

中でも特にいいなと思ったのは、動画やマンガで情報を伝えるというアプローチは仕様書を眺めるよりずっとシンプルに把握できそうなので思いやりのあるアクションだなぁと参考になりました。

基本的に相手に分かり易くかつ論点を絞ることでコミュニケーションの敷居も下がりそう☺️

@nanammeonさんの場合

Figmaを中心に全職種と円滑にコミュニケーションをするという切り口で発表されていました。Figmaのコミュニケーションに効きそうな要因として印象的だったものは以下の点です。

  • FigmaファイルのURLを共有すればその場で確認できる
  • Webベースなので専用のアプリなど不要でビジネスサイドもハードル低め
  • 制作物に直接コメントできるので直感的にフィードバックを行える

確かにアプリ不要というのは非エンジニアにとっては嬉しいですね。制作物についてみんなで考える環境を手軽に実現できるメリットは高そうです。

@m_orishiさんの場合

デザイナーとエンジニアなど職種が変わると相手の意図を汲み取るのが難しいので、ツールで補助できる部分は積極的に活用して、人同士のやりとりはリスペクトの心を持って行い信頼関係を築くべし。ということで、以下のアクションを実践していました。

  • 対話会の開催:
    会話の機会を設けて、プロダクトの改善に向けて一緒に議論することでお互いの価値観のギャップを埋める
  • 雑談する:
    日常的な会話を通して各々の個性を知ることで、信頼関係を築く
  • Zeplin:
    情報の共有には最適なツールを用いることで、理解や作業が容易になる
  • デザインガイドライン:
    エンジニア&デザイナーの共通認識を作ることで、UI/UX知識の底上げを測りプロダクトでの再利用性の高い要素を整理したり、プロダクト全体の統一感を上げる

エンジニアとデザイナーが良いデザイン について対話の機会を設けるのは大切だなと実感していて、結局何かを改善したり実行するには一セクションで出来ることは限られるので垣根を超えて連携しなくては完遂は難しいなと思っているので、この辺りの腹落ち感は相当でした。

ツールで最適化&効率化のアプローチとしてZeplinとガイドライン策定があがりましたね。ガイドラインはセクションを超えて共通認識を持つためにも不可欠ですね。ただ、その粒度や浸透を測る上での課題はあるような気もします。今後のDXELでその辺りに特化した発表など出てくるのでしょうか🙄

あとは、リスペクトめっちゃしていきたいですね!


  • ツールでのコミュニケーションの効率化
  • 対面コミュニケーションによる信頼関係の醸成

この2点にポイントは絞られてきていますね。今後はこれらとは違ったアプローチやそれぞれの深掘りがキーになりそうです。フローの中の接点だけだとどうしても他人行儀になりがちなので、日常に関することや個人にフォーカスを当てた、ソフトな接点をどれだけ用意できるのかが大切なポイントになりそうです。

プロダクトに”思い”が反映されない問題

なぜか伝わらないデザイナーの思い。なぜか汲み取ってもらえないエンジニアの苦悩。
デザイナー×エンジニアにおけるこんなモヤモヤは大小違いはあれどみなさん経験してきたのではないでしょうか。そんなモヤモヤを解消するためのナレッジについてそれぞれの登壇者のアクションをピックアップしていこうと思います。

@akatsuki174さんの場合

  • デザインレビューの期間を長めにとる
  • UIアセット管理のため資料化

デザイン レビューの期間を明確に取らずに、制作タスクの傍で”目を通す”だけになってしまっているようなケースも経験あるのでレビュー期間を明確にかつ長めに取るというのはとてもいいなと思いました。エンジニア視点での実装時の都合や、デザイナー視点でのレイアウトの意味のすり合わせの場があることで手戻りや認識違いが確実に減りそうですよね。

Atomic Designの文脈でもそうですが、デザイナー側の要素の分解とエンジニア側の要素の分解にもそれぞれの粒度や観点が違ったりするので、ここについても一緒に話し合っていけるとより理解が深まるなと思いました。

@nikoko45さんの場合

より良いサービスのために、という観点で以下のアクションが提示されていました。

  • 全体像を描く
    UIフロー/誰でもプロダクトの仕様が理解出来る状態を作る

ディレクター・デザイナー・エンジニアと、プロダクトに取り組む視点や範囲がバラツキやすいので、全体像をいつも俯瞰して見て共有できる”地図”的なものがあるのは話す時の道具として便利そうです。

画面単位で思考が凝り固まらないためにも全体像が見えやすくなっているのは重要ですね🧐

@fromkkさんの場合

具体的な業務上でのTipsが数多く出てきたのが印象的でした。同じような経験は皆さんありそうです。(うなずいている人多かった👀)

  • Sketchの粒度が適切じゃないとエンジニアが画像書き出しするの辛い
  • Sketchにはリサイジング機能があるので使ってほしい
  • Zeplinが万能というわけではなくSketchの方がサイズによる問題の解決がしやすい場合がある

デザイン サイドのデータ管理もプロダクトの要素に紐づいて分解して、同じ階層構造で管理するのが作業を進める上でより良いという趣旨だったかと思います。ツールの機能をしっかり理解して最適な確認方法をデザイナーとエンジニア双方で共有していくことも大事そうです。

@o_hanamizukiさんの場合

  • エンジニアの仕事を実体験して、デザインと実装のズレを解消

上記のエピソードはブログでもバズっていたのでご存知の方も多かったのではないでしょうか。まさか実際にお話聴けるとは思ってなかったのでとても刺激受けました!💪

  • Auto Layoutの特性を理解して各デバイスに最適な表示になるレイアウトを提示
  • 色のズレについて定義化して、それを使うようにすることでズレの解消

Auto Layoutと色の扱いについて、デザイナー視点でのモヤモヤをiOSアプリ開発を経験したことで自分発信で解消させたエピソードがカッコよすぎでした。

実装ズレの具体的なエピソードは、聞いてハッとした方も多かったはず。(それそれ。ってなりました)
お互いの事情を押し付けてしまうと気持ちよく働けないものですが、相手(別職種)に興味を持って知っていくことで理解を深めて、改善に繋げる姿勢は自分にも取り入れていきたいところです。


まとめ

今回も濃厚なデザイナー×エンジニアのエピソードが満載でとても参考になったし、この部分に課題を持っている参加者との会話の盛り上がりが心地よかったのが印象的でした。

主催していただいた方々、会場提供していただいたオイシックス・ラ・大地の方々、懇親会でお話させていただいた方々、本当にありがとうございます!最高に楽しかったです!

炊き込みご飯めっちゃ美味しかった。。🤤

次回のDXELも楽しみです😆

登壇者資料