全ゲーム共通で必要なUI要素・メニュー画面のアセット
ゲームUIの最も基本的なパーツ。4状態分の素材が必要。
全ボタンで共通して必要な状態バリエーション
| 状態 | 見た目の変化 | トリガー | SE |
|---|---|---|---|
| 通常（Default） | 基本デザイン | — | — |
| ホバー（Hover） | やや明るく / 光る枠 / 拡大 | マウスオーバー / フォーカス | カーソル音（任意） |
| 押下（Pressed） | やや暗く / 凹み / 縮小 | クリック中 | 決定音 |
| 非活性（Disabled） | グレーアウト / 半透明 | 条件未達 | — |
| 種類 | 用途 | サイズ目安 |
|---|---|---|
| プライマリ | 決定・開始・確認 | 200×60px（大） |
| セカンダリ | キャンセル・戻る | 160×50px（中） |
| アイコンボタン | 設定・閉じる・情報 | 48×48px（正方形） |
| タブボタン | 画面内カテゴリ切替 | 120×40px |
| トグル | ON/OFF切替 | 60×30px |
ゲーム全体で使用するアイコン群。統一されたサイズ・スタイルで作成する。
用途別のアイコン一覧
| カテゴリ | 含まれるアイコン | サイズ |
|---|---|---|
| ステータス | HP/MP/ATK/DEF/SPD/LCK | 32×32 |
| 属性 | 火/水/風/土/光/闇/無 | 32×32 |
| 武器種 | 剣/槍/弓/杖/銃/拳 | 32×32 〜 48×48 |
| アイテム | 回復薬/素材/鍵/宝箱/コイン | 32×32 〜 48×48 |
| 状態異常 | 毒/麻痺/混乱/睡眠/沈黙/石化 | 24×24 〜 32×32 |
| バフ/デバフ | 攻撃力↑/防御力↓/速度↑ 等 | 24×24 |
| UI操作 | 設定/閉じる/情報/ソート/フィルター | 32×32 〜 48×48 |
| 通貨 | ゴールド/ジェム/チケット | 32×32 |
統一感のあるアイコンを作るためのルール
| ルール | 内容 |
|---|---|
| サイズ統一 | 同カテゴリは全て同サイズ。パディングも統一 |
| 線の太さ | 2-3pxで統一。細すぎると小サイズで潰れる |
| カラーパレット | ゲーム全体のパレットに準拠。属性色は全画面で共通 |
| 背景 | 透過 or 統一された形状（円/角丸四角）の背景 |
| 視認性 | 24pxまで縮小しても識別可能なデザイン |
HP・MP・EXP等の数値を視覚的に表示するバー。
フレームと中身を分離して作る
| パーツ | 内容 | アセット |
|---|---|---|
| フレーム（外枠） | ゲージの外側の枠。固定サイズ | PNG（9スライス対応推奨） |
| フィル（中身） | 現在値を示す塗り部分。幅で割合表現 | PNG or CSS gradient |
| 背景 | フレーム内のフィル未到達部分 | 暗い色の塗りつぶし |
| 数値テキスト | 「120/200」等の現在値/最大値 | フォント |
| アイコン | ゲージの種類を示すアイコン（左端） | ステータスアイコン流用 |
| ゲージ | 色 | 用途 | アニメーション |
|---|---|---|---|
| HP | 緑→黄→赤（残量で変化） | 体力表示 | 減少時：残像を残して減る |
| MP / マナ | 青 | 魔力・コスト | 使用時：即座に減少 |
| EXP | 紫 or 金 | 経験値 | 獲得時：じわじわ増加 |
| スキルゲージ | オレンジ or 虹色 | 必殺技チャージ | 満タン時：光るエフェクト |
| タイマー | 白→赤（残り少ないとき） | 行動制限時間 | 減少し続ける |
widthプロパティで割合を制御するだけで済む。ゲージの色変化（HP低下で赤）はCSSのbackgroundをJSで変更。
情報表示・確認・入力用のポップアップウィンドウ。
用途別に必要なウィンドウ一覧
| ダイアログ種類 | 内容 | ボタン | アセット |
|---|---|---|---|
| 確認ダイアログ | 「本当に実行しますか？」 | はい / いいえ | ウィンドウ枠 + 2ボタン |
| 情報ダイアログ | アイテム詳細、キャラ情報 | 閉じる | ウィンドウ枠 + スクロール |
| 獲得ダイアログ | 「アイテムを獲得！」 | OK | ウィンドウ枠 + アイテムアイコン |
| エラーダイアログ | 「接続に失敗しました」 | リトライ / 閉じる | ウィンドウ枠（警告色） |
| 入力ダイアログ | 名前入力、数値入力 | 決定 / キャンセル | ウィンドウ枠 + 入力フィールド |
| ツールチップ | ホバー時のミニ情報表示 | なし | 吹き出し型の小さいウィンドウ |
| 方式 | 長所 | 短所 |
|---|---|---|
| 9スライスPNG | 複雑な装飾が可能。任意サイズに伸縮 | 画像ファイルが必要 |
| CSS border + box-shadow | 軽量。色やサイズの変更が容易 | 複雑な装飾は困難 |
| SVG | どのサイズでも鮮明。装飾も自在 | 制作が複雑 |
待機中の表示と、ゲーム内通知のアセット。
データ読み込み中の表示
| 要素 | 実装 | 備考 |
|---|---|---|
| スピナー | CSS animation / WebPアニメ | 回転するアイコン。軽量 |
| プログレスバー | CSS width animation | 読み込み進行度を表示 |
| 背景 | PNG / CSS gradient | 全画面オーバーレイ |
| Tips表示 | テキスト切替 | ローディング中のヒント表示 |
| キャラアニメ | WebPアニメ / スプライトシート | 歩くキャラ等。リッチなローディング |
ゲーム内のフィードバック表示
| 通知種類 | 表示位置 | 表示時間 |
|---|---|---|
| トースト | 画面上部 or 下部 | 2-3秒で自動消去 |
| 実績解除 | 画面右上 or 中央 | 3-5秒 + 演出 |
| レベルアップ | 画面中央 | 2-3秒 + SE |
| アイテム獲得 | 画面下部 or 中央 | 1-2秒 |
| セーブ完了 | 画面右下 | 1-2秒 |
ゲームの顔。第一印象を決定づける最重要画面。
必要なアセットと仕様
| 要素 | 形式 | 仕様 |
|---|---|---|
| 背景画像 | PNG / WebP（1920×1080） | ゲームの世界観を象徴する画像 |
| タイトルロゴ | PNG（透過） | ゲーム名の装飾ロゴ |
| メニューボタン | CSS or PNG | はじめから / つづきから / 設定 / 終了 |
| 背景アニメ | CSS / MP4 / WebPアニメ | パーティクル、揺らぎ、緩やかな動き |
| BGM | MP3 / OGG | タイトル画面用BGM。ループ再生 |
| 版権表記 | テキスト | ©表記、バージョン情報 |
音量・テキスト速度・操作設定等の設定UI。
標準的なゲーム設定の一覧
| 設定項目 | UIパーツ | 備考 |
|---|---|---|
| BGM音量 | スライダー | 0-100%。リアルタイムプレビュー |
| SE音量 | スライダー | 0-100% |
| ボイス音量 | スライダー | ボイスありの場合のみ |
| テキスト速度 | スライダー or 3段階ボタン | 遅い/普通/速い/瞬間 |
| オートモード速度 | スライダー | 自動テキスト送りの待機時間 |
| 画面モード | トグル or ボタン | フルスクリーン/ウィンドウ |
| 既読スキップ | トグル | ON: 既読のみスキップ |
| 言語 | ドロップダウン | 多言語対応の場合 |
| パーツ | 内容 |
|---|---|
| トラック（レール） | スライダーの線。背景色 + 進行色の2層 |
| つまみ（サム） | ドラッグ可能な丸 or 四角のハンドル |
| 数値表示 | 現在値をテキストで表示 |