10月はSteamでもコンソールでも新作が続くので、ゲームレビューや感想記事をWordPressに載せるタイミングが増えます。一方で、ストアのキービジュアルは横長の比率で、ブログのアイキャッチは16:9に寄せたい——ここで迷う人は多いです。私は制作案件でFigmaを毎日触り、ブログ側はCocoonのサムネ枠に合わせて1920×1080で書き出す運用にしています。
本記事のFigma Steam 画像 切り出しは、公式ストアから取得したスクリーンショットや、メディアキットで許可された素材を前提に、フレームで比率を固定してから書き出す手順だけに絞ります。スクショの撮り方や、記事本文の引用ルールは別軸です。Win11側のクリップ整理はShareXでゲームクリップをSSDへ自動整理が近い入口で、バグ報告用のIssue文整えはCursorでGitHub Issue文に整える手順と組み合わせる日もあります。
この記事でわかること
- Steamストア画像をブログサムネに使うときの著作権・クレジットの線引き（一般論）
- Figmaで16:9フレームを置き、重要な被写体が切れない配置の考え方
- 1920×1080のPNG書き出しと、WordPressへ載せる前のファイル名の型
先に結論
- 向いている人: フリーランスや個人ブログでゲーム記事を書き、ストア素材から自サイト用サムネだけを素早く作りたい人
- 向いていない人: メディアキットの利用規約が厳しく、サムネに公式アートを一切載せられない案件（その場合は自前撮影かストックへ）
- 私のおすすめ: 元画像はリンクでストアを示す前提にし、Figmaでは「切り出し用フレーム」と「書き出し用フレーム」を分けて、毎回同じ1920×1080から書き出す
私はレビュー原稿を書き始める前に、Figmaでサムネ枠だけ先に作って、記事の見出しイメージを固定しています。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
使う素材の前提（Steamストア画像）
Steamのストアページには、ヘッダー画像やスクリーンショットが並びます。ブログのサムネに使うときは、次の3点を先に確認してください。
- 利用規約・メディア向けガイドがあるタイトルは、そちらを優先する
- スクショは自分のプレイ環境なら、引用範囲とクレジット表記を記事内に書く
- ストアのキービジュアルをそのまま再配布しない（サムネは自サイト表示の一例として、記事とセットで使うイメージ）
私は「ストアURLを記事に貼り、画像は説明の補助」という位置づけに寄せています。断定できるのは私の運用例までで、各パブリッシャーの条件は発売週に変わることがあります。10月の大作週は、Googleカレンダーで発売と納期を色分けして、素材確認の時間を先に確保するのが安全です。
Figmaファイルの初期セットアップ
Figmaで新規ファイルを作り、次のページ構成にすると迷いが減ります。
| ページ名 | 用途 |
|---|---|
source |
ストア画像・スクショの貼り付けのみ（加工前） |
thumb |
16:9切り出しと書き出し |
archive |
過去タイトルの書き出しPNGを日付付きで保管 |
チーム制作では、レビュー用リンクをFigmaのコメントに貼り、「サムネOK」スタンプが付いたフレームだけExportに進むルールにすると、ブログ担当とライターで認識がずれにくいです。個人ブログでも、自分向けにコメント1行残すだけで、あとから「なぜこの構図にしたか」を思い出せます。
1. 元画像を配置する
- Steamストアのヘッダーまたはスクショを、ブラウザの開発者ツールで無理に高解像度化しない（公式が提供するサイズを使う）
- Figmaへドラッグ＆ドロップし、
sourceページに置く - 画像レイヤー名は
YYYYMMDD_ゲーム略称_store-headerのようにする
解像度が足りないときは、拡大ではなく別の公式スクショを選ぶ方が、ブログ上のにじみは減りやすいです（一般論）。
2. 16:9の切り出しフレームを作る
thumbページにフレームを追加し、サイズを 1920 × 1080 に固定- フレーム名は
export-thumb-16x9 - レイアウトグリッドは 8px または 12px のどちらか一方に統一（後からテキストを載せる場合に効きます）
フレームの中に元画像を置き、ScaleではなくConstraintsで中央寄せにすると、比率変更時にズレにくいです。UIモックのAuto Layoutの考え方はゲームHUDのAuto Layout手順と通じますが、今回は静止画切り出しだけなので、フレーム固定が主役です。
ロゴが端に寄りすぎるときは、フレーム内で画像だけを少し縮小して、上下に余白を足す方が安全だと感じています。
被写体が切れない配置のコツ
Steamのヘッダーは超横長なので、16:9に落とすと左右が大きく切れます。私が意識する順番は次のとおりです。
- タイトルロゴが読めるか（最低でも主要ワードが入るか）
- キャラクターの顔や武器の先端がフレーム外に出ていないか
- 記事のキーワード（例: PS5版 / 完全版）を載せるなら、余白に小さくテキストを足すか、記事タイトル側に寄せる
テキストをサムネに載せる場合は、2行以内・太字1箇所までに抑えると、ブログ一覧でも潰れにくいです。ゲーム画面の説明用に、別途スクショを本文へ入れるなら、ゲームUIのWebP書き出し手順のように、サムネと本文で役割を分けます。
書き出し設定（PNG・1920×1080）
切り出しが決まったら、書き出しは毎回同じにします。
export-thumb-16x9フレームだけを選択- 右パネルのExportで PNG、サイズは 1x（1920×1080のまま）
- ファイル名は
YYYYMMDD-slug-thumb.png（slugはWordPressの予定slugと一致）
一括書き出しのプリセットをFigmaに保存しておくと、10月の連続レビュー週でも操作が減ります。色プロファイルはsRGB想定で、ブラウザ表示と大きくズレにくい方が無難です（環境により差はあります）。
書き出し後にFigma上でフレームを複製し、「一覧用（文字大）」と「OGP用（ロゴ中央）」の2パターンを試す日もあります。どちらも1920×1080のままなら、WordPress側の差し替えはメディアライブラリの同じslug付きファイルを上書きアップロードするだけで済みます。試作が増えすぎるとarchiveが散らかるので、採用した1枚以外は週末にまとめて削除する運用にしています（私の例です）。
WordPressへ載せる前のチェック
- 容量: 500KB〜1.5MB程度を目安に、必要ならTinyPNG等で軽量化（画質を見て判断）
- altテキスト: 「ゲーム名＋サムネの内容」を日本語で1文（キーワード詰め込みはしない）
- 本文との差別化: サムネと同じ画像を本文先頭に置かない（サイトの画像ルールと同じ考え方）
WordPressテーマの調整はWordPressテーマの選び方も参照できますが、Cocoon利用ならアイキャッチ枠は16:9想定で問題ないことが多いです。
10月発売週での運用例（私の型）
具体例を1段落書きます。10月8日前後に複数タイトルが重なる週は、サムネ用Figmaファイルを1つにまとめ、archiveページに書き出しPNGだけ日付付きで溜めます。原稿は別Markdownですが、ファイル名のslugを揃えると、公開スクリプトや手動アップロードのどちらでも迷子になりません。納品フォルダと経費メモの命名を揃える話はゲームレビュー納品フォルダとfreee経費メモが別の切り口です。
レビューと制作を同じ週に回すなら、Figma制作フローの柱も入口にしてください。MacでスクショをSlackへ送る運用はMacショートカットでゲームスクショをSlackへが参考になります。
よくある質問
Q. Steamのストア画像をそのままサムネにしても大丈夫ですか？
A. タイトルごとの利用条件が違うため、一律では言えません。メディアキットやストアの案内がなければ、自プレイのスクショや、規約で許された範囲の素材に寄せるのが安全です。記事内にストアリンクと、画像の出所を書く習慣をつけるとよいです（一般論）。
Q. 16:9以外の比率にしたい場合は？
A. ブログ一覧とSNSシェアの兼用なら、16:9を正にして、必要なら1:1用に別フレームを追加書き出しします。フレームを増やすより、正の比率を1つに決める方が運用は楽です。
Q. Figma以外で同じことはできますか？
A. 可能です。PhotoshopやAffinityでも1920×1080のカンバスを作れば同じです。チームでレイアウトを共有するならFigmaの方が、フレーム共有と書き出しプリセットの再利用がしやすい、というのが私の理由です。
Q. ゲーム画面のスクショだけでサムネを作れますか？
A. 作れます。HDRの明るさ差でにじむことがあるので、同じシーンを複数枚撮り、一番文字が読める1枚を選ぶのが近道です。Win11のオーバーレイ整理はNVIDIAオーバーレイをタイトル別にオフが別の話です。
まとめ
Figma Steam 画像 切り出しの要点は、元素材の条件を確認したうえで、1920×1080のフレームを1つに固定して書き出すことです。10月の新作が続く週は、サムネ作りを毎回ゼロから始めないよう、source / thumb / archiveの3ページ構成に寄せると、公開ペースとの相性がよいです。
今日やること: 次に書くゲーム記事のslugを決め、Figmaにexport-thumb-16x9フレームを1つだけ作って、ストア画像を載せてみてください。ロゴが切れたら、画像を少し縮小して上下に余白を足す——この1サイクルだけで、以降のタイトルも同じ型で回せます。
関連: Figma制作フローの柱 / ゲームUI WebP書き出し / ShareXクリップ整理 / 在宅Mac作業環境ハブ
