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

高校生向け講座 Webサービス開発体験ワークショップ 20260801-2days

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for @Garyuten @Garyuten
August 07, 2026
4

高校生向け講座 Webサービス開発体験ワークショップ 20260801-2days

福岡県主催

Avatar for @Garyuten

@Garyuten

August 07, 2026

More Decks by @Garyuten

Transcript

  1. 自己紹介 PROFILE 金内 透 Toru Kanauchi 合同会社CGFM 代表 / プロダクトデザイナー(UI/UX)

    ・ファシリテーター HCD-Net認定 人間中心設計スペシャリスト 「問いとデザインの力で ビジネスを成長促進」 • Webデザイン制作歴 15年 / UIデザイン歴 10年 @Garyuten X (Twitter),Instagram • 崇城大学デザイン学科 非常勤講師 10年目 • 「九州・福岡にバフをかける」をテーマに活動中
  2. Create a Good Future Meeting Before After 合同会社CGFM デザイナー (@mutsuking

    ) と2人だけのUIデザイン会社 システム会社の新規事業、スタートアップのデザインアドバイザーの案件多数 事業立ち上げや仕様策定段階から参加する壁打ちスタイルが得意
  3. UIデザイン実績 sigfy © Fusic Co., Ltd. 学校と保護者間の連絡にまつわる モヤモヤを解決する 安心安全な一斉連絡サービス sigfy.jp

    https:// ・2020年のUIリニューアル ・サービス紹介Webサイトデザイン を手がけました(2020年)
  4. UIデザイン実績 現場ポケット © ASTEC PAINTS INC. 現場作業に関わる人の円滑な コミュニケーションをサポートする 施工管理者の生産性向上アプリ gempo.info

    https:// 2022年度グッドデザイン賞(システム・サービス部門) ・UIデザイン を手がけました (2018年12月〜現在)
  5. プレゼンでのペルソナのなりきり 今までで一番世界に入り込めたワー クショップでした! 内容も過ごした時間も濃いものだったと感じます。 紙に文字で書くの も様々な意見が出ると知ったこと 言葉で意見を出すのもよいが、 積極的に行かないと後悔するということ 早く試して早く失敗する 自身の完璧主義的考え方を変えるきっ

    かけになるようなワークショップでとてもためになる2日間でし た。 チームでの発表の際リンクが開かないことがあり、 トラブル対応の大切さを実感しました。 ファシリテーターの存在は大きい。 チームの手が止まるとき、意見が出ないとき、話し 合いで違う方向へ行くとき、状況を瞬時に把握し、 心理的安全性が保たれた状態に導いてくださること で、とても作業が捗った。
  6. とある男子学生の悩み (2017年) モバイルバッテリーを 5-6個、常に持ち歩く battal (2017年) いつでもどこでもモバイルバッテリー貸出 2016年 熊本地震 被災以来、スマホの

    充電切れがトラウマに 町中でどこでも モバイルバッテリー をレンタル!? 🤩 別の類似サービスが 1年後に開始(時代を捉えてた) ChargeSPOT 2018年 開始
  7. サービスデザイン ワークショップの流れ day1 ユ ザ ス ラ イ ド 作

    成 ユ ザ ー テ ス ト プ ロ ト タ イ ピ ン グ ー 劇 紙 プ ロ ト タ イ ピ ン グ ー ペ ル ソ ナ 作 成 ペ ル ソ ナ な 即 り 興 き 演 り ー 課 題 発 見 課 題 解 決 の 仮 説 day2 テ ス ト プ レ ゼ ン
  8. ルール2 5グラウンドルール たくさんのアウトプットが生まれる 良い議論する場を作るための決まりごと 1. ほめる 粗野なアウトプットを歓迎する 2. 聴く 傾聴

    たくさんの アウトプット (検討材料) 3. 受けとめる 受容≠肯定 4. 待つ 生産的沈黙 5. 愉しむ キツさも苦しさも含めて 良質な仮説を 立てられる (検討) (「5グラウンドルール」は株式会社つくるひとの登録商標です)
  9. AI活用ガイドライン このワークショップでは、AIを「思考を広げる補助輪」として使います AIの役割 ・自分たちの考えを広げるため ・アイデアのヒントや肉付けサポート AIを使ってよい タイミング 禁止事項 ファシリテーターが指示 し

    🚫AIの提案をそのまま採用する たタイミングのみ →チームで検討・修正する ・インタビュー用質問の数を出す ・キャッチフレーズの案出し ・ビジネスモデルキャンバス検討後 の サンプル案 ・ロゴ案 🚫AIに丸投げ →自分達の考えをベースにする
  10. 呼びかけ Yes and Yes! 今度ドライブ行きませんか? 否定語ダメ絶対 必ず「いいですね!」 からアイディアを被せる いいですね! それじゃクラス全員で行きましょうか!

    いいですね! それじゃいっそバスを貸切ましょうか! 延々と続ける 片方が止まるか、1分で終了 (他メンバーが1分計る) いいですね! ◦◦◦◦
  11. 参考) Googleの研究結果「Project Aristotle」 Googleは2012年から2年間にわたり180以上のチームを分析 効果的なチームを決定づける要素で最も重要な要因が 「心理的安全性」 だと判明 - 心理的安全性 (Psychological

    Safety) メンバーが自由に発言し、リスクを取ることを恐れない環境 - 信頼性 (Dependability) メンバーが互いに高いパフォーマンスを期待し、信頼できること - 構造と明確さ (Structure and Clarity) チームの目標、役割、計画が明確であること - 仕事の意味 (Meaning of Work) チームの効果性にそれほど 影響していなかった変数 チームメンバーの働き場所 (同じオフィスで近くに座り働くこと) 合意に基づく意思決定 チームメンバーが外交的 であること チームメンバー個人の パフォーマンス 仕事量 メンバーが自分の仕事に意義を感じていること - 仕事のインパクト (Impact of Work) メンバーが自分の仕事が組織や社会に影響を与えていると感じること 先任順位 / 在職期間 チームの規模
  12. 4-5人が最適 チーム内で2班に分かれる ブレインライティングの流れ 1人1枚 各自でシートの準備 手描きで 3列x5行 の表を書く テーマ: 社会をより良くするサービス

    一行目に自分のアイディアを まず書きだす 前の人のアイディアをヒントに 思いつくアイディアを書きだす テーマ: 社会をより良くするサービス テーマ: 社会をより良くするサービス 面倒なゴミ出しの 手間が減るサービ ス 面倒なゴミ出しの 手間が減るサービ ス 引っ越し手続きの 面倒がなくなる サービス 週イチぐらいで集 まれるオフィス 引っ越し手続きの 面倒がなくなる サービス 週イチぐらいで集 まれるオフィス 引越し手続き 一括代行 サービス 曜日単位で 借りる オフィス ヒント 2分 1行目に各自で アイディアを記入 シート を回す 全国ゴミ出し 情報ポータ ルサイト 上の行にヒントに アイディアを記入 埋まるまで繰り返す 引用 元https://www.kikakulabo.com/brain-writing/
  13. チームには台本がない まるで 即興演劇 のようだ! • チームには目的はあるけど台本がない • 刻々と変わる状況にアドリブで対応して いかなければならない •

    次々と起こる出来事を受け止めつつ、 シャープに反応し、その中で相互に 創造性を働かせなければならない 参考)ニューヨークのビジネスマンは会社終わりにインプロ(即興演劇)を学んでいる? インプロビゼーション(即興演劇) 企業研修に取り入れてる企業) Google、Netflix、スターバックス、マリオット、 マイクロソフト、 マサチューセッツ工科大学、スタンフォード大学
  14. 今日やること(後半) 3. 共感マップ 1. ペルソナをつくる 2. ペルソナ即興演劇&観察 シナリオ作成 改善 5.

    ユーザーテスト ユーザー理解 仮説検証 4. ペーパープロトタイピング 改善
  15. 共感マップ Think and Feel 考えていること・感じてること Hear See 聞いていること 見ているもの Say

    and Do 言っていること・行動 Pain Gain 痛みやストレス 得られるもの 引用)NIJIBOX BLOG
  16. 共感マップ 衣替えの前に処分したいなー 例)メルカリ出品側 登録とか面倒そう… Think and Feel 考えていること・感じてること 友達が高く売れたとSNSに投稿 してた

    友達から簡単だと聞いた Hear See 聞いていること 見ているもの バイトの先輩から すぐ売れると教えてもらった Say and Do 部屋の不用品が邪魔だ… コンビニで発送してる人 を見かけた 言っていること・行動 使い古した中古品でも売れる のかな? Pain 痛みやストレス 部屋に物が溢れてるけど 捨てるのは勿体ない 住所とかバレないの? 要らないものが売れるなら やってみたい Gain 得られるもの 中古ショップとか質屋とか ハードル高い 引用)NIJIBOX BLOG
  17. 共感マップ 例)バイトル ブラックだったらどうしよう… ちゃんと続けられる仕事 じゃないと迷惑かけそう 友達より遅れてる気がして 焦るけど、失敗もしたくない Think and Feel

    考えていること・感じてること 親:「学業優先だよ」「夜遅くはダメ」 SNSで「バイトつらい」「神バ イト」など真逆の投稿 先生「校則守るならバイトOKだよ」 Hear See 聞いていること 見ているもの 友達「あの店は優しいよ」 「ここはやめとけ」 学校の掲示板やコンビニ の募集ポスター バイトルの求人ページ (写真・動画つき) Say and Do 言っていること・行動 「時給高いところがいい!」 と言いつつ口コミをめちゃ見る Pain 初電話・初面接への恐怖 痛みやストレス 自分に合わない仕事を 選んでしまうリスク シフト実態、雰囲気が わからない求人情報 応募ボタン前で止まって 何日も悩む 気になる求人をスクショ して親や友達に相談 安心して働ける職場情報 (動画・写真・口コミ) 面接までの流れが 分かるガイド Gain 得られるもの 初バイト成功による 自信とおこづかい 引用)NIJIBOX BLOG
  18. 用紙に書き込んでも 付箋を貼るだけでもOK 6 ペルソナの項目 (簡易版) ペルソナの概要 3 どんな経緯でWebサイトを利用する? 何がきっかけ? ペルソナの顔

    下手でいいから 手描きの絵 名前/職業/年齢 4 ペルソナの抱えている課題 ペルソナのゴール (利用前の心の声) スタート時のセリフ 一番メインの利用者 を想定する 2 1 どんな課題を抱えてるペルソナ? どうなったらゴール? (目的達成後の心の声) 5 �� (利用前の心の声) ゴール時のセリフ ��
  19. ペルソナの項目(簡易版) ペルソナの概要 仕事中心で運動習慣がなく、ここ数年で体重が大幅増。 一人ではダイエットが続かず、自信を失いかけている。 ペルソナの抱えている課題 ダイエットが続かない、運動・食事管理の習慣化が難しい 健康診断の結果が悪化、見た目に自信がない 名前/職業/年齢 ペルソナのゴール 佐藤

    健一(38) 会社員(営業職) 体重・体脂肪を落として見た目を改善、健康的な生活習慣を身につけたい 「変われた」という成功体験を得たい スタート時のセリフ (利用前の心の声) ゴール時のセリフ (目的達成後の心の声) 一人じゃ絶対続かない… 本気で変わらないと ここまで変われるなんて! 自信が戻ってきた。 例)ライザップ
  20. ペルソナの項目(簡易版) 例)バイトル ペルソナの概要 ライブ遠征と推し活の費用を自分で少し負担したい バイト条件は家から自転車で15分以内、土日のみ、夜は21時まで ペルソナの顔 ペルソナの抱えている課題 下手でいいから 手描きの絵 初めてのバイトで「どこが安全で働きやすいか分からない」

    ネットの情報が多くて「口コミのどこまで信じていいか不安」 応募フロー(WEB応募→電話→面接)がイメージできず、最初の一歩が重い 名前/職業/年齢 ペルソナのゴール 佐藤 ひかり(17) 高2 公立高校/軽音部 スタート時のセリフ 条件に合うバイトを自分で見つけて応募できる 面接前に仕事内容や雰囲気を理解して、安心して初出勤できる (利用前の心の声) バイトしたいけど、どのお店 が良いとか全然分からない… �� ゴール時のセリフ (目的達成後の心の声) 写真や動画で雰囲気が分かった から安心して応募できた! ��
  21. ワークの内容 1 ペルソナなりきり&記録 ペルソナ シート 一人がペルソナになりきってアドリブで演技 他のメンバーはセリフや画面要素を記録 2 アクティビティ シナリオ作成

    セリフをベースに シナリオを手書きで作成 スタート シナリオ (台本) 時間がない場合は 付箋の貼り合わせでOK 3 ペーパープロトタイピング作成 セリフ 😰 画面 要素 ペーパー プロトタイピング ゴール 😁 セリフ 必要な 画面要素 …… …… …… …… ☑ _____ ☑ _____ ☑ _____ …… …… ラフな手書きでOK 全画面を手分けして作成 ………… ………… ………… 模造紙 4 ユーザーテスト ユーザーがヒントなしで目的を達成できるかを検証 シナリオを読みながらペルソナになりきって ペーパープロトタイピングを触っていく
  22. ワークの内容 1 ペルソナなりきり&記録 ペルソナ シート 一人がペルソナになりきってアドリブで演技 他のメンバーはセリフや画面要素を記録 2 アクティビティ シナリオ作成

    セリフをベースに シナリオを手書きで作成 スタート シナリオ (台本) 時間がない場合は 付箋の貼り合わせでOK 3 ペーパープロトタイピング作成 セリフ 😰 画面 要素 ペーパー プロトタイピング ゴール 😁 セリフ 必要な 画面要素 …… …… …… …… ☑ _____ ☑ _____ ☑ _____ …… …… ラフな手書きでOK 全画面を手分けして作成 ………… ………… ………… 模造紙 4 ユーザーテスト ユーザーがヒントなしで目的を達成できるかを検証 シナリオを読みながらペルソナになりきって ペーパープロトタイピングを触っていく
  23. メンバーと手分けして作成 ペルソナの台本 アクティビティシナリオ テスターが演じる台本 最初は関係者で 内部ユーザーテスト ユーザーテスト で成立するか検証 󰢏セリフベース ❌

    操作指示NG 初回ユーザーテスト 15:00 プロトタイプ 台本に必要な画面 UI/コンテンツ 手書きでOK 画面を手分けして 全画面を先に作る セリフの付箋 の 貼り合わせでもOK
  24. ユーザーテストの手順 1 あいさつ 4 画面を差し替える 目的と進め方を簡単に伝える 進行役が遷移先の紙を 手動で入れ替える ポイント: ペーパープロトタイピング版

    2 設定を読む 5 ゴールで終了 ペルソナとシナリオを声に出して 読んでもらう 目的を達成できたら テスト終了 ・フィードバックと質問は分ける ・テスターを長く拘束しない 3 操作してもらう 6 振り返り・お礼 指さしでペーパープロトタイプを 操作してもらう 気になった点を聞き、 感謝を伝える ・1回5分目安で短く回す
  25. ユーザーテストの役割と心得 目的は「困りごと」を見つけること ユーザーはテストされていない。テストされているのはプロトタイプです。 ① テスター (被験者) ② ホスト役 (進行役) テスターがスムーズに

    進められるよう 見守りながら サポートします 普段どおりに 使ってみてください OK (やってほしいこと) ✓ 思ったことを声に出す 「どこを押せばいいかわからない」等 ✓ ギブアップ OK NG (やらないでほしいこと) × 正解を探そうとしない × 作者に気を遣わない × 自分を責めない OK (やってほしいこと) ✓ 黙って見守る ✓ 困ったら「どこでお困りですか ?」 と 聞く 「わかりません」「見つけられません」等 × 操作方法を教えない × 誘導しない 「ここですよ」「右上見てください」等 × 先回りしない 「次はこうなると思いますよ」等 ✓ 考えている時間を待つ ✓ 遠慮しない 「使いづらい」「わかりにくい」等 困ることは失敗ではありません。 それが一番の発見です! NG (やらないでほしいこと) 答えを教えるのではなく、 ユーザーの気づきを引き出しましょう。
  26. ユーザーテストの役割と心得 (つづき) ③ 観察役 (記録役) ④ システム役 (画面切替役) テスターの操作に合わせて画面を 切り替えます(ペーパープロトタイプ)

    テスターの発言や行動を 客観的に記録します OK (やってほしいこと) OK (やってほしいこと) ✓ 発言を記録する ✓ 行動を記録する (迷った・戻った等) ✓ 困った箇所や気づきを記録する NG (やらないでほしいこと) × 解決策を考えない × デザイン議論を始めない × テスターへ話しかけない 記録の例 観察内容 ✓ テスターが行動した後に切り替える ✓ 勝手に解釈せず、行動の結果だけを再現 ✓ 同じ場所に差し替える(置き換える) ✓ 迷ったら止めて、確認する 切り替え方のポイント(ペーパープロトタイプ) ① 同じ場所に差し替える ② 指を離してから切り替える ③ ポップアップは上に重ねる × 横に置く × 押す前に切替 × 全面を差し替える ◦ 同じ位置へ ◦ 押した後に切替 ◦ 上に重ねる 記録例 発言 「どこにあるかわからない」 行動 10秒以上探した 結果 見つけられなかった みんなで大切にしたいこと あなたはシステム役(アプリの代役)です。 主役はテスターです。 批判や評価ではなく、事実を集める 意見ではなく、行動を観察する 問題が見つかるほど、良いテスト!
  27. 何を試す? 締切厳守!! 休憩は自由 😊 ユーザーテストを繰り返す 1回目 15:00~ 2回目 15:30~ 3回目

    16:00~ 16:30~ ~ 17:30 終了 チームメンバーでテスト チーム外メンバーで テスト 誰がテストに出るか 決めておくこと 作戦準備スライド下書き 明日の説明
  28. サービス名は? 作業分担の例 まずは全画面を 情報を引き出す5グランドルー 全体見渡して このサービスの価値 ル使いやすさを! を伝えたい! ざっくりと! 何を優先するか?

    休憩も取りながら ワイヤー デザイナー プレゼン チェッカー 画面遷移 配色/パーツ スライドや 動作チェック プロトタイプ 素材収集/ロゴ? プレゼン構成 タイムキーパー
  29. 休憩/昼休み自由 ユーザーテスト 内部 11:45~ 1回目13:15~ 2回目13:45~ 3回目14:20~ - 事前モニター確認 2日目

    形式は自由 プレゼン 15:30〜 - 1チーム5分 - 講評→懇親会時 - 順番くじ引き 〜17:30 懇親会 〜17:50 クロージング
  30. A3で1枚✕他チーム To どのチーム from 自分のチーム 全てのプレゼン終了 後に渡す Keep Problem Try

    継続したい点 良かった点 問題点 改善したい点 挑戦したい点 試したいこと
  31. 日本全国に支店がある塗料卸業者の ECサイト検討ワークショップのこと 全国営業成績トップ のエースが 自らペルソナと シナリオを作成 顧客解像度が一番高い のは私です! 関係者たちの前で ペルソナになりきり

    シナリオを最後まで ??? 読み上げた このシナリオなら顧客 は絶対買ってくれる! ??? 演じきった後に 彼が言ったセリフは? 買わないっすわ
  32. 成功率を 上げるために ビジネスモデルの解像度を上げる 顧客・利用者の解像度を上げる 「どこか間違えてるはず」 課題検証を速く回す 「いいモノなら売れる」 仮説は覆る前提で反証 作り込みに熱中 80%が

    課題の発見と検証 に集中 74%が プロジェクト 初期段階 プロダクトの検証 に集中 PMFを達成し 失敗した 成功したスタートアップ スタートアップ ※PMF : Product/market fit 提供サービスが市場のニーズに合っている状態 米StartupGenomeが3200社のインターネット系 スタートアップを対象に行ったアンケートより 引用)起業の科学 (著 田所 雅之 )
  33. さいごに • 早く作って早く試して早く失敗できた? ◦ 同じ時間で同じアウトプットできた? • チームでのものづくり、学べた? ◦ 初日のチームのルール守れた? •

    サービスは世界を変える力を持ってる • 体験こそが身体知 エビングハウスの忘却曲線「人は1日で70%忘れる」 人生のどこかで思い出されるワークだったら最高