ADV / 会話システム - Game Asset Wiki

📑 目次

1. 立ち絵（キャラクタースプライト） 2. 背景CG 3. テキストウィンドウ 4. 選択肢UI 5. イベントCG 6. トランジション・演出 🔹 ノベルゲーム拡張 🔸 ストラテジーADV拡張

🧍 1. 立ち絵（キャラクタースプライト）

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

😊

表情差分

同一ポーズで表情のみ変更。目・眉・口のパーツ差替え

表情	眉	目	口	追加パーツ	使用シーン
通常	水平	標準開き	閉じ / 軽く開き	—	一般会話
笑顔	やや上げ	細め / 弧	大きく開き	—	喜び・挨拶
怒り	つり上げ	鋭く / 細め	への字 / 歯見せ	怒りマーク	対立・叱責
悲しみ	八の字	伏せ目 / 潤み	への字	涙	悲報・別れ
驚き	大きく上げ	見開き	大きく開き	汗・!マーク	事件・発見
照れ	やや八の字	逸らし / 伏せ	小さく開き	頬紅	恋愛・褒め
困惑	片方上げ	片側細め	片側引き	汗	判断迷い
不敵	片方上げ	細め / 片目	ニヤリ	—	自信・挑発
真剣	寄せ	鋭く	きつく結び	—	決意・覚悟
泣き笑い	八の字	潤み + 弧	笑い	涙	感動・安堵

💡 パーツ分離方式: 眉・目・口を別レイヤーで管理すると、10表情 × 3パーツ = 30枚の素材で全組み合わせをカバーできる。プログラム側で組み合わせて表示する実装が必要だが、アセット制作量は大幅に減る。

制作フロー（パーツ分離方式）

ベース立ち絵を生成 — 通常表情の全身画像を作成。これが全表情の土台
顔パーツの範囲を決定 — 眉・目・口の差替え領域を矩形で確定する
各表情のパーツを生成 — img2imgやインペイントで顔部分だけ変えた画像を生成
パーツ切り出し — 生成画像から眉・目・口の領域を切り出し、透過PNGで保存
組み合わせテスト — ベース画像にパーツを重ねて不自然な組み合わせがないか確認

ベース立ち絵（通常表情）

anime visual novel character sprite, [character description], standing pose, neutral expression, front facing, full body, arms at sides, transparent background, clean illustration, high quality, game CG style

表情差分生成（怒り）— インペイント用

angry expression, furrowed eyebrows raised sharply, sharp narrowed eyes, clenched teeth, intense gaze, same character same art style --cref [base image URL]

🤸

ポーズ差分

体全体のポーズを変更。各ポーズで全表情が必要

ポーズ	シルエット	使用シーン	向いているキャラタイプ
通常立ち	両手下ろし / 前で揃え	一般会話（最頻出）	全キャラ必須
腕組み	胸の前で腕を交差	考え中・反論・説教	指揮官・クール系
指差し / 手を前に	片手を前方に伸ばす	提案・指示・強調	リーダー・教師
手を振る	片手を上げて振る	挨拶・別れ・呼びかけ	明るい・社交的
構え / 武器持ち	戦闘態勢	バトル前・警戒	戦闘員・護衛
後ろ手	両手を後ろで組む	照れ・かわいい仕草	控えめ・年少キャラ
座り	椅子に座った姿勢	会議・食事シーン	状況依存

💡 アセット数管理: ポーズ数は制作コストに直結する（ポーズ × 表情 × 衣装 = 全差分数）。主要キャラでも3-4ポーズ、サブキャラは1-2ポーズに抑えるのが現実的。

ポーズ差分（腕組み）

anime visual novel character sprite, [character description], crossed arms pose, neutral expression, front facing, full body, confident stance, transparent background, same art style as reference --cref [base image URL]

📐

立ち絵の表示仕様

画面上での配置・サイズ・アニメーション

項目	仕様	備考
推奨サイズ	高さ 1080px 〜 1500px	画面高さの80-100%程度。上下に余白
同時表示数	最大3体（左・中央・右）	4体以上は画面が窮屈になる
位置アンカー	足元中央	全キャラで統一。差分切替時にズレない
登場アニメ	フェードイン / スライドイン	CSS transition 300-500ms
退場アニメ	フェードアウト / スライドアウト	登場と対になるアニメ
発言中の強調	非発言者を暗くする / 小さくする	誰が話しているか明示
揺れ演出	驚き・衝撃時に横揺れ	CSS animation で実装

🖼️ 2. 背景CG

会話シーンの舞台となる背景画像。シーン別・時間帯差分が必要。

🌅

シーン別背景リスト

ゲームのシナリオに応じて必要な背景を洗い出す

カテゴリ	背景例	時間帯差分	天候差分
学校系	教室 / 廊下 / 屋上 / 校門 / 体育館	朝・昼・夕・夜	晴れ・雨
街	商店街 / 住宅街 / 公園 / 駅 / カフェ	昼・夕・夜	晴れ・雨・雪
自然	森 / 海辺 / 山 / 草原 / 川	昼・夕・夜	—
ファンタジー	城内 / 城下町 / ダンジョン / 神殿 / 酒場	—（屋内は不要）	—
室内	自室 / リビング / オフィス / 図書室	昼・夜（窓の明るさ）	—
特殊	異空間 / 回想（セピア）/ 夢の中	—	—

💡 時間帯差分の効率化: 昼版を基準に、色調補正（暖色化 → 夕方、暗化+青み → 夜、明化+暖色 → 朝）で差分を量産できる。AI再生成よりPhotoshopの色調補正の方が一貫性が高い。

背景の制作仕様

項目	推奨値	備考
解像度	1920×1080（16:9）	ゲーム画面サイズに合わせる
形式	WebP（ロッシー85-90%）	JPEGより軽量。透過不要なので非可逆でOK
ファイルサイズ目安	200-500KB	1MBを超えたら圧縮率を上げる
パース	消失点統一	立ち絵と合成したとき不自然にならない高さ

教室（昼）

anime game background, empty classroom interior, daytime, sunlight streaming through large windows, rows of wooden desks and chairs, green chalkboard, clean detailed illustration, no characters, visual novel background, slightly low angle, 16:9 aspect ratio

城下町（ファンタジー）

anime fantasy game background, medieval town street, cobblestone road, half-timbered buildings, market stalls, warm afternoon light, detailed illustration, no characters, visual novel background, atmospheric perspective, 16:9 aspect ratio --sref [style reference]

💬 3. テキストウィンドウ

台詞やナレーションを表示するウィンドウ。ADVの主要UIパーツ。

📝

テキストウィンドウの構成要素

必要なパーツと仕様

パーツ	形式	仕様
ウィンドウ本体	PNG（9スライス）or CSS	半透明の背景。9スライスならサイズ可変
名前プレート	PNG or CSS	発言者名を表示。キャラカラーで色分け
顔アイコン枠	PNG	ウィンドウ左端に表示する顔アイコン用の枠
テキスト送りアイコン	PNG / CSS animation	▼マークが点滅。テキスト表示完了の合図
ログボタン	PNG（4状態）	会話履歴を開くボタン
オートボタン	PNG（4状態 + ON/OFF）	自動テキスト送り切替
スキップボタン	PNG（4状態）	既読テキストをスキップ
セーブ/ロードボタン	PNG（4状態）	メニュー呼び出し

💡 9スライスとは: 画像を9分割（角4 + 辺4 + 中央1）し、角はそのまま、辺は伸縮、中央はタイル or 伸縮して描画する方式。ウィンドウサイズを自由に変えられる。CSSのborder-image-sliceやゲームエンジンの9-Patch機能で実装。

⌨️

テキスト表示の演出

文字送り・効果・フォント設定

演出	実装	備考
1文字ずつ表示	JS（タイマー制御）	速度設定可能。30-80ms/文字
一括表示	テキスト送りクリック	タイプライター中にクリックで全文表示
フォント	WOFF2	ゴシック系（読みやすさ重視）or 明朝系（雰囲気重視）
ルビ	HTML ruby タグ	ファンタジー用語のふりがな
文字色変更	インラインCSS / タグ	重要ワードの強調
文字揺れ	CSS animation	叫び・衝撃時の演出

テキストウィンドウデザイン

game UI design, visual novel text window, semi-transparent dark panel with ornate border, name plate on top left, face icon area on left side, control buttons (auto, skip, log, save) on bottom right, [fantasy/modern/sci-fi] theme, 16:9 layout mockup, game interface design sheet

🔀 4. 選択肢UI

プレイヤーに分岐を提示する選択肢の表示。ストーリー分岐の入口。

☝️

選択肢UIの構成

ボタン・表示・フィードバック

パーツ	状態	仕様
選択肢ボタン	通常 / ホバー / 押下	2-4個を縦並び。テキストを中央配置
選択肢ウィンドウ	—	選択肢全体を囲むフレーム（省略可）
タイムリミット表示	ゲージ + 数字	時間制限選択肢の場合のみ
選択済みマーク	チェック / 色変え	2周目以降で既選択ルートを表示

選択肢の表示演出

演出	実装方法	効果
フェードイン	CSS opacity + transition	自然な出現
スライドイン	CSS transform	上 or 横からスライド。動きがある
ホバーエフェクト	CSS hover + box-shadow	光るフレーム。選択可能を明示
選択後のフィードバック	選択ボタンが光る → 全体フェードアウト	選択が受理された合図

選択肢ボタンデザイン

game UI design, visual novel choice buttons, 3 rectangular buttons stacked vertically, semi-transparent with border glow on hover, [fantasy/modern] theme, centered text, clean minimal design, game interface mockup

🎨 5. イベントCG

ストーリーの重要シーンを描いた特別な一枚絵。立ち絵+背景とは別に全画面表示する。

🌟

イベントCGの仕様

用途・サイズ・差分管理

項目	仕様	備考
解像度	1920×1080（16:9）	ゲーム画面と同サイズ
形式	WebP（ロッシー90%）	品質重視。800KB-1.5MB目安
差分	表情差分 / 段階差分	同構図で表情や状況の変化を表現
枚数目安	ゲーム全体で10-30枚	ストーリーの転換点ごとに配置

イベントCGを入れるべきシーン

シーン種別	例	差分の有無
感動	再会、告白、別れ	表情差分あり
アクション	決戦、救出、覚醒	段階差分（戦闘前→中→後）
転換点	裏切り、真実の発覚、死	表情差分あり
エンディング	ルートごとの結末	ルート別にそれぞれ1枚
日常の印象的シーン	桜の下、夕日、祭り	なし（1パターン）

💡 CG回想モード: 多くのノベルゲームにはCGギャラリー機能がある。イベントCGをリスト管理し、解放状況をセーブデータに含める設計が必要。サムネイル（300×169程度）も別途用意する。

イベントCG（感動シーン）

anime game CG illustration, [scene description], [characters involved], emotional scene, dramatic lighting, detailed background, cinematic composition, visual novel event CG, high quality illustration, 16:9 aspect ratio

🎬 6. トランジション・演出

シーン切替やドラマチックな演出に使うアニメーション・エフェクト。

🔄

シーン切替トランジション

場面転換の画面遷移効果

トランジション	実装	効果
フェード（黒）	CSS opacity	基本。場面切替の標準
フェード（白）	CSS opacity	回想の開始/終了、フラッシュバック
ワイプ（横/縦）	CSS clip-path	同時間帯の場所移動
ディゾルブ	CSS mix-blend-mode	背景のみ変わる場合。滑らかな切替
暗転 + テキスト	CSS + JS	「数時間後…」「翌日」等の時間経過

💥

画面演出エフェクト

感情や状況を強調するエフェクト

演出	実装	使用シーン
画面揺れ	CSS animation（translate）	衝撃・爆発・地震
フラッシュ	白オーバーレイ + フェード	閃光・覚醒・爆発
雨	CSS / Canvas パーティクル	悲しいシーン・緊迫シーン
桜吹雪 / 雪	CSS / Canvas パーティクル	季節演出・感動シーン
集中線	PNG / SVGオーバーレイ	驚き・緊迫・コミカル
暗転ビネット	CSS radial-gradient	回想・夢・意識朦朧
セピア / モノクロ	CSS filter	回想・過去シーン

🔹 ノベルゲーム拡張

ノベルゲーム固有のアセット

純粋なノベルゲーム（綴りの温もり等）で追加で必要になるアセット。

📚

ルート分岐・フラグ管理UI

マルチエンディングの進行管理

UI要素	内容
フローチャート	シナリオの分岐構造を可視化。既読/未読ルートの表示
エンディングリスト	到達済みエンディングの一覧。未到達はシルエット or ???
好感度表示	キャラ別の好感度ゲージ（表示する場合）
CGギャラリー	解放済みイベントCGのサムネイル一覧
BGMプレイヤー	解放済みBGMの再生機能

📖

セーブ/ロード画面

ノベルゲームでは特に重要なUI

要素	内容
セーブスロット	スクリーンショット + 日時 + シーン名。8-20スロット
クイックセーブ	専用スロット（上書き）
オートセーブ	選択肢直前に自動保存
スロット枠	PNG（通常/選択中）
ページ切替	スロット数が多い場合のページネーション

🔸 ストラテジーADVパート拡張

ストラテジーゲームのADVパート

AETHER FRAME等、戦略ゲームに組み込むADVパートで追加で必要になるアセット。

🎖️

戦略パート連携UI

バトルパートとADVパートを繋ぐ要素

UI要素	内容	アセット
作戦会議画面	出撃前のブリーフィング背景	背景CG（会議室/作戦テーブル）
キャラ紹介カットイン	新キャラ加入時の演出	カットインイラスト + 名前テロップ
戦況報告	バトル結果をADVパートで報告	勝利/敗北の差分背景
陣営エンブレム	会話中に所属を示すアイコン	各陣営のエンブレム画像
拠点画面	日常パートのハブ画面	拠点背景 + 施設アイコン

💬

支援会話/キャラEP

キャラクター間の関係性イベント

要素	内容
支援レベル表示	C→B→A→S のランク表示UI
支援一覧画面	キャラペア×解放済みランクのマトリクス
専用背景	拠点内の会話場所（食堂、訓練場、庭等）
回想リスト	既読支援会話の再読機能

🎭 ADV / 会話システム