Preview4版からXDヘビーユーザーのゲーム屋です。 業務では本来のプロトタイピングだけでなく、XDの生産性をフル活用し、時には指示書、規模によっては本番用グラフィック作成にも使ってます。 今回、簡単ではありますが、こんな事にも使えるよーという使用例をご紹介します！

1. ゲーム屋さんですが
～事例紹介編～
こんな風に 使ってまーす
株式会社 カエルパンダ
2018/03/16奥田 覚

2. 今回の内容
AdobeXDはPreview4（2016年7月頃）から使い始めて以来
プロトタイピングをはじめツールの生産性の高さから
実務のあらゆる所で利用しており、手放せない存在になってしまいました。
ゲーム業界の中ではわりと先を行ってる方のXDユーザーと思ってますｗ
「ゲーム開発の実務の中でこんな風にXDを使っているよ」
という例をいくつかご紹介します。
主にゲームの企画職として仕事しておりますが
お手柔らかにおねがいしますm(̲ ̲)m
「当たり前だよ」って事もあるかもですが

3. 今回の内容
・自己紹介
・プロトタイピングでの事例
・グラフィック制作での事例
・ドキュメント制作での事例

4. ・自己紹介

5. 奥田 覚（おくだ かく）41歳…リアルタイムファミコン世代です
中堅ゲーム開発会社に2016年まで約13年ほど在籍
その後、４～10人の開発チームの開発プロデューサー／ディレクターとして
小～中規模のゲームを40本ほど開発
任天堂プラットフォームのダウンロードソフトなどの少人数開発が得意
最新作はNintendoSwitchの「10秒走RETURNS」
ガラケー時代のモバイルゲームの企画兼プログラマーとして２0本ほど開発
株式会社カエルパンダ取締役／クリエイティブディレクター
奥さんが立ち上げた会社、株式会社カエルパンダへ2年前に合流（会社は６期目）

6. チャリ走DXシバ・カーリーの伝説
ピンチ50連発!!
10秒走RETURNS
© G‒MODE
© YH／SpicySoft© LIVERAGE
© GAME STUDIO Inc.
ドーパミックス
©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.
近年作ったゲーム(Nintendoプラットフォーム)

7. 株式会社カエルパンダとは
代表の河上はガラケーのNo1ゲームサイトを運営していた
旧G‒mode社で「テトリス」をはじめ「ゆるゆる劇場」等
２００タイトル以上手がけ、数々のヒット作を
世に送り出したプロデューサーです。
代表の河上京子と奥田と夫婦2人でやってる
ゲームとデザインの会社です
Nintendoプラットフォーム向けや
スマートフォン向けを中心に
主にカジュアルゲームっぽいものを制作しています

8. AdobeXDのメリット
・アプリケーションがめちゃくちゃ軽いPhotoShopよりも、パワポよりも軽い、複数起動してても平気
※普段の作業マシンiMacの2011モデルです
パワポのスライド編集やイラレのパス編集より直感的
すぐに見た目を作り、すぐに機能を確認出来る
Adobeのツール同士やMSOfficeなどとのやりとりにも強い
・素材の取り回しの柔軟性
・操作が直感的
・すぐ作れる／すぐ試せる
自分的な

9. ・プロトタイピングでの事例

10. スマホ向けゲームのプロトタイピング
まず、ごく普通ですが
スマホアプリ用のプロトタイピングに・・・
UUUMさんとやったYoutuber脱出ゲームのUIプロトタイピングで使った例
使い始めた初期は
ボタンの存在感や
ざっくり機能の確認程度
©UUUM

11. スマホ向けゲームのプロトタイピング昨年お手伝いしたそこそこ大規模な
スマホアプリのプロジェクトでも
プロトタイピングにXDを使用しました
80画面くらいありますが
画面数がこれだけあっても
動作が軽いのはすごいですね
旧来の完全ウォーターフォール型の体制で
しかもイテレーションに対する意識が低めなプロジェクト。
しかたがないので少しでもUI/UXが快適になるよう
仕様の書面を作成する前に
画面のつながりや情報の存在感ボタンの位置などを
こちらである程度最適化するところまで
1人でXD上で泥臭く
シミュレーションするのに使った感じです。
デザイナーさんはこちらを元に画面を
デザインしていきました。
（「ゲームの面白さ＝UI/UXの良さ」ではないので
ジャンルにもよりますがゲームというコンテンツにおいて
XDでシミュレーションできる範囲は頑張っても50～70％くらい。
最終的に実際の実装に対して泥臭く調整しないと
ゲームそのものは面白くなりません）

12. スマホ向けゲームのプロトタイピング
ゲーム特有のインタラクティブな演出や
同一シーンに条件分岐がある場合
XDの機能だけでの再現は難しいので・・・
画面のある区域をタップすると
特定の条件の遷移へジャンプ
するようにしたり
マイクロインタラクション系は割り切って
画面そのものに
演出説明テキストを入れて
とりあえずしのいだりしています

13. おまけ
以前・・・
iPhone4Sまでの頃は
ジャストサイズの付箋に
ペンを使って手描きもよくしてましたが
うっかりどこか行ってしまったり・・・
フロー図作るときに
画像を取り込むのが面倒だったり
管理がむずかしくやめてしまいました

14. ・グラフィック制作での事例

15. グラフィックツールとして
XDのパスの編集機能は
直感的かつ必要十分な機能を備えているので
ものすごく凝ったものでなければ
実用レベルのグラフィックが
かなり作れてしまうことがわかり・・・

16. 画面デザイン
※キャラと部屋はデザイナーさんがPhotoshopで作成
※最終的にはPhotoshopへオブジェクトをコピーしてレタッチして整えました
XD上で可能なところまで編集し、
パーツ毎にコピペでPhotoshopのアートボードに貼りつけ
レイヤーやグループをリネーム後Photoshopのアセット出力したものを
Unityのテクスチャとして取り込んでます
©UUUM ©UUUM
（かなり本番に近い状態までXDで作ってしまった例）
パーツ毎にコピペ アセット出力
Unity用
XDでラフ ⇒ PhotoShopでレタッチ ⇒ テクスチャ(png）
このキャラもXDで

17. 画面デザイン
©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.
10秒走RETURNS(Nintendo Switch)
（かなり本番に近い状態までXDで作ってしまった例）
XDでラフ ⇒ PhotoShopでレタッチ ⇒ Png ⇒ テクスチャ(tga）パーツ毎にコピペ アセット出力 コンバート ※若干レガシーなフォーマットです
素材化のプロセスについては
課題多いです
Switch用の汎用テクスチャフォーマットトレース or

18. ゲーム用素材（脱出ゲームのアイテム）
線をゆらして、ゆるい手描き風に・・・
まずはゴミ、
脱、汚部屋大作戦！
次に洗濯物をしてから、
雑誌を片付けなきゃ♪
＞_＜
メンドくさいしー
やっぱ今度にしよーかな
→????
①
②
③
FASHIONzasshi
おしゃれ大作戦
かんたんコスメ
●●●●●
●●●●●
●●●●●●●●●●
●●●
ア
ル
カリ
電
池
単
4 ア
ル
カリ
電
池
単
4
グラフィック作成

19. ここでちょっとしたTips
個人的によくやるテクニック
パスをダブルクリック後
何カ所かポイント作って
曲線でポイント適当にをずらす
XDで素材を作るとパキッとしがちなので
手描き風のライン
おまけ

20. ・基本的に共通のモデル(ボーン)を使用し、テクスチャ(Png)だけ変更
・棒人間のデータはアニメーション作成ツール で作成
・テクスチャの差分をすべてXDで作成（XDから直接出力したPng）
・ゲーム内で主人公として３０種類の棒人間が登場
グラフィック素材作成
ゲーム用素材（10秒走RETURNSのキャラ＝Spine用テクスチャ）※XDから直接Png出力したもの
10秒走RETURNS ©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.

21. グラフィック素材作成
出力したいパーツ毎に
対応したテクスチャ名にリネーム
※今回のアートのテイスト的に
ツールの軽さとベクター素材の取り扱いの簡便さから
テクスチャ作成作業の効率は
XD >> PhotoShop（Illustrator）
でした。
ファイル＞書き出し＞選択済み＞
フォーマット＞png
で書き出し
書き出された
Spine用テクスチャ（png） テクスチャが反映された
Spineのモーションデータ
ゲーム用素材（10秒走RETURNSのキャラ＝Spine用テクスチャ）※XDから直接Png出力したもの10秒走RETURNS ©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.

22. グラフィック素材作成その他素材
Nintendoゲームニュース用素材(jpg) AppStore用スクリーンショット ヘルプ画面（ゆるゆる劇場クラシック）
Googleストア用バナー
指もXDで
©UUUM
©G‒MODE/青木俊直/KaeruPanda Inc.
©G‒MODE/青木俊直/KaeruPanda Inc.10秒走RETURNS ©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.

23. グラフィックツールとしての使用
おまけ：オフィスの簡単な看板
シェイプの組み合わせ
文字列（ヒラギノゴシック）
アートボード コンビニで光沢紙に印刷したやつを張り付けた
弊社のオフィスの玄関
足形をパス編集して作成
手書き風フォント（KAWAII手書き文字フォント）
会社ロゴデータを貼り付け

24. ・ドキュメント制作での事例

25. ドキュメント作成ツールとして
パスやグラフィックの編集機能に加え
テキストの編集機能も必要充分で
しかも、軽くて安定しているので
最近PowerPointの代わりに
使うことが多くなりました
パワポとグラフィックソフトを両方起動して
データを行き来したりしてると突然落ちたりとか
そういうのを回避できます。
※ただし、XDそのものに自動バックアップ機能無いのでこまめなセーブは必須！

26. ドキュメント制作
ちょっとしたドキュメント
ピンポイントな指示
などの資料を
アートボード上で編集し
グラフィカルに作成
絵素材を
そのまま利用できたりして
かなり便利10秒走RETURNS開発時に
実際にプログラマーへ送ったドキュメント
パワポの代用①
10秒走RETURNS ©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.

27. ドキュメント制作
ちょっとしたドキュメント
ちなみに
XDの書き出し機能で
画像やPDFで出力しても
良いですが・・・
書き出したいアートボードを選んで
「コピー」した状態で
チャットワークの
デスクトップアプリへペーストすると
直接画像として貼り付け送信する事ができます。
1枚だけ送りたいケースとか
意外に便利です。
パワポの代用①
10秒走RETURNS ©G‒MODE/BLUE PRINT Inc./KaeruPanda Inc.

28. それを元に
１つのアートボードを
１ページに見立てて
資料を作っていき・・・
パワポのテンプレ的な
簡単なフォーマットを作成。
資料に入れたい
アートボードを全て選んで
「単独のPDF」で書き出しすると
わりとちゃんとした
PDF資料になります。
資料の場合は書き出したいページの
アートボードに「バッチ書き出しマーク」をつけて
PDFで書き出しするのがスマートと思われます
ドキュメント制作
パワポの代用②そこそこちゃんとした仕様書などアートボード１枚を１ページとして複数ページを1枚のPDFで書き出し

29. ドキュメント制作
XDを使ったPDF資料ですが
パワポと違い、
アートボード毎にサイズ変更して出力もでき
ページ毎にサイズを柔軟に変更可能です。
（説明スペースが足りないときなど）
これ、意外に便利です！
ページ番号とか
自動更新できればいいんですけどね・・・
そういうのは残念ながら手動です
パワポの代用②そこそこちゃんとした仕様書などアートボード１枚を１ページとして複数ページを1枚のPDFで書き出し

30. １ ２ ３ ４
５ ６ ７ ８
９ 10 11 12
ドキュメント制作
パワポの代用②そこそこちゃんとした仕様書などアートボード１枚を１ページとして複数ページを1枚のPDFで書き出し
補足 複数のアートボードを１つのPDFとして出力するときは
アートボードの座標によって
左上から右下に向かって順にページが生成します
出力前に
アートボードを行毎に
上揃えしておくと安心
アートボードの
座標のY座標のズレに注意
(Xは気にしなくてOK)

31. プレゼン用スライドおまけ
先日、ゲーム開発者向けのカンファレンスに登壇した際の
わりとちゃんとした70～80枚ほどのスライドもXDで作りました。
(あとで清書しようと仮構成のつもりでやりだしたら生産性高くて最後までやってしまった)
効果はつけたかったので本番用はアートボードをPngで書き出し、
パワポに貼り付けてトランジションなどの効果をつけました
今回のスライドもXDで作ったのですが・・・
先日、ゲーム開発者向けカンファレンスに登壇したのですが、
70枚ほどのスライドをXDで作りました。
本番用はアートボードをPngで書き出し、
パワポに貼り付けてトランジションなどの効果をつけました

32. アートボード間に矢印のオブジェクトを置いて
XDプロジェクトそのものを
フロー図にしようと試みましたが、こちらは確立できず。
（アートボードを移動させたときにオブジェクトが吸着されちゃったり）
XD使って
フロー図を手抜きで作る方法ないか探し中ですｗ
いまは泣く泣くエクセルを使ってます
プロトタイピングツールによっては実装されている機能なので
XDでも実装が待たれます
フロー図
これはできなかったおまけ

33. すごい駆け足でしたが
ご静聴ありがとうございました！
okudasan@kaerupanda.com