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

UIを完全に理解して、 プロダクトをチョット良くする

Ushijima Kazuto
October 25, 2022

UIを完全に理解して、 プロダクトをチョット良くする

Ushijima Kazuto

October 25, 2022
Tweet

More Decks by Ushijima Kazuto

Other Decks in Design

Transcript

  1. UIを完全に理解して、

    プロダクトをチョット良くする
    Kazuto Ushijima
    2022/10/26 UI/UXデザイナーLT会 - vol.9

    View full-size slide

  2. È 牛嶋一登 / Kazuto Ushijima / tojima
    È バックエンドエンジニア@ファンコミュニケーションズ
    È 趣味はランニングとサウナ
    È 今週末、BMWのバイク納車予定
    @tojima
    自己紹介

    View full-size slide

  3. 背景
    プロダクトの新規機能開発時、以下のようなサイクルが回る
    デザインワカラン 意思決定しづらい プロダクトがダサい

    View full-size slide

  4. 9 「デザイン(UI)完全に理解した」を目指T
    9 「完全に理解した」製品を利用をするためのチュートリアルを完了で
    きたという意味1
    9 引用: https://twitter.com/ito_yusaku/
    status/1042604780718157824
    9 プロダクトをチョット良くする
    目標

    View full-size slide

  5. 取り組み

    View full-size slide

  6. やったこと
    デザイン4原則
    OOUI
    Bonoの課題

    View full-size slide

  7. Before → After
    開始前
    Bootstrapを使っただけ
    ゴリゴリのタスク指向

    View full-size slide

  8. Before → After
    1ヶ月後
    ' 音声SNSアプリ Soundia
    ' デザイン4原則の理解
    【UIデザイン】 音声SNSアプリを作ってみました

    View full-size slide

  9. Before → After
    現在(5ヶ月後)
    ( 経費申請 Expenses
    ( OOUIの理解と実践
    【UIデザイン】出張申請サービス(申請作成)をデザイン

    View full-size slide

  10. 改善
    ややこしいデザイン箇所の修正
    役割に応じたコンポーネントの提案

    View full-size slide

  11. プロダクト改善
    ややこしいデザイン箇所の修正
    テキスト
    別タブを開く
    削除 テキスト
    別タブを開く
    削除

    View full-size slide

  12. プロダクト改善
    " 役割に応じたコンポーネントの提案
    例: ステータスの変更に適切なコンポーネントは?
    Button
    Button
    Toggle CheckBox

    View full-size slide

  13. 改善
    ややこしいデザイン箇所の修正
    役割に応じたコンポーネントの提案
    プロダクトがチョット良くなった
    評価と給料が上がった
    結果として

    View full-size slide

  14. 結果
    デザイン(UI)完全に理解した
    プロダクトのデザインで理由のある意見を出せるようになった
    普段使っているアプリのデザインを観察するようになった
    個人開発のモチベが上がった

    View full-size slide

  15. これから
    UIの知識を深めていきたい
    タスク指向UI → オブジェクト指向UI
    グラフィックデザイン力の向上

    View full-size slide

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

    View full-size slide