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
220
Webエンジニアのデザイン実装との付き合い方
Takuya Eguchi (Akagire)
November 10, 2021
Tweet
Share
More Decks by Takuya Eguchi (Akagire)
See All by Takuya Eguchi (Akagire)
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
160
Secure な UX のために Content Security Policy について知っておこう
akagire
0
30
package.json がすごい
akagire
0
94
Nuxt.js のインスタンスライフサイクル総点検
akagire
0
280
20200528 - GCPでもサーバーレスでRubyりたい!
akagire
0
120
VeeValidate の"穴"を踏み抜いてしまった
akagire
1
820
継続的に楽しくプログラミングするには - 2018/11/3 Rails Girls Sendai
akagire
0
100
Other Decks in Programming
See All in Programming
Automatisiere deine Prozesse mit GitHub Actions!
ahus1
0
260
Rubykaigiの振り返り/fbc-meetup-20240530
yswengineer
0
5.7k
チームで運用する golangci-lint の向き合い方
sgash708
0
180
RustのReturn-position impl trait in trait (RPITIT) の実装を雑に見てみる
tako8ki
1
130
通信の不安定さに悩んでいたらシュッとプロキシを書けて改善できちゃった話
bellwood4486
2
350
RubyKaigi Effect 2023, and ...
tagomoris
1
510
Why Spring Matters to Jakarta EE - And Vice Versa
ivargrimstad
0
1.2k
ソートできるUUID v7をJavaで使うときの話
yoshiori
7
4.2k
『改訂新版前処理大全』の話と Apache Parquet の話 #TokyoR
bob3bob3
0
170
コードの作者がいるうちに聞こう
ykws
1
280
Table-driven testing に縛られないGoのテストパターン
abekoh
7
1.4k
どこでも使える Cloudflare Workers!
codehex
5
360
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
16
1.2k
Atom: Resistance is Futile
akmur
260
25k
Faster Mobile Websites
deanohume
300
30k
Code Reviewing Like a Champion
maltzj
516
39k
Designing for humans not robots
tammielis
247
25k
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
Six Lessons from altMBA
skipperchong
22
3.1k
How GitHub (no longer) Works
holman
305
140k
What the flash - Photography Introduction
edds
64
11k
Designing with Data
zakiwarfel
96
4.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
250
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回目)
おわり