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

ChatGPTを活用したUI勉強会のススメ

都村 美帆
November 02, 2023

 ChatGPTを活用したUI勉強会のススメ

都村 美帆

November 02, 2023
Tweet

More Decks by 都村 美帆

Other Decks in Design

Transcript

  1. ChatGPTを活用した

    UI勉強会のススメ
    2023.11.02
    sns
    @tsumu_design
    @tsumura_design

    View full-size slide

  2. 自己紹介
    1
    氏名
    都村 美帆
    職種
    UIUXデザイナー
    入社情報
    KDDI WILLコースUXデザイン 2022年度入社

    KDDI アジャイル開発センター兼務出向
    出身
    神奈川県相模原市
    趣味
    ゲーム、漫画、音楽、温泉

    イブ予定
    PE
    OPLE1

    View full-size slide

  3. 世は大生成AI時代!!!
    さまざまな活用事例が嵐のように降り注ぐ…!
    リサーチ 小説作成 CS 要約
    アイディア立案 文章作成 英会話 アプリ開発

    View full-size slide

  4. 英会話 アプリ開発 小説作成 CS リサーチ
    ChatGPTを応用すると出来ること
    じゃあデザインにはどう使えるの?!?!
    色々あるけど…

    View full-size slide

  5. そんな時に出会った神資料
    社内のChatGPT勉強会内で

    紹介されているのを発見!
    生成AI時代におけるUXデザイン | 生成AIをフル活用したUX設計手法&生成AI時代のユーザー体験の変化について

    View full-size slide

  6. UX設計で使えるプロンプトが掲載
    01. ペルソナ
    02. ユーザーストーリー
    03. 情報アーキテクチャ図
    04. LPの構成
    05. UIアニメーションのコード

    View full-size slide

  7. 使ってみたい!

    でも実務に使うにはハードルが…
    参考になる活用方法もわかったし、早速ChatGPTをデザ
    インプロセスに取り入れたいと思ったのですが、
    と実務に
    取り入れるにはハードルがあると感じていました…
    ソー
    スがわからなかったり正確さが曖昧だったり

    View full-size slide

  8. 勉強会なら活用できるのでは…!
    丁度勉強会やりたい
    と思ってたんだよね

    View full-size slide

  9. グループ/メンバーのUIデザインの課題
    UIデザイナー少ない…
    UIに携わる機会が多い割にプロパー
    社員でUIデザインができる人が少な
    いためナレッジが蓄積されにくい
    勉強法方法わからない!
    UIに興味あるけど勉強法がわから
    ず、実業務レベルまで持っていける
    自信がないとの声がチラホラ
    アウトプットの場少ない〜
    業務外でアウトプットの場が少なく
    自主的に実施してもレビューを貰い
    にくい上強制力がないと続かない…

    View full-size slide

  10. ChatGPTを活用したUI勉強会の開催が決定!
    ChatGPTを活用したUI勉強会の開催が決定!
    これらの背景を踏まえ
    これらの背景を踏まえ

    View full-size slide

  11. 目的
    H 実業務レベルで活躍できるUIデザイナーになるための足がかりの場を作@
    H UIデザインの技術を向上させ@
    H チーム内のUIレビューの質を向上させ、アウトプットの質を高める
    ゴール
    H 実業務でWF、UI、プロトタイプを独力で作成する能力を身につけ@
    H UIデザインに関する実業務レベルの知識を身につけ@
    H Figmaの使い方を理解し身につける

    View full-size slide

  12. ChatGPTの活用場所
    プロトタイプ
    ビジュアルデザイン
    スタイルガイド
    WF
    情報アーキテクチャ
    コンテンツ・機能要件
    ユーザーストーリー
    ペルソナ
    UIデザインの主要作業
    参加者
    必要最低限必要な上流部分
    ChatGPT

    View full-size slide

  13. 方針
    とにかく実践!習うより慣れよ!
    座学は挟まず、作る・レビュー・修正のサイクルをと
    にかく回すことで手を動かして技術力の向上を目指し
    ます!アクティブラーニングの方が定着率も高い…!

    View full-size slide

  14. ボリュームと人数
    1週間あたりの時間
    1時間
    業務も並行して実施している
    となるため負担にならない時
    間を設定
    最大参加人数
    5人
    レビューの時間を1人10分確
    保してマージンも考えると最
    大でも5人が限度と判断
    実施期間
    3ヶ月
    1つの成果物を作るのに3週間
    と設定し、4つ分作成できる
    ボリュームに設定

    View full-size slide

  15. プロセス
    3週間/成果物
    参加者が作るテーマを決
    めることで意欲UPを狙う

    View full-size slide

  16. 出力結果
    ペルソナ ユーザーストーリー 情報アーキテクチャ図

    View full-size slide

  17. プロセス
    3週間/成果物

    View full-size slide

  18. アウトプット
    WF スタイルガイド コメント機能を使って

    レビューをするよ!

    View full-size slide

  19. 3週間/成果物
    プロセス

    View full-size slide

  20. アウトプット
    UI

    View full-size slide

  21. 参加者からの感想
    ChatGPTすごい!
    みんなが共通でもつ疑問を

    共有できるのが良い
    会を重ねるごとに皆んなの

    レベルが上がっていってる!
    実務でも取り入れられる

    UIプロセスを学べる
    前段のイメージ(UX部分)を

    もっと固めてからUIを作りたい
    レビューが盛り上がりすぎて

    時間設定が難しい…
    宿題が大変
    GPTがうまくいかない

    こともある

    View full-size slide

  22. いきなりWF作成から入るとプロダクトの全体像
    を掴みにくかったり、ストーリーに共感しにくい
    今後の改善
    1成果物=4週間に修正
    ˜ 1週目:ChatGPTの出力結果を踏まえてUX面の深掘り、
    情報設計(画面遷遷移図や情報の洗い出しなどを実施”
    ˜
    ˜
    2週目:WF設s
    3週目:UI作成、スタイルガイド作成

    View full-size slide

  23. 情報の洗い出し
    今後の改善
    UXの深掘り
    オブジェクト名 旅行プラン
    I 名F
    I 日G
    I 目的@
    I 時5
    I 滞在時5
    I 出発時5
    I 到着時5
    I 変更履歴

    I 開X
    I 一時停P
    I 終了
    I 新規作d
    I 消s
    I 編f
    I アーカイa
    I 共有
    I 割かたを変更す…
    I アップロードす…
    I 入w
    I 編f
    I 消去
    I 新規作d
    I 消s
    I 編f
    I アーカイブ
    I 追f
    I 消s
    I 編集
    出費
    I 名F
    I 金s
    I (レシート写真t
    I グラグ、チャート
    お店・施設
    I 名F
    I カテゴ„
    I 住ƒ
    I
    I
    I
    I
    電話番
    営業時5
    定休’
    URL
    ナビゲーション
    I 経¦
    I 地¤
    I 到着時間
    ユーザー(参加者)
    I 名µ
    I アイコン
    プロパティ
    アクション
    ※ ※
    ※ ※

    View full-size slide

  24. 今後の改善
    UXの深掘り
    機能の洗い出し/深掘り

    View full-size slide

  25. 情報フロー図
    今後の改善
    UXの深掘り
    出費
    精算
    旅行開始
    目的地詳細
    ナビゲーション
    内容確認
    旅行プラン作成
    公開・共有
    文字入力
    文字入力・レシート入力
    確定

    View full-size slide

  26. UIフロー図
    今後の改善
    UXの深掘り

    View full-size slide

  27. 是非実施してみてね!
    プロンプトはnoteで公開中!

    View full-size slide