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
310
わたしたちのコーディングの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
190
デザイントークンの適用率計測とその活用
myoshiro
0
1.2k
画像の減色処理とOctree
myoshiro
1
430
CSS Houdiniであそぶ
myoshiro
0
200
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
260
Data Studio Community Visualizationを触ってみた
myoshiro
1
590
UIデザインと関わろう
myoshiro
0
560
Atomic Design てなぁに?
myoshiro
3
610
Other Decks in Design
See All in Design
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
710
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
150
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
410
root COMPANY DECK / We are hiring!
root_recruit
2
26k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
510
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
910
AIでデザインをつくる:基礎編
kenichiota0711
3
2.6k
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
270
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.2k
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.6k
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
5
4.6k
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
210
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
850
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
610
Context Engineering - Making Every Token Count
addyosmani
9
680
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
100
Typedesign – Prime Four
hannesfritz
42
3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
930
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
200
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
210
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
450
How to make the Groovebox
asonas
2
2k
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の価値向上のために重要である 本発表の主張
ご清聴ありがとうございました