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

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

m-yoshiro
June 03, 2020

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

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

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

m-yoshiro

June 03, 2020
Tweet

More Decks by m-yoshiro

Other Decks in Design

Transcript

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

    View Slide

  2. #about-me {
       name: 松本 芳郎;
         twitter: @bennkyougirai;
       /*
        GMOペパボ株式会社
         デザイナー / UXエンジニアリング
       */
    }

    View Slide

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

    View Slide

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

    View Slide

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

    なんの話?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. 品質が悪くなる要因
    ● リソース不足
    ● 期限
    ● コードが書きづらい
    ● レガシーコード
    ● 一貫したルールがない
    コーディングの体験が損なわれている

    View Slide

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

    View Slide

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

    View Slide

  26. 開発のUXを改善するには?
    ● ツールの整備
    ● 自動化していく
    ● レガシー環境の
    リファクタリング
    ● 自分の使っている道具に関心
    をもつこと(エディタとか)
    ● プロセスに関心をもつこと
    チーム 個人

    View Slide

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

    View Slide

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

    View Slide