【UE5+PS+XD】Devlog - 「血月」ゲームUIの制作(1)：メインメニュー

現在ゲームシーンの制作と並行して、開発効率向上とゲーム全体のプレビュー機能強化のため、以下のツールを使用したUI制作パイプラインを構築中です：

■ 使用ツール：

コンセプトデザイン：Adobe Photoshop / XD

実装環境：Unreal Engine 5 UMGシステム

■ 現在の開発フェーズ：

1. メインメニューUIのプロトタイプ作成

• コンセプトアートの作成（Photoshop/XD）

• UMGウィジェットへの変換

• 基本的なボタンインタラクションの実装

2. クイックレベル切り替えシステムの設計

• 開発者用デバッグコントロールの追加

• シーン遷移時のリソース管理最適化

特にメインメニューでは、ゲームの世界観を伝えるビジュアル言語と、スムーズな操作性の両立を重視しています。現在はフォントレンダリングと解像度対応に注力中です。

Photoshop

最初にPhotoshopでインターフェースデザインを作成し、ロゴやタイトル、各種ボタン、テキスト要素を配置します。その後、デザインの基本原則である三分割法と黄金比を適用して、メイン画面の基礎レイアウトを設計します。

Adobe XD

エクスポートしたアセットをAdobe XDに取り込み、基本レイアウトを構築します。

将来、画面遷移やインタラクティブ要素のプロトタイピングを通じて、UXフローの詳細設計に移行する予定です。

Unreal Engine 5

まずは基本ボタンのスタイルガイドを確立し、今後のUIコンポーネント拡張のテンプレートとして活用します。特にホバー時のモーションデザイン（Lerpによるスムーズな拡縮）に注力しています。

その後、参考図に基づいて対応するアイコンとボタンを適切な位置に配置し、コンポーネントにアニメーションを追加します。

メインインターフェースUIの効果は以下の通りです：

今後のアップデート計画：

1.メイン画面の背景刷新

• 静的背景画像を削除 → リアルタイムレンダリングシーンに移行

• UE5のCinematic Cameraを使用した動的カメラワークの導入

• 背景シーンとのインタラクティブ要素（時間帯/天候変化）を試験的に追加

2.ポーズ画面UIの制作

3. Player HUDの制作