Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Yoshiki Hayama, profile picture
Uploaded byYoshiki Hayama
710 views

AIを上手にUXデザインに活かすために - 2024年8月30日 CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.2

2024年8月30日 クリーク･アンド･リバー社さま主催の「AIとUXデザインVol.2 ～AI を上手に UXデザインに活かすために～」のスライドです。 UXデザイナーであるとともに、2016年よりAIプロダクトのプロダクトマネージャーの仕事をしてきた経験から、Vol.1の「AIとUXデザイン」概論をふまえ、2024年現在ではAIをどのようにUXデザインに活用できるのかの具体的な事例に焦点をあてお話をしました。

Design◦
Downloaded 23 times
AIを上手に UXデザインに活かすために 2024年8月30日（金） 1 Twitterの ハッシュタグは #CR社 画面キャプチャ 投稿OK！ 代表取締役CEO / HCD-Net認定 人間中心設計専門家 配信のチャットで いっしょに 盛りあがってね CREATIVE VILLAGE セミナー 「AIとUXデザイン」 Vol.2 羽山 祥樹 @storywriter
「チャット」で盛りあがろう！ 2 チャット チャットへ どんどん書いてね！ （Twitter感覚で） 「全員」 で送信！ Q&Aに 投稿したものは 質疑応答で 答えます Q&A
「チャット」で盛りあがろう！ 3 さいしょに「チャットに投稿する練習」をしています！ 今回はどうしようかなと思いまして・・・
4 メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ メ ケ
「全員」で送信 「チャット」で盛りあがろう！ 5 メケメケメケメケ メケメケメケメケ メケメケメケ 練習 ・・・と投稿してみよう!! 「メケ」の数は 心意気で自由だよ！
6 おまえは何を言っているんだ 毎週日曜19:00は! UXデザイン祭り
羽山 祥樹 @storywriter 7 日本ウェブデザイン株式会社 代表取締役CEO 使いやすいプロダクトをつくる専門家 HCD-Net認定 人間中心設計専門家 Web業界に25年、AIシステムのプロダクトマネージャーとUXデザインを7年 主な実績など 2009年 日経パソコン 企業サイトランキング2009 日本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 日本の大手企業150サイト中、第4位 主な専門分野 ユーザーエクスペリエンス、人間中心設計、情報アーキテクチャ、アクセシビリティ、ライター
8 現場で使える! Watson開発入門 Watson API、Watson StudioによるAIアプリ開発手法 Amazonで購入 https://www.amazon.co.jp/dp/4798158496/ UXデザイナーですが AI の本を執筆したりも しています
9 これまでのあらすじ
10 To Be Continued 君 が ッ Ａ Ｉ を 理 解 す る ま で 殴 る の を や め な い ッ
11 羽山は2016年から AIプロダクトの PdM（註）兼 UXデザイナーとして7年 「実務でAIにさわってデザインしているUXデザイナー」 としてはおそらく国内でも古参 註: PdM = プロダクトマネージャー（Product Manager）の略称
12 しかし、AIへの勘どころをもつゆえに 「AIでUXデザインはどう変わりますか？」 という質問には慎重になります 世論は AIへの期待、目先の技術に感動する人たち AIで世界が変わってほしい人たち、プロ驚き屋 映画やアニメに影響された悲観論 よくわからないものへの不安 いろんな感情や思惑がうずまいています
13 今回のセミナー（第1回・第2回）は ひとつひとつの要素をときほぐしながら 「AIとUXデザイン」 はどのように考えるべきか 思考を深めています
ま だ あ わ て る よ う な 時 間 じ ゃ な い
15 70年後までにAIの分野で 「インターネット」 や 「iPhone」 にあたる革新が起こるが それがなんなのか2024年現在で予測するのはムリ
16 AIの技術は毎年、新しいものに移り変わるが それがなんなのか予測するのもムリ
17 「AIでUXデザインは変わるのか」 という問いへの回答は 「刻々と変わるにちがいないが それがなんであるかを見通すことはムリ 将来予測の議論はあまり意味がない」 2024年現在は AIへの期待が煽られすぎて 1年後と70年後の話が 混ざって語られがち
18 裏返すと 「今日のAI技術とUXデザインはどう組み合わせられるか」 という議論であれば適切な答えがある
19 羽山の見解は 「AIとUXデザイン」 について語るなら 「未来について語るな、今日について語れ」
20 “UXデザイン” や “UXリサーチ” とは 見た目のデザインのことではなく ユーザーインタビューやユーザビリティテストをつかって ユーザーの深い心理を突きとめる専門技術
インタビュー？ なにそれ？ Photoshop? なにそれ？ “UXデザイン” と “UIデザイン” 21 “UI/UX” と併記されがちなUXデザインとUIデザインですが、まったく別のものです。 ユーザーインタビュー ユーザビリティテスト Photoshop Illustrator UXデザイナー UIデザイナー
“UXデザイン”とは 22 UXデザインとは、ユーザーを理解することで 「我々はなにをつくるべきか」 「我々はなにをするべきか」 を 明らかにする専門技術です。
“UIデザイン”とは 23 UIデザインとは、デジタル製品（ウェブサイト、アプリ…）の 画面の構成やビジュアルをつくる専門技術です。
“UXデザイン” や “UXリサーチ” の位置づけ 24 典型的なウォーターフォールシステム開発のフローを浮かべたとき “UXデザイン” や “UXリサーチ” は要件定義フェーズの「前」にやるのが、もっとも効果が発揮しやす い。外部設計フェーズでやるのは “UXデザイン” ではなく “UIデザイン” です。 要件定義 外部設計 内部設計 製造 テスト リリース “UXデザイン” や “UXリサーチ” ここでやるのは “UIデザイン”
じゃあなんで “UI/UX” ってよく書いてあるの？ 25 「UX」という概念は、もともとUIの専門家たちから提唱されたからです。 そのため、混ざって話されてしまうことが多かった。今もそれを引きずっています。 UXの専門家には “UI/UX” という表記を好まない方もいます。
26 UIデザインの作業工程を AI で革新するテクニック
27 “UIデザイン” の作業工程を AI で支援するテクニックの実例を いくつか見ていきます
プロダクトの要件定義〜画面遷移図まで一気に生成 28 引用: https://x.com/marimamiac/status/1813760328095920429 マリコさん @marimamiac
プロダクトの要件定義〜画面遷移図まで一気に生成 29 Claude という LLM（大規模言語モデル）をつかって、要件定義・機能一覧・ UML図・パターン別のユーザーフロー図・各ワイヤーフレーム画面作成、サービス全 体の画面遷移図を 2時間でつくる。 引用: https://x.com/marimamiac/status/1813760328095920429
Claude 30 引用: https://claude.ai Claude（Anthropic社）は ChatGPT（OpenAI社）, Gemini（Google 社） と並ぶメジャーな LLM のひとつ。 https://claude.ai
かんたんなデモ（Claude） 31 引用: https://claude.ai CSSフレームワークのBootstrapを用いて、1ページもののWebページをコーディングして。titleは「いぬの魅力」で、本 文には犬の魅力を3つにまとめて記載して。
Webアプリケーションを一気に実装する（v0） 32 v0（Vercel社）は Claude に似た画面のAI。React, Next.js, Tailwind CSS を用いてWebアプリケーションを実装する。 https://v0.dev 引用: https://v0.dev
かんたんなデモ（v0） 33 引用: https://v0.dev Please implement a time clock app for a smartphone. **Requirements:** - At the top of the app screen, there should be a button labeled "Clock In/Out." When tapped, the current time is recorded. The first tap records the time as "Clock In" and the second tap as "Clock Out." After two taps, the "Clock In/Out" button becomes inactive and cannot be tapped again until 5:00 AM the following day. - The lower portion of the app screen, starting from the middle downwards, should display a list format calendar (a list with separate rows for each day). The calendar should allow users to view entries up to two months in the past. - The history of clock-in and clock-out times should be displayed in the corresponding rows of the calendar. Next to each clocked time, there should be an "Edit" icon. When the "Edit" icon is tapped, the recorded time can be modified using EditInPlace. - Demo data for the last 6 days, starting from yesterday, should be pre-registered.
かんたんなデモ（v0） 34 引用: https://v0.dev
画像→動画を一気につくる（Midjourney, Runway） 35 画像生成AI の Midjourney で元画像をつくって、動画生成AI の Runway で動画にする。 https://www.midjourney.com 引用: https://www.midjourney.com 引用: https://runwayml.com https://runwayml.com
Midjourney で画像を生成する 36 correct anatomy, masterpiece, dramatic scene of cel animation directed by Mamoru Hosoda, the live rock music show, the extreme close-up portrait of the side face of the lady singing and screaming into the microphone, high passionately, she is leaning forward --no melted object --ar 16:9 --style raw --stylize 1000 --v 6.1 素材画像 この画像自体もまえに Midjourney で生成したやつ
画像を Runway で動画にする 37 Slow pan and close-up portrait: cel animation of the lady singing, cinematic scene lens flare in the live rock music show. the lady is screaming a rock song with dynamic motion into the microphone, the lady is smiling as she talks, the lady blinking.
画像を Luma Dream Machine で動画にする 38 Slow pan and close-up portrait: cel animation of the lady singing, cinematic scene lens flare in the live rock music show. the lady is screaming a rock song with dynamic motion into the microphone, the lady is smiling as she talks, the lady blinking. Luma Dream Machine 引用: https://lumalabs.ai/dream-machine 動画生成AI では Luma Dream Machine も人気。こちらでも試してみる。
さらに Sunoで音楽をつける 39 Emotional rock music with a female rock vocalist and electric guitars, everyone gets excited at the music festival 音楽生成AI の Suno で歌をつける。 引用: https://suno.com/ Suno
40 ただし、細部が「作画崩壊」しているので 実用には、たいへん工夫と手間がいります ちなみに、羽山がいろいろ試した体感では AI がいちばん作画が苦手なのは「人体」 人間が苦手なものは AI も苦手
41 AIはイラストレーターの代わりになるか ベテランデザイナーに作品を添削してもらった
42 じっさいのところ、どれくらいおかしいのでしょう？ Midjourney で生成したバスケットボール選手の画像を プロのデザイナーに添削してもらいました
43 AI生成
44 プロデザイナーの添削後
AI生成 プロデザイナーの添削後 構造物の破綻 現実世界で正しくないサイズ・色味 人体の破綻 物理的におかしい服のシワ 物理的におかしいスソのなびきかた 45 構造物の破綻
46 それなりに作画崩壊していた！ 2024年8月現在は、画像も動画も こまかい不整合を自分で修正できないと 実用にならない じつはプログラミングでも同じ
47 2024年8月現在は AI により ベテランの能力を飛躍させることはできるが 素人がベテランになることはできない たとえば素人は人体解剖学を修めていないので 人体の破綻箇所を見つけられない
48 「AIとUXデザイン」 と言ったとき どちらの話をしているのか？
49 「AIとUXデザイン」といったとき、どちらの意味でしょう？ 「AIとUXデザイン」 プロダクトに AIを組み込んで ユーザーにしっかりと 価値が届くようにする UXデザインの 作業工程それ自体を AIで革新する
50 【1】 プロダクトに AIを組み込んで ユーザーにしっかりと価値が届くようにする
51 AIの活用パターンは大きく2つ タスクを自動化（Automation）する 人間の能力を拡張（Augmentation）する Automation 自動化 Augmentation 拡張
AIでタスクを自動化（Automation）する 52 次のようなときは、AIでタスクを自動化するとよい。 • 人間にタスクをするための知識や能力や余裕が足りないとき。 • タスクが退屈、くりかえし、扱いにくい、または危険なとき。 例： • よくある問い合わせに自動で回答文を送る。 • ベルトコンベアで流れてくる製品から不良品を見つける。 • 建物内のガス漏れを検知する。
人間の能力を拡張（Augmentation）する 53 次のようなときは、AIで人間の能力を拡張するとよい。 • 人間がタスクの結果に責任を持ちたいとき。 • 人間がタスクを楽しんでいるとき。 • 利害が大きいとき。 例： • 重要な問い合わせに人間がうまく答えられるよう回答候補を出す。 • 絵を描くときに配色のアイデアをレコメンドしてくれる。 • リスクの大きい株式投資の判断を人間がするための情報を集める。
54 2019年、Google の People + AI Research (PAIR) チームが AIプロダクトにおける UXデザインの注意点をまとめた 「People + AI Guidebook」を発表 羽山が日本語訳して国内へ紹介 （邦題：人にうれしいAIのためのUXデザインガイド） 引用: https://pair.withgoogle.com/guidebook
AIプロダクトでよくつまづくデザイン例：確信度 55 分類モデル（classification）のAIは自身の出力に「confidence: 確信度」と いう数字をそえます。確信度とは「AIは自身の回答にどれくらい自信があるかを示 す値」で、0%〜100%のあいだをとります。「回答の精度」と理解いただいても、今 日のところはかまいません（厳密には異なります）。 AIエンジニアは、この数字を1%でも上げるべく、日々、汗水流しています。 「UXデザインの教科書」 の著者は誰？ 著者は安藤忠雄です 確信度: 43% AIエンジニア ※正解は安藤昌也先生です
AIプロダクトでよくつまづくデザイン例：確信度 56 AIプロダクトでよくある失敗デザインのひとつは「確信度」をそのままユーザーに見せ てしまうケースです。たとえば毒キノコを判定するAIで「写真Aのキノコは食べられま す、確信度:86%」と「写真Bのキノコは食べられます、確信度:81%」というメッ セージが出たとします。ユーザーは86%と81%の差の5%という数字を見ても、そ れが万が一の健康被害につながる問題なのか、そこまで心配しなくていい差なのか わかりません。ユーザーはAIの「確信度」がどういうものかそもそも知らないからです。 毒キノコ判定AI 写真Aのキノコは食べられます、確信度:86% 写真Bのキノコは食べられます、確信度:81% この 5%はつまりどれくらい 信じていいの？ 外すと俺 死ぬんだけど
AIプロダクトでよくつまづくデザイン例：確信度 57 確信度をユーザーに見せる場合、ユーザーにとって理解できる表現に置き換えて見 せるようにします。 毒キノコ判定AI たぶん食べられるけど 万が一があったらごめん 食べられるか微妙なので 食べるなら自己責任で どっちも 食べちゃダメだろ コレ！ いや！ どっちも怖えーよ！ 正しい意思決定。 分類AIの確信度86%では 健康被害が出かねない判断の 実用には適さない。
毒キノコ判定AI これはAIに限ったデザイン課題なのか？ 58 AIと確信度はセットで出てくるので、AIプロダクトのデザイン課題に挙がりやすい、と いう点はあります。しかし確信度のデザインは、じつは本質的には「提供側が考えた 勝手な数値や程度の表現がユーザーに伝わらない」という、私たちがこれまでいくど となく遭遇してきたデザイン課題であり、AI特有の問題ではありません。 提供者 ユーザー カッコいい デザインのアプリを つくるぞ！ アイコンも 凝るぞ！ え、なんで乾電池で 表現されているの！？ 食べれるのどうなの？
「AIだから」というデザイン課題は存在しない 59 AIプロダクトでよく遭遇するデザイン課題をひとつひとつ取り上げて眺めてみると、 「AIだから」という課題は存在しないということに気がつきます。情報の発信元がAI か否かに関係なく、インターフェースを通して提示された情報がユーザーに理解され なかったり、誤解されたり、不信感をもたせたり、あるいは誤った操作を誘発したり、 という現象があるだけです。 AI インターフェース ユーザー AI以外の システム 情報の発信元が AIか否かにかかわらず 情報提示が下手だと ユーザーは混乱する
ユーザー体験の改善に AI を上手く用いた事例 60 メルカリは「出品したらすぐ売れた」という初回のユーザー体験が、ユーザーの2回目 の利用につながる重要な鍵。しかし「出品したらすぐ売れる」ためには「相場にあった 値づけ」が必須。ところがユーザーは自分が出品するものの相場感を知らない。 そこでメルカリではスマホのカメラで出品物を撮影するだけで、AIで画像認識し、そ の出品物の「売れやすい価格」をレコメンドするようにしている。 うれしい体験 うれしくない体験 出品したら 15分で売れた！ すごい！ 次も使おう 出品したけど ぜんぜん売れない もういいや 使わない 適正な値づけ 不適正な値づけ
ユーザー体験の改善に AI を上手く用いた事例 61 画面引用: メルカリ スマホアプリ メルカリの「相場価格」をレコメンドするAI 売りたい品を 撮影 AIの画像認識で 商品を推定 必須項目を 入力 売れやすい価格 が表示される
ユーザー中心の思考と AI は相性が悪い 62 ユーザーの課題を起点にデザインをしていくとき、解決手段をあらかじめ限定（「AI を使おう」など）とすると、ユーザー体験に無用なものができやすい。 たとえば: • ユーザーの課題: バニラアイスクリームが食べたい • 解決手段を限定: 絶対にラー油を使うこと • 結論: ラー油がけバニラアイスクリーム？ バニラアイスクリームが食べたい人にはすなおにアイスを渡せばよい。ラー油はいらな い。同じように解決手段を「AIを使うこと」に限定してユーザー中心のデザインをしよ うとすると、チグハグなものになりやすい。 いや・・・ できれば別に してほしいかな
ユーザー中心の思考と AI は相性が悪い 63 解決手段を限定する 解決手段を限定しない ユーザーの課題: バニラアイスクリームが食べたい 解決手段: AIを使うこと 徒歩5分のコンビニ 行ってきます あなたに最適な バニラアイスを 提案します いや たいぎい
AI 中心設計（AI を使うことが目的なら） 64 先端の AI エンジニアはユーザーの課題を解決したくて AI を研究しているのでは なく、AI を研究することが楽しいから研究しているだけである。完全なシーズベース。 AI を使うのが目的なら「ユーザーの課題を解決する」のではない。「AI に解決でき る課題だけに絞って AI に解決させる（それがユーザーの本当の課題かどうかはお いておく）」のである。あくまで技術を起点に考える思考方法をとる。 この思考方法はユーザー中心の思考と相容れない。 ただし2024年現在においては「とりあえず AI を使ってみて、社内 に AI リテラシーをためる」こと自体が重要な目的のケースもある。 AI 中心設計が一概に間違いとは言えない。
技術はそのままでは価値を生まない 65 どんなにすごい技術であっても、技術はそれそのままでは価値を生まない。ユーザー が使える状態になって、はじめて価値が生まれる。 技術そのまま ユーザーが使える状態 いやどうやって 使うのコレ コンソールから コマンド入力!? できないよ！ スマホで かんたん操作で 使える！ 便利だなあ
技術はそのままでは価値を生まない 66 技術とユーザーのあいだにはかならず（広義の）インターフェースが存在する。ユー ザーに AI が価値を生むようにインターフェースをデザインする。 技術 ユーザー インター フェース （広義） デザイン
AIプロダクトでいちばん難しいこと 67 AI を用いたプロダクトでいちばん難しいことは、そもそも AI 以前に、プロダクトがプ ロダクトとしてまともに使えるものにすること。世の中に（AIを使うかどうかに関わら ず）星の数ほどスタートアップや新規事業があるのに、ほんの一握りしか残らないの はなぜか？ AI 以前に、そもそもまともなプロダクトをつくるのが難しいからだよ！ プロダクトがダメなら、どんな優れた AI が搭載されていても、その AI の価値はユー ザーに届く前に墜落する。 そもそもプロダクトがダメ ユーザーに AI の価値が 届く前に墜落する
68 【2】 UXデザインの作業工程それ自体を AIで革新する
69 LLM（大規模言語モデル）は ユーザー調査の代わりになるか
UXリサーチの代わりに ChatGPT を使う？ 70 UXリサーチの代わりに ChatGPT を使えるのではないか、というアイデアを昨年 2023年からよくSNSで見かけます。
UXリサーチの代わりに ChatGPT を使う？ 71 介護用品を 購入する人の 心理を挙げて 1. 安全を守りたい • 事故を防ぐ: 介護を受ける人がけがをしないよう にするため。 • 病気を悪化させない: 介護用品を使って、病気 がひどくなるのを防ぐため。 2. 快適にしたい • 介護される人のために: その人がもっとラクに生 活できるようにするため。 • 介護する人のために: 介護の仕事をラクにして、 疲れを減らすため。 3. お金のことを考える • 費用対効果: お金に見合った良いものを選ぶ 心理。 • 予算内で選ぶ: 使えるお金の範囲で、必要な ものを選ぶ心理。 4. 心の中の気持ち • 責任を感じる: 家族として、また社会の一員として、 ちゃんと面倒を見たいと思う気持ち。 • 愛情を示す: 介護用品を通して、大切な人への愛 情や心配りを表す気持ち。 5. 正しい情報を得たい • 良い選択をするために: 色々な情報や専門家の意 見を参考にして、良いものを選びたい。 • 経験を生かす: 今までの介護の経験を活かして、 もっと良いものを選びたい。 6. 未来のために備える • 長い目で見る: これから先もずっと使えるようなものを 選ぶ心理。 • 不確かなことに備える: 何が起こるかわからないので、 いろいろな状況に対応できるものを選ぶ心理。
羽山のUXリサーチの結果 72 父がしあわせに 過ごせるように 一生懸命に考えてます 介護者である私の 負担をできるだけ 軽減することも考えます （ボソッ） ただ・・・
羽山のUXリサーチの結果 73 たまに父が人間だと 思えない瞬間が あるんです 会話も通じない 私が誰かもわからない 意思もあるのかわからない 人間だと 思えなくなる ときがある
LLM（大規模言語モデル）は世の中の「平均知」 74 ChatGPT をはじめ LLM（大規模言語モデル）はインターネット上にある膨大な データを収集して学習しています。そのため、世の中で「みんなが思いつくこと」は網 羅的に生成してくれます。「集合知」と言えるでしょう。 自分ひとりで思いつけるアイデアの範囲には限りがあるので、自分にない多角的な 視点を LLM から得ることができます。 しかし、インターネットに表出しづらいユーザー心理は、学習データにあまり数が含ま れないため、（2024年現在の）LLM では生成しづらいです。 その意味では LLM は「平均的な知識の集合 = 平均知」です。
AIの回答は学習データに依存する（バイアス） 75 AIの回答は学習データに依存します。有名な事例として、マサチューセッツ工科大 学（MIT）メディアラボのジョイ・ブォラムウィニとスタンフォード大学のティムニット・ゲ ブルーの研究があります。商用の AI で白人男性の顔認識をすると 99.7%の精 度が出るにもかかわらず、黒人女性では65〜79%まで低下するという実験結果 です。 これは AI の学習データが「白人の男性」に偏っていたために起きていました。しかし、 開発者たちの多くは自身も「白人の男性」であったために、この問題に気がついてい ませんでした。 引用:人工知能が「偏見」を学んでしまった──画像認識で「白人男性」より「黒人女性」の識別率が低かった理由, WIRED, 2018 https://wired.jp/2018/02/23/photo-algorithms-skewed-accuracy/
インターネットに表出するユーザー心理はどれくらい？ 76 羽山が取り組んでいるUXデザイン手法に「かんたんなネットリサーチ」があります。 ネットにある口コミなどを集めてユーザー心理を抽出します。羽山の実験 （2012）で、同じリサーチクエスチョンについて、ユーザーインタビューと「かんたんな ネットリサーチ」それぞれで発見できたユーザー心理の数を比較しました。 全体で発見した30グループのユーザー心理に対して、インタビューと「かんたんなネッ トリサーチ」のいずれでも発見できた心理は21グループ(全体の70%)。「かんたん なネットリサーチ」でのみ発見できた心理は2グループ(全体の7%)。インタビューで のみ発見できた心理は7グループ(全体の23%)でした。 この結果から、インターネットの情報だけでは、ユーザー心理の20%〜30%は潜 んでしまうと考えています。
AIペルソナ（えそらLLC） 77 ChatGPT でリアルに会話ができるペルソナをつくれないか？ という試みはいくつも の会社が取り組んでいます。えそら合同会社 様がつくった GPTs の「AIペルソナ」 は UXデザインの専門会社ならではの視座で組まれており、興味深い。 引用: https://chatgpt.com/g/g-yLbB2lkGC-ai-herusona AIペルソナ https://chatgpt.com/g/g-yLbB2lkGC-ai- herusona
78 特 報
79 AI を用いて UXデザインの 「切片化」 「親和図法」 を支援するツール
AIで切片化・親和図法を支援するツール 『toitta』 80 UXデザイン・UXリサーチで用いられる 「親和図法」 や 「KA法（本質的価値抽 出法）」 は優れた定性分析の手法である代わりに、切片（ふせん）の書き出し と整理に時間がかかるのが悩みでした。 AIで切片化・親和図法を支援するツール 『 toitta 』 が 株式会社はてな 様か らリリースされました！
さ す が は て な お れ た ち に で き な い 事 を 平 然 と や っ て の け る ッ そ こ に シ ビ れ る あ こ が れ る ゥ ！ ！ ！
toitta つかってみた 82 羽山もテストユーザーとして試させていただきました。 toitta を親和図法の前処理（インタビューの書き起こし・切片化）を使うと、ふだ ん何日もかかる親和図法がなんと1日で仕上がりました！ 発話の前後の文脈までちゃんとAIが考慮して切片化するのが感動でした。 AIが俺の能力を 底上げしてくれてる感 パない！
toitta の支援でつくった親和図（価値マップ） 83 発話録の 書き起こしすら してない状況から 一晩で仕上がった インタビュー録画60分から AIが発話録の書き起こし・ 102枚の切片化を してくれた 羽山は 切片のレビューから すればよい
切片を Miro や Figma へ一括ペースト 84 切片はこのあと Miro や FigJam といったオンラインホワイトボードへ貼って新和図 法をするが、1データ1データをコピペするのがめんどう。 なんと！ 一括でペーストできる！ Miro や FigJam 画像: 株式会社はてな様よりご提供
抽象化（グループ化）の第1段階まで支援 85 親和図法は抽象化（グループ化）をくりかえして組み上げていきます。膨大な時 間のかかる作業ですが、人間しかできないだろうと思っていました。近いリリースで、 なんと抽象化（グループ化）の第1段階まで AI が支援してくれるようになる。 画像: 株式会社はてな様よりご提供
ユーザーの“声”に向き合う インタビュー分析ツール 詳細はQRコードから！ 発話データの自動書き起こし・切片生成で 定性調査の分析支援を行います toitta（トイッタ）とは 書き起こし・話者分離 切片一覧 https://ja.toitta.com miroなどにエクスポート 画像: 株式会社はてな様よりご提供
ま だ ア ク セ ス し て い な い の か ね 40 秒 間 待 っ て や る
画像: 株式会社はてな様よりご提供
89 世は 大AI時代を迎える
Ａ Ｉ の 知 識 か ？ 欲 し け り ゃ く れ て や る ぜ … 探 し て み ろ こ の 世 の 全 て を そ こ に 置 い て き た
スーパーマーケットで思ったこと 91 スーパーマーケットのセルフレジが増えてきました。見ていると、つねに店員が1人は 常駐していてエラー対応をしていたりするので、自動化できてないじゃん・・・と思った のですが、10台くらいのセルフレジを1人でまわしているので、ものすごい効率化で あることに気がつきました。
くら寿司で思ったこと 92 徹底した自動化でしばしば話題になる「くら寿司」。羽山もいきます。注文も受付 もなにもかもが自動化 or セルフサービス化されていて、それでいてユーザー体験と してもスマート。UXデザインのお手本と思って見ていました。何十席ものフロアを2 人の従業員でまわせるとか・・・。
くら寿司で思ったこと 93 フロアを見渡して気がついたのですが・・・すべてが自動化された世界のなかで、人 間がやっている唯一のものは「片づけ」でした。おそらくタスクが複雑かつ想定できな い要素が多いため。
くら寿司で思ったこと 94 「AI が単純労働をすべてやってくれるようになり、人間は創造的な仕事に集中でき る」 という話をよく耳にします。羽山には 「片づけ」 が創造的な仕事なのかどうか、 判断がつきませんでした。
95 でも幸せならOKです 東京・渋谷 深夜0時すぎ AIを使ってみて どうですか？
96 まとめ
まとめ 97 1. AIプロダクトでよくある失敗デザインは、じつは「提供側が考えた勝手な表現が ユーザーに伝わらない」という、普遍的なデザイン課題でしかない。 2. AI を用いたプロダクトでいちばん難しいことは、そもそも AI 以前に、プロダクト がプロダクトとしてまともに使えるものにすること。 3. UIデザインに使えそうな AI は増えてきた。しかし細部の破綻はある。ベテラン の目でチェックして使うなら便利。素人が AI でベテランになることはできない。 4. UXデザインに使えそうな AI はまだ萌芽期。 5. toittaはいいぞ。
98 ありがとうございました 羽山 祥樹 @storywriter UXデザイン・UXリサーチの 人材育成のメンタリング ご相談ください！
羽山のプレゼンのアレ が、 LINEスタンプになりました！ スタンプ名：ハーミィ（CSS編） 作者名：羽山 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類