みんなのちりつも課題を解決する Dev Mode / デザイナーとエンジニアのためのFigma活用セミナー

みんなの ちりつも課題を解決する Dev Mode シンプレクス株式会社 / UIUX Design Office Alceo 中野 純也 デザイナーとエンジニアのためのFigma活用セミナー @名古屋 2024/08/29

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション 1

01 自己紹介 / Simplex紹介 中野 純也 UIUX Design Studio Alceo 滋賀県出 金融系システムのエンジニアからPMになり、デザイナー シンプレクスによるデザイン組織（Alceo）立ち上げのメンバー 今の興味はデザイナーとエンジニアでどういいチームを作れるか UIデザインもやります。UXデザインもやります。たまに仕様書も書きます。 主なプロジェク 野村證券株式会社 『NOMURA』アプ デジタル庁 マイナポータル新フロント（Webアプリ）← Now 2

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

Alceo（アルセオ） 01 自己紹介 / Simplex紹介 多様なバックボーンを持つ デザイン集団 ビジネス・デザイン・開発を 一気通貫で提供 開発にコミットしたデザイン 多様なバックボーンを持つデザインチームが デザインパートナーとして伴走 プロフェッショナルが集結し、コレボレーションすることで 戦略、設計、デザイン、開発、グロースを一気通貫で提供 机上の空論ではなく、実現性・実用性を考慮した 課題解決力のあるサービス、プロダクトをデザイン ブラン ディング Business マーケ ティング Profitable B リサーチ Design Partner サービス デザイン 技術企画 (MOT) UX/UI デザイン プロダクト 開発 エンジニア リング T 戦略・企画・マーケティング サービス プロダクト デザインエンジニアリング UIデザイン Technology Feasible サービスデザイン ブランディング C デザイン ユーザー中心 Creativity Useful Technology Feasible Alceo Design Creativity Useful 実現性・実用性を考慮した、 課題解決力のあるデザイン 4

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション デザイナーとエンジニアの垣根がより低く 5

02 みんなのちりつも課題 デザイナー、エンジニア、マネージャー みんながプロダクト開発において いくつかの課題をかかえている 6

02 みんなのちりつも課題 デザイナーが抱えていた課題 7

デザイナーが抱えていた課題 02 みんなのちりつも課題 レイアウト少しずれてるな... そこまで大きな差は無いし 今後のリリースで改善してもらう 今はもっとやることあるし... 8

02 みんなのちりつも課題 デザイナーが抱えていた課題 （リリースされているプロダクトを見て） 画面ごとになんで違うんだろう... コンポーネント使ってくれてないのかな... まぁ利用者はきっと気づかないくらいの差だし タイミング見て直してもらおう 9

デザイナーが抱えていた課題 02 みんなのちりつも課題 文言の変更やリストの並び替え インスタンスのプロパティの変更など エンジニアでデザインできるところもありそう... やってくれると嬉しいな〜 10

02 みんなのちりつも課題 エンジニアが抱えていた課題 11

エンジニアが抱えていた課題 02 みんなのちりつも課題 このデザインデータのパディング16pxか ということは、（脳内変換して）lg だな よし、lgと… （はじめからlgって見えたらいいのに） 12

エンジニアが抱えていた課題 02 みんなのちりつも課題 いちいちデザイナーに 細かい修正をやってもらうの申し訳ないな... 時間かかる時もあるし ちょっとめんどくさいな... 先に実装やっちゃうか 13

エンジニアが抱えていた課題 02 みんなのちりつも課題 いつもデザイナーにアセットの書き出しや プラグインの実行お願いしてる... 自分たちでもできるとお互い効率的になりそう 14

02 みんなのちりつも課題 マネージャーが抱えていた課題 ©2024 Simplex Inc. 15

マネージャーが抱えていた課題 02 みんなのちりつも課題 デザイナーのコストを もっと効果的なところにかけたいな... 継続的にエンジニアとコミュニケーション取る のは大事だけど 勿体無いところないのかな... けど、一緒に動いてもらった方が安心だしな... 16

マネージャーが抱えていた課題 02 みんなのちりつも課題 スプリントレビューなど 実機で開発された画面を見た時に なんかちょっと違う気がする... デザイナーに聞きたい... いない...また聞こう... （忘れる） 17

マネージャーが抱えていた課題 02 みんなのちりつも課題 そもそも。 もっと効率よく 一貫性を保った開発できないのかな 18

02 みんなのちりつも課題 1つ１つの課題は プロダクト開発において 大きな阻害要因ではないが... ©2024 Simplex Inc. 19

02 みんなのちりつも課題 ちりつも課題 小さい課題は 少しずつ積もり 改善したいものに 20

それぞれが抱えている課題 02 みんなのちりつも課題 デザイナー レイアウトが少しずれていても後回しに してしま 少しの修正はエンジニアでもできるよう になってくれると楽だ コンポーネントをせっかく作ったのに実 装と違う定義になっている ©2024 Simplex Inc. エンジニア このデザインデータのパディング16px かということは、（脳内変換して）lg だなよし、lgと…（はじめからlgって見 えたらいいのに ちょっとしたメモをFigmaに書きたい けどコメントだと見えずらいしデザイン ファイルいじると壊しちゃいそうスク ショしよ マネージャー デザイナーのコストをもっと効果的なと ころに配置したいな、けどエンジニアと 一緒に動いてもらった方が安心だし なんかちょっと違わない？デザイナーど うなの？いないじゃん。。また聞こ もっと効率よく、一貫性を保った開発で きないのかな。 21

02 みんなのちりつも課題 鍵となるDevModeの機能 1. 2. 3. プログラミング時に使う変数やプ コンポーネントが取りうるパター Dev Mode では一部のプラグイン ロパティーがFigma上で確認でき ンを⁩Playground Viewで見ること が実行できます。 るので、脳内変換の時間やミスが ができます。 開発に特化したプラグインもあり 減り、デザインされたものとの違 コンポーネントの実装がしやすく ますし、variablesをトークンとし いが限りなく小さくなる。 なり、デザイナーがコンポーネン て出力することも編集権限がなく トのパターンをみやすく可視化す とも実行できます。 Inspect Playground Plugin る工数が減ります。 22

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション デザイナーとエンジニアの垣根がより低く 23

03 みんなでデザインシステムを作る デザインシステムの構築フロー 歩み寄り UIデザイン コンポーネント開発 デザインシステムの構成検討 FigmaでUIデザイン こういうフロントエンド開発構成にしたい をぶつけ合う スタイル定義作成、コンポーネント作成 スタイル定義・コンポーネント開発 Figmaで定義(表現)できること StoryBookで定義(表現)できることを共有 定義されたスタイルとコンポーネントで UIデザイン アクセシビリティテスト 何を定義し どこまで共通化するかをすり合わせ 新しいコンポーネントやスタイルが必要な 場合チケットのステータス更新 デザイナーレビュー StoryBook作成 画面開発 プロダクトコード開発 画面開発 すり合わせ用の スタイル定義とコンポーネントのを作成 24

03 みんなでデザインシステムを作る デザインシステムの構築フロー 歩み寄り UIデザイン コンポーネント開発 デザインシステムの構成検討 FigmaでUIデザイン こういうフロントエンド開発構成にしたい をぶつけ合う スタイル定義作成、コンポーネント作成 スタイル定義 コンポーネント開発 Figmaで定義(表現)できること StoryBookで定義(表現)できることを共有 定義されたスタイルとコンポーネントで UIデザイン アクセシビリティテスト 何を定義し どこまで共通化するかをすり合わせ 新しいコンポーネントやスタイルが必要な 場合チケットのステータス更新 StoryBook作成 ・ 画面開発 プロダクトコード開発 画面開発 ナ レビュー デザイ ー すり合わせ用の スタイル定義とコンポーネントのを作成 25

03 みんなでデザインシステムを作る 構成検討時の活用 変数やプロパティを実装のイメージが持ちやすい FigmaのUIをみながらどのようにデザインシステムを 構築すべきかエンジニアとデザイナーが一緒に検討できる。 26

03 みんなでデザインシステムを作る 変数定義の例 Variablesを使って変数定義ができます。 どういった変数が定義されているか DevModeのプラグインを使って 開発者自身で出力できる。 結果、デザイナーからエンジニアへの 効率の悪いコミュニケーションを削減。 27

03 みんなでデザインシステムを作る コンポーネントのプロパティー コンポーネントのパターンをDevModeのPlaygroundのViewで Storybookなどエンジニア目線のUIコンポーネントライブラリーと 同じような見た目で見える。 28

03 みんなでデザインシステムを作る デザインシステムの構築フロー 歩み寄り UIデザイン コンポーネント開発 デザインシステムの構成検討 FigmaでUIデザイン こういうフロントエンド開発構成にしたい をぶつけ合う スタイル定義作成、コンポーネント作成 スタイル定義・コンポーネント開発 Figmaで定義(表現)できること StoryBookで定義(表現)できることを共有 定義されたスタイルとコンポーネントで UIデザイン アクセシビリティテスト 何を定義し どこまで共通化するかをすり合わせ 新しいコンポーネントやスタイルが必要な 場合チケットのステータス更新 デザイナーレビュー StoryBook作成 画面開発 プロダクトコード開発 画面開発 すり合わせ用の スタイル定義とコンポーネントのを作成 29

03 みんなでデザインシステムを作る コンポーネント開発時の活用 DevModeでUIを見ると、定義された変数が画面上に確認できる。 それにより、エンジニアが脳内変換するコストを減らせる。 変数をデザイナーが適用していない場合、正いかをデザイナーに確認 するフローも生まれプロダクト全体としてより一貫性が保たれる。 30

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション デザイナーとエンジニアの垣根がより低く 31

04 エンジニアチームが自走するまで エンジニアチームが自走して デザインを進めるサポート UIデザイン レクチャー デザインシステム 構築伴走 デザイン レビュー 32

04 エンジニアチームが自走するまで モブデザインしながら UIデザイン方法をレクチャー エンジニアにデザインシステムが組まれた状態で 既存の変数やコンポーネントを使ってUIデザインをすることは 実際のコーディングに近い。 Figmaを使ったUIデザインをレクチャーする時に大事なことは UIの構造やどの単位がコンポーネントなのかを伝えることが大事。 33

04 エンジニアチームが自走するまで デザインレビューの コストが圧倒的に低い ここまで来ると、開発チームの中でも Figmaでのデザインやデザインシステムの理解が深くなる。 お互いの共通言語が出来上がっているので 短いデザインレビューの時間の中で “本質的な”利用者目線のFBや、細かいUIのFBも効率的に可能。 34

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション デザイナーとエンジニアの垣根がより低く 35

Dev Modeで課題を解決 Dev Modeを活用することで エンジニアがよりFigmaを触る時間が増えることで デザインに対する興味が強くなった感覚があります。 Inspect Viewなどで開発しやすくなることはもちろん。 開発チームが自らデザインするようになることで チームとしてデザインに対する意識が高くなりました。 36

05 ラップアップ! Figmaを通じてデザインがより身近なものになり UIUXデザインを意識するメンバーが自然と増える より効率よく、より効果的な プロダクト開発のチームに 37

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション デザイナーとエンジニアの垣根がより低く 38

06 プロモーション あらゆる事業のWeb2.0からweb3へのアップデートを加速させる 「web3統合プラットフォームソリューション」 特長 01. SaaS型で直ぐにweb3ビジネスを立ち上げ 02. サービスと組み合わせ企画・PoCで終わらせない 03. 他のソリューションと組み合わせることで事業を拡大 04. デジタルアセットを安心・安全に管理 39

06 プロモーション “自分たちらしさをカタチに、ゲストが笑顔” をコンセプトに SMASEKIは招待状・席次表をスマホに詰めこみました 特長 01. 招待状との連携で、ゲストの入力が楽々 02. 何度でも・直前まで編集可能。直前の出欠席変更や修正も安心 03. お式当日のアルバム作成、チャット投稿 04. アルバムに投稿された写真をスクリーンに投影 40

ありがとう ございました。 ↓今日の資料はDocswellにアップしています ©2024 Simplex Inc. 41