Upgrade to Pro — share decks privately, control downloads, hide ads and more …

わたしたちのコーディングのUX

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
June 03, 2020
Design
1
110

 わたしたちのコーディングのUX

プロダクトのUXを向上するためには、開発者自身のUXも重要です。
この資料では、開発者のコーディングのUXにフォーカスして述べました。

UX JAM Online #4 で発表した資料です。

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

June 03, 2020
Tweet

More Decks by m-yoshiro

See All by m-yoshiro
画像の減色処理とOctree
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
1
34
CSS Houdiniであそぶ
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
0
39
Template Literal Typesであそぶ
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
1
63
Selector-2-regexp というツールを作った
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
0
110
Data Studio Community Visualizationを触ってみた
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
1
300
UIデザインと関わろう
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
0
250
Atomic Design てなぁに？
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
3
370
サイトリニューアルでのスタイルガイドの活用
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
3
820
GASでEメールの作成ツールを作ってみた
C0e40025e5098e025a249b0cda428434?s=48 myoshiro
1
400

Other Decks in Design

See All in Design
事業デザイナーが考えるデザイン×ビジネスのキャリアを歩むために
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
340
はじめまして、株式会社サインコサインです。（2022.07）
6581d0d2debbc8be5e4808cf46b4f104?s=48 kakukoki
PRO
4
4k
The Drop
8d8c1190623cbc6a2af4e79b91c0c01b?s=48 rootsdrew
1
180
「書けるようになる」ということ
B6a2f6699d8ebaad85000f9a8e3d8ccc?s=48 aguringo
6
14k
ShippioのProduct Designerになりませんか？
3bb2326963c24027cdf173579290bd6d?s=48 shippio
0
1.3k
視覚障害者と探究するLSPの可能性｜LEGO® SERIOUS PLAY® Coffee Chat Japan #09
038f436d8d55e8736cd991bf044afe6a?s=48 keitatatakizawa
1
110
Growing the WordPress design system
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
100
DESIGNBASE_Recruit_Book_ver2.1
Fbaa9faa09b9f69dfe14dad20873c78d?s=48 uzabase
PRO
0
210
We meet again
9b32c41cb126732f3d05f1323078e037?s=48 seleliao
1
640
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
3
3.4k
Storyboard: Midnight Cookie
E46552bcd7b14a164c3e48ea28015d8d?s=48 luchiianita
0
280
「気持ちのよい朝」をつくるデザイン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
0
150

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.5k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
25k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
57
5.4k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
266
21k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
44
9.7k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
13
1.4k

Transcript

  1. コーディングのUX 松本 芳郎 / GMOペパボ株式会社 わたしたちの UX JAM Online #04

  2. #about-me { 　　 name: 松本 芳郎; 　 　　 twitter: @bennkyougirai;

    　　 /* 　　 　GMOペパボ株式会社 　　 　 デザイナー / UXエンジニアリング 　　 */ }

  3. コーディングのUX わたしたちの

  4. コーディングのUX わたしたちの 実装の話はしません

  5. コーディングのUX わたしたちの 実装の話はしません なんの話？

  6. コーディングのUX わたしたちの 実装の話はしません コーディングに携わる開発者のUX

  7. 調査・分析・ 設計 開発 UIデザイン コーディング グロース リリース

  8. 調査・分析・ 設計 開発 UIデザイン コーディング グロース UXの文脈でスポットがよく当たるフェーズ リリース

  9. 調査・分析・ 設計 開発 UIデザイン コーディング グロース この発表が対象とするフェーズ リリース

  10. UX サービスのユーザー ではなくて コーディングに携わる開発者 とさせていただきます。 前提 1

  11. コーディング HTML CSS JS この発表では、 HTML・CSS・JSなどでUIの実装を行うこと とさせていただきます。 前提 2

  12. デザイナー エンジニア コーディングに携わる の開発体験が プロダクトのUXの価値向上のために重要である 本発表の主張

  13. なぜコーディングが UXに重要なの？

  14. コーディングは プロダクトのデザインの 最終実装を担うから

  15. UIデザインや設計は、 HTML・CSS・JSで実装されて 初めてユーザーが利用できるようになる。 デザインの最終的な品質を左右する重要な工程。

  16. 調査・分析・ 設計 開発 UIデザイン コーディング グロース 例えば、これらのフェーズの取り組みが大変素晴らしくても… リリース

  17. None

  18. 反応が遅い そもそも表示が崩れている スクロールが 引っかかる

  19. 反応が遅い そもそも表示が崩れている スクロールが 引っかかる UIでの体験を損なう

  20. 調査・分析・ 設計 開発 UIデザイン コーディング グロース コーディングの質がUIの品質に大きく影響する リリース

  21. https://developers.google.com/web/fundamentals/performanc e/why-performance-matters?hl=ja パフォーマンスが重要なのはなぜか | Web Fundamentals

  22. 品質が悪くなる要因 • リソース不足 • 期限 • コードが書きづらい • レガシーコード •

    一貫したルールがない

  23. 品質が悪くなる要因 • リソース不足 • 期限 • コードが書きづらい • レガシーコード •

    一貫したルールがない コーディングの体験が損なわれている

  24. 開発のUXを改善するには？

  25. 開発のUXを改善するには？ • ツールの整備 • 自動化していく • レガシー環境の リファクタリング チーム

  26. 開発のUXを改善するには？ • ツールの整備 • 自動化していく • レガシー環境の リファクタリング • 自分の使っている道具に関心

    をもつこと(エディタとか) • プロセスに関心をもつこと チーム 個人

  27. デザイナー エンジニア コーディングに携わる の開発体験が プロダクトのUXの価値向上のために重要である 本発表の主張

  28. ご清聴ありがとうございました