前回、第42回では、SteamworksへPUZFLOのゲーム情報を入力しました。
- 正式名称
- ジャンル
- タグ
- 対応言語
- ゲーム概要
- 最低動作環境
少しずつSteam上でも、
「PUZFLOがどんなゲームなのか」
が見えるようになってきました。
そして次に進んだのが、Steamストアで使う画像の作成です。
Steamを見ていると、ゲームを探すときに最初に目に入るのは、ほとんどの場合画像です。
タイトルを読む前に、「なんか面白そう」と思ってクリックすることもあります。
逆に、ゲーム内容が面白くても、画像を見ただけで何のゲームか分からなければ、
そのまま通り過ぎられてしまうかもしれません。
ということで今回は、
PUZFLOをSteam上でどう見せるかを考えながら、
をまとめて作っていきます。
Steam用の画像って、こんなに必要なの？
Steamworksを見て最初に思ったのが、
「画像、多くない？」
普通に考えると、ゲームのロゴ。
ゲーム画面のスクリーンショット。
このくらいあればいいのかなと思っていました。
でも実際には、Steamの表示場所に合わせて、いくつものサイズが必要です。
今回まず用意した主なストア画像は、
| 種類 | サイズ |
|---|---|
| ヘッダーカプセル | 920 × 430 px |
| 小型カプセル | 462 × 174 px |
| メインカプセル | 1232 × 706 px |
| 垂直カプセル | 748 × 896 px |
| ページ背景 | 1438 × 810 px |
同じゲームなのに、
- 横長
- かなり横長
- 大きな横長
- 縦長
- 背景用
と、全部違います。
まずはPUZFLOの「キービジュアル」を決める
いきなり5種類を別々に作ると、画面ごとに雰囲気が変わってしまいそうです。
そこでまず、PUZFLOを代表する1枚を作ることにしました。
ここでもChatGPTと相談しながら、
- PUZFLOのロゴ
- 工場
- コンベア
- 加工機
- ワーク
- 青・黄・グレーを中心にした色
- 実際のゲームに近い設備デザイン
を使って、キービジュアルを考えていきます。
最初の案は少し「一般的な工場ゲーム」っぽかった
最初に作った画像も、
工場ゲームっぽさ。
自動化っぽさ。
見栄え。
はかなり良かったです。
↓ 最初に作成した案
ただ、見ていて少し気になりました。
「PUZFLOというより、別の工場ゲームっぽくない？」
設備が少しリアル。
機械が豪華。
コンベアも実際のPUZFLOより立体的。
つまり、画像単体では格好いいけど、
実際のゲーム画面とのつながりが少し弱い。という状態でした。
Steam画像は「実際のゲーム」とつながっていた方がいい
そこで方針を変えました。
完全に実ゲームそのままではなく、
70％ 実ゲーム準拠 ＋ 30％ Steam用に見栄えを強化くらいを目指します。
タイトル画面ですでに使っていた、
四角い設備
色分けされたコンベア
シンプルな記号
PUZFLOのロゴ
こうした要素をSteam画像にも持ってきます。
Steamでカプセル画像を見る。
↓
ストアページを開く。
↓
スクリーンショットを見る。
↓
「ちゃんと同じゲームだ」
となる方が自然です。
最終的にできたキービジュアルはこちら
何度か作り直しながら、Steamで見栄えすることと、
実際のPUZFLOらしさが伝わることのバランスを調整しました。
特に意識したのは、一般的な工場ゲームっぽくなりすぎず、
実際のタイトル画面やゲーム内で使っている設備・色・雰囲気につなげることです。
ロゴは大きく見やすく。
設備やコンベアはPUZFLOのデザインに寄せる。
そのうえで、Steam用として少しだけ華やかさを加えました。
そして、最終的に完成したキービジュアルがこちらです。
↓ PUZFLO: Run the Line キービジュアル
ヘッダーカプセルを作る
まず作ったのが、ヘッダーカプセルです。
サイズは、920 × 430 pxです。
ここでは、PUZFLOのロゴを大きく。背景には工場。
その下には、実際のゲームに近い設備を並べました。
細かいところでは、設備アイコンに入っていた不要な「S」表記も削除。
Steam用の一枚絵として見たときに、なるべく余計な文字を減らします。
Steamのカプセルは普通の広告バナーとは少し違う
ここで注意したのが、文字をたくさん入れないことです。
ブログのバナーなら、
「2D工場パズル！」
「AIで制作！」
「ラインを作って改善しよう！」
みたいな文字を入れたくなります。
でもSteamの通常カプセルでは、
基本的に、
- ゲームのアート
- ゲームロゴ
- 正式なサブタイトル
を中心にした方がいい。
そこで、
PUZFLO
Run the Line
だけをしっかり見せる方向にしました。
小型カプセルはロゴを思い切って大きくする
次が、小型カプセルです。
サイズは、462 × 174 px
かなり横長です。
これはSteamの、『 検索結果 』『 ランキング 』『 新作一覧 』などで表示されます。
つまり、かなり小さい状態で見られる画像です。
小さい画像では細かい設備はほぼ見えない
実際に作ってみると、大型画像ではきれいに見えていた、
- コンベア
- ワーク
- 設備アイコン
なども、小型カプセルではかなり小さくなります。
そこで、小型カプセルだけはロゴ優先にしました。
PUZFLOの文字を大きく。
設備は、ゲーム内容が少し伝わる程度。
細かい装飾は減らす。
一覧で一瞬見たときに、
「PUZFLO」という名前が読めることを最優先にしました。
メインカプセルはPUZFLOの世界観をしっかり見せる
次が、メインカプセルです。
サイズは、1232 × 706 pxです。
こちらは大きく表示されるので、ロゴだけではなく、
PUZFLOの工場世界まで見せられます。
コンベア。
設備。
ワーク。
工場背景。
を入れて、一目で、
「工場ラインを作るゲームかな？」
と思ってもらえる画像を目指しました。
垂直カプセルは「ゲームパッケージ」っぽい
次は、垂直カプセルです。
サイズは、748 × 896 pxです。
横長画像とはかなり印象が変わります。
個人的には、ゲームのパッケージを作っている感じが強かったです。
上に大きなPUZFLOロゴ。
その下に工場やコンベア。
縦方向に設備を配置。
横長画像とは違い、上から下へ視線が流れるように調整しました。
ページ背景は逆に「目立たせすぎない」
次が、Steamストアのページ背景です。
サイズは、1438 × 810 pxです。
ここまでのカプセルは、とにかく目立たせたい。
でも背景は逆です。目立たせすぎない。
ストアページの中央には、
ゲーム説明。
画像。
購入情報。
などが表示されます。
背景が派手すぎると、そちらとケンカします。
なので、PUZFLOらしい工場の雰囲気は残しつつ、
文字は入れない。
コントラストも少し抑える。
主役はあくまでストアページの中身。
という形にしました。
次は実際のゲーム画面「スクリーンショット」
キービジュアル系の画像ができたら、
次は、スクリーンショットです。
ここは先ほどまでとは大きく違います。
カプセル画像は、マーケティング用のアート。
でもスクリーンショットは、実際のゲームプレイを見せるものです。
PUZFLOでは最低5枚を用意することにしました。
5枚で「PUZFLOの遊び方」が分かる構成にする
適当に5枚選ぶのではなく、ChatGPTと相談して、
5枚を順番に見ればゲームの流れが分かる構成にしました。
最初に考えたのが、
- 稼働中のライン
- ラインを設計している画面
- 複雑な自動化ライン
- うまくいっていないライン
- 大規模ライン
1枚目は「何のゲームか」が一瞬で分かる画像
1枚目は最重要です。
- コンベア
- 加工機
- ワーク
- 出荷場
できるだけPUZFLOの基本要素が、1枚の中に見えるようにします。
最初に見た人が、「工場のラインを作るゲームなんだな」と分かることを優先しました。
2枚目は「自分で作るゲーム」だと見せる
次は、設計中の画面です。
これを見ると、
「完成した工場を眺めるだけじゃなくて、自分で設備を置くんだ」と伝わります。
PUZFLOでは、プレイヤー自身がラインを考える
ことが重要なので、この1枚はかなり必要だと思いました。
3枚目は「ここまで複雑になる」を見せる
3枚目では、ゲームが進んだ状態を見せます。
- 分岐
- 合流
- 加工機
- ストッパ
- 複数種類のワーク
設備が増えることで、
ラインの考え方も複雑になります。
Steamタグで設定した、
という部分が、画像からも少し伝わってきます。
4枚目は、あえて「失敗」を見せる
個人的に面白いと思ったのが、失敗状態もスクリーンショットに入れるという考え方です。
PUZFLOでは、きれいなラインを作って眺めるだけではありません。
生産してみたら、ワークが詰まる。能力不足になる。エラーになる。
そして、「なぜ？」を考えて改善する。
これがゲームの中心です。
なので、成功画面だけより、
失敗しているラインも見せた方が、PUZFLOらしさが出ます。
5枚目は「将来ここまで作れる」を見せる
最後は、大規模なライン。
設備がかなり多い。
ラインも複雑。
ワークも大量。
でも生産は安定。
という状態です。
1枚目と比べると、明らかに工場が成長しています。
「ゲームを進めると、ここまで大きな工場になるんだ」
という期待感を持ってもらう狙いです。
次はSteamライブラリ用の画像
ストア用画像が終わったら、次に出てきたのが、
ライブラリアセットです。
「まだ画像あるの？」
という感じです。Steamでは、ゲームを購入した後のライブラリでも、
専用画像が使われます。
今回用意したのは、
- ライブラリカプセル
- ライブラリヘッダー
- ライブラリヒーロー
- ライブラリロゴ
ライブラリカプセル
まず、600 × 900 pxの、ライブラリカプセル。
Steamのゲーム一覧などで表示されます。
縦長なので、先ほど作った垂直カプセルのデザインをかなり流用できます。
大きなPUZFLOロゴ。工場背景。設備。という基本構成は変えません。
Steamのいろいろな場所で、同じゲームに見えることを意識しました。
ライブラリヘッダー
次は、920 × 430 pxの、ライブラリヘッダー。
サイズは、先ほど作ったストア用ヘッダーカプセルと同じです。
なので、キービジュアルもかなり流用できます。
ここまで来ると、最初にPUZFLOのキービジュアルを一枚作っておいた意味が分かります。
全部をゼロから作らなくて済みます。
ライブラリヒーローはロゴを入れない
次は少し特殊でした。
ライブラリヒーローです。
サイズは、3840 × 1240 px
かなり大きいです。
この画像の上には、別ファイルのPUZFLOロゴが重なって表示されます。
なので、ヒーロー画像には、ロゴを入れない構成です。
- 工場
- コンベア
- 設備
- 照明
などの背景アートだけ。
さらにSteamクライアントのサイズによって画像が切れる可能性があるので、
重要な設備は、なるべく中央付近へ配置します。
ライブラリロゴは透過PNG
そして、ヒーロー画像の上に重ねるのが、ライブラリロゴです。
これは、PUZFLO: Run the Lineのロゴだけ。
背景は透明。画像としてはかなりシンプルです。
でも、ヒーロー画像と別々に動くことで、
Steamライブラリ上では、少し立体感のある表示になるようです。
Steamのゲームページって、こうやって作られていたんですね。
最初に世界観を揃えておいてよかった
Steam画像を一通り作って感じたのが、
最初にデザインの方向性を決めるのはかなり大事ということです。
もし、ヘッダーカプセルはリアルな工場。小型カプセルはポップ。
ライブラリカプセルはゲーム画面そのまま。となっていたら、かなりバラバラになります。
PUZFLOでは、タイトル画面から使っている、
- 濃い青
- 黄色
- 白
- 色分けされた設備
という世界観を基準にしました。
そのため、画像サイズが変わっても、
「あ、PUZFLOだ」と分かる状態に近づいてきました。
Steamブロードキャスト用画像もあったけど……
さらにSteamworksには、Steamブロードキャスト用の画像もあります。
サイズは、左右それぞれ、199 × 433 pxです。
最初、「これも作るの？」と思いました。
でも調べてみると、これはSteamストアページ上で、
ライブ配信を行う場合に使う装飾画像です。
PUZFLOでは、今のところSteam上でライブ配信する予定はありません。
なので、ここは空欄にしました。
本当に必要になったら、そのとき作れば十分です。
Steam用画像を作ると「販売するゲーム」感が一気に増した
今回の作業は、ゲーム本体にはほぼ影響しません。
新しい設備も増えていません。
ステージも増えていません。
ゲーム性も変わっていません。
でも、Steam用の、
- ロゴ
- カプセル
- スクリーンショット
- ライブラリ画像
を並べてみると、一気に販売するゲームっぽくなりました。
今までPUZFLOは、自分のUnityの中にあるゲーム。という感じでした。
それが、
Steamの一覧。
Steamストア。
Steamライブラリ。
に表示される姿を想像できるようになってきました。
第43回まとめ｜Steamで見せるPUZFLOができてきた
今回、第43回では、PUZFLOのSteam用画像をまとめて作りました。
用意したのは、
- ヘッダーカプセル
- 小型カプセル
- メインカプセル
- 垂直カプセル
- ページ背景
- ゲームプレイのスクリーンショット5枚
- ライブラリカプセル
- ライブラリヘッダー
- ライブラリヒーロー
- ライブラリロゴ
特に意識したのは、「Steam用だから格好よくする」だけでなく、
「実際のPUZFLOらしさを残す」ことでした。
Steamで画像を見る。
↓
ゲーム画面を見る。
↓
実際にプレイする。
この3つの印象が、なるべくつながるようにしています。
そして、5枚のスクリーンショットでは、
設計 → 生産 → 複雑化 → 失敗 → 大規模ライン
まで見せられるようになりました。
文章だけだったSteamストアページに、ようやくPUZFLOの見た目が入ってきました。
次回は「予告編を作る前に、英語版PUZFLOを作る」
Steam用の画像が揃ってきたので、次はいよいよ、
動いているPUZFLOを動画で見せたい。
そう考えて、Steam用の予告編を作ろうとしました。
ただ、ここで一つ気になることが出てきます。
Steamは日本だけではありません。
そしてPUZFLOの画面には、
- 設備名
- 生産能力
- 出荷条件
- エラー表示
- ボタン
- 設定項目
など、かなり多くの日本語が表示されています。
日本語画面のまま英語字幕を付ける方法もありますが、
海外ユーザー向けの予告編動画を作るなら、
ゲーム画面そのものを英語にした方がいいのでは？という話になりました。
そこで次回、第44回では、予告編制作へ進む……はずだったのですが、
その前に、PUZFLOのゲーム内UIを英語対応します。
日本語と英語の切り替え。
現在の「日本語＋小さい英語」表記をどうするか。
設備名や生産能力を自然な英語でどう表現するか。
英語にしたことで文字がはみ出さないか。
さらに、完成した英語UIをChatGPTに見てもらいながら、
一つずつ翻訳も確認していきます。
Steam用予告編動画を作ろうとしたら、
その前にゲーム本体の英語化が必要になりました。
次回は、PUZFLOを海外のプレイヤーにも遊んでもらえるゲームへ近づけていきます。
コメント