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
わたしたちのコーディングのUX
Search
m-yoshiro
June 03, 2020
Design
1
290
わたしたちのコーディングのUX
プロダクトのUXを向上するためには、開発者自身のUXも重要です。
この資料では、開発者のコーディングのUXにフォーカスして述べました。
UX JAM Online #4 で発表した資料です。
m-yoshiro
June 03, 2020
Tweet
Share
More Decks by m-yoshiro
See All by m-yoshiro
雑に出してみるデザイントークン適用率
myoshiro
0
160
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
330
CSS Houdiniであそぶ
myoshiro
0
160
Template Literal Typesであそぶ
myoshiro
1
190
Selector-2-regexp というツールを作った
myoshiro
0
240
Data Studio Community Visualizationを触ってみた
myoshiro
1
560
UIデザインと関わろう
myoshiro
0
530
Atomic Design てなぁに?
myoshiro
3
580
Other Decks in Design
See All in Design
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
350
Haley's adventure chase
ivettetwin
0
180
Cards | Storyboards
giofortuna_story
0
240
PF_濵村ひろみ_202503
maru_design78
0
160
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
390
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
140
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
240
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.7k
Les petites aventures de CSS, saison 2025
goetter
3
4k
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
260
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.6k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimizing for Happiness
mojombo
378
70k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
A designer walks into a library…
pauljervisheath
205
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Invisible Side of Design
smashingmag
299
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Transcript
コーディングのUX 松本 芳郎 / GMOペパボ株式会社 わたしたちの UX JAM Online #04
#about-me { name: 松本 芳郎; twitter: @bennkyougirai;
/* GMOペパボ株式会社 デザイナー / UXエンジニアリング */ }
コーディングのUX わたしたちの
コーディングのUX わたしたちの 実装の話はしません
コーディングのUX わたしたちの 実装の話はしません なんの話?
コーディングのUX わたしたちの 実装の話はしません コーディングに携わる開発者のUX
調査・分析・ 設計 開発 UIデザイン コーディング グロース リリース
調査・分析・ 設計 開発 UIデザイン コーディング グロース UXの文脈でスポットがよく当たるフェーズ リリース
調査・分析・ 設計 開発 UIデザイン コーディング グロース この発表が対象とするフェーズ リリース
UX サービスのユーザー ではなくて コーディングに携わる開発者 とさせていただきます。 前提 1
コーディング HTML CSS JS この発表では、 HTML・CSS・JSなどでUIの実装を行うこと とさせていただきます。 前提 2
デザイナー エンジニア コーディングに携わる の開発体験が プロダクトのUXの価値向上のために重要である 本発表の主張
なぜコーディングが UXに重要なの?
コーディングは プロダクトのデザインの 最終実装を担うから
UIデザインや設計は、 HTML・CSS・JSで実装されて 初めてユーザーが利用できるようになる。 デザインの最終的な品質を左右する重要な工程。
調査・分析・ 設計 開発 UIデザイン コーディング グロース 例えば、これらのフェーズの取り組みが大変素晴らしくても… リリース
None
反応が遅い そもそも表示が崩れている スクロールが 引っかかる
反応が遅い そもそも表示が崩れている スクロールが 引っかかる UIでの体験を損なう
調査・分析・ 設計 開発 UIデザイン コーディング グロース コーディングの質がUIの品質に大きく影響する リリース
https://developers.google.com/web/fundamentals/performanc e/why-performance-matters?hl=ja パフォーマンスが重要なのはなぜか | Web Fundamentals
品質が悪くなる要因 • リソース不足 • 期限 • コードが書きづらい • レガシーコード •
一貫したルールがない
品質が悪くなる要因 • リソース不足 • 期限 • コードが書きづらい • レガシーコード •
一貫したルールがない コーディングの体験が損なわれている
開発のUXを改善するには?
開発のUXを改善するには? • ツールの整備 • 自動化していく • レガシー環境の リファクタリング チーム
開発のUXを改善するには? • ツールの整備 • 自動化していく • レガシー環境の リファクタリング • 自分の使っている道具に関心
をもつこと(エディタとか) • プロセスに関心をもつこと チーム 個人
デザイナー エンジニア コーディングに携わる の開発体験が プロダクトのUXの価値向上のために重要である 本発表の主張
ご清聴ありがとうございました