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

StartDesignEngineering

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.
Avatar for uchiyama886 uchiyama886
August 13, 2026

 StartDesignEngineering

This slide deck covers Interaction Design (IxD) mapped across the 5 stages of Design Thinking.
It introduces practical UX techniques tailored for hackathons, helping teams rapidly build user-centered products.

Avatar for uchiyama886

uchiyama886

August 13, 2026

More Decks by uchiyama886

Other Decks in Design

Transcript

  1. 人間中心設計 Human Centered Design • 人間中心設計とは... • D.A.ノーマンによって提唱された • 「システムの使用に焦点を当て,人間工学及びユーザビリティの知識と手法とを適用す

    ることによって,インタラクティブシステムをより使えるものにすることを目的とした システムの設計及び開発へのアプローチ 」 (ISO 9241-210:2010) • 英語ではHuman Centerd Design(=HCD) • User Centered Designとも呼ばれる
  2. デザインの順序 リチャードブキャナンのデザインの順序 Buchanan, R. (2001). "Design Research and the New

    Learning."、画像はcameron tonkinwise「Degrees of Higher Order Design」より引用
  3. 参考文献 1. D.A. ノーマン『誰のためのデザイン? 増補・改訂版』新曜社, 2015 https://www.shin-yo-sha.co.jp/book/b455574.html 2. Jesse R.

    Morgan『Intro to UX: the Norman door』2018 https://uxdesign.cc/intro-to-ux-the-norman-door-61f8120b6086 3. Stanford d.school, Design Thinking Bootleg(Empathize / De ne / Ideate / Prototype / Test) https://dschool.stanford.edu/tools/design-thinking-bootleg fi 4. Buchanan, R. (2001). "Design Research and the New Learning." Design Issues, 17(4), 3‒23 https://doi.org/10.1162/07479360152681056
  4. ユーザー調査法 質的調査(定性的調査、Qualitative Research) 量的調査(定量的調査、Quantitative Research) データ データ 会話記録、観察記録、写真、音声、動画、テキスト 量、数値で表せられるもの、割合 情報、新聞記事等

    調査手法 調査手法 フィールドワーク、インタビュー、エストグラフィ アンケート、統計的検定/統計分析 ー、生活史調査 アウトプット アウトプット フィールドノート、ドキュメンタリー映像、アルバ 統計的データ、グラフ、問いによって分析方法は ム、ルポ等、問いによって形式は様々 様々 →共感(Empathy) →傾向(Tendency) 「質的社会調査の方法 他社の合理性の理解社会学」, 岸政彦, 石岡丈昇, 丸山里美 「質的研究と量的研究のちがい」, 池田光穂
  5. ユーザー調査法 質的調査(定性的調査、Qualitative Research) 量的調査(定量的調査、Quantitative Research) データ データ 会話記録、観察記録、写真、音声、動画、テキスト 量、数値で表せられるもの、割合 情報、新聞記事等

    実際には両方を複数組み合わせて調査する 調査手法 調査手法 フィールドワーク、インタビュー、エストグラフィ アンケート、統計的検定/統計分析 (三角測量、方法論的複眼) ー、生活史調査 アウトプット アウトプット フィールドノート、ドキュメンタリー映像、アルバ 統計的データ、グラフ、問いによって分析方法は ム、ルポ等、問いによって形式は様々 様々 →共感(Empathy) →傾向(Tendency) 「質的社会調査の方法 他社の合理性の理解社会学」, 岸政彦, 石岡丈昇, 丸山里美 「質的研究と量的研究のちがい」, 池田光穂
  6. 観察調査のポイント AEIOUフレームワーク A……………… Activities: 人々の行動。なぜその行動を取るのか。 E……………… Environments: 環境。場所や空間。どんな・なぜその空間か Interactions: 相互作用。人とモノ。モノと空間、何がどのように

    I………………… 相互作用しているのか O……………… Objects: モノ。どんな素材・形状・大きさか。いつからそこに あるのか U……………… Users: 人。そこにいるのは誰で、どんな人で、なぜそこに いるのか。役割はなにか。 Jan-Magnus Neverdal. “Acquire User Insight with Systematic Design Observation”
  7. 参考文献 1. 「質的社会調査の方法 他社の合理性の理解社会学」, 岸政彦, 石岡丈昇, 丸山里美 https://www.yuhikaku.co.jp/book/b10188816.html 2.「質的研究と量的研究のちがい」, 池田光穂

    https://navymule9.sakura.ne.jp/150321Qapr.html 3. Jan-Magnus Neverdal. “Acquire User Insight with Systematic Design Observation” https://www.ntnu.edu/documents/ 139799/1279149990/22+Article+Final̲janmagnn̲fors%C3%B8k̲2017-12-06-23-27-28̲TPD4505.JanMagnus.Neverdal.pdf 4.Presentation by NESTA on Designing and Prototyping made at the OECD Conference on... https://www.slideshare.net/slideshow/presentation-by-nesta-on-designing-and-prototyping-made-at-theoecd-conference-on-innovating-the-public-sector-from-ideas-to-impact-1213november-2014/44356787#2
  8. 分析の例 KJ法とは:定性的な情報を紙の上でグループ化・構造化して新たな発想を出す方法 1.単位化 ブレインストーミングや調査 の出た情報を1枚ずつ小さな カード(紙キレ)に書き込む 2.グループ化 3.構造化・図解化 付箋を一覧できるようにし 付箋から近い要素を小グルー

    て、近い要素で2,3枚のグルー プ、 中グループ、大グループに プにしていく していき図解していく 4.叙述化 紙に出た発想をラベルや図か ら文章に書き起こし、ホット キーワードや図解から見えて きたアイデアを言語化し論理 化することで新たな発想を得 る。 川喜田二郎『発想法 改版』、能力開発技法「KJ法」
  9. ユーザーモデルの例① ペルソナ、ユーザーシナリオ • ペルソナは、アランクーパーが提唱し た、ユーザーの行動・思考・ 価値観な どのデータをもとに作られた架空のユ ーザー像のこと • ユーザーシナリオは、そうしたユーザ

    ー像から、辿る体験や行動、心情など を映像などのシナリオで表現するもの Wikipedai「アランクーパー」、NIJIBOX BLOG「ペルソナシートとは?活用目的から作り方まで事例つきで詳しく紹介!」
  10. ユーザーモデルの例② ステークホルダーマップ、ジャーニーマップ ジャーニーマップの例 • ステークホルダー*マップは、プロダク トやサービスがどのような利害関係者 の存在によって成立しているかを図解 する手法 • ジャーニーマップ、は人々と製品やサ

    ービスとのインタラクションを時間軸 で表現した図 *ステークホルダー=利害関係者 カスタマージャーニーマップだけじゃない! 顧客理解を深めるために使い分けたいツール
  11. 参考文献 1. 川喜田二郎『発想法 改版』中公新書, 2017(初版1967) https://www.chuko.co.jp/shinsho/2017/06/180136.html 2. Alan Cooper, The

    Inmates Are Running the Asylum, 1998 Wikipedia: https://en.wikipedia.org/wiki/Alan̲Cooper̲(software̲designer) 3. 安藤昌也『UXデザインの教科書』丸善出版, 2016 https://www.maruzen-publishing.co.jp/book/b10112078.html 4. NIJIBOX BLOG「ペルソナシートとは?活用目的から作り方まで事例つきで詳しく紹介!」 https://blog.nijibox.jp/article/personasheet/ 5. インプレス「カスタマージャーニーマップだけじゃない! 顧客理解を深めるために使い分けたいツール」 https://webtan.impress.co.jp/e/2013/12/18/16557
  12. アイデア発想法の例 素人思考 素人目線で単純に捉える。 主に、 • 単純か? • 素直か? • 自由か?

    • 簡単か? といった視点で思考する。 素人目線で着想し、 玄人目線で具現化する。 小野義直・宮田匠『思考法図鑑 ひらめきを生む問題解決・アイデア発想のアプローチ60』
  13. ビジネス思考の例 シーズ思考 • すでにある資源・強みから 価値を生み出す考え方。 • ユーザーのニーズから価値 を生み出す方法と真逆のア プローチ。 •

    シーズとニーズを軸としたマ トリクスで組み合わせを考 える手法もある。 小野義直・宮田匠『思考法図鑑 ひらめきを生む問題解決・アイデア発想のアプローチ60』
  14. ビジネス思考の例 逆算思考 • 到達したいゴール(理想) を起点として現状とのギ ャップを可視化する。 逆算する • 積み上げ(Forecasting) と対比して、バックキャ

    ストとも呼ばれる。 逆算する • 意思決定しやすいが、 急激な変化に弱い。 逆算する 小野義直・宮田匠『思考法図鑑 ひらめきを生む問題解決・アイデア発想のアプローチ60』
  15. 参考文献 1. Rohrbach, B. (1969). "Kreativ nach Regeln ‒ Methode

    635, eine neue Technik zum Lösen von Problemen." Absatzwirtschaft, 12, 73‒75. Wikipedia解説: https://en.wikipedia.org/wiki/6-3-5̲Brainwriting 2. 小野義直・宮田匠『思考法図鑑 ひらめきを生む問題解決・アイデア発想のアプローチ60』翔泳社, 2019 https://www.shoeisha.co.jp/book/detail/9784798160948 fi 3. Stanford d.school, Design Thinking Bootleg(Empathize / De ne / Ideate / Prototype / Test) https://dschool.stanford.edu/tools/design-thinking-bootleg
  16. クイック&ダーティープロトタイピング プロトタイプにおける忠実度* • コンセプトからプロトタイピング (試作)を行っていく。 • すばやく手間をかけずに操作できて テスト可能な制作物にする手段。 • モノではなく体験を試作する。

    • テストしやすく、調整が効きやすい *最終的な制作物にどのくらい近いか Adobe Blog『プロトタイプの忠実度。ローファイ・プロトタイプ(簡易版)とハイファイ・プロトタイプ(本物っぽい版)を正しく使い分ける | アドビUX道場 #UXDojo』
  17. 参考文献 1. Kelley, J. F. (1983). "An empirical methodology for

    writing user-friendly natural language computer applications." Proceedings of CHI '83, ACM. https://doi.org/10.1145/800045.801609 2. Sara Paul, Maria Rosala. (2024) “The Wizard of Oz Method in UX.”, NN/G https://www.nngroup.com/articles/wizard-of-oz/ 3. Wizerd of OZ ”Pay No Attention” https://www.youtube.com/watch?v=NZR64EF3OpA
  18. チームの成長プロセス タックマンモデル 形成期 混乱期 • 不安や内向的、緊張感をもっている • 互いに遠慮が少なくなっていく • 互いの役割がまだ不明瞭でチームの方針・目標

    • 目標に対して生じる問題で不満が表出する段階 を形成していく段階 • エネルギーがメンバー個人の内側に向かう • チームとしてのタスクだけでなく個人同士の関 係にも目を向けていく必要がある 統一期 機能期 • 互いに調和を築く段階 • 個人が必要に応じて役割や責任を担う • メンバー同士の役割が明確化し始める段階 • 問題や課題が解決されて成功を経験する段階 • 行動規範が暗黙的に気づかれる • エネルギーが共通ゴールに向かっていく • チームの目標にエネルギーが注がれ始める • リーダーが形式化していく Human Resources「Using the Stages of Team Development」を元に作図
  19. グループワークのお作法 ワーキングアグリーメント | チーム全員が合意した「働き方の約束」 • チームのあり方を言語化することで互いの感情を共有する • 形成期/混乱期のプロセスを促進することに役立つ <共通ルール> <マインド>

    挨拶は元気に! 名指しされなくても積極的に発言しよう! オンライン時は基本ビデオONにしよう! わからないこと・気になることはすぐに聞こう! スケジュール共有はなるべく早めに! <他> 19時には作業を終える! 議論・話し合いはPublicな場所で!DMは控える! ご昼休みは12時〜13時! 課題は小さいうちに共有・相談しよう! AGILE STUDIO「ワーキングアグリーメント」を参考に作成
  20. チームワークのためのツール 共同編集、スケジュール調整、ファイル共有..etc ドキュメント:Google Docs, Microsoft Word スライド:Google Slides, Microsoft PowerPoint,

    Canva, Figma ホワイトボード:Miro, Microsoft Whiteboard, Figma 表計算:Google Spreadsheets, Microsoft Excel スケジュール調整ツール:トントン、調整さん、Googleカレンダー ファイル共有ツール:Dropbox、Google Drive、OneDrive、WeTranser
  21. 引用文献 1. Tuckman, B. W. (1965). "Developmental Sequence in Small

    Groups." Psychological Bulletin, 63(6), 384‒399. 全文PDF: https://web.mit.edu/curhan/www/docs/Articles/15341̲Readings/Group̲Dynamics/ Tuckman̲1965̲Developmental̲sequence̲in̲small̲groups.pdf 2. Human Resources「Using the Stages of Team Development」 https://hr.mit.edu/learning-topics/teams/articles/stages-development 3. Sivers, D. "How to start a movement." TED, 2010. https://www.ted.com/talks/derek̲sivers̲how̲to̲start̲a̲movement 4.AGILE STUDIO「ワーキングアグリーメント」 https://www.agile-studio.jp/post/apm-working-agreement 5.MAKE SPACE メイク・スペース スタンフォード大学dスクールが実践する創造性を最大化する「場」の つくり方, 2012 https://books.cccmh.co.jp/list/detail/967/
  22. 書体・フォント選び 高級感あふれるフォント • 高級感のあるブランドはロゴだけで「王道感」 が伝わってきませんか? • ルイ・ヴィトンではFuturaのMidiumが使われ ています • しかし実際に組んでみると、少し違いますね

    LOUIS VUITTON • 実は少し字間を空けることで、落ち着いた大人 向けの雰囲気を表現しています 上が本物のロゴの一部 下がFutura Midium 小林章「フォントのふしぎ」
  23. • 一貫した特徴・字形に基づいて分類されたものを「書体」と呼び、 パソコンなどに搭載されている個々の製品を「フォント」と呼ぶ ゴシック体 ヒラギノ角ゴシック サンセリフ体 Arial Helvetica Neue Futura

    游ゴシック 筑紫A丸ゴシック Noto Sans JP 明朝体 游明朝体 ヒラギノ明朝 ProN セリフ体 Times New Roman Rockwell 游教科書体 凸版文久見出し明朝 Monaco Charter Georgia a k a “伝わるデザインの基本 よい資料を作るためのレイアウトのルール” s O 書体・フォント選び
  24. 日 フォントの組み合わせ 日本語と英数字に使うフォントの組み合わせが悪いと可読性に欠けます。 上:凸版文久明朝+Arial 下:ヒラギノ角ゴ ProN+Helvetica Neue 私たちが開発した**『Nexus(ネクサス)』は、LLMを活用した次世代型オートメーション・プラットフォーム です。ユーザーのワークフローを自動でアナライズし、最適なタスク・アサインをリアルタイム**で実行します 私たちが開発した**『Nexus(ネクサス)』は、LLMを活用した次世代型オートメーション・プラットフォーム

    です。ユーザーのワークフローを自動でアナライズし、最適なタスク・アサインをリアルタイム**で実行します 日本語がゴシック体なら、英数字はサンセリフ体(segoe UI, Arial, Helvetica) 本語が明朝体なら、英数字はセリフ体(Times New Roman, Adobe Garamond) “伝わるデザインの基本 よい資料を作るためのレイアウトのルール”
  25. 引用文献 1. 小林章. (2011). “フォントのふしぎ”, https://bijutsu.press/books/2150/ 2. 高橋佑磨, 片山なつ. (2021).

    “伝わるデザインの基本 よい資料を作るためのレイアウトのルール”, 技術評論 社 https://gihyo.jp/book/2021/978-4-297-11985-0
  26. スライド参考文献 1. D.A. ノーマン『誰のためのデザイン? 増補・改訂版』新曜社, 2015 https://www.shin-yo-sha.co.jp/book/b455574.html 2. Jesse R.

    Morgan『Intro to UX: the Norman door』2018 https://uxdesign.cc/intro-to-ux-the-norman-door-61f8120b6086 3. Stanford d.school, Design Thinking Bootleg(Empathize / De ne / Ideate / Prototype / Test) https://dschool.stanford.edu/tools/design-thinking-bootleg 4. Buchanan, R. (2001). "Design Research and the New Learning." Design Issues, 17(4), 3‒23 https://doi.org/10.1162/07479360152681056 5.「質的社会調査の方法 他社の合理性の理解社会学」, 岸政彦, 石岡丈昇, 丸山里美 https://www.yuhikaku.co.jp/book/b10188816.html fi 6.「質的研究と量的研究のちがい」, 池田光穂 https://navymule9.sakura.ne.jp/150321Qapr.html
  27. 7. Jan-Magnus Neverdal. “Acquire User Insight with Systematic Design Observation”

    https://www.ntnu.edu/documents/ 139799/1279149990/22+Article+Final̲janmagnn̲fors%C3%B8k̲2017-12-06-23-27-28̲TPD4 505.Jan-Magnus.Neverdal.pdf 8.Presentation by NESTA on Designing and Prototyping made at the OECD Conference on... https://www.slideshare.net/slideshow/presentation-by-nesta-on-designing-and-prototypingmade-at-the-oecd-conference-on-innovating-the-public-sector-from-ideas-to-impact-1213november-2014/44356787#2 9.川喜田二郎『発想法 改版』中公新書, 2017(初版1967) https://www.chuko.co.jp/shinsho/2017/06/180136.html 10. Alan Cooper, The Inmates Are Running the Asylum, 1998 Wikipedia: https://en.wikipedia.org/wiki/Alan̲Cooper̲(software̲designer) 11. 安藤昌也『UXデザインの教科書』丸善出版, 2016 https://www.maruzen-publishing.co.jp/book/b10112078.html
  28. 12. NIJIBOX BLOG「ペルソナシートとは?活用目的から作り方まで事例つきで詳しく紹介!」 https://blog.nijibox.jp/article/personasheet/ 13. インプレス「カスタマージャーニーマップだけじゃない! 顧客理解を深めるために使い分けたいツー ル」 https://webtan.impress.co.jp/e/2013/12/18/16557 14.

    Rohrbach, B. (1969). "Kreativ nach Regeln ‒ Methode 635, eine neue Technik zum Lösen von Problemen." Absatzwirtschaft, 12, 73‒75. Wikipedia解説: https://en.wikipedia.org/wiki/6-3-5̲Brainwriting 15. 小野義直・宮田匠『思考法図鑑 ひらめきを生む問題解決・アイデア発想のアプローチ60』翔泳社, 2019 https://www.shoeisha.co.jp/book/detail/9784798160948 16. Kelley, J. F. (1983). "An empirical methodology for writing user-friendly natural language computer applications." Proceedings of CHI '83, ACM. https://doi.org/10.1145/800045.801609
  29. 17. Sara Paul, Maria Rosala. (2024) “The Wizard of Oz

    Method in UX.”, NN/G https://www.nngroup.com/articles/wizard-of-oz/ 18. Wizerd of OZ ”Pay No Attention” https://www.youtube.com/watch?v=NZR64EF3OpA 19.小林茂, プロトタイピングにおける「何を、どこまで、どのようにつくればいいのか」問題 https://note.mu/̲kotobuki̲/n/ndbb04df9fe5c 20.Tuckman, B. W. (1965). "Developmental Sequence in Small Groups." Psychological Bulletin, 63(6), 384‒399. 全文PDF: https://web.mit.edu/curhan/www/docs/Articles/15341̲Readings/Group̲Dynamics/ Tuckman̲1965̲Developmental̲sequence̲in̲small̲groups.pdf 21. Human Resources「Using the Stages of Team Development」 https://hr.mit.edu/learning-topics/teams/articles/stages-development 22. Sivers, D. "How to start a movement." TED, 2010. https://www.ted.com/talks/derek̲sivers̲how̲to̲start̲a̲movement
  30. 23.AGILE STUDIO「ワーキングアグリーメント」 https://www.agile-studio.jp/post/apm-working-agreement 24.MAKE SPACE メイク・スペース スタンフォード大学dスクールが実践する創造性を最大化する「場」 のつくり方, 2012 https://books.cccmh.co.jp/list/detail/967/

    25.小林章. (2011). “フォントのふしぎ”, https://bijutsu.press/books/2150/ 26. 高橋佑磨, 片山なつ. (2021). “伝わるデザインの基本 よい資料を作るためのレイアウトのルール”, 技術評 論社 https://gihyo.jp/book/2021/978-4-297-11985-0