ゲームのUIってどうやって作るの？ ～チラ見せ！プロの開発テクニック～

BANDAI NAMCO ゲームのUIって どうやって作るの？ ～チラ見せ！プロの開発テクニック～ 実践 ゲーム UI デザイン コンセプト策定から 実装のコツまで 太田垣 沙也子 (著) ユーザーを 惹き付ける UIデザインスキルが 身に付く！ 必携！ ゲームUI/UXデザイナー ゲームUIプランナー ゲームUIエンジニア SE SHOEISHA 太田垣 沙也子 株式会社バンダイナムコオンライン 『実践ゲームUIデザイン コンセプト策定から実装のコツまで』 著者 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

Hello, GAME MAKERS SCRAMBLE! 本講演でのお約束 講演中の写真撮影 OK! 私的な学習の範囲で ぜひぜひご利用ください！ SNSへの投稿 OK! ハッシュタグは #ゲームメーカーズスクランブル ビデオ録画や 音声の録音 NG! プレス関係者以外の方は ご遠慮ください！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

Hello, GAME MAKERS SCRAMBLE! 自己紹介 太田垣 沙也子 (オオタガキ サヤコ) 株式会社バンダイナムコオンライン プロデューサー ゲームデベロッパーでの受託開発経験を経て 2015年にバンダイナムコオンラインへ。 IPタイトルを中心とした コンシューマー・モバイル・アーケード・PC向けゲームの UIデザインおよび リードビジュアルを担当し 現在はプロデューサーとして新規開発プロジェクトに従事。 本年より、CEDEC運営委員会の ビジュアルアーツ担当に就任いたしました！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

Hello, GAME MAKERS SCRAMBLE! 本講演でお話しすること ◆ゲームUIの役割って？ ◆UI開発ワークフロー ◆デザインはどうやって作るの？ ◆ゲームUIデザインクイズ！ ◆まとめ＆質疑応答 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ まずは基本を押さえよう！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

この世から「UI」が 無くなったらどうなる？ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ もしもUIが無かったら…？ ◆コンピューターは一般人が触れなくなります ◆ATMでお金を引き出せなくなります ◆カーナビで目的地に辿り着けなくなります ◆ショッピングサイトで買い物ができなくなります ◆スマホはただの板になります そしてもちろん…ゲームも遊べなくなります！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ 一般的なUIの役割 ◆「ユーザー」と「システム」を繋ぐ存在 コマンド プロンプト Microsoft Windows [Version 10.0.19043.1826] (c) Microsoft Corporation. All rights reserved. C:\Users\poiso> CUI＝コマンドで操作するUI GUI＝グラフィカルに操作するUI アイコン・ボタン・テキストなど、すべてがUIの一部 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ ゲームUIの役割 ◆ユーザーの「入力」 操作を受けつけ ゲームシステムに渡す ◆ゲームシステムからの 「出力」結果を ユーザーに表示する 主人公に回復アイテムを使う！ 体力が「50」回復しました！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ ココが違うよ！ゲームUI ◆一般的な製品・サービスのUI 券売機なら迷わずチケットを 購入できるように カーナビなら最適なルートで 目的地へ着けるように TICKET 機能性やコンバージョンの追求が重要！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIの役割って？ ココが違うよ！ゲームUI ◆ゲームのUI 強い敵に遭遇したときのワクワク・ドキドキ 次に取るべき行動の選択 珍しいアイテムをランダムで 入手したときの嬉しさ レアアイテム GET!! NEXT 使いやすさに加えて、 ユーザーの感情を揺さぶる仕掛けが必要！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発の流れをご紹介します！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 コンセプト策定 プロトタイピング デザイン 実装 ブラッシュアップを 経て 完成！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 ◆コンセプト策定 「プロジェクトの目的」や 「ゲームのコンセプト」を確認 ゲーム全体を通した 「UIデザインのコンセプト」を つくる イメージソース カラー計画 フォント モチーフ あいうえお カキクケコ 沙思素世礎 TNHMY 01234 56789 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 ◆プロトタイピング 「ゲームのフロー（流れ）」や各画面の要素を確認 実際に触って操作できる 「プロトタイプ」をつくり フローの繋がりや面白さを チェックしていく フレンド招待 ガチャ画面 ショップ プレゼント画面 ランキング コーディネート タイトル画面 メインメニュー ミッション選択 インゲーム リザルト 装備画面 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 ◆デザイン 画面ごと・パーツごとの ビジュアルデザインを 作り込んでいく 演出やアニメーション、 エフェクトも重要な要素 キャラクターをえらぶ えらぶ A けってい B もどる キャラクターをえらぶ えらぶ A けってい B もどる キャラクターをえらぶ SELECT! えらぶ A けってい B もどる © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 ◆実装 実際のゲームシステムに デザインや演出を反映する トライ＆エラーを繰り返し 使いやすく魅力的なUIへと ブラッシュアップしていく ビジュアルスクリプトの場合 playButtonEffect switch setColor target status selection case 0 case 1 target color pressColor releaseAnimation playAnimation target inAnimation スクリプトの場合 function playButtonEffect ( target, status ) { switch ( status ) { case "press" : setColor ( target, pressColor ); break; case "release" : playAnimation ( target, releaseAnimation ); break; } } ※本スクリプトの記述内容は参考イメージです © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 開発ワークフローの例 コンセプト策定 プロトタイピング デザイン 実装 ブラッシュアップを 経て 完成！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

UI開発ワークフロー 使用するツールの例 2Dグラフィック系 デザインツール ● Photoshop ● Illustrator ● Sketch ● Figma ● Affinity Designer など Ps Ai プロトタイピング ツール ● Figma ● Prott ● Origami Studio ● UXPin など アニメーション・ 映像編集ツール ● After Effects ● Premiere など ゲームエンジン ● Unreal Engine ● Unity ● 自社エンジン など その他 ● オフィツール ● 減色ツール ● リネームツール ● テキストエディタ ● 3D系ツール など © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

デザインはどうやって作るの？ プロの制作手順をチラ見せ！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 GET ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

デザインはどうやって作るの？ 仕様作成＆チェック ◆いきなり見た目を作らない！ ●「目的・機能・要素」の確認 ●要素の「優先度」を確認 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

デイリーログインボーナス仕様書 ゲームにログインすると1日1回アイテムをもらえる画面です。 要素 ①画面タイトル ②開催期間 ③注意文言 ④報酬アイテムサムネイル ⑤「n日目」表記 ⑥アオリ文 ⑦キャラクター画像 NG篇 デイリーログイン ボーナス (1) (4) (5) 1日目 2日目 3日目 4日目 (2) 開催期間：1/31～12/31 (3) ログインボーナスは毎日0時にリセットされます。 (6) 毎日ログインして アイテムをゲットしよう！ (7) 5日目 6日目 7日目

デイリーログインボーナス仕様書 目的 7日継続率を上げる 概要 ゲームログイン時、 1日1回報酬アイテムを付与する。 報酬は7日分表示しておき、ユーザーが 7日目の報酬を求めてログインを継続 するように設計する。 機能 ・7日分の報酬アイテムを表示する機能 ・当日分の報酬アイテムを表示・付与する機能 ・各アイテムの詳細を確認する機能 ・開催期間を表示する機能 要素 ①当日分の報酬アイテム情報 報酬アイテム画像 報酬アイテム数量（表記：×nn） 「n日目」表記 ②7日目の報酬アイテム情報 同上 ③その他の報酬アイテム情報 同上 ④画面名 （表記：デイリーログインボーナス） ⑤開催期間 （表記：yyyy年mm月dd日～mm月dd日） ⑥アオリ文 （表記：毎日ログインしてアイテムをゲットしよう！） ⑦注意文言（最大20文字） OK篇

デイリーログインボーナス仕様書 目的 7日継続率を上げる 概要 ゲームログイン時、 1日1回報酬アイテムを付与する。 報酬は7日分表示しておき、ユーザーが 7日目の報酬を求めてログインを継続 するように設計する。 機能 ・7日分の報酬アイテムを表示する機能 ・当日分の報酬アイテムを表示・付与する機能 ・各アイテムの詳細を確認する機能 ・開催期間を表示する機能 要素 ①当日分の報酬アイテム情報 報酬アイテム画像 報酬アイテム数量（表記：×nn） 「n日目」表記 ②7日目の報酬アイテム情報 同上 ③その他の報酬アイテム情報 同上 ④画面名 （表記：デイリーログインボーナス） ⑤開催期間 （表記：yyyy年mm月dd日～mm月dd日） ⑥アオリ文 （表記：毎日ログインしてアイテムをゲットしよう！） ⑦注意文言（最大20文字） 優先度 高 優先度 低 OK篇

デザインはどうやって作るの？ レイアウト設計 ◆何をどこに置くか決める！ ●スピード重視でラフに書いてみる ●既存のゲームを観察して参考にしよう ●前後のフローの繋がりを意識する © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

Title Date: 1日目 7日目 アオリ 文～ cha ra ※

Title Date: 1日目 7日目 アオリ文 ～!!

アオリ文:: Title Date: 1日目 xnn xnn xnn xnn xnn xnn 7日目 xnn ※

デザインはどうやって作るの？ ラフデザイン作成 ◆「確定しているもの」から配置する！ ●まずは文字情報を置いてみるのがオススメ ●実際のハードウェアで 可読性が保たれているか確認しよう ●フォント（書体）もおおまかに決めておこう © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

デザインはどうやって作るの？ ラフデザイン作成 ◆「色」をどんな配分で使うか決める！ ●色にはさまざまな意味がある ●「機能」と「色」を紐づけると プレイヤーが自然に学習しやすい ●不用意にたくさんの色を使いすぎないこと ●キャラ素材などもここで配置してみる © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

デザインはどうやって作るの？ 本デザイン作成 ◆大きい要素→小さい要素の順番で！ ●いきなり細かいパーツから作り込まない ●素材集や素材サイトを活用するのもオススメ ●ときどき休憩をはさんで 客観的にデザインを見直そう © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 ×99 2日目 ×1 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 GET ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

毎日ログインして アイテムをゲットしよう！ デイリーログインボーナス 開催期間 2022年1月1日 ～ 12月31日 1日目 GET ×99 2日目 ×99 3日目 ×99 4日目 ×99 5日目 ×99 6日目 ×99 7日目 ×99 ※ログインボーナスは毎日0時にリセットされます

デザインはどうやって作るの？ デザイン完成後は… ◆データの整理をしておこう！ ●レイヤー名やフォルダ名に 適切な名前をつける ●フォルダ構成もきちんと整頓を ●仕様変更に備えておくことが大切◎ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUI デザインクイズ！ どちらがOK / NGデザイン？ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第1問 まずどこを見ればいいかわかりますか？ ミッション 仲間と協力して テッペンをめざせ！ カスタマイズ ショップ トレーニング オプション B もどる ユーザーネーム 9999pt ミッション 仲間と協力してテッペンをめざせ！ カスタマイズ ショップ トレーニング オプション B もどる ユーザーネーム 9999pt © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第1問 まずどこを見ればいいかわかりますか？ NG… ミッション 仲間と協力して テッペンをめざせ！ カスタマイズ ショップ トレーニング オプション B もどる ユーザーネーム 9999pt OK！ ミッション 仲間と協力してテッペンをめざせ！ カスタマイズ ショップ トレーニング オプション B もどる ユーザーネーム 9999pt 「まず最初に見るべき部分」を明確にしよう！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第2問 操作できる部分がわかりますか？ フレンド ログイン時間順 ID検索 検索 ロボチャン 最終ログイン時間 5分前 Lv.50 メカチャン 最終ログイン時間 30分前 Lv.3 ジェットン 最終ログイン時間 3日前 Lv.87 フレンド ログイン時間順 検索 ロボチャン 最終ログイン時間 5分前 Lv.50 メカチャン 最終ログイン時間 30分前 Lv.3 ジェットン 最終ログイン時間 3日前 Lv.87 © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第2問 操作できる部分がわかりますか？ OK！ フレンド ログイン時間順 ID検索 検索 ロボチャン 最終ログイン時間 5分前 Lv.50 メカチャン 最終ログイン時間 30分前 Lv.3 ジェットン 最終ログイン時間 3日前 Lv.87 NG… フレンド ログイン時間順 検索 ロボチャン 最終ログイン時間 5分前 Lv.50 メカチャン 最終ログイン時間 30分前 Lv.3 ジェットン 最終ログイン時間 3日前 Lv.87 「操作できる部分」をわかりやすくしよう！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第3問 情報量はちょうどいいですか？ ステータス確認 ロボチャン メカチャン ジェットン 能力パラメータ 体力 80 攻撃力 40 防御力 65 スピード 45 幸運 99 特性 優柔不断 複数の敵が いるとき、 攻撃力が 半減する。 スキル 特殊 ハイパースキャン 5/5 特殊 タイピング 10/10 物理 パンチ 20/20 特殊 情報収集 15/15 TYPE 機械 優しいココロをもったロボット。 相手の能力をスキャンできる。 キャラクター切替 B もどる ステータス確認 ロボチャン 体力 80 幸運 99 攻撃力 40 スピード 45 防御力 65 TYPE 機械 優しいココロをもったロボット。 相手の能力をスキャンできる。 スキル ハイパースキャン 5/5 タイピング 10/10 パンチ 20/20 情報収集 15/15 特性 情報切替 キャラクター切替 B もどる © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

ゲームUIデザインクイズ！ 第3問 情報量はちょうどいいですか？ NG… ステータス確認 ロボチャン メカチャン ジェットン 能力パラメータ 体力 80 攻撃力 40 防御力 65 スピード 45 幸運 99 特性 優柔不断 複数の敵が いるとき、 攻撃力が 半減する。 スキル 特殊 ハイパースキャン 5/5 特殊 タイピング 10/10 物理 パンチ 20/20 特殊 情報収集 15/15 TYPE 機械 優しいココロをもったロボット。 相手の能力をスキャンできる。 キャラクター切替 B もどる OK！ ステータス確認 ロボチャン 体力 80 幸運 99 攻撃力 40 スピード 45 防御力 65 TYPE 機械 優しいココロをもったロボット。 相手の能力をスキャンできる。 スキル ハイパースキャン 5/5 タイピング 10/10 パンチ 20/20 情報収集 15/15 特性 情報切替 キャラクター切替 B もどる 画面内での「情報量と見せ方」に気を配ろう！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

まとめ ゲームのUIはこうやって作られています！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

まとめ 良いUIが良いプレイ体験を生む！ ◆UIはユーザーとシステムを繋ぐ存在 ◆ゲームでは感情を揺さぶる仕掛けが大切 ◆全体のコンセプトやフローから決める ◆大きい要素→小さい要素へとデザインする ユーザーに一番近い存在、それがUIです！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

まとめ どんな勉強をすればいいの？ ◆人気ゲームのUI分析 ◆PhotoshopやIllustratorでUI模写 ◆UnityやUEで実装の流れをラーニング ◆After EffectsでUIアニメーション 何よりも「ゲームプレイ」第一 たくさんのゲームを遊びましょう！ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

そして『実践ゲームUIデザイン』も よろしくお願いいたします！ 実践 ゲーム UI デザイン コンセプト策定から 実装のコツまで 太田垣 沙也子 (著) ユーザーを 惹き付ける UIデザインスキルが 身に付く！ 必携！ ゲームUI/UXデザイナー ゲームUIプランナー ゲームUIエンジニア SE SHOEISHA 翔泳社より 大好評発売中！ 2,600円 + 税 A5サイズ・236ページ/フルカラー © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

質疑応答 仕事からプライベートまでお気軽にどうぞ！ 著者Twitter @SayakoOtagaki https://twitter.com/SayakoOtagaki/ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN

Thank You!! ぜひTwitterのフォローもお願いいたします！ 著者Twitter @SayakoOtagaki https://twitter.com/SayakoOtagaki/ © Sayako Otagaki / Illustration : © OFFICE SHIBACHAN