My Home Poltergeist をリリースしました

この度、個人で開発していたPC向けゲーム「My Home Poltergeist」をリリースしました。
https://store.steampowered.com/app/1331060/My_Home_Poltergeist/

Steamworksという、Steamでゲームアプリを配信するためのツールを使うことにより、個人でもカンタンにSteamにアプリを公開できるようになっています。

こちらの記事では、Steamworksでアプリを公開するフロー全体を説明しましたが、この記事ではその中でも特にストアページ作成時に用意する必要のある画像について、説明したいと思います。
今回は、アプリを公開する上で必須のものに限定したいと思います。

種類が多く、通常のモバイルアプリを公開する際には使わないような画像も用意する必要があり、私も忘れそうなので備忘録としたいと思います。

アプリ公開時に必須の画像リスト

各種名称ですが、日本語化されているものは日本語表記していますが、日本語化されていないものは英語表記のままにします。
大きくストアアセットとライブラリアセットの２種類に分かれます。

ストアアセット（主にストアページで使う画像）

ヘッダーのカプセル画像 *460px 幅 x 215px 高さ
小型カプセル画像 *231px 幅 x 87px 高さ
メインカプセル画像 *616px 幅 x 353px 高さ
スクリーンショット *最低 5 つ

ライブラリアセット（主にライブラリで使う画像）

Library Capsule *600px 幅 x 900px 高さ
Library Hero *1920px 幅 x 620px 高さ
Library Logo *640px 幅 x 360px 高さ

用意するにあたって考慮しておく事項まとめ

それぞれの画像が何に使われるのかなどについては、Steamworksのストア管理ページに詳しく記載されているのでこの記事では割愛します。
ここでは、詳しくは記載されていないけど考慮しておく事項について、考慮事項ごとにご紹介しましょう。

ゲームUIが表示されていて良い画像と、表示されていてはいけない画像がある

各種画像は、Steamストアのトップページなどで販促目的で使用する画像と、アプリのストアページでゲーム内容を説明する目的の画像があります。
その目的のため、前者はゲームの雰囲気を伝えるためにUIなどは表示されていないもの、後者はゲームプレイを伝えるためにゲームUIが表示されていることが望ましいもの、という区別があります。

後者にUIが表示されていないことに関しては警告程度で済みますが、前者に関してはSteamというWebサービス全体のデザインに関わることのため、守らないとリジェクトの原因になります。

具体的には以下の区分になります。

【ゲームUIが表示されていて良い画像】

スクリーンショット

【ゲームUIが表示されていてはいけない画像】

ヘッダーのカプセル画像
小型カプセル画像
メインカプセル画像
Library Capsule
Library Hero
Library Logo

……こうやってまとめてみると大半がダメですね。

なお、こういう画像を作ることを見越して、ゲームそのものにUIを消せる機能を用意しておくと便利でしょう。
（My Home PoltergeistはESCキーを押すことで、一時的にゲーム内のUIを消すことができます）

ディスカウント表示タグに重要なイメージやロゴがかぶらないようにする

メインカプセル画像に関連した話ですが、Steamセールなどでディスカウントを実施した場合、この画像の右下部分に「-10％」のようなタグが付けられます。
そのため、この右下部分にロゴや重要なイメージが表示されていると、ディスカウント時にそれがタグに邪魔されて表示されません。
こういう画像を審査に出すと、「修正してください」という連絡が返ってきますので、修正しましょう。
ストア管理ページでメインカプセル画像をアップロードした時にタグの位置については確認することができるので、それを見て修正すれば大丈夫です。

ちなみに同様の話で、ゲームのデモ版（いわゆる体験版）を作成しそのストア管理を行う場合、ヘッダーのカプセル画像と小型カプセル画像の左上に「DEMO」というタグが表示されます。
このタグに関しても、ロゴがかぶらないようにする必要があります。
（これもストア管理ページで確認可能です）

縦長の画像 Library Capsule

画像のサイズを見てもらえれば分かるのですが、Library Capsule だけは「600px 幅 x 900px 高さ」と縦長の画像を用意する必要があります。
PCゲームは普通は横長の画面でプレイすることが多いと思うので、ゲームのスクリーンショットから用意することが少し難しくなります。

さらにアプリケーションのロゴを入れることができますが、通常の横長と違うのでロゴデザインによっては加工が必要になってしまうこともありえます。
（実際、My Home Poltergeist でもこの画像のためにロゴの配置を少し変えたものを用意しました）

こういうことが必要だとあらかじめ知っておくと、少し画像を用意するのがラクになるかもしれません。

Library Hero と Library Logo の配置

これらの画像は、ゲームをお買い上げ頂いたあとライブラリ画面で表示されるものです。
Library Hero という背景画像と Library Logo というロゴ画像を別々に用意しておき、それを配置ツールで配置する、という作業になります。
こうすることで、画面をスクロールした時にロゴだけが移動する、ということが可能になるわけです。

配置ツールはストア管理ページのリンクからカンタンに利用できますが、配置できるロゴの位置に少々制限があります。
具体的には、以下の４種類の位置から選ぶことになります。

左下
中央上
中央
中央下

また、ロゴサイズも背景画像をはみ出さない範囲で変更することが可能です。
ライブラリページでの表示を想像しながら用意しましょう。

その他、経験したリジェクト

考慮事項の項でも少し書きましたが、それ以外に経験したリジェクト理由をご紹介します。

メインカプセル画像の上下に不要な黒いスペースがある

当初、メインカプセル画像を用意する上でゲームのスクリーンショットを加工したもの（Unityエディタ上でUIを消せるようにして用意した）を使っていました。
ただこの画像、ディスプレイの解像度の影響で画面上と下に何も表示されていない黒い空間がありました。

画像の目的についてよく理解していなかった私は、この画像をこのままアップロードしてストア審査に提出し、リジェクトを喰らいました。

先述した通りメインカプセル画像はSteamのストアトップに表示される可能性のある画像です。
Steamのストアトップとは自分のアプリだけでなく、他のデベロッパーやパブリッシャーからリリースされているトテモスゴイゲームの画像も表示されるところです。
マンションで言うなら自分の部屋の中のような専有部分ではなく、廊下やエントランスのような共有部分にあたる場所です。
そこに「とりあえずリリースできればいいやー」なんて適当に作成したスクショもどきが表示されていたら困る！！ということなんですね。Steam側からしてみれば当然のことです。

従って、メインカプセル画像については特にその内容についての要望がでる可能性があります。
キッチリこだわることをオススメします。

以上です。

画像の用意に関しては、ゲームを開発する時点で知っておくと用意しやすくなるような要素もあるので、じっくり読んでいただけると幸いです。

参考資料

Steamworks ドキュメンテーション - グラフィックアセット
https://partner.steamgames.com/doc/store/assets

関連記事

Steam でゲームアプリをリリースするためのタスクまとめ
https://qiita.com/Idenon/items/eeb9bae0a284ad7b6e01