Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
高校生向け講座 Webサービス開発体験ワークショップ 20260801-2days
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
@Garyuten
August 07, 2026
4
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
高校生向け講座 Webサービス開発体験ワークショップ 20260801-2days
福岡県主催
@Garyuten
August 07, 2026
More Decks by @Garyuten
See All by @Garyuten
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
160
研修担当者が一番伸びた 熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
garyuten
2
450
公開スライド)熊本市様-電子申請中級編
garyuten
1
1.5k
BackWorld2025_課題の切り方ワークショップ
garyuten
0
57
チームビルディング体験ワークショップ - テンジン大学
garyuten
3
280
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
210
UIデザインワークショップ - JaSST'23 Hokkaido
garyuten
1
920
動物占い
garyuten
0
140
スタンディングディスク
garyuten
0
120
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
7k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
610
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.6k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.1k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
460
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
760
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
350
[SF Ruby Conf 2025] Rails X
palkan
2
1.2k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
360
Raft: Consensus for Rubyists
vanstee
141
7.6k
Transcript
2026.08.01-02 高校生向けWebサービスデザインワークショップ 全2日間のテーマ 未来の社会を より良くするサービスを作る ユーザーテストで素早く改善 早く作る 早く試す 早く失敗する
None
None
自己紹介 PROFILE 金内 透 Toru Kanauchi 合同会社CGFM 代表 / プロダクトデザイナー(UI/UX)
・ファシリテーター HCD-Net認定 人間中心設計スペシャリスト 「問いとデザインの力で ビジネスを成長促進」 • Webデザイン制作歴 15年 / UIデザイン歴 10年 @Garyuten X (Twitter),Instagram • 崇城大学デザイン学科 非常勤講師 10年目 • 「九州・福岡にバフをかける」をテーマに活動中
Create a Good Future Meeting Before After 合同会社CGFM デザイナー (@mutsuking
) と2人だけのUIデザイン会社 システム会社の新規事業、スタートアップのデザインアドバイザーの案件多数 事業立ち上げや仕様策定段階から参加する壁打ちスタイルが得意
UIデザイン実績 sigfy © Fusic Co., Ltd. 学校と保護者間の連絡にまつわる モヤモヤを解決する 安心安全な一斉連絡サービス sigfy.jp
https:// ・2020年のUIリニューアル ・サービス紹介Webサイトデザイン を手がけました(2020年)
UIデザイン実績 現場ポケット © ASTEC PAINTS INC. 現場作業に関わる人の円滑な コミュニケーションをサポートする 施工管理者の生産性向上アプリ gempo.info
https:// 2022年度グッドデザイン賞(システム・サービス部門) ・UIデザイン を手がけました (2018年12月〜現在)
CGFMのUIデザインのお仕事 サービス開発の関わり方 上流の要望定義・要件定義の手伝いからUIデザインまで PMがビジネス判断するための材料を作成・提案 ・UIデザイン 概念整理、利用フロー、ワイヤフレーム、 モック、プロトタイプ、figma納品、 開発後のデザインチェック ・デザインシステム構築補助 ・UIデザイナーのメンター
・デザインアドバイザー
day1
このワークショップで学んで欲しいこと サービス・デザインはチームで作るもの コラボレーション超重要 議論/対話大事 言い合える関係作り 他者理解力 自己伝達力 他者のできることを理 解する力 自分ができることを説
明する力 早く作って 早く試して 早く失敗する
2日間の目的 Webサービスの開発体験 仮説検証を高速で回す体験 2日間のテーマ ペルソナなりきり(利用者視点)で サービスデザインを考える 2日間のキーワード (仮説検証できるものを) (ユーザーが欲しがるか) (次の仮説を立てるために)
早く作って 早く試して 早く失敗する
ワークショップは皆で作る場 皆で良い学びの場を 作っていきましょう
新サービスは おせっかい 2日間で作るテーマ 未来の社会をより良くする 新サービス
他のワークショップの様子
2024秋 高校生向けワークショップの様子
2025秋 高校生向けワークショップの様子
AIP様 エンジニア合同新人研修 ファシリテーション演習 2days
崇城大学 デザインワークショップ 2days
None
None
過去受講者のアンケート 高校生 / 大学生 / 新卒エンジニア
去年の高校生の声 朝早くから家を出て会場まで行くのは大変だったけど 将来に役立つような内容だったので来てよかったです 初めて知ること、聞くことが多く勉強になりました。 Webデザインに関するニュースや話題も、 自分がアンテナを広げればもっとたくさん世の中 にあるんだと気づけました 正直もっと長くやりたいし、 もう1回一から作ってみたいと思いました。 なんなら2日間泊まり込みでもいい!
めっちゃ楽しかったです もっと作りたかった! (2日間が) 一瞬だった 講師の方々もいい人ばかりで 気軽に質問が出来ました。 将来の進路の視野が広がるいい体験になりました
プレゼンでのペルソナのなりきり 今までで一番世界に入り込めたワー クショップでした! 内容も過ごした時間も濃いものだったと感じます。 紙に文字で書くの も様々な意見が出ると知ったこと 言葉で意見を出すのもよいが、 積極的に行かないと後悔するということ 早く試して早く失敗する 自身の完璧主義的考え方を変えるきっ
かけになるようなワークショップでとてもためになる2日間でし た。 チームでの発表の際リンクが開かないことがあり、 トラブル対応の大切さを実感しました。 ファシリテーターの存在は大きい。 チームの手が止まるとき、意見が出ないとき、話し 合いで違う方向へ行くとき、状況を瞬時に把握し、 心理的安全性が保たれた状態に導いてくださること で、とても作業が捗った。
デザインワークショップの 作品例
とある女子学生の悩み 車で大学に通学、自分で運転 誰かに運転して欲しい! でも助手席だと酔う😭 隣がイケメンなら 酔わないのでは!?🤩 カレタク イケメン ホストが運転手の タクシー配車サービス
とある男子学生の悩み 中学から大学まで 自転車で通学 痴漢冤罪ニュースを見て 巻き込まれるのが怖い😱 体のポーズを記録 すれば無実の証明 ができる!?🤩 ポーズログ(仮 身体の姿勢を記録し痴漢冤罪時
も無実を証明するアプリ
None
None
None
None
とある男子学生の悩み (2017年) モバイルバッテリーを 5-6個、常に持ち歩く battal (2017年) いつでもどこでもモバイルバッテリー貸出 2016年 熊本地震 被災以来、スマホの
充電切れがトラウマに 町中でどこでも モバイルバッテリー をレンタル!? 🤩 別の類似サービスが 1年後に開始(時代を捉えてた) ChargeSPOT 2018年 開始
None
None
None
None
新サービスは おせっかい 2日間で作るテーマ 未来の社会をより良くする 新サービス
ユーザーとサービスの 解像度を上げるためのワークショップの流れ 簡易ペルソナ シナリオ (ペルソナの台本) 簡易プロトタイプ 簡易テスト
サービスデザイン ワークショップの流れ day1 ユ ザ ス ラ イ ド 作
成 ユ ザ ー テ ス ト プ ロ ト タ イ ピ ン グ ー 劇 紙 プ ロ ト タ イ ピ ン グ ー ペ ル ソ ナ 作 成 ペ ル ソ ナ な 即 り 興 き 演 り ー 課 題 発 見 課 題 解 決 の 仮 説 day2 テ ス ト プ レ ゼ ン
このワークショップで学んで欲しいこと サービス・デザインはチームで作るもの コラボレーション超重要 議論/対話大事 言い合える関係作り 他者理解力 自己伝達力 他者のできることを理 解する力 自分ができることを説
明する力 早く作って 早く試して 早く失敗する
ルール1 ワークショップ心得 この場の 最高権限者は ファシリテーター 時間厳守 失敗OK
ルール2 5グラウンドルール たくさんのアウトプットが生まれる 良い議論する場を作るための決まりごと 1. ほめる 粗野なアウトプットを歓迎する 2. 聴く 傾聴
たくさんの アウトプット (検討材料) 3. 受けとめる 受容≠肯定 4. 待つ 生産的沈黙 5. 愉しむ キツさも苦しさも含めて 良質な仮説を 立てられる (検討) (「5グラウンドルール」は株式会社つくるひとの登録商標です)
AI活用ガイドライン このワークショップでは、AIを「思考を広げる補助輪」として使います AIの役割 ・自分たちの考えを広げるため ・アイデアのヒントや肉付けサポート AIを使ってよい タイミング 禁止事項 ファシリテーターが指示 し
🚫AIの提案をそのまま採用する たタイミングのみ →チームで検討・修正する ・インタビュー用質問の数を出す ・キャッチフレーズの案出し ・ビジネスモデルキャンバス検討後 の サンプル案 ・ロゴ案 🚫AIに丸投げ →自分達の考えをベースにする
チームビルディング
無茶振り Yes and Yeah! 宝くじ当たったん ですって? 「そうなんですよ〜」 で必ず返す。 否定はダメ そうなんですよ〜
◦◦◦◦◦◦◦◦◦ イエーイ!! イエーイ!! 成立したら二人でイエーイ
どうでしたか? 相手の意見を否定せずに さらに乗っかったアイディアを 即座に返せましたか?
呼びかけ Yes and Yes! 今度ドライブ行きませんか? 否定語ダメ絶対 必ず「いいですね!」 からアイディアを被せる いいですね! それじゃクラス全員で行きましょうか!
いいですね! それじゃいっそバスを貸切ましょうか! 延々と続ける 片方が止まるか、1分で終了 (他メンバーが1分計る) いいですね! ◦◦◦◦
どうでしたか? 相手の意見を否定せずに さらに乗っかったアイディアを出し続けると すごいアイディアになったでしょ?
チームの共通目標 欲しいサービスを 対話して作る 対話:お互いの違いを確認する全ての行為
チームビルディング グループとチームの違いは?
仕事を成立させるには たくさんの業種の人達の協力が必要 営業 ディレクター コピー ライター デザ イナー フロント エンジニア
プログラ マー 広報 インフラ エンジニア
各自が主体性を持ち、多様性を発揮して 相互に交わりながら 共通の目標 を達成する 仕事の成功 営業 ディレクター コピー ライター デザ
イナー フロント エンジニア プログラ マー 広報 インフラ エンジニア
チームビルディングとは? 「仲間(チーム)の各自が 主体性を持ち、多様性を発揮しつつ、 相互に関わりながら 一丸となって目的を達成しようとする」 組織をつくるための取り組み
クイズ 『失敗しやすいチームの特徴』 はどれ? A 技術が優れていない B チーム内の心理的安全性が低い C プロダクトの品質が低い
答え B チーム内の心理的安全性が低い Googleの研究によると、 心理的安全性が低いチームは 技術が優れていても 成果を出せないことが多い、と 分かっています。 引用)Google re:Work
- ガイド: 「効果的なチームとは何か」を知る
参考) Googleの研究結果「Project Aristotle」 Googleは2012年から2年間にわたり180以上のチームを分析 効果的なチームを決定づける要素で最も重要な要因が 「心理的安全性」 だと判明 - 心理的安全性 (Psychological
Safety) メンバーが自由に発言し、リスクを取ることを恐れない環境 - 信頼性 (Dependability) メンバーが互いに高いパフォーマンスを期待し、信頼できること - 構造と明確さ (Structure and Clarity) チームの目標、役割、計画が明確であること - 仕事の意味 (Meaning of Work) チームの効果性にそれほど 影響していなかった変数 チームメンバーの働き場所 (同じオフィスで近くに座り働くこと) 合意に基づく意思決定 チームメンバーが外交的 であること チームメンバー個人の パフォーマンス 仕事量 メンバーが自分の仕事に意義を感じていること - 仕事のインパクト (Impact of Work) メンバーが自分の仕事が組織や社会に影響を与えていると感じること 先任順位 / 在職期間 チームの規模
None
None
次はカードのブレストから スタート
チームビルディング 自分が挑戦する点(自分の弱み含めて) メンバーに期待してる点 / このチームの独自ルール
個人の意見出し 発想・拡散思考 短時間で繰り返す 収束・集約思考 集団で共有
これから 個人/チームで ITで解決できるサービスの アイディア出し
“新規事業や新サービスって おせっかい ” “世界はアウトプットでできている ” by ジーズアカデミー 児玉
あなただけ? 周囲の友人家族は? ワーク 主語を誰にする? 自分?社会? 世界に 社会に 感じてる不平不満 解決したい社会課題
アイディア出しの流れ 個人で不平不満を 付箋に書き出し 個人でサービスアイディア ブレインライティング 個人で拡散 集団で収束 アイディア 連想リレー チームで共有
試したいサービスに ✔ なりきりで利用者を想像 共感マップ ユーザー理解 仮説検証
とりあえず3分で 付箋に各自書こうか? 個人の意見出し 発想・拡散思考 短時間で繰り返す 収束・集約思考 集団で共有
ワーク ブレインライティング アイディア の量 を出す
None
None
4-5人が最適 チーム内で2班に分かれる ブレインライティングの流れ 1人1枚 各自でシートの準備 手描きで 3列x5行 の表を書く テーマ: 社会をより良くするサービス
一行目に自分のアイディアを まず書きだす 前の人のアイディアをヒントに 思いつくアイディアを書きだす テーマ: 社会をより良くするサービス テーマ: 社会をより良くするサービス 面倒なゴミ出しの 手間が減るサービ ス 面倒なゴミ出しの 手間が減るサービ ス 引っ越し手続きの 面倒がなくなる サービス 週イチぐらいで集 まれるオフィス 引っ越し手続きの 面倒がなくなる サービス 週イチぐらいで集 まれるオフィス 引越し手続き 一括代行 サービス 曜日単位で 借りる オフィス ヒント 2分 1行目に各自で アイディアを記入 シート を回す 全国ゴミ出し 情報ポータ ルサイト 上の行にヒントに アイディアを記入 埋まるまで繰り返す 引用 元https://www.kikakulabo.com/brain-writing/
ITで解決できる? ブレインライティングで出てきた案 面白い、取り組んでみたい と思った課題やサービスに投票 チーム全員のシートを個別に投票 投票タイム 5分 1シートに付き1人3票 小さく赤点⭕を付けてシートを回す
ITで解決で きる? チームのサービスの方向性 [解決したい課題と解決方法] を 決める どこの?誰の?どんな困ったを 解決できるサービス? スマホ 限定
13時00分から 空いてる時間に既存サービスを調査すると◎ 午後はペルソナ作りからスタート
None
身体知 AIが到達できない領域 (前提や背景、空間、空気感、情緒等の把握)
チームには台本がない まるで 即興演劇 のようだ! • チームには目的はあるけど台本がない • 刻々と変わる状況にアドリブで対応して いかなければならない •
次々と起こる出来事を受け止めつつ、 シャープに反応し、その中で相互に 創造性を働かせなければならない 参考)ニューヨークのビジネスマンは会社終わりにインプロ(即興演劇)を学んでいる? インプロビゼーション(即興演劇) 企業研修に取り入れてる企業) Google、Netflix、スターバックス、マリオット、 マイクロソフト、 マサチューセッツ工科大学、スタンフォード大学
なりきり練習
インプロ(即興演劇)の練習 社長ごっこ (テーマパークの社長) 身体知 利用者視点を 体験でインストール
どうでしたか?
今日やること(後半) 3. 共感マップ 1. ペルソナをつくる 2. ペルソナ即興演劇&観察 シナリオ作成 改善 5.
ユーザーテスト ユーザー理解 仮説検証 4. ペーパープロトタイピング 改善
ワーク 共感マップ 顧客/利用者を理解して価値提案を見出す
共感マップ Think and Feel 考えていること・感じてること Hear See 聞いていること 見ているもの Say
and Do 言っていること・行動 Pain Gain 痛みやストレス 得られるもの 引用)NIJIBOX BLOG
共感マップ 衣替えの前に処分したいなー 例)メルカリ出品側 登録とか面倒そう… Think and Feel 考えていること・感じてること 友達が高く売れたとSNSに投稿 してた
友達から簡単だと聞いた Hear See 聞いていること 見ているもの バイトの先輩から すぐ売れると教えてもらった Say and Do 部屋の不用品が邪魔だ… コンビニで発送してる人 を見かけた 言っていること・行動 使い古した中古品でも売れる のかな? Pain 痛みやストレス 部屋に物が溢れてるけど 捨てるのは勿体ない 住所とかバレないの? 要らないものが売れるなら やってみたい Gain 得られるもの 中古ショップとか質屋とか ハードル高い 引用)NIJIBOX BLOG
共感マップ 例)バイトル ブラックだったらどうしよう… ちゃんと続けられる仕事 じゃないと迷惑かけそう 友達より遅れてる気がして 焦るけど、失敗もしたくない Think and Feel
考えていること・感じてること 親:「学業優先だよ」「夜遅くはダメ」 SNSで「バイトつらい」「神バ イト」など真逆の投稿 先生「校則守るならバイトOKだよ」 Hear See 聞いていること 見ているもの 友達「あの店は優しいよ」 「ここはやめとけ」 学校の掲示板やコンビニ の募集ポスター バイトルの求人ページ (写真・動画つき) Say and Do 言っていること・行動 「時給高いところがいい!」 と言いつつ口コミをめちゃ見る Pain 初電話・初面接への恐怖 痛みやストレス 自分に合わない仕事を 選んでしまうリスク シフト実態、雰囲気が わからない求人情報 応募ボタン前で止まって 何日も悩む 気になる求人をスクショ して親や友達に相談 安心して働ける職場情報 (動画・写真・口コミ) 面接までの流れが 分かるガイド Gain 得られるもの 初バイト成功による 自信とおこづかい 引用)NIJIBOX BLOG
ユーザーとサービスの 解像度を上げるためのワークショップの流れ 簡易ペルソナ シナリオ (ペルソナの台本) 簡易プロトタイプ 簡易テスト
共感マップ ペルソナの設定 演じる役柄の設定 ペルソナなりきり ペルソナの台本 アクティビティシナリオ テスターが演じる台本 プロトタイプが使えるか検証する 何を課題にしてるか? 何がゴールなのか?
セリフベース ❌ 操作指示NG プロトタイプ 台本に必要な画面 UI/コンテンツデザイン 手書きでOK
その課題を抱えてる ユーザーはどんな人? ワーク ペルソナ作成 サービスを使う 一番メインなペルソナ を考えてみる 利用者でOK どちらの立場でもOK
補足説明 ペルソナとは? 企業・団体が提供する 製品・サービスにとって 最も重要で象徴的な ユーザモデルのこと 心理学学者ユングが 人間の外的側面を ペルソナと呼んだ メリット
共通の人物像を関係者で 共有できる 「この人を満足させるには?」
補足説明 ペーパー プロトタイピングとは • 画面アイディアをラフに描く • ユーザーの利用フローの検証と修正 メリット 紙とペンがあればすぐできる 短時間で繰り返しテストできる
補足説明 ユーザーテストとは 目安5分 高速で回す 利用者(ユーザー)になりきって 目的を達成できるか検証すること 観察・記録 メリット 利用者が操作でつまづくポイントに 早い段階で気づける
ペーパープロトタイプ ユーザー役 ペルソナの設定 どんな状況で使うのか? 何がゴールなのか? 案内・画面遷移
用紙に書き込んでも 付箋を貼るだけでもOK 6 ペルソナの項目 (簡易版) ペルソナの概要 3 どんな経緯でWebサイトを利用する? 何がきっかけ? ペルソナの顔
下手でいいから 手描きの絵 名前/職業/年齢 4 ペルソナの抱えている課題 ペルソナのゴール (利用前の心の声) スタート時のセリフ 一番メインの利用者 を想定する 2 1 どんな課題を抱えてるペルソナ? どうなったらゴール? (目的達成後の心の声) 5 �� (利用前の心の声) ゴール時のセリフ ��
ペルソナの項目(簡易版) ペルソナの概要 仕事中心で運動習慣がなく、ここ数年で体重が大幅増。 一人ではダイエットが続かず、自信を失いかけている。 ペルソナの抱えている課題 ダイエットが続かない、運動・食事管理の習慣化が難しい 健康診断の結果が悪化、見た目に自信がない 名前/職業/年齢 ペルソナのゴール 佐藤
健一(38) 会社員(営業職) 体重・体脂肪を落として見た目を改善、健康的な生活習慣を身につけたい 「変われた」という成功体験を得たい スタート時のセリフ (利用前の心の声) ゴール時のセリフ (目的達成後の心の声) 一人じゃ絶対続かない… 本気で変わらないと ここまで変われるなんて! 自信が戻ってきた。 例)ライザップ
ペルソナの項目(簡易版) 例)バイトル ペルソナの概要 ライブ遠征と推し活の費用を自分で少し負担したい バイト条件は家から自転車で15分以内、土日のみ、夜は21時まで ペルソナの顔 ペルソナの抱えている課題 下手でいいから 手描きの絵 初めてのバイトで「どこが安全で働きやすいか分からない」
ネットの情報が多くて「口コミのどこまで信じていいか不安」 応募フロー(WEB応募→電話→面接)がイメージできず、最初の一歩が重い 名前/職業/年齢 ペルソナのゴール 佐藤 ひかり(17) 高2 公立高校/軽音部 スタート時のセリフ 条件に合うバイトを自分で見つけて応募できる 面接前に仕事内容や雰囲気を理解して、安心して初出勤できる (利用前の心の声) バイトしたいけど、どのお店 が良いとか全然分からない… �� ゴール時のセリフ (目的達成後の心の声) 写真や動画で雰囲気が分かった から安心して応募できた! ��
ワーク ペルソナなりきり シナリオを考える
None
ワークの内容 1 ペルソナなりきり&記録 ペルソナ シート 一人がペルソナになりきってアドリブで演技 他のメンバーはセリフや画面要素を記録 2 アクティビティ シナリオ作成
セリフをベースに シナリオを手書きで作成 スタート シナリオ (台本) 時間がない場合は 付箋の貼り合わせでOK 3 ペーパープロトタイピング作成 セリフ 😰 画面 要素 ペーパー プロトタイピング ゴール 😁 セリフ 必要な 画面要素 …… …… …… …… ☑ _____ ☑ _____ ☑ _____ …… …… ラフな手書きでOK 全画面を手分けして作成 ………… ………… ………… 模造紙 4 ユーザーテスト ユーザーがヒントなしで目的を達成できるかを検証 シナリオを読みながらペルソナになりきって ペーパープロトタイピングを触っていく
ペルソナなりきり&観察 2回 (10分以内) ペルソナ役、記録係で役割分担 ペルソナ役 記録係 ペルソナになりきって発話 スタート時 のセリフ ゴール時
のセリフ 観察 セリフの 記録 画面・ コンテンツの 記録
ワークの内容 1 ペルソナなりきり&記録 ペルソナ シート 一人がペルソナになりきってアドリブで演技 他のメンバーはセリフや画面要素を記録 2 アクティビティ シナリオ作成
セリフをベースに シナリオを手書きで作成 スタート シナリオ (台本) 時間がない場合は 付箋の貼り合わせでOK 3 ペーパープロトタイピング作成 セリフ 😰 画面 要素 ペーパー プロトタイピング ゴール 😁 セリフ 必要な 画面要素 …… …… …… …… ☑ _____ ☑ _____ ☑ _____ …… …… ラフな手書きでOK 全画面を手分けして作成 ………… ………… ………… 模造紙 4 ユーザーテスト ユーザーがヒントなしで目的を達成できるかを検証 シナリオを読みながらペルソナになりきって ペーパープロトタイピングを触っていく
スタート ゴール セリフ 画面・要素 演じ終わってから並べる
ユーザーテストに向けて
メンバーと手分けして作成 ペルソナの台本 アクティビティシナリオ テスターが演じる台本 最初は関係者で 内部ユーザーテスト ユーザーテスト で成立するか検証 セリフベース ❌
操作指示NG 初回ユーザーテスト 15:00 プロトタイプ 台本に必要な画面 UI/コンテンツ 手書きでOK 画面を手分けして 全画面を先に作る セリフの付箋 の 貼り合わせでもOK
None
補足説明 ユーザーテストとは 目安5分 高速で回す 利用者(ユーザー)になりきって 目的を達成できるか検証すること 観察・記録 メリット 利用者が操作でつまづくポイントに 早い段階で気づける
ペーパープロトタイプ ユーザー役 ペルソナの設定 どんな状況で使うのか? 何がゴールなのか? 案内・画面遷移
ユーザーテストの手順 1 あいさつ 4 画面を差し替える 目的と進め方を簡単に伝える 進行役が遷移先の紙を 手動で入れ替える ポイント: ペーパープロトタイピング版
2 設定を読む 5 ゴールで終了 ペルソナとシナリオを声に出して 読んでもらう 目的を達成できたら テスト終了 ・フィードバックと質問は分ける ・テスターを長く拘束しない 3 操作してもらう 6 振り返り・お礼 指さしでペーパープロトタイプを 操作してもらう 気になった点を聞き、 感謝を伝える ・1回5分目安で短く回す
ユーザーテストの役割と心得 目的は「困りごと」を見つけること ユーザーはテストされていない。テストされているのはプロトタイプです。 ① テスター (被験者) ② ホスト役 (進行役) テスターがスムーズに
進められるよう 見守りながら サポートします 普段どおりに 使ってみてください OK (やってほしいこと) ✓ 思ったことを声に出す 「どこを押せばいいかわからない」等 ✓ ギブアップ OK NG (やらないでほしいこと) × 正解を探そうとしない × 作者に気を遣わない × 自分を責めない OK (やってほしいこと) ✓ 黙って見守る ✓ 困ったら「どこでお困りですか ?」 と 聞く 「わかりません」「見つけられません」等 × 操作方法を教えない × 誘導しない 「ここですよ」「右上見てください」等 × 先回りしない 「次はこうなると思いますよ」等 ✓ 考えている時間を待つ ✓ 遠慮しない 「使いづらい」「わかりにくい」等 困ることは失敗ではありません。 それが一番の発見です! NG (やらないでほしいこと) 答えを教えるのではなく、 ユーザーの気づきを引き出しましょう。
ユーザーテストの役割と心得 (つづき) ③ 観察役 (記録役) ④ システム役 (画面切替役) テスターの操作に合わせて画面を 切り替えます(ペーパープロトタイプ)
テスターの発言や行動を 客観的に記録します OK (やってほしいこと) OK (やってほしいこと) ✓ 発言を記録する ✓ 行動を記録する (迷った・戻った等) ✓ 困った箇所や気づきを記録する NG (やらないでほしいこと) × 解決策を考えない × デザイン議論を始めない × テスターへ話しかけない 記録の例 観察内容 ✓ テスターが行動した後に切り替える ✓ 勝手に解釈せず、行動の結果だけを再現 ✓ 同じ場所に差し替える(置き換える) ✓ 迷ったら止めて、確認する 切り替え方のポイント(ペーパープロトタイプ) ① 同じ場所に差し替える ② 指を離してから切り替える ③ ポップアップは上に重ねる × 横に置く × 押す前に切替 × 全面を差し替える ◦ 同じ位置へ ◦ 押した後に切替 ◦ 上に重ねる 記録例 発言 「どこにあるかわからない」 行動 10秒以上探した 結果 見つけられなかった みんなで大切にしたいこと あなたはシステム役(アプリの代役)です。 主役はテスターです。 批判や評価ではなく、事実を集める 意見ではなく、行動を観察する 問題が見つかるほど、良いテスト!
何を試す? 締切厳守!! 休憩は自由 😊 ユーザーテストを繰り返す 1回目 15:00~ 2回目 15:30~ 3回目
16:00~ 16:30~ ~ 17:30 終了 チームメンバーでテスト チーム外メンバーで テスト 誰がテストに出るか 決めておくこと 作戦準備スライド下書き 明日の説明
None
スライド作成のたたき台
チュートリアル figma 3-40分 figmaスライド 説明 5分
作戦会議
2日目に向けて作戦会議 • プレゼンのスライドは誰が作る? • figmaは何人で作る? • 画面デザインの方向性は? • サービス名やロゴは? •
進行チェック役 いるんじゃない? スマホ版figmaの インストールお願い
サービス名は? 作業分担の例 まずは全画面を 情報を引き出す5グランドルー 全体見渡して このサービスの価値 ル使いやすさを! を伝えたい! ざっくりと! 何を優先するか?
休憩も取りながら ワイヤー デザイナー プレゼン チェッカー 画面遷移 配色/パーツ スライドや 動作チェック プロトタイプ 素材収集/ロゴ? プレゼン構成 タイムキーパー
続きは明日
day2
お願い • Figmaのアカウント登録 googleアカウントでOK • スマホにFigmaアプリのインストール サインインもしておく ◦ OneDrive 情報共有.xlsx
x.gd/*** https://
チュートリアル figma 3-40分 figmaスライド 説明 5分
休憩/昼休み自由 ユーザーテスト 内部 11:45~ 1回目13:15~ 2回目13:45~ 3回目14:20~ - 事前モニター確認 2日目
形式は自由 プレゼン 15:30〜 - 1チーム5分 - 講評→懇親会時 - 順番くじ引き 〜17:30 懇親会 〜17:50 クロージング
プレゼン前に集合写真を撮ります メンバー名順に並んでください
None
プレゼン 1チーム 5分 以内 ノートPCをHDMI接続
振り返り手法 KPT Keep Problem Try 継続したい点 良かった点 問題点 改善したい点 挑戦したい点
試したいこと
A3で1枚✕他チーム To どのチーム from 自分のチーム 全てのプレゼン終了 後に渡す Keep Problem Try
継続したい点 良かった点 問題点 改善したい点 挑戦したい点 試したいこと
None
None
実際にあった話
日本全国に支店がある塗料卸業者の ECサイト検討ワークショップのこと 全国営業成績トップ のエースが 自らペルソナと シナリオを作成 顧客解像度が一番高い のは私です! 関係者たちの前で ペルソナになりきり
シナリオを最後まで ??? 読み上げた このシナリオなら顧客 は絶対買ってくれる! ??? 演じきった後に 彼が言ったセリフは? 買わないっすわ
成功率を 上げるために ビジネスモデルの解像度を上げる 顧客・利用者の解像度を上げる 「どこか間違えてるはず」 課題検証を速く回す 「いいモノなら売れる」 仮説は覆る前提で反証 作り込みに熱中 80%が
課題の発見と検証 に集中 74%が プロジェクト 初期段階 プロダクトの検証 に集中 PMFを達成し 失敗した 成功したスタートアップ スタートアップ ※PMF : Product/market fit 提供サービスが市場のニーズに合っている状態 米StartupGenomeが3200社のインターネット系 スタートアップを対象に行ったアンケートより 引用)起業の科学 (著 田所 雅之 )
まぁ、食べてみんね? (味見してないけど) 試食せずに、 人に料理を出せる? なぜ人は 「自分が作ったものは正しい」 と 信じて疑わないのか?
チェックアウト 「いいサービスとは?」
さいごに • 早く作って早く試して早く失敗できた? ◦ 同じ時間で同じアウトプットできた? • チームでのものづくり、学べた? ◦ 初日のチームのルール守れた? •
サービスは世界を変える力を持ってる • 体験こそが身体知 エビングハウスの忘却曲線「人は1日で70%忘れる」 人生のどこかで思い出されるワークだったら最高
君たちの後輩により良い授業をするためにも 皆さんのフィードバックよろしくお願いします アンケートの ご協力お願いします