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
270
わたしたちのコーディングの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
140
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
320
CSS Houdiniであそぶ
myoshiro
0
150
Template Literal Typesであそぶ
myoshiro
1
180
Selector-2-regexp というツールを作った
myoshiro
0
230
Data Studio Community Visualizationを触ってみた
myoshiro
1
540
UIデザインと関わろう
myoshiro
0
520
Atomic Design てなぁに?
myoshiro
3
580
Other Decks in Design
See All in Design
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5.3k
portfolio_YumiYasuda
yum0418
0
220
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
3k
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
290
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
140
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
360
デザイナーとPMの両ロール_3つのポイント
toy1618
1
270
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
230
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
100
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
440
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
230
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
A better future with KSS
kneath
239
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Speed Design
sergeychernyshev
29
890
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.3k
BBQ
matthewcrist
88
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
650
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
It's Worth the Effort
3n
184
28k
Visualization
eitanlees
146
16k
Bash Introduction
62gerente
611
210k
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の価値向上のために重要である 本発表の主張
ご清聴ありがとうございました