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
250
わたしたちのコーディングの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
120
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
290
CSS Houdiniであそぶ
myoshiro
0
140
Template Literal Typesであそぶ
myoshiro
1
170
Selector-2-regexp というツールを作った
myoshiro
0
220
Data Studio Community Visualizationを触ってみた
myoshiro
1
530
UIデザインと関わろう
myoshiro
0
500
Atomic Design てなぁに?
myoshiro
3
570
Other Decks in Design
See All in Design
Tableau曲線表現講座(2024.11.21)
cielo1985
0
220
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
Rayout Pattern 01
one0
0
1.3k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
220
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
260
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
590
横断組織デザイナーの働き方
mixi_design
PRO
0
320
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
700
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
240
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
190
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
2.7k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Invisible Side of Design
smashingmag
299
50k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
RailsConf 2023
tenderlove
29
980
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
A Tale of Four Properties
chriscoyier
157
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Embracing the Ebb and Flow
colly
84
4.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Gamification - CAS2011
davidbonilla
80
5.1k
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の価値向上のために重要である 本発表の主張
ご清聴ありがとうございました