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
240
わたしたちのコーディングの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
110
デザイントークンの適用率計測とその活用
myoshiro
0
1k
画像の減色処理とOctree
myoshiro
1
260
CSS Houdiniであそぶ
myoshiro
0
120
Template Literal Typesであそぶ
myoshiro
1
160
Selector-2-regexp というツールを作った
myoshiro
0
210
Data Studio Community Visualizationを触ってみた
myoshiro
1
500
UIデザインと関わろう
myoshiro
0
480
Atomic Design てなぁに?
myoshiro
3
560
Other Decks in Design
See All in Design
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
Test Revisionista
olgastoryboard
0
110
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.8k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
190
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
480
MLP_Cleanup_Olga
olgastoryboard
0
140
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
160
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
460
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.4k
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
790
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Making Projects Easy
brettharned
115
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Fireside Chat
paigeccino
32
3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Statistics for Hackers
jakevdp
796
220k
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の価値向上のために重要である 本発表の主張
ご清聴ありがとうございました