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
Webエンジニアのデザイン実装との付き合い方
Search
Takuya Eguchi (Akagire)
November 10, 2021
Programming
0
200
Webエンジニアのデザイン実装との付き合い方
Takuya Eguchi (Akagire)
November 10, 2021
Tweet
Share
More Decks by Takuya Eguchi (Akagire)
See All by Takuya Eguchi (Akagire)
Secure な UX のために Content Security Policy について知っておこう
akagire
0
25
package.json がすごい
akagire
0
85
Nuxt.js のインスタンスライフサイクル総点検
akagire
0
260
20200528 - GCPでもサーバーレスでRubyりたい!
akagire
0
120
VeeValidate の"穴"を踏み抜いてしまった
akagire
1
790
継続的に楽しくプログラミングするには - 2018/11/3 Rails Girls Sendai
akagire
0
100
Other Decks in Programming
See All in Programming
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
Ruby GitHub Packages
bkuhlmann
0
620
ONE WEDGE_company_guide
1wedge_one
0
380
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
Netty Chicago Java User Group 2024-04-17
sullis
0
120
puregoの活用例
aethiopicuschan
0
220
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Git Rebase
bkuhlmann
11
1.6k
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
[SF Ruby, March 2024] Rails on Wasm
palkan
0
370
Featured
See All Featured
How to Ace a Technical Interview
jacobian
272
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
The Mythical Team-Month
searls
215
42k
BBQ
matthewcrist
80
8.7k
Optimizing for Happiness
mojombo
370
69k
Making Projects Easy
brettharned
108
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Scaling GitHub
holman
457
140k
How to name files
jennybc
64
92k
What the flash - Photography Introduction
edds
64
11k
How STYLIGHT went responsive
nonsquared
92
4.8k
Debugging Ruby Performance
tmm1
70
11k
Transcript
Web エンジニアの デザイン実装との向き合い方 2021/11/10 Sendai Front-End User Group
自己紹介 江口 拓弥 インフラ知識が壊滅的なWebのフロントエンド開発者 2018年に東京から仙台にお引越ししてきました 2019年から新規事業開発やってます akathea_
弊社の新規事業開発の開発フロー 1. デザイナーが Figma でデザイン 2. エンジニアが Vue や React
で実装 3. エンジニアが機能開発 4. エンジニアが機能レビュー 5. デザイナーがデザインレビュー 6. リリース
弊社の新規事業開発の開発フロー 1. デザイナーが Figma でデザイン 2. エンジニアが Vue や React
で実装 3. エンジニアが機能開発 4. エンジニアが機能レビュー 5. デザイナーがデザインレビュー 6. リリース
Figma / XD 使ってますか?
例えば Figma でこんなカンプが用意されていたとして
これだけの情報が読み取れる Inspectタブに移動すると… 縦横、角丸の量がわかる! 色もわかる! 影の適用量、オフ セットもひと目で!
これだけの情報が読み取れる CSSで見たほうがわか りやすい場合はこっち を確認してもOK
これだけの情報が読み取れる フォント情報も確認できる
めっちゃ便利!
...なのか?
「書いてあるとおりに実装するだけ」では品質は上がらない
なぜこのデザインになったのかを理解する方が重要 実装の正しさよりもこっちの情報が大切
デザイナーは神ではないので、時には間違ってしまう時もある
デザイナーは神ではないので、時には間違ってしまう時もある 安全操作に破壊操作色が適用されてしまっている カンプにない outlined なボタンが爆誕している Human Interface Guidelines 的に逆
うちのデザイナー、Figmaにこんな情報書き込んでくれないよ・・・
デザイナーに求めよう エンジニアが実装しやすいようなファイル/カンプにしてもらおう エンジニアが実装しやすい → 爆速デリバリー可能 → ユーザーへの価値提供の高速化 ユーザーのことを考えて行動しよう
デザイナーが作った仕様に従わないといけないんじゃないの?
デザイナーに求めよう エンジニアが違和感を感じていることは利用者も違和感を感じる 実装しているからこそ感じる違和感をデザイナーに伝えよう。 それは良いUIなのか?いいUXを産むのか?一緒に考えよう。 ユーザーのことを考えて行動しよう
デザインに口出しできるほど見た目のことはよくわからん
エンジニアも一定レベルでデザインのお作法を押さえておこう 正解のある世界では、基本に忠実であれ Web「アプリケーション」であれば、正解のデザインが存在する。 (Material Design、OOUI、Human Interface Guidelines 等) →エンジニアが十分指摘できる世界 正解のない世界では、テストと採点をしよう
Web「サイト/メディア」の場合、正解は1つではない。 GA、ABテスト、ヒューリスティック分析を使って、正解を見つけていこう。 →デザイナーやマーケの仕事だが、エンジニアがテスト・採点に貢献はできる
最後に、デザイナーに知ってほしいこと (時間があれば…)
1. Pixel perfect is Dead... マルチスクリーンの世界では実現不可であることを理解しよう Figma / XD で指定した通りになっていない場合
どこが妥協できない(=価値を毀損しているのか)を 明確にエンジニアに伝えよう (あらかじめドキュメント起こしたりカンプにコメントしておこう) 求めているルックアンドフィールをエンジニアに共有しよう どうしてもカンペキに仕上げたい場合は デザイナーがコーディングすることをお勧めします
2. Solid Layout is Dead soon... レスポンシブデザイン時代のカンプのあり方を考えよう 1024px と 375px
のデザインだけあっても中間はどうする? (タブレット、iPhone SE / Max / Plus は?) 大雑把でいいので、状態間のルックアンドフィールが 確認できる資料があると成果物のイメージ共有に役立ちます。 わからないことはエンジニアを質問攻めにしよう! & エンジニアに求めよう! & 意思決定をエンジニアが手助けしよう!(手助けする!と宣言しよう)
まとめ
いいデザインといい実装 = 良いUI/UX UI実装とデザインの境界線をあえてぼかす フロントエンド(特にプレゼンテーション層の実装者)はデザイナーを、 デザイナーはフロントエンドエンジニアのことを理解する努力をしよう。 隣接する職域同士です。反発しあうのではなく、手を取り合いましょう。 ユーザーのことを考えて行動しよう(本日3回目)
おわり