ゲームから学ぶ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 

１−１の設計をサービスで活かせる場所 

エンプティステート 

No content

エラーなのか 読み込み中なのか ユーザーに伝わらない 

意図的にデザインされたエンプティステートは、以下 の目的のために利用することができる ● システムの状態をユーザーに伝える。 ● 利用されていない機能を発見しやすくし、アプ リケーションの学習しやすさを向上させる。 ● 重要なタスクを開始するための直接的な経路を 提供する。 （中略） アプリケーションのデザインをするときに、エンプ ティステートのデザインを後回しにしないようにしよ う。意図的にデザインされたエンプティステートは、 ユーザーに自信を持たせ、システムの学習しやすさを 向上させ、重要なタスクを開始するのに役立つはず だ。 https://u-site.jp/alertbox/empty-state-interface-design 

エラーなのか 読み込み中なのか ユーザーに伝わらない 

ユーザーに 次の行動を自然に 伝えられる 

小さな成功体験 をすぐ積める設計 

テンプレート見本で 機能を知るきっかけになる 

おわりに 学ぶことは真似ること 

おわりに 学ぶことは真似ること ジャンルは問わず 良いアイデアはどんどん真似ていきましょう！