Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
なぜ私はコードをデザインに使いたいのか
Search
seya
December 15, 2021
Design
9
3.6k
なぜ私はコードをデザインに使いたいのか
seya
December 15, 2021
Tweet
Share
More Decks by seya
See All by seya
継続的な評価基準と評価の実行の仕方をアップデートするワークフロー
kazuyaseki
2
120
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
2.1k
エンジニアにオススメの Figma 活用
kazuyaseki
16
14k
フロントエンド開発のための Figma
kazuyaseki
20
25k
PWAに取り組む前に知っておきたい SPAとSEO
kazuyaseki
10
4.2k
State of SEO for SPA 2018
kazuyaseki
8
5k
Selenium あるある
kazuyaseki
0
1.7k
Vue コンポーネント実装パターン
kazuyaseki
16
3.8k
Other Decks in Design
See All in Design
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
How to go from research data to insights?
mastervicedesign
0
220
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Bash Introduction
62gerente
610
210k
Fireside Chat
paigeccino
34
3.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Code Review Best Practice
trishagee
66
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Transcript
by seya (@sekikazu01) なぜ私はコードを デザインに使いたいのか @UXPin meetup 2021/12/15
免責 「コードをデザインに使う」 ワークフローは実運用で試せていないので、 居酒屋で夢を語ってるくらいのテンションで聞いていた だけますと幸いです。
コードをデザインに使うとは?
こんな React コンポーネントがあるとして
それで描画した結果が デザインツール内で召喚できること
これの何が嬉しいの?
もう実装されたものはデザインにも あるはずだから意味なくね?
わかる
が、実は様々なユースケースが考えられます。 そんな訳でこのトークでは次のことを語っていきます u 私が悩んでいるこa u それを「コードをデザインに使うこと」がどう解 いてくれるのA u 運用上の課題
ちなみに現状どんなツールがあるか Figma にコードを import する何かとかはその内できそうな気はす るが、UXPin Merge みたいに HTML +
CSS で描画している訳ではな いので限界はありそう。 (例: Figma の Auto Layout は flex-wrap がない、など) 以外はなさそう…?
1. 抱えている課題
課題1. デザインのマスター管理がめん どくさい
デザインが実装時に調整されることは よくある 実装しづらい デザインだった ちょっとした修正を コードでやっちゃった 実機で触ってみたら 調整したくなった
実装時に変更された後に デザインをそれに合わせて修正すること = デザインをマスター管理すること に意味はあるか?
結論、ない(気がする)
デザインを作る目的を考える 1. 仮説検証のため 2. 実装者に UI 設計の意図を伝えるため
1. 仮説検証のため ↓ すでに検証済みで実装まで 進んだものなので、この目 的には貢献しない
2. 実装者に UI 設計の 意図を伝えるため ↓ すでに実装されているもの なので、この目的にも使え ない
デザインをマスター管理することに よる強いメリットはなさそう。 結論
ただし…役に立つこともなくはない a 全体感を持って眺めたい時に便Q a 新しい画面を作るときに再利用しやすくな2 a サービス全体の一貫したプロトタイプが作れる
「いつ」「どうやって」 役に立つかが読みづらい 未来にどんな画面が作られて、どんな仮説を検証するかを読 むことはできないから ↓ デザインをマスターとして管理する ことの ROI が分かりづらい
課題2. デザインをちゃんとメンテナンス するのがめんどくさい
None
None
デザインをしっかり作るのにも コストがかかる U Auto LayouH U コンポーネント(Variants)を実装と同$ U プロトタイプのメンテナンス
「デザインをどこまで作り込むか」の 判断は難しい これもう… 実装した方が速くね?
課題3. ハンドオフがスムーズじゃない
ハンドオフとは? 実装可能な状態になったデザインをエンジニアに手渡し、 実装し始めてもらうプロセスのことです
こんなことを思ったことはないですか? うわっ?エンジニアが実装した画面、 デザインと違い過ぎ…? デザイナー の皆さん
デザインから意図が読みづらい… あれ?状態足りてないな… なんでデザインで作ったものを もう一回コードで書かなきゃいけないんだ? エンジニア の皆さん こんなことを思ったことはないですか?
デザインの意図がしっかり伝わるのは大変 デザインとコードは違う構造で作られるので 必ず齟齬が生まれる
2. 打ち手としての コードをデザインに使う
効用1. 実装されたものをデザインに使え るので、同期する必要がなくなる
頑張ってデザインをマスター管理しなくて も、いつでもコードから最新のものを持っ て来れるように 最新! デザインに使う
効用2. デザインのメンテナンスは (そんなに)頑張らなくて良くなる
再掲
Web の実装をデザインに使えるから ”デザインの実装”が不要になる(?)
つまり Figma とかでのデザインがいらな くなるってコト!?
コードが使えるのは当然ながら 既に実装されたものだけ i 新規のページやコンポーネントは Lo-Fi なデザインツールでまず作c i 既存の資産で作れる部分は初手か ら Hi-Fi
なプロトタイプが作れる という形で用途に応じて使い分 けるスタイルになりそう。 (なので”デザインの実装”も結局幾分か必要な予感) (正直この辺は実運用してみないと自信ない) という訳でもない。
効用3. ハンドオフが楽 & 確実に
だってコードを使っているんだもの
UXPin Merge の例
コードベースでデザインすると、 コードで実現できないデザインは 作れないというメリット(場合によってはデメ リット)もある
3. 実際に使う上での課題
運用上の課題1. デザインシステムが必要 (というかパターンライブラリ)
コードで使えるのは既存の資産 新規のコンポーネントばかりだと価値が 出づらい
つまり、それなりに成熟したプロダク トでないと使えないのか…?
そんなこともなさそう!
汎用的なコンポーネントライブラリで作る 前提なら初期開発フェーズから使えそう。 MUI Chakra UI Ant Design
運用上の課題2. 複数プラットフォームでのワーク フローは難しいかも?
“コード” と一口に言っても Web もあればネイティブアプリもある Web のデザイン ↓ Web の実装
モバイルのデザイン ↓ モバイルの実装 しばらくはこっちしか恩恵を受けられなさそうな香りがする
運用上の課題3. ワークフローが複雑になりそうな 予感がする
新規の画面を作る時に既存の資産で作れるか/作れないか 作れない場合、新規の要素をデザインシステムに組み 込むか (これはどちらにしろデザインシステム運用する上で発生するタスクな気 がするけど) のような分岐が発生するため、開発時のオーバーヘッド にならないためにワークフローは工夫して設計する必要 がありそう
まとめ
x コードをデザインは「システム化されたデザイン」 の実装を一元化できs x どんなシーンで有効そう$ x デザインシステムがそれなりに発達しているとこ ろでのプロトタイプ・デザイン作a x コンポーネントライブラリを採用しているとこ
ろでの初期の爆速開% x デザインシステムを作ろう x みんなも試して知見をシェアしてみよう☝️
ご静聴 ありがとうございました!
How PayPal Scaled Their Design Process with UXPin Merge https://www.uxpin.com/studio/blog/paypal-scaled-design-process-uxpin-merge/
ここがすごいぞUXPin Merge | 8つのポイントを紹介 https://qiita.com/xrxoxcxox/items/1a806f85e2a586b87634 Bridging The Gap Between Designers And Developers https://www.smashingmagazine.com/2021/10/bridging-gap-between-designers-developers/ 参考文献