UI画面一覧

全30画面のモックアップ。クリックで詳細ページへ。

→ 画面遷移図

画像の差し替え方法

モックアップ画像を更新したい場合は、以下の手順で差し替えできます。

1. 新しい画像を 同じファイル名 で用意する（PNG推奨、1920x1080）
2. docs/assets/images/screens/ 内の該当ファイルを上書き保存する
3. mkdocs serve でプレビュー確認 → mkdocs build でサイト再生成

画像ファイル名の対応表:

画面	ファイル名
タイトル	title_screen.png
街のHUD	town_hud.webp
ダンジョンHUD	dungeon_hud.webp
戦闘HUD	battle_hud.webp
ゲームオーバー	game_over.webp
武器屋	shop_weapon.webp
鍛冶場(+強化)	blacksmith_upgrade.webp
鍛冶場(錬成)	blacksmith_alchemy.webp
魔法工房(要素選択)	magic_workshop_steps.webp
魔法工房(確認)	magic_workshop_confirm.webp
宿屋	inn.webp
酒場	tavern.webp
ギルド	guild.webp
自宅	home.webp
ダンジョン選択	dungeon_select.webp
出発準備	departure_prep.webp
レベルアップ	level_up.webp
セーフティエリア	safety_area.webp
ダンジョンメニュー	dungeon_menu.webp
装備	equipment_screen.webp
魔法セット	magic_set.webp
コンボ編集	combo_edit.webp
最終防衛準備	final_defense_prep.webp
最終防衛戦闘	final_defense_battle.webp
クリア	clear_screen.webp
防衛失敗	defense_failed.webp
エンドコンテンツ	endcontent_select.webp
ビルド保存	build_save.webp
ビルド倉庫	build_storage.webp
NPC会話	npc_conversation.webp

画像格納パス: site/docs/assets/images/screens/

Phase 1: 基本画面

タイトル画面 ★★★

街のHUD（常時表示） ★★★

ダンジョン内HUD ★★★

戦闘HUD ★★★

ゲームオーバー画面 ★★

Phase 2: 街の施設

ショップ画面（武器屋） ★★★

鍛冶場（+強化） ★★★

鍛冶場（錬成） ★★

魔法工房（要素選択） ★★★

魔法工房（最終確認） ★★★

宿屋 ★★

酒場（サブキャラ雇用） ★★

ギルド ★★

自宅 ★

Phase 3: ダンジョン・戦闘

ダンジョン選択画面 ★★

出発準備画面 ★★★

レベルアップ画面 ★★★

セーフティエリア ★★

ダンジョン内メニュー ★

Phase 4: 共通メニュー

装備画面 ★★★

魔法セット画面 ★★

コンボ編集画面 ★★★

Phase 5: 最終防衛戦・エンドコンテンツ

最終防衛戦 準備画面 ★★

最終防衛戦 戦闘HUD ★★★

クリア画面 ★★

防衛失敗画面 ★★

エンドコンテンツ選択 ★★

ビルド保存画面 ★★

ビルド倉庫画面 ★★

Phase 6: NPC

NPC会話ウィンドウ ★★