Config2024Recap_デザイナーとエンジニアの垣根がより低く

デザイナーと エンジニアの 垣根がより低く シンプレクス株式会社 / UIUX Design Office Alceo 中野 純也 Config 2024はどうだった？KDDIとサイボウズによる 現地参加者を招いたRecapイベント 2 0 24 / 07 / 1 2

01 自己紹介 02 垣根 AGENDA 03 垣根がどう低くなりそうか？ 04 変わるとどんな変化が起きそうか？ 1

01 自己紹介 02 垣根 AGENDA 03 垣根がどう低くなりそうか？ 04 変わるとどんな変化が起きそうか？ 1

01 自己紹介 中野 純也 UIUX Design Studio Alceo 2018年 シンプレクス入 金融系システムのエンジニアからデザイナー デザイン組織（Alceo）の初期メンバ 今の興味はデザイナーとエンジニアどういいチームになるか UIもやります。 主なプロジェク 野村證券株式会社 『NOMURA』アプ デジタル庁 マイナポータル新フロント（Webアプリ） 2

01 自己紹介 Simplex ? Alceo? シンプレクスは1997年の創業以来、メガバ ンクや大手 総合証券を筆頭に、日本を代表する金融機関のテクノロ ジーパートナーとしてビジネスを展開してきました。 現在では、金融領域で培った豊富なノウハウを活用 し、金融以外の領域でもソリューションを展開してい ます。 2019年3月には「AI企業のDeep Percept株式会社」、 2021年4月には「総合コンサルティングファームの Xspear Consulting株式会社」がグループに加わり、ま た「CX/UX/UIデザインを提供するAlceo」が生まれ、 創業時より付加価値の創造に取り組んできたシンプレク スとワンチームとなって、公的機関や金融機関、各業界 をリードする企業のDXの推進を支援しています。 3

01 自己紹介 02 垣根 AGENDA 03 垣根がどう低くなりそうか？ 04 どんな変化が起きそうか？ デザイナーとエンジニアの垣根がより低く 4

垣根？ 03 垣根 なんかしてそう 見えづらい... 5

見えづらいこと 03 垣根 デザイナー コストかけずに開発したいところだけど余分にかかってないかな.. コードってどのように書かれてるんだろう ちょっと修正したいけど開発中かな.. これってもう開発されているコンポーネント？ エンジニア アウトプットしか見えないな。コーディング意識してる... どう考えてUIデザインしてるんだろ 気づいたら少し変わってそう.. コンポーネントを開発したはいいけどFigmaと表現合ってる？ 6

Figmaを通じて垣根が低く 03 垣根 7

Figmaを通じて垣根が低く. 03 垣根 7

Figmaを通じて垣根が低く.. 03 垣根 7

Figmaを通じて垣根が低く.. 03 垣根 7

Figmaを通じて垣根が低くなってきた 03 垣根 7

03 垣根 垣 ⁩⁨ 根が低くなりそうなアップデート 1. 2. 3. UI Update Code Dev Mode (UI3) Connect New View 機能が拡張され続ける中で コンポーネントの Dev Mode Viewが提供され レイアウトパネルの情報構造が プロダクションコードが Ready For Dev になってからの 見直され新しいUIに刷新。 Gitを経由することで 変更履歴が追いやすく。 これまで使っていた人も Figma上で見えるように。 更新があったこと、 これから使う人も使いやすく。 開発が終わったことが 追いやすくなりました。 8

01 自己紹介 02 垣根 AGENDA 03 垣根がどう低くなりそうか？ 04 どんな変化が起きそうか？ デザイナーとエンジニアの垣根がより低く 9

03 垣根がどう低くなりそうか？ Design as therapy 10

03 垣根がどう低くなりそうか？ コミュニケーションを 取り合うことは前提として デザイナーからも エンジニアからも 垣根をより低くしていきたい 11

デザイナーが低くする 03 垣根がどう低くなりそうか？ コーディングに近いUIデザイン UI3でインスタンスのプロパティがより編集しやすい ようになることで、よりコンポーネントベースのUI デザインを意識しやすくなる コードのイメージアップ Code Connectでコードに触れる機会が増えることで コードになった時のイメージが湧くようになり、コ ンポーネントの連携がしやすくなる 12

デザイナーが低くする 03 垣根がどう低くなりそうか？ 修正した履歴を残す 変更した履歴を残して実装漏れが減る。 また、Ready For Dev のステータスが増え、開発が完 了していることも見えるようになる。 簡単にAuto Layout Suggest auto layout 機能を使うことで コーディングを考慮した、レスポンシブルなUIデザ インにしやすくなる。 13

エンジニアが低くする 03 垣根がどう低くなりそうか？ コーディングに近いUIデザイン UI3でコンポーネントの操作がしやすくなり、デザイ ンツールを利用するときのハードルが下がり UIデザインにとりかかりやすくなる 履歴が追いやすく Dev Mode Viewで変更の履歴が追いやすくなり、背 景が追いやすくなる 14

01 自己紹介 02 関連アップデート内容の紹介 AGENDA 03 垣根がどう低くなったか？ 04 どんな変化が起きそうか？ デザイナーとエンジニアの垣根がより低く 15

チームがもっと強くなる 04 どんな変化が起きそうか？ 共通言語、共通認識が増える コードやデザインの背景が見えることで
 お互い何をやっているか触れる機会が増え コミュニケーションがとりやすくなる 心理的安全性が向上 お互いの成果物を見ることが増え デザイナーエンジニアが持ちつ持たれつの関係になる 16

04 どんな変化が起きそうか？ Figma が 垣根を下げるきっかけになり デザイナーとエンジニアの やりとりが活発になることで より良いチームに。 17

ありがとう ございました。 デザイナーとエンジニアの垣根がより低く ©2024 Simplex Inc. Config の振り返りを note に書きました ↓ 18