【イベントレポート】「参加しなきゃ悪戯するぞ！？」デザイナーとエンジニアのハロウィントークNight！

-いつも記事を読んでいただきありがとうございます！
エンジニアのMasaki(@MASAKIOKUDA-eng)です👍

今回は、10/30（水）に参加したイベント**「参加しなきゃ悪戯するぞ！？」デザイナーとエンジニアのハロウィントークNight！**の参加レポートとなります！

今回の記事はゆめみ主催のUI/UXデザイナー向けエンジニアイベントの紹介記事となります。非デザイナー視点でイベントレポートを書いていきますので、お気軽に読んでいただければ幸いです。
Connpass紹介ページ：https://yumemi.connpass.com/event/330855/

お品書き（目次）

1. 参加したきっかけ
2. イベント概要
3. LTでの発表
   1. （チョリさん）会話しないとUIがパンプキンパニックになるぞ
   2. （おさむさん）デザイナーだからってコード読めないとか言ってると何者にもなれなくなるぞ
   3. （ちょめさん）再利用しなきゃ工数爆発するぞ
   4. （橋本さん）越境してくれなきゃ泣いちまうぞ
   5. （みかいさん）デザインに関するLT　※タイトルかけずすみません
4. まとめ

参加したきっかけ

イベントに参加したきっかけとして、次の3点があります。

• UI/UXに関して興味関心を持っていた（いいデザインに関するナレッジ収集）
• 今まで触れ合ってこなかった方々との新たな交流が出来ると思った
• ハロウィンイベントなので、楽しそうだと思ったから

※イベント形式がワールドカフェだったので、より多くのコミュニケーションが出来るかなぁと思っています！

イベント概要（Connpass紹介ページより）

株式会社Sun AsteriskとYUMEMI.growによる合同イベント！
題して、、
大好評 Sun* x YUMEMI.grow エンジニアとデザイナーのオフ会
…そのまんまのタイトルですが、文字通りいろいろなものを「オフ」にした「会」を開催しています！
前回のvol.3では、「デザイナーとエンジニアの協業」に関するLTを聞いて、気になったLTを選んで深ぼりトーク（ワールドカフェ形式）をしていきました！参加者の皆さんからも「時間が足りない！」と大好評！
今回も好評につき深堀トーク中心のLT会を開催します！
vol.4のテーマは、『デザイナーとエンジニアの〇〇しなきゃ××するぞ！』です！
今回も対面（Sun* オフィス）での開催！ いつも感じているエンジニア・デザイナーに対するあなたの気持ちをぶつけてみませんか？ ドキドキ・ワクワクのハロウィンナイト！参加しなきゃ悪戯するぞ！？

LTでの発表

（チョリさん）会話しないとUIがパンプキンパニックになるぞ

• 自己紹介
  • Webデザイナー
  • 状態の可視化、シンプルさ、パターン化に興味関心がある
  • Webデザインに関する要件定義を担当されている
• ズレによる影響は
  • ずれが生じることで「デザイナー」「エンジニア」に影響が出てしまう
    • 不要チケット増加、手戻り開発など
  • 一ズレによって一番被害を受ける人はエンドユーザ
    • 利用者体験が損なわれてしまう
• 実際に起きたズレ
  • 担当プロダクトにてマージン・コンポーネントのズレが生じてしまった
    - 見ずらいデザインになってしまい、利用者の低下、余計な開発工数やクライアントからの信頼低下が発生してしまう
• デザイナーの流れ
  • デザインカップ・コンポーネント作成
    • 作って壊しを繰り返すので、ふわふわな状態
  • 画面ビジュアル・ガイドライン
    • ドキュメント化していくのである程度固めていく
• より良い開発を行うには
  • Figma開発モードを利用してみる（エンジニア向け）
  • ドキュメントとして残してみる（デザイナー向け）
  • エンジニア・デザイナー双方が出来ることはデザイン意図の伝達があると考えている
    • デザインの言語化をチームメンバーへも伝えていく（超重要）
• 参加者への質問
  • ドキュメントをどのくらい残せているか？
  • どのくらいツールを活用しているか？

お話を聞いていくなかで、双方でのコミュニケーションを行っていくことが重要なのかなぁと思いました。そのうえで、デザイン意図の伝達については、開発に携わっている身としては分かりみが深すぎる内容だと感じたので、行っていきたいなぁと思いました！

（おさむさん）デザイナーだからってコード読めないとか言ってると何者にもなれなくなるぞ

• 自己紹介
  • デザイナーとしてプロダクトを担当するかたわら、事業開発も担当している
• デザイナーとの悩み
  • デザインデータ引継ぎ後のやり取りなど
  • おさむさん自身もデザインと開発の連携で失敗した経験がある
    • 失敗から社内でOOUI勉強会を行ってみた（プロダクト開発を通じた実践的な勉強会）
      • デザインがどのようにオブジェクトとして表現されるかを知ることができた
• 本題
  • v0を触ってみて、誰もがデザインできるようになるといった不安感を感じた
    • AIの登場でデザインプロセスが変わってしまう可能性を感じた
  • Hot Potate Process
    • 要件定義の段階からエンジニア・デザイナー分けずに参画していく考え
      • おさむさん曰く、Mash Potate Process（分け隔てない付き合い方）になっていく
• 今後のあるべき姿
  • 一つの役割（エンジニア、デザイナーなど）にこだわる働き方は失われていく
  • 価値は何かを考えていくことがポイント

お話を聞きながら、役割にこだわらずなんでも行っていくといったポイントは重要だと感じていたので、すごく分かり身が深いと思いました。そのうえで、今後のエンジニアとしての働き方も考えないといけないなぁと思いました。

（ちょめさん）再利用しなきゃ工数爆発するぞ

• 自己紹介
  • フロントエンドエンジニアだが趣味でデザインも触っている方
• 前職での経験
  • デザインデータを開発に落とし込んでいくと意外と数字が利用されている
    • クライアント側のちょっとした要望でも、開発にとっては大きな工数となってしまう（修正箇所の調査、リファクタリングなど）
    • 数字となっている箇所は変数として取り扱っておけば安心
  • 同じようなボタンでもバリエーション、機能が違っている
    • 再利用可能なコンポーネントを作成しておけば双方のコミュニケーションが行いやすくなる
• 怠けるために再利用性を活用する

お話を聞いていながら、いかに再利用性を持たせた開発を進めていくかを考えていたのでヒントになるポイントがあるなぁと思いました。

（橋本さん）越境してくれなきゃ泣いちまうぞ

• 自己紹介
  • もともとバックエンド開発をされていた方
• ポイント：もっと越境していきましょう
  • 越境⇒それぞれの役割の境界をふわふわさせていくこと
    • 役割が分かれていると、業務ドメインによる心理的安全性が損なわれてしまう（UI,クエリ問題）
    • 技術の問題がいつの間にか人間関係の問題となってしまう
    • 業務ドメインの越境：役割を徐々に重複させていく
  • 越境させていけばいくほど、業務ドメインへの意見に-つながっていく
• まとめ：能動的に越境していくことでより良いコミュニケーションが出来る

お話を聞きながら、越境していくことの重要性とおいしさを改めて再認識することが出来ました。そのうえで、役割を重ねていくことの重要なのか理解しました。

（みかいさん）デザインに関するLT　※タイトルかけずすみません

• 自己紹介
  • フリーランスのWebデザイナー
• タスク管理ツールの例
  • 一目見ただけで何が出来るかをイメージすることでよいUIになっていく
    • アイコンによるアクション理解（ゴミ箱アイコンなど）
    • タスク追加は＋ボタンなど
  • 一番はUIのベストプラクティスを学ぶこと
    • みかいさんの意見として、ユーザがググらずに使えることがポイント
      • 簡単なものは説明いらずで使えるようにする
  • おススメはソシャゲチュートリアルが良い
    • プロダクトの世界観をすぐに理解できる
• UIの感想を共有することでよいUIになっていく

お話を聞きながら、誰もが分かりやすいUIを作っていくには誰もが理解できることがポイントだと理解しました。そのうえで、デザインだけでなく**他業務（コーディング、設計など）**でも利用できる考えだと思いました。

まとめ

Webデザイン、デザイナーとして求められるアウトプットなどについて解像度を上げることが出来たかなぁと思っています。将来、エンジニアとして働いていく中で、Webデザインの考え方や仕事の進め方に関して見習うべきポイントが多くあると気づくことが出来ました。

別件対応があり、懇親会は中抜けとなりましたが、Webデザインに携わっている方と少しだけコミュニケーションできたので、実りある交流になったかなぁと思いました。

最後まで記事を読んでいただきありがとうございます。
読んでみて、新しい発見がありましたら「いいね」、「ストック」いただけますと幸いです！
あわせて、本イベントを企画してくださったゆめみさん、本当にありがとうございました