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
ゲームから学ぶUX設計 / UX Design Inspired from Games
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Daichi KUDO
May 12, 2026
370
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ゲームから学ぶUX設計 / UX Design Inspired from Games
Daichi KUDO
May 12, 2026
More Decks by Daichi KUDO
See All by Daichi KUDO
pnpmでできるサプライチェーン攻撃への備え / Pnpm Security Practices
da1chi
2
630
エンジニアが始める UXリサーチ 入門 / Introduction of UX Research
da1chi
0
530
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
790
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
6.6k
Hotwireで簡単に非同期処理のユーザー通知を作る / broadcast using Turbo
da1chi
1
190
テストライブラリによってコンポーネントテストの実行時間はどう変わるか / component-test-performance-by-library
da1chi
0
120
Blue/Greenデプロイの導入による 運用フローの改善
da1chi
1
1.2k
Featured
See All Featured
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
720
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
150
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
370
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
340
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Color Theory Basics | Prateek | Gurzu
gurzu
0
360
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
210
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
71
40k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
590
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Building Applications with DynamoDB
mza
96
7.1k
Transcript
ゲームから学ぶUX設計 Daichi KUDO (@da1chi24) 立川.any #1 at 立川こども未来センター
自己紹介 • Daichi KUDO ◦ GitHub @kudoas ◦ Twitter @da1chi24
• 興味・関心ごと ◦ UI/UX、フロントエンド全般 ◦ 開発者体験、Devtools
日々サービス開発に携わる皆さんへ
ユーザーに 作ったものを使ってもらいたい ですよね?
最初のハードルはオンボーディング(導入) Onboarding 導⼊‧理解 Adoption 定着‧活⽤深化 Expansion 成⻑‧契約拡⼤ Feedback 進化‧製品還元 今日は
この話をします
ユーザーにサービスの使い方を伝える方法 • ドキュメント・取扱説明書 ◦ 網羅的に記載できる ◦ しかしユーザーは説明書をいきなり読まない • 営業・ダイレクトマーケティング ◦
費用対効果の高い顧客なら効果的 ◦ しかしユーザー全員に行うことは物理的に難しい
サービスを自然に使う中で ユーザーが学習する仕組みがほしい
そこで参考になる”古典”があります
画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
「まず何をすればいいか」 「どうすれば成功体験が積めるか」
画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
右向きのマリオ 進んでみたい 右側の余白 埋めたくなる 画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
右向きのマリオ 進んでみたい 右側の余白 埋めたくなる 画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 次に取るべき行動が自然にわかる
右向くマリオ 進んでみたい 悪そうなのが来る どうする? 画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
右向くマリオ 進んでみたい 踏んだら倒せた! 画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo
右向くマリオ 進んでみたい 踏んだら倒せた! 画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 開始数秒で小さな成功体験が味わえる
画像出典:『スーパーマリオブラザーズ』ゲーム画面 © Nintendo 小さな成功体験が大きな目標達成につながる
もっと知りたい方へ 宮本茂さん解説 Miyamoto on World 1-1: How Nintendo made Mario's
most iconic level
1−1の設計をサービスで活かせる場所
エンプティステート
None
エラーなのか 読み込み中なのか ユーザーに伝わらない
意図的にデザインされたエンプティステートは、以下 の目的のために利用することができる • システムの状態をユーザーに伝える。 • 利用されていない機能を発見しやすくし、アプ リケーションの学習しやすさを向上させる。 • 重要なタスクを開始するための直接的な経路を 提供する。
(中略) アプリケーションのデザインをするときに、エンプ ティステートのデザインを後回しにしないようにしよ う。意図的にデザインされたエンプティステートは、 ユーザーに自信を持たせ、システムの学習しやすさを 向上させ、重要なタスクを開始するのに役立つはず だ。 https://u-site.jp/alertbox/empty-state-interface-design
エラーなのか 読み込み中なのか ユーザーに伝わらない
ユーザーに 次の行動を自然に 伝えられる
小さな成功体験 をすぐ積める設計
テンプレート見本で 機能を知るきっかけになる
おわりに 学ぶことは真似ること
おわりに 学ぶことは真似ること ジャンルは問わず 良いアイデアはどんどん真似ていきましょう!