新作ゲームの発売週は、プレイ時間より先に画面のスクショを誰かに渡す場面が増えます。メニューの文言、ボタンの並び、チュートリアルの導線——チャットで「ここが分かりにくい」と言葉だけ送ると、相手の頭の中の画面とズレがちです。私もWebディレクション側で、ゲーム UI スクショ Figma 共有の型を決めてから送るようにしています。
本記事は、PS5やSwitch 2、PCのキャプチャをFigmaに集め、矢印と番号付きコメントで打合せ用の1枚絵にする手順です。OGP量産の納品フローは案件ごとのOGP書き出しに任せ、ここではゲームUIのフィードバックに絞ります。Appleイベントや本体の買い替え判断は触れません。体験で書く部分と、Figma公式ヘルプで確認した操作は分けます。
この記事でわかること
- キャプチャをFigmaに載せる前に揃える解像度とファイル名のルール
- 注釈用フレームを1画面ずつ作る手順とレイヤー構成
- クライアントに渡す共有リンクの権限と、打合せ後の整理のしかた
先に結論
- 向いている人: 新作のUIやチュートリアルを、クライアント・ライター・実装担当に視覚で共有したいWebディレクター／フリーランス。ゲームは自分で遊び、スクショはコンソール公式の保存機能かPCのキャプチャツールで取れる人
- 向いていない人: 実機の操作手順だけを知りたい人（PS5ギャラリーの週次整理やSwitch2の共有手順を先に読んでください）。Figma未経験で、いきなりデザインシステムを組みたい人
- 私のおすすめ: 1画面＝1フレーム、注釈は赤矢印＋番号リスト、共有は「閲覧のみ」リンクを打合せ直前に発行。迷ったらスクショ枚数を減らし、最大5画面に抑える
私は最初、20枚まとめて送って相手が開かなかったので、今は「見せたい順」に番号を振るだけにしています。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
なぜチャットだけだとズレるのか
ゲームUIの指摘は、どのボタンを指しているかが9割です。「右上の設定」でも、解像度やUIスケールが違うと、相手の記憶と一致しません。スクショに番号を振り、同じ番号で文章を書く——この対応表があるだけで、打合せ時間は短くなります。
| 共有方法 | 向く場面 | 注意点 |
|---|---|---|
| チャットに画像を直貼り | 1枚だけの急ぎ | 履歴が流れて探しにくい |
| PDFにまとめる | 契約書付きの正式指摘 | 更新のたびに再出力が面倒 |
| Figmaで注釈 | 複数画面・非同期レビュー | 初回だけフレーム設計が必要 |
新作週は発売タイトルと仕事のカレンダー両立のように、時間が細切れになりがちです。非同期で見られる1リンクに寄せる判断は、そういう週に効きます。
具体例です。ホラー新作で「マップ画面の凡例が小さい」と伝えるとき、私はチャットで長文を書く前に、凡例部分だけを切り出したスクショに①を付け、「①の文字サイズを他UIと揃えたい」と1行で送ります。相手がスマホで開いても、どのUIを指しているかが残ります。これはデザインの良し悪しの断定ではなく、認識のすり合わせ用のメモだと先に言っておくと、議論が建設的になりやすいです。
準備｜キャプチャの書き出しルール
解像度とトリミング
コンソールのスクショは、テレビやモニターの解像度そのまま保存されることが多いです。Figmaに貼るときは、UIが小さく見えないかだけ確認します。必要ならFigma側でフレーム幅を1920px相当にし、画像を幅100%で配置します。私は横長のまま1画面全体を載せ、細部は別フレームで切り出すことが多いです。
ファイル名の例
打合せ後に探しやすいよう、次の形式に揃えます。
タイトル略称_画面名_日付.png（例:townfall_map_0926.png）- 同じ画面の差分は
_v2を付ける - ネタバレ注意の画面は
_spoilerを付け、共有リンクのコメント欄にも一言書く
PC版はSteamのF12スクショなど、保存先がバラバラになりやすいので、共有前に1フォルダへコピーだけ済ませます。
個人情報とアカウント名
フレンドコード、PSN ID、メールアドレスが写り込む画面は、Figmaのぼかしツールか、キャプチャ前にオーバーレイで隠します。実在の第三者のユーザー名が写るオンライン画面は、共有範囲を狭めるか、該当部分をトリミングしてください。
Figmaでフレームを作る手順
Figmaで新規ファイルを作り、ファイル名を「案件名_ゲームUI_0926」のようにします。無料プランでも本記事の用途は足ります（執筆時点の公式プラン表は変わることがあります）。
- フレームツールで Desktop 1920 または Custom 1600×900 を選択
- キャプチャ画像をフレーム内にドラッグ＆ドロップ
- フレーム名を画面の役割に合わせて変更（例:
01_タイトルメニュー） - 注釈用に空のフレームを右隣に複製し、矢印用の余白を確保
レイヤーは次のように分けると、後から直しやすいです。
screenshot… 画像本体（ロック可）annotations… 矢印・番号・テキストnotes… 打合せメモ（非表示レイヤーにしてもよい）
矢印はデザインコンポーネントにしておくと、色を一括で赤に変えられて助かります。
矢印と番号の付け方
- 線ツールまたはペンツールで細い矢印（2〜3px）を引く
- 丸い数字スタンプは、テキストで「①②③」でも可
- 右側のメモ欄に、番号と同じ順の箇条書きを書く
色は赤1色に統一すると、スクリーンショット上の装飾と混ざりません。コントラストが足りない暗い画面では、白縁付きのテキストに切り替えます。
打合せ用の共有リンクを出す
権限の選び方
- 閲覧のみ: クライアント・外部パートナー向けの既定
- コメント可: 社内レビューで指摘をもらうとき
- 編集可: 自分だけ。打合せ中に誤って動かされないよう避ける
リンクは打合せの15分前に発行し、古いリンクを無効化する習慣があると安全です。チャットには「Figmaの①から順に見てください」と一文添えます。
打合せ中の進め方
- 共有画面でフレーム①を全画面表示
- 番号どおりに口頭で補足（録画する場合は相手の同意を取る）
- 決定事項はフレーム下の
notesに3行以内で追記 - 終了後、必要ならPDF書き出しはOGP量産フローの書き出し設定を流用
よくある失敗と回避
失敗1: スクショが多すぎて読まれない
5画面を超えたら、優先度の低い画面は別ファイルに分けます。新作週は「初見チュートリアルだけ」など、目的を1行でファイル名に書くと伝わります。
失敗2: 画質が粗くて文字が読めない
4Kテレビのスクショを縮小しすぎたときに起きます。該当部分だけ2倍ズームの切り出しフレームを足してください。
失敗3: バージョンが混在する
パッチ当日はファイル名に _patch126 のように日付かビルド番号を入れ、古いリンクを残さない。
失敗4: 共有リンクが検索に残る
機密性の高い案件は、プロジェクトをパスワード付き共有にするか、社内VPN経由のレビューに切り替えます。一般向けブログの話ではないので、契約の守秘条項を先に確認してください。
ゲーム別のキャプチャの取り方（要点だけ）
| 環境 | 取り方の目安 | Figmaに載せるとき |
|---|---|---|
| PS5 | 作成ボタン長押し → ギャラリーからUSBまたはアプリ経由でPCへ | 16:9のまま。HDR画面は明るさ差に注意 |
| Switch 2 | キャプチャボタン → アルバムから転送 | 携帯モードとTVモードでUI密度が違うので別フレーム |
| PC | OS標準またはSteamの保存先から | ウルトラワイドは左右をトリミングしてUI中心を大きく |
操作の細部は各機の公式マニュアルを参照してください。ここでは共有の型だけを固定します。
打合せ後の整理
打合せが終わったら、次の3つを5分で済ませます。
notesレイヤーに決定事項と未決を分けて書く- 共有リンクを閲覧のみに戻すか、リンクを削除
- ローカルの生スクショを、案件フォルダの
archiveに移動
長期案件では、週次で請求や仕訳を先に出すタイミングと同じ曜日にFigmaファイル名の日付を更新すると、請求メモとUIレビューが同じタイムラインで追えます。
未決のままフレームを増やし続けると沼るので、私は「次回までに決める番号」を最大3つに制限しています。
よくある質問
Q. Figma以外で同じことはできますか？
A. できます。macOSのプレビューで矢印を描く、PowerPointに貼る、Notionに画像とコメントを並べる——手段は何でもよいです。本記事がFigmaを推す理由は、リンク1本で非同期レビューがしやすく、レイヤーで注釈と画像を分けられる点です。すでに社内で別ツールが決まっているなら、そちらを正にしてください。
Q. ネタバレを含む画面をクライアントに見せてもよいですか？
A. 契約とNDAの範囲内でのみ共有してください。公開前のビルドや未発売コンテンツは、クライアント都合のスクショ依頼でもタイトル側の許諾が必要なことがあります。迷ったらマスクか、ストーリーに関係ない設定画面だけに絞ります。
Q. 実装担当に渡すときはどうすればよいですか？
A. FigmaのDev Modeや、書き出しPNG＋番号リストのCSV——チームの慣習に合わせます。本記事のフレームはディレクション用です。実装用の寸法やトークンは、別ファイルに分けると混乱が減ります。
Q. 無料プランでフレーム数に限界はありますか？
A. プランごとの上限は公式の料金ページで確認してください。執筆時点では、打合せ用の少数フレームなら無料でも運用できるケースが多いです。ファイルが重いときは、古い週のフレームを別ファイルへ移します。
まとめ
ゲーム UI スクショ Figma 共有の要点は、キャプチャを先に名前で揃え、1画面1フレームで番号注釈し、閲覧のみリンクで渡すことです。新作週は枚数を絞り、決定事項だけ notes に残すと、プレイ時間を削りすぎません。
次の一手は、手元の新作でいちばん説明が難しかった1画面だけキャプチャし、Figmaに①②③を付けて自分用に見直すことです。それで足りなければ、Figma公式のコメント機能を試してください。
関連: OGP量産のFigmaフロー / PS5スクショの週次整理 / 発売週のカレンダー両立 / 在宅Mac作業環境の入口
