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

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

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

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

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

June 03, 2020
Tweet

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. ご清聴ありがとうございました