Downloaded 18 times
Uploaded byYoshiki Hayama
AIによってUXは変わるのか!? - 2024年7月26日 CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.1
2024年7月26日 クリーク･アンド･リバー社さま主催の「AIとUXデザインVol.1 ～AIによってUXは変わるのか？！～」のスライドです。 UXデザイナーであるとともに、2016年よりAIプロダクトのプロダクトマネージャーの仕事をしてきた経験から、AIがUXデザインにどんな影響を与えるのか、UXデザイナーの役割が今後にどのように進化していくのか、変化の波を乗り越えるための心構えをお話ししました。
More Related Content
Similar to AIによってUXは変わるのか!? - 2024年7月26日 CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.1
AIによってUXは変わるのか!? - 2024年7月26日 CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.1
- 1. AIによってUXデザインは変わるのか!? 2024年7月26日（金） 1 Twitterの ハッシュタグは #CR社 画面キャプチャ 投稿OK！ 代表取締役CEO / HCD-Net認定人間中心設計専門家 配信のチャットで いっしょに 盛りあがってね CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.1 羽山 祥樹 @storywriter
- 2.
- 3.
- 4. 4 引用: ふたりの愛ランド -石川優子とチャゲ 夏 夏 ナ ツ ナ ツ コ コ 夏 愛 愛 ア イ ア イ 愛 ラ ン ド
- 5.
- 6. 羽山 祥樹 @storywriter 6 日本ウェブデザイン株式会社代表取締役CEO 使いやすいプロダクトをつくる専門家 HCD-Net認定 人間中心設計専門家 Web業界に25年、AIシステムのプロダクトマネージャーとUXデザインを7年 主な実績など 2009年 日経パソコン 企業サイトランキング2009 日本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 日本の大手企業150サイト中、第4位 主な専門分野 ユーザーエクスペリエンス、人間中心設計、情報アーキテクチャ、アクセシビリティ、ライター
- 7. 7 現場で使える! Watson開発入門 Watson API、WatsonStudioによるAIアプリ開発手法 Amazonで購入 https://www.amazon.co.jp/dp/4798158496/ UXデザイナーですが AI の本を執筆したりも しています
- 8.
- 9.
- 10. 10 先ほどの動画は 千凪みかさん 「歌ってみた」新曲 『またねがあれば』 のMVです 羽山が制作をさせていただいています（制作中）
- 11. 11 お気づきでしょうか この動画、じつは100%、生成AIでつくっています 実写のシーンはひとつもありません 使用している生成AI: • Midjourney V6(alpha) •Midjourney V5.2 • Runway Gen-2 • Runway Gen-1 • Adobe Firefly
- 12.
- 13. 13 動画生成は Stable Diffusionではじめたが コードを書く量が多く、時間がかかった Stable Diffusion Web UI Google Colab でスタート Stable Diffusion Web UI に LoRAが読み込まれない致命的バグ GitHubのIssuesを見ても 的外れなバグ報告しかない ソースコードを読んで エラー箇所を特定し修正 修正コードをGitHubの Issuesにコメント devブランチにマージされる 動画生成が進まない
- 14.
- 15. 15 羽山は2016年から AIプロダクトの PdM（註）兼 UXデザイナーとして7年 「実務でAIにさわってデザインしているUXデザイナー」 としてはおそらく国内でも古参 註:PdM = プロダクトマネージャー（Product Manager）の略称
- 16.
- 17.
- 18.
- 19. 告知：第2回 セミナー 2024年８月30日（金） 19 本日（第1回）では「AIとUXデザイン」 の概観をお話します。次回のセミナー （8月30日・金）では 「AIをどのようにUXデザインに活用できるのか」 の具体的 なイメージをお話します。ぜひあわせてご参加ください！（無料） https://www.creativevillage.ne.jp/category/crv_event/149437/
- 20.
- 21.
- 22.
- 23. 23 “UXデザイン” や “UXリサーチ”とは 見た目のデザインのことではなく ユーザーインタビューやユーザビリティテストをつかって ユーザーの深い心理を突きとめる専門技術
- 24. インタビュー？ なにそれ？ Photoshop? なにそれ？ “UXデザイン・UXリサーチ” と “UIデザイン” 24 “UI/UX”と併記されがちなUXデザインとUIデザインですが、まったく別のものです。 ユーザーインタビュー ユーザビリティテスト Photoshop Illustrator UXデザイナー UIデザイナー
- 25.
- 26. 羽山の “UXデザイン・UXリサーチ” の事例 26 ユーザーインタビューをしたところ・・・ •ユーザーはふだん暮らしているとき、床材のことなど考えもしない。 • 床の痛みは、そういうものだと諦めている。
- 27. 羽山の “UXデザイン・UXリサーチ” の事例 27 ユーザーインタビューをしたところ・・・ •ただし10年に1度くらい、およそ2ヶ月間だけ購買を検討しうる期間がある。
- 28. 羽山の “UXデザイン・UXリサーチ” の事例 28 ユーザーインタビューをしたところ・・・ •それは 「リフォーム or 新築購入」 をしてから 「入居」 するまでの間。 • そのあいだは 「家が新品」 「部屋が空っぽ」 になる。 • ピカピカの床を見て、ユーザーは「今度こそ」と思う。床材のニーズが生まれる。 今度こそ
- 29. 羽山の “UXデザイン・UXリサーチ” の事例 29 ユーザーインタビューをしたところ・・・ •入居して「床に家具をおいてしまう」と、面倒でもう購入しない。 • 「リフォーム or 新築購入」 をしてから 「入居」 するまでリミットはおよそ2ヶ月間。 もういいや 面倒くさい
- 30. 羽山の “UXデザイン・UXリサーチ” の事例 30 ユーザーインタビューをしたところ・・・ •内装資材なので、ゼネコンから紹介されるのが、ほぼ唯一の接点。 床材 イイっすよ
- 31. 羽山の “UXデザイン・UXリサーチ” の事例 31 じつは、そのスタートアップ企業は 「ゼネコンの下請け」に入るのを避けようとしていました。 足を取られやすい（クレームなどが丸投げされてくる）からです。 しかし、羽山の調査結果を受けて、 『ユーザーへの唯一の接点』 がゼネコンのため、 かかわりを避けられないと覚悟し 「建設業界とうまく折衝していく」 という事業判断をしました。
- 32.
- 33.
- 34.
- 35.
- 36. “UXデザイン” や “UXリサーチ”の位置づけ 36 典型的なウォーターフォールシステム開発のフローを浮かべたとき “UXデザイン” や “UXリサーチ” は要件定義フェーズの「前」にやるのが、もっとも効果が発揮しやす い。外部設計フェーズでやるのは “UXデザイン” ではなく “UIデザイン” です。 要件定義 外部設計 内部設計 製造 テスト リリース “UXデザイン” や “UXリサーチ” ここでやるのは “UIデザイン”
- 37.
- 38.
- 39.
- 40.
- 41. 言語生成・チャット 41 ChatGPT Gemini Claude 引用:https://openai.com 引用: https://gemini.google.com/?hl=ja 引用: https://claude.ai
- 42. 画像生成 42 DALL・E Midjourney StableDiffusion 引用: https://openai.com/index/dall-e-3/ 引用: https://www.midjourney.com/ 引用: https://ja.stability.ai/stable-diffusion 引用: https://www.adobe.com/jp/products/firefly.html Adobe Firefly
- 43. Runway Luma DreamMachine Leonardo 動画生成（その1） 43 引用: https://runwayml.com/ 引用: https://lumalabs.ai/dream-machine 引用: https://leonardo.ai/ 引用: https://pika.art/ Pika
- 44.
- 45. 音楽生成・音声合成・リップシンク 45 引用: https://suno.com/ 引用: https://coefont.cloud/ 引用:https://voicevox.hiroshiba.jp/ 引用: https://www.heygen.com/ Suno CoeFont VOICEVOX HeyGen
- 46.
- 47.
- 48. Microsoft Office 48 Copilot forMicrosoft 365 引用: https://www.microsoft.com/ja-jp/microsoft-365/business/copilot-for-microsoft-365 引用: https://www.microsoft.com/ja-jp/microsoft-copilot Microsoft Copilot Microsoft Copilot は OpenAI ChatGPT の OEM
- 49. いろんなツールに組み込まれたAI 49 引用: https://www.notion.so/ja-jp/product/ai 引用: https://www.figma.com/ja-jp/ai/ 引用:https://www.canva.com/ja_jp/features/generative-ai/ Notion AI Figma AI Canva AI
- 50.
- 51.
- 52. 52 ITと AIの差は コードでプログラミングするか、データでプログラミングするか コードでプログラミングする データでプログラミングする if... then ... else ... 犬 いぬ ワンコ
- 53. 53 データでプログラミングする とはなんでしょうか？ 「犬」 と「猫」 の写真を判定するシステムを 考えてみましょう 犬 猫
- 54. 「犬」 の写真をコードで判定する 54 if 足が4本: if耳がある: if 鼻がある: if 目がある: if 口がある: ・・・
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. AIでタスクを自動化（Automation）する 60 次のようなときは、AIでタスクを自動化するとよい。 • 人間にタスクをするための知識や能力や余裕が足りないとき。 • タスクが退屈、くりかえし、扱いにくい、または危険なとき。 例： •よくある問い合わせに自動で回答文を送る。 • ベルトコンベアで流れてくる製品から不良品を見つける。 • 建物内のガス漏れを検知する。
- 61. 人間の能力を拡張（Augmentation）する 61 次のようなときは、AIで人間の能力を拡張するとよい。 • 人間がタスクの結果に責任を持ちたいとき。 • 人間がタスクを楽しんでいるとき。 •利害が大きいとき。 例： • 重要な問い合わせに人間がうまく答えられるよう回答候補を出す。 • 絵を描くときに配色のアイデアをレコメンドしてくれる。 • リスクの大きい株式投資の判断を人間がするための情報を集める。
- 62. 62 AIは 「あたりまえになると AIと呼ばなくなる」 たとえばGoogle サジェストは 25年前なら AIと呼ばれたかもしれない いまや誰も AIだと思ってない 引用: https://www.google.com/
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. 77 渡邊 恵太 先生の 「融けるデザインハード×ソフト×ネット時代の新たな設計論」 画面引用: https://bnn.co.jp/products/9784861009389
- 78. 78 渡邊 恵太 先生の 「融けるデザインハード×ソフト×ネット時代の新たな設計論」 引用: 融けるデザイン ハード×ソフト×ネット時代の新たな設計論,渡邊 恵太, 2015 ハードウェア、ソフトウェア、 インターネットが融け合う、 身体的で体験的なものづくりの時代には、 新しい設計方法論が求められる。 たしかに！
- 79. 79 引用: 融けるデザイン ハード×ソフト×ネット時代の新たな設計論,渡邊恵太, 2015 1946年 ENIAC 1989年 Web 2007年 iPhone 2015年 融けるデザイン 1946 1950 1960 1970 1980 1990 2000 2010 2020 2023 ハードウェア、ソフトウェア、 インターネットが融け合う、 身体的で体験的なものづくりの時代には、 新しい設計方法論が求められる。 たしかに！ 2024年の俺
- 80. 80 引用: 融けるデザイン ハード×ソフト×ネット時代の新たな設計論,渡邊恵太, 2015 1946年 ENIAC 1989年 Web 2007年 iPhone 1946 1950 1960 1970 1980 1990 2000 2010 2020 2023 もしも「融けるデザイン」が1957年に出版されていたら ハードウェア、ソフトウェア、 インターネットが融け合う、 身体的で体験的なものづくりの時代には、 新しい設計方法論が求められる。 1957年 融けるデザイン
- 81. 81 引用: 融けるデザイン ハード×ソフト×ネット時代の新たな設計論,渡邊恵太, 2015 1946年 ENIAC 1989年 Web 2007年 iPhone 1946 1950 1960 1970 1980 1990 2000 2010 2020 2023 もしも「融けるデザイン」が1957年に出版されていたら ハードウェア、ソフトウェア、 インターネットが融け合う、 身体的で体験的なものづくりの時代には、 新しい設計方法論が求められる。 なんの話？ 1957年 融けるデザイン 67年前の人
- 82. 82 2012年 ディープラーニング 2023年 GPT-4 2073年 ？？？ 2012 2020 20302040 2050 2060 2070 2080 2090 2092 AIにおきかえると？ 2055年 ？？？ 2024年 俺らはイマココ 2045年 シンギュラリティ
- 83. 83 2012年 ディープラーニング 2023年 GPT-4 2073年 ？？？ 2012 2020 20302040 2050 2060 2070 2080 2090 2092 AIにおきかえると？ 2055年 ？？？ 2045年 シンギュラリティ AIでUXデザインが変わる！ たとえば... 2024年 俺らはイマココ
- 84. 84 2012年 ディープラーニング 2023年 GPT-4 2073年 ？？？ 2012 2020 20302040 2050 2060 2070 2080 2090 2092 AIにおきかえると？ 2055年 ？？？ 2045年 シンギュラリティ どのくらい確実な 未来への指針が 含まれうるのだろう？ AIでUXデザインが変わる！ たとえば... 2024年 俺らはイマココ
- 85. 85 2012年 ディープラーニング 2023年 GPT-4 2073年 ？？？ 2012 2020 20302040 2050 2060 2070 2080 2090 2092 AIにおきかえると？ 2055年 ？？？ 2045年 シンギュラリティ 2055年 Webに相当する なにかが登場する 2073年 iPhoneに相当する なにかが登場する 2024年 俺らはイマココ
- 86. 86 2012年 ディープラーニング 2023年 GPT-4 2073年 ？？？ 2012 2020 20302040 2050 2060 2070 2080 2090 2092 AIにおきかえると？ 2055年 ？？？ 2045年 シンギュラリティ 2055年 Webに相当する なにかが登場する 2073年 iPhoneに相当する なにかが登場する 2024年 俺らはイマココ 31年後に Web が 49年後に iPhone が出るが 私たちはそれを知るすべはない
- 87. 2024年 俺らはイマココ 87 マクロな視点で見たとき 私たちは AI が人類に普及する80年間の まだ11年目にいるにすぎない 20122020 2030 2040 2050 2060 2070 2080 2090 2092
- 88.
- 89. 89 この先の70年で AI をとりまく状況は 何度も変わり、そのたび新しいデザイン手法が必要になる しかし1957年にWebもiPhoneも予測できないように それがなんであるかは予測できない 20122020 2030 2040 2050 2060 2070 2080 2090 2092 2024年 俺らはイマココ
- 90.
- 91.
- 92.
- 93. 93 2010年 jQueryが席巻 2018年 Angular, React, Vue 20102015 2020 2025 フロントエンド技術の流行 2024年 俺らはイマココ 2024年 React 一強
- 94.
- 95. 95 2018年、Angular, React, Vueの三国時代 そのとき、この質問に正確に答えられた人はいるだろうか？ 5年後のJavaScriptは どうなっていますか？
- 96.
- 97.
- 98. 98 2016年 IBM Watson 2020年 DeepL 2015 20162017 2018 2019 2020 2021 2022 2023 2024 2025 AI技術の流行 2024年 俺らはイマココ 2023年 GPT-4 2022年 DALL-E 2, Midjourney, Stable Diffusion
- 99. 99 2016年、IBM Watson が世界中の注目を浴びる 当時はNatural Language Classifier, Retrieve and Rank の2サービスのみ そのとき、この質問に正確に答えられた人はいるだろうか？ 8年後のAIは どうなっていますか？
- 100.
- 101. 101 2022年、画像生成AIが次々と発表 DALL-E 2, Midjourney,Stable Diffusion そのとき、この質問に正確に答えられた人はいるだろうか？ 2年後のAIは どうなっていますか？
- 102. 102 2022年末、ChatGPT が OpenAIより公開 まだ1年半ほどしかたっていません GPT-4 は 2023年3月です この質問に正確に答えられる人はいるだろうか？ 1年後のAIは どうなっていますか？
- 103. 2015 2016 20172018 2019 2020 2021 2022 2023 2024 2025 2024年 俺らはイマココ 103 タイムボックスを短く区切っても AI技術の流行は猛スピードで変化している 1年後すら正しく予測できない
- 104.
- 105. 105 70年後までにAIの分野で 「インターネット」 や 「iPhone」にあたる革新が起こるが それがなんなのか2024年現在で予測するのはムリ
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120. 120 AI を用いて UXデザインの 「切片化」「親和図法」 を支援するツール
- 121. AIで切片化・親和図法を支援するツール 『toitta』 121 UXデザイン・UXリサーチで用いられる 「親和図法」や 「KA法（本質的価値抽 出法）」 は優れた定性分析の手法である代わりに、切片（ふせん）の書き出し と整理に時間がかかるのが悩みでした。 AIで切片化・親和図法を支援するツール 『 toitta 』 が 株式会社はてな 様か らリリースされます！
- 122.
- 123.
- 124.
- 125.
- 126.
- 128.
- 129.
- 130.
- 131. まとめ 131 1. AIでUXデザインの『設計方法論』は刻々と変わるにちがいないが、それがなん であるかを見通すことはムリ。将来予測の議論にはあまり意味がない。 2. 「今日のAI技術とUXデザインはどう組み合わせられるか」という議論であれば 適切な答えがある。「AIとUXデザイン」について語るなら「未来について語るな、 今日について語れ」 3.ユーザーを中心に考えるという意味においては「AIでUXデザインは変わらな い」。何十年経ってもその姿勢は普遍。 4. toittaはいいぞ。
- 132. 次回予告 132 本日は 「AIとUXデザイン」 の概観をお話しました。次回の第2回セミナー（8月 30日・金）では「AIをどのようにUXデザインに活用できるのか」 の具体的なイメー ジをお話します。ぜひご参加ください！（無料） https://www.creativevillage.ne.jp/category/crv_event/149437/
- 133.
- 134. 羽山のプレゼンのアレ が、 LINEスタンプになりました！ スタンプ名：ハーミィ（CSS編） 作者名：羽山祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類