🌙 Dark

🛠️ アセット制作ガイド

ゲームに必要なアセットの種類・形式・制作方法の横断リファレンス

📑 目次

1. アセットカテゴリ総覧 2. キャラクターアセット 3. 背景・マップアセット 4. UI・エフェクトアセット 5. 音声アセット 6. 形式選択ガイド 7. 制作ツール・ワークフロー

📦 1. アセットカテゴリ総覧

ゲーム制作で必要になるアセットの全カテゴリ。まずこの一覧で全体像を把握し、自分のゲームに必要なものをチェックする。

🗂️

アセット種別 × 形式 × 用途

全カテゴリの概要一覧

カテゴリ 主な形式 用途例 特徴
静止画 PNG / WebP 立ち絵、背景CG、UIパーツ、アイコン 最も基本。WebPはPNGの30-50%軽量
スプライトシート PNG（複数フレーム配置） 歩行、走行、攻撃、待機モーション 1枚の画像に複数フレームを並べて配置
アニメーション画像 WebPアニメ / APNG カットイン、エフェクト、UI演出 透過対応のアニメーション。GIFより高品質
動画 MP4 / WebM OP/ED、必殺技演出、ガチャ演出 高品質。WebMは透過対応
BGM MP3 / OGG バトル、日常、緊迫、ボス戦 ループ再生が基本。ループポイント設定が重要
効果音（SE） MP3 / OGG / WAV 打撃、UI操作、環境音 短い音。即時再生が求められる
ボイス MP3 / OGG キャラクターボイス、掛け声 フルボイス / パートボイス / 戦闘のみ等
フォント WOFF2 / TTF UIテキスト、ダメージ数字、タイトルロゴ ライセンス確認が重要
💡 ポイント: ゲーム企画段階で上記テーブルの各行を確認し、自分のゲームに必要なカテゴリにチェックを入れることで、制作開始前にアセットの全体像を把握できる。

🧑‍🎨 2. キャラクターアセット

ゲームで最も種類が多く複雑なアセット。同一キャラクターでも用途ごとに複数の素材が必要になる。

🎭

2-1. 立ち絵（ADV / 会話用）

会話シーンで表示するキャラクター画像。表情・ポーズ・衣装の差分が必要

表情差分

同じポーズで表情だけ変える。最低5種、できれば8種以上。目と口のパーツを差し替える方式が効率的。

表情使用シーン変更パーツ
😐 通常一般的な会話ベース（変更なし）
😊 笑顔喜び、挨拶目（細め）+ 口（開き）
😠 怒り対立、叱責眉（つり上げ）+ 目（鋭く）+ 口（への字）
😢 悲しみ悲報、別れ眉（八の字）+ 目（潤み）+ 口（への字）
😲 驚き事件、発見眉（上げ）+ 目（見開き）+ 口（開き）
😳 照れ恋愛、褒められ目（逸らし）+ 頬（紅潮）
😰 困惑判断に迷う場面眉（片方上げ）+ 口（片側引き）+ 汗
😏 不敵自信、挑発目（細め片目）+ 口（ニヤリ）
ポーズ差分

体全体のポーズを変える。表情差分と組み合わせるため、各ポーズで全表情パターンが必要。

ポーズ使用シーン備考
通常立ち一般的な会話基本ポーズ。全キャラ必須
腕組み考え中、反論自信家・指揮官キャラ向き
指差し提案、指示リーダー・教師キャラ向き
手を振る挨拶、別れ明るいキャラ向き
構え戦闘前、警戒戦闘員キャラ向き
衣装差分

衣装ごとに全ポーズ × 全表情が必要。衣装数は慎重に決める（掛け算で爆発的に増える）。

衣装例場面アセット数の目安
制服 / 普段着日常パート= ポーズ数 × 表情数
戦闘服 / 装備バトルパート= ポーズ数 × 表情数
私服 / イベント衣装特別イベント= ポーズ数 × 表情数
💡 アセット数の計算: 例えば表情8種 × ポーズ3種 × 衣装2種 = 48枚/キャラ。メインキャラ5人なら240枚。表情をパーツ分離方式にすればベース画像数を大幅に削減できる。
制作フロー
  1. リファレンスシート作成 — キャラの3面図（正面/側面/背面）を生成し、デザインの基準を固める
  2. ベース立ち絵の生成 — 「通常」ポーズ × 「通常」表情の1枚を丁寧に作り込む。これが全差分の基準
  3. 表情パーツの生成 — ベース画像をimg2imgで表情だけ変更。または目・口のパーツを個別に生成してレイヤー合成
  4. ポーズ差分の生成 — ControlNet（OpenPose等）でポーズを指定し、--crefでキャラの一貫性を保って生成
  5. 背景除去・サイズ統一 — 全差分の背景を透過にし、キャンバスサイズと位置を統一。顔の位置がズレないように注意
プロンプト例
ベース立ち絵（通常ポーズ・通常表情）
anime style character portrait, [character description], standing pose, neutral expression, front view, full body, arms at sides, transparent background, clean lines, game visual novel character sprite, high quality
表情差分（笑顔）
anime style character portrait, [character description], standing pose, happy smiling expression, eyes slightly closed, mouth open with smile, front view, full body, transparent background, same outfit and pose as reference --cref [base image URL]
ポーズ差分（腕組み）
anime style character portrait, [character description], crossed arms pose, neutral expression, front view, full body, confident stance, transparent background, same character design --cref [base image URL]
🏃

2-2. スプライトシート（バトル / マップ用）

複数フレームを1枚の画像に並べたアニメーション素材

必要なモーション一覧
モーション フレーム数 方向数 合計フレーム 用途
歩行 3-4F 4方向（上下左右） 12-16F マップ移動、グリッド移動
走行 4-6F 4方向 16-24F ダッシュ、逃走
待機（アイドル） 2-3F 1方向（正面） 2-3F 行動待ち。ゆるやかな呼吸アニメ
攻撃（剣） 3-5F 1-4方向 3-20F 振りかぶり→インパクト→戻り
攻撃（槍） 3-5F 1-4方向 3-20F 突き動作
攻撃（弓） 3-4F 1-4方向 3-16F 引き絞り→発射→戻り
攻撃（魔法） 4-6F 1方向 4-6F 詠唱→発動。エフェクトは別素材
被ダメージ 2F 1方向 2F ノックバック表現
死亡 / 退場 3-4F 1方向 3-4F 倒れる→フェードアウト
スキル発動 2-3F 1方向 2-3F 特殊ポーズ。カットインと組み合わせ
💡 サイズ規格: RPGツクール標準は32×32px or 48×48pxだが、高解像度ゲームでは64×64、128×128も。プロジェクト開始時にサイズを統一して決めること。
制作フロー
  1. 基準画像の生成 — 正面の立ちポーズ1枚を基準として生成
  2. 方向別フレームの生成 — 各方向の各フレームを個別に生成。--crefで一貫性を保つ
  3. 背景除去・切り出し — 全フレームの背景を透過にし、キャラ部分を統一サイズに切り出し
  4. 位置合わせ — 各フレームの足元位置を揃える。ズレるとガタつくアニメになる
  5. シート化 — フレームを横×縦に並べてスプライトシートを作成。TexturePacker, ShoeBox, 自作スクリプト等
  6. 動作確認 — アニメーションプレビューで滑らかに動くか確認。フレーム間の差が大きすぎないか
歩行フレーム（正面 / 左足前）
pixel art game sprite, [character description], front view walking pose, left foot forward, chibi proportions, [32x32 / 48x48 / 64x64]px, transparent background, game asset sprite sheet frame --cref [base image URL]
攻撃フレーム（剣 / インパクト）
pixel art game sprite, [character description], sword attack impact frame, slashing motion, dynamic pose, chibi proportions, [32x32 / 64x64]px, transparent background, game asset sprite --cref [base image URL]
⚡

2-3. カットイン / 必殺技演出

スキル発動時に画面を覆うカットイン演出。形式選択が重要

実装形式の比較
形式 透過 品質 ファイルサイズ ブラウザ対応 向いている用途
WebPアニメ ✅ 対応 高 中 ◎ 主要ブラウザ対応 透過が必要なエフェクト、短いアニメ
MP4 ❌ 非対応 最高 小 ◎ 全ブラウザ対応 全画面演出、OP/ED
WebM ✅ 対応 高 中 ○ Safari非対応あり 透過が必要な高品質アニメ
CSS + 静止画 ✅ 対応 中 最小 ◎ 全ブラウザ対応 スライドイン、ズーム等の単純な動き
スプライトシート ✅ 対応 高 大 ◎ 全ブラウザ対応 ゲームエンジンでの制御が容易
💡 判断基準: 「透過が必要か」と「動きの複雑さ」で形式を決める。画面を覆う全画面演出ならMP4が最も効率的。UI上にオーバーレイするエフェクトならWebPアニメかCSS制御。
カットインイラスト（静止画素材）
anime game cut-in illustration, [character description], dynamic action pose, intense expression, dramatic lighting, speed lines background, upper body close-up, high energy, game skill activation art, high quality illustration
👤

2-4. アイコン / ミニキャラ

バトルUI用の顔アイコン、マップ表示用のミニキャラ

種別サイズ目安用途
顔アイコン48×48 〜 96×96ターン順表示、ステータスパネル、会話ログ
ミニキャラ32×32 〜 64×64マップ上の移動表示、戦闘配置
立ち絵サムネ128×256 程度メニュー画面、編成画面
顔アイコン
anime game character face icon, [character description], portrait close-up, circular frame, [expression], clean lines, flat color, game UI icon style, 96x96 pixel art quality, transparent background

🏞️ 3. 背景・マップアセット

シーンの舞台を表現する背景画像やマップ素材。

🖼️

ADV背景CG

会話シーンの背景画像。シーン別に複数用意

シーン例時間帯差分備考
教室 / オフィス朝 / 昼 / 夕 / 夜日常パートの基本背景
街 / 商店街昼 / 夕 / 夜移動パート
森 / 野原—冒険パート
城 / ダンジョン—ファンタジー系
戦場 / 廃墟—シリアスパート
💡 解像度: 一般的にはゲーム画面サイズに合わせる（1920×1080, 1280×720等）。拡大演出がある場合は大きめに作っておく。
ADV背景（教室・昼）
anime game background, empty classroom interior, daytime, sunlight through windows, desks and chairs, chalkboard, detailed, no characters, visual novel background, clean illustration, 16:9 aspect ratio
🗺️

マップタイル / バトルマップ

グリッドベースのマップを構成するタイル素材

タイルサイズ用途補足
32×32pxレトロ、ドット絵系RPGツクール標準
64×64px高解像度2Dモダンなインディーゲーム向け
ヘックスストラテジー六角形。120×104px等
必要な地形タイプ

草原 / 砂地 / 水面 / 森 / 山 / 岩 / 道 / 橋 / 壁 / 床 / 階段 etc.

各地形にオートタイル（周囲の地形に応じて自動的に接続する）が必要な場合は、1地形につき47パターン必要。

マップタイル（草原）
top-down game tile, grass terrain, [32x32 / 64x64]px, tileable seamless pattern, pixel art style, flat green grass with subtle texture variation, game asset tileset, clean edges
🎨

イベントCG

重要シーンを描いた一枚絵

ストーリーの転換点や感動シーンで全画面表示する特別なイラスト。キャラの立ち絵とは異なり、背景や構図を含めた完成された一枚絵。

場面例解像度差分
告白シーン1920×1080表情差分（照れ/笑顔）
最終決戦1920×1080なし（1パターン）
エンディング1920×1080ルート別差分
🌍

ワールドマップ

全体マップ + 地点アイコン

ゲーム全体の世界観を示すマップ画像。ステージ選択画面やシナリオ進行に使用。

要素形式備考
マップ本体PNG（大サイズ）スクロール対応
地点アイコンPNG（透過）選択可能/ロック状態の差分
進行ラインSVG or CSS地点間の経路表示

🖥️ 4. UI・エフェクトアセット

ゲームの操作画面を構成するUI要素と、視覚演出用のエフェクト素材。

🔘

UIパーツ

ボタン・ゲージ・ダイアログ・アイコン

ボタン（4状態必須）
状態見た目備考
通常（Default）基本デザイン全ボタン共通の基準
ホバー（Hover）やや明るく / 光るマウスオーバー時
押下（Pressed）やや暗く / 凹みクリック中
非活性（Disabled）グレーアウト選択不可の状態
ゲージ

HP / MP / EXP等のバー表示。フレーム（外枠）と中身（塗り）を分離して作ると、プログラムで割合制御しやすい。

ダイアログ

テキストウィンドウ、選択肢ウィンドウ、確認ダイアログ。9スライス対応（角+辺+中央で構成）するとサイズ可変。

アイコンセット

アイテムアイコン / ステータスアイコン / 属性アイコン / スキルアイコン。統一されたサイズ（32×32 or 48×48）で整列配置。

✨

エフェクト

ヒット・ダメージ・バフデバフ・パーティクル

エフェクト形式フレーム数備考
ヒットエフェクトスプライトシート4-8F斬撃/刺突/打撃/魔法で差分
ダメージ数字フォント or スプライト—0-9 + ミス/クリティカル表示
バフ/デバフアイコン + パーティクル2-4F上昇↑ / 下降↓ の矢印アニメ
回復スプライトシート6-10F緑の光粒子が上昇するアニメ
属性エフェクトスプライトシート6-12F炎/氷/雷/光/闇 で差分
爆発スプライトシート8-16F範囲攻撃用
💡 エフェクトの形式選択: ゲームエンジン上で制御するならスプライトシートが最適（フレーム制御が容易）。Webゲームで簡易に使うならWebPアニメやCSS animation。
ヒットエフェクト（斬撃）
game effect sprite sheet, slash hit effect, 4 frames animation sequence, white and blue energy slash, transparent background, pixel art style, horizontal strip layout, game VFX asset

🔊 5. 音声アセット

BGM・効果音・ボイスの必要素材リスト。

🎵

BGM

シーンごとに必要な楽曲リスト

シーン雰囲気ループ長さ目安
タイトル画面壮大 / キャッチー✅60-120秒
通常バトル緊張 / アップテンポ✅60-90秒
ボスバトル激しい / 壮大✅90-120秒
日常 / 街穏やか / 明るい✅60-120秒
緊迫 / ダンジョン不安 / ミステリアス✅60-90秒
悲しい場面メランコリック✅60-90秒
勝利ジングル達成感❌5-15秒
敗北ジングル残念❌3-8秒
ショップのんびり✅30-60秒
💡 ループポイント: BGMは頭から終わりまで完全にループ可能にするか、イントロ付き（イントロ→ループ区間）にする。Audacity等でループポイントを設定。AI生成（Suno, Udio等）の場合は生成後にループ加工が必要。
🔔

効果音（SE）

操作・戦闘・環境のサウンドエフェクト

カテゴリSE例長さ
UI操作決定 / キャンセル / カーソル移動 / ページめくり0.1-0.5秒
攻撃剣の斬撃 / 弓の発射 / 魔法詠唱 / 魔法発動0.3-1.5秒
被ダメヒット / ガード / 回避（ミス）0.2-0.5秒
環境ドア開閉 / 足音 / 風 / 水流 / 鳥のさえずり0.3-3秒
システムレベルアップ / アイテム取得 / セーブ完了0.5-2秒
🎤

ボイス

キャラクターの声素材（必要な場合）

ボイスレベル内容アセット量
フルボイス全台詞を収録非常に多い。プロ or TTS必須
パートボイス重要シーン + 戦闘のみ中程度
戦闘掛け声のみ攻撃/被ダメ/スキル発動の短い掛け声キャラあたり10-20音声
ボイスなしテキストのみ0
💡 AI音声: 近年はTTS（Text-to-Speech）の品質が向上しており、VOICEVOX、Style-Bert-VITS2等でキャラクターボイスを生成可能。ただしライセンスと商用利用条件の確認が必須。

🔀 6. 形式選択ガイド

「この演出を実装したい」→ 最適な形式は何か？の判断フロー。

🌳

形式選択フローチャート

実装したい演出から最適な形式を逆引き

そのアセットは動くか？ │ ├── 動かない（静止画） │ ├── 透過が必要 → PNG（最高品質）or WebP（軽量） │ └── 透過不要 → WebP（推奨）or JPEG（写真的素材） │ ├── 動く（数フレームのループ） │ ├── ゲームエンジンで制御 → スプライトシート（PNG） │ └── Webで表示するだけ → WebPアニメ or CSSアニメ │ ├── 動く（複雑なアニメーション） │ ├── 透過が必要 │ │ ├── 高品質 → WebM（Safari注意） │ │ └── 互換性重視 → WebPアニメ │ └── 透過不要 → MP4（最も軽量・高互換） │ ├── インタラクティブ（操作に反応） │ └── CSS/JS + 静止画（プログラム制御） │ └── 音声 ├── BGM → MP3（互換性）or OGG（品質/軽量） ├── SE → MP3 or WAV（遅延なし） └── ボイス → MP3（ファイルサイズ重視）
📊

画像・映像形式の詳細比較

各形式の特性と使い分け

形式 アニメ 透過 ファイルサイズ 品質 ブラウザ 主な用途
PNG ❌ ✅ 大 ロスレス ◎ 透過が必要な静止画全般
WebP（静止） ❌ ✅ 小 ロッシー/ロスレス ◎ PNGの軽量代替。30-50%削減
JPEG ❌ ❌ 小 ロッシー ◎ 写真的な背景CG（透過不要）
WebPアニメ ✅ ✅ 中 ロッシー ◎ エフェクト、カットイン（透過）
APNG ✅ ✅ 大 ロスレス ◎ 高品質透過アニメ（サイズ大）
MP4（H.264） ✅ ❌ 小 高 ◎ 全画面演出、OP/ED
WebM（VP9） ✅ ✅ 中 高 ○ 透過動画（Safari非対応に注意）
GIF ✅ △ 大 低（256色） ◎ レガシー。WebPアニメに移行推奨
💡 実践的な結論:
• 静止画 → WebP（透過可・軽量）をデフォルトにする
• 短いアニメ → WebPアニメ（GIFの上位互換）
• 全画面動画 → MP4（最も互換性が高い）
• 透過動画 → WebM（Safariフォールバック検討）
• ゲームエンジン制御 → スプライトシート（PNG）

🔧 7. 制作ツール・ワークフロー

各アセット種別の制作に使えるツールと制作の流れ。

🤖

AI生成 + 編集ツール マトリクス

アセット種別ごとの制作ツール一覧

アセット AI生成ツール 編集・加工ツール ポイント
キャラ立ち絵 Midjourney, Stable Diffusion Photoshop, GIMP, Photopea --cref / --sref で一貫性を保つ
表情差分 img2img, ControlNet, インペイント レイヤー合成ソフト 目・口パーツのみ差替え。全身再生成しない
スプライトシート フレーム個別生成 TexturePacker, ShoeBox 方向別に生成→背景除去→シート化
背景CG Midjourney, DALL-E Photoshop --sref で画風統一。時間帯差分は色調補正
UIデザイン Midjourney（UIモックアップ） Figma, Photoshop パーツ分離して書き出し。9スライス対応
エフェクト 透過素材生成 After Effects, PixiJS スプライトシート or WebPアニメに変換
BGM Suno, Udio Audacity, GarageBand ループポイント設定が重要
SE Elevenlabs, 素材サイト Audacity 短く切り出し。音量レベル統一
ボイス VOICEVOX, Style-Bert-VITS2 Audacity キャラ別に声質設定。ライセンス要確認
フォント — FontForge, Glyphs フリーフォント活用。ライセンス要確認
📋

アセット制作の全体フロー

ゲーム企画からアセット完成までの流れ

  1. ゲーム企画書からアセット一覧を作成 — ゲームの機能・画面・シーンを洗い出し、必要なアセットを全てリストアップする。このページの各セクションをチェックリストとして使う
  2. アセット別に形式を決定 — 形式選択フローチャート（セクション6）を使い、各アセットの最適な形式を決める
  3. スタイルガイドを作成 — ゲーム全体の画風・カラーパレット・UIトーンを統一するリファレンスを最初に作る
  4. キャラクターリファレンスシートを作成 — 全キャラの3面図とデザイン仕様を先に固める。これがないと差分制作でブレる
  5. 優先度順に制作開始 — まずプロトタイプに必要な最小限のアセット → デモに必要なアセット → 完成版アセット の順で進める
  6. 命名規則とフォルダ構成を統一 — chara_[name]_[pose]_[expression].webp のような命名規則を最初に決めておく
💡 命名規則の例:
• chara_sakura_normal_smile.webp — キャラ立ち絵（桜/通常ポーズ/笑顔）
• sprite_sakura_walk_down.png — スプライトシート（桜/歩行/下向き）
• bg_classroom_day.webp — 背景CG（教室/昼）
• fx_slash_hit.png — エフェクト（斬撃ヒット）
• bgm_battle_normal.mp3 — BGM（通常バトル）
• se_ui_decide.mp3 — SE（UI決定音）