【UE5】右クリック、キミにきめた！ カードのステータスを確認する詳細UI作成（その１ デザイン検討）【開発40日目】
こんばんは！「まる。」です。
先日、ようやくソート機能の実装が完了しました。
これでカードの整理整頓はバッチリですが、
今のままではただ絵柄が並んでいるだけの状態。
特定のキャラを探すことはできても、その「ステータス」や「説明テキスト」といった詳細データを見ることができません。
そこで今回は、コレクションメニューを真の「図鑑」へと進化させるべく、 「右クリックで詳細データを読み込む機能」の実装に挑戦していきます！
▼前回の記事
▼今回のサムネイル
1.UIデザインの検討（まずは情報の整理から！）
さっそく詳細画面を作っていきたいところですが、まずは「どんな画面にするか？」という設計図が必要です。
（今回も、まずはアルカステラ（キャラカード）に絞って進めます）
幸い、私のゲームには公式サイトがあり
そこには理想的な詳細ページがすでに存在します。
これを参考に、ゲーム内に落とし込むべき要素を洗い出してみましょう。
公式サイト上では、以下の情報を網羅しています。
キャラクターのプロフィール
キャラクターの設定（世界観）
性能の説明（概要）
性能詳細（Lv1-3までのステータス・スキル）
特殊ルール（そのキャラ固有のルールなど）
カードのイラスト
……改めて書き出すと、情報量がとんでもないですね。
特に「性能詳細」については、レベルごとの数値変化やスキル効果など、表示しなければならないテキスト量が膨大です。
これを全て1つの画面に収めるのは……想像以上に骨が折れそうです🤔
用途の明確化（情報の断捨離）
公式サイトのように情報を網羅できればベストなのですが、
これをそのままゲームの小さな画面に詰め込むと、文字だらけで情報を追うのが大変になってしまいます。
そこで、今回作成する詳細画面の「目的」を明確にし、
状況に応じて必要な情報だけを表示するように整理してみます。
▼ 想定される使用シーン
今回作成したいUIは、主に以下の3つの場面で使用します。
コレクションメニューで詳細を見たいとき
デッキ編成画面で詳細を見たいとき
バトル中に詳細を見たいとき
▼ 必要な情報の違い
2（デッキ編成）と 3（バトル）に関しては、
正直なところバトルで使用する情報（各レベルの性能やスキル情報）さえ見られれば十分です。
問題は 1（コレクション）です。
ここは「図鑑」なので、
性能だけでなくキャラクター設定文や、好感度、イベントのアンロック状況といった「読み物」としての情報も見せたいところです。
結論：
全てを一つの画面で賄うのではなく、「コレクション用（フル情報）」と「それ以外（バトル情報のみ）」で、UIの仕様や表示内容を切り替える必要がありそうです。
具体的なデザインと設計方針
コレクションメニューと、デッキ編成・バトル中のUI。
用途が違うからといって、それぞれをイチから作っていては開発の手間もメンテナンスも大変（容量の無駄）になってしまいます。
そこで、「共通化できる部分は部品（コンポーネント）として作る」という方針で進めます。
▼ 設計のイメージ基本構造:
メインの枠（WBP_DetailWindow）の中に、ページ切り替え機能を実装。
・ページ構成:
・1ページ目（フレーバー情報）:
プロフィール、好感度、ストーリー設定など。
・2ページ目（性能情報）:
ステータス、スキル詳細など。
・使い分け:
・コレクション画面:
1ページ目と2ページ目を自由に切り替えられる「完全版」として表示。
・バトル・編成画面:
2ページ目の「性能情報ウィジェット」だけを単体で（あるいはモード限定で）表示。
具体的なレイアウトのイメージは以下の通りです。
コレクションメニューでの表示（完全版）
ボタンでタブを切り替えて、
読むモードとデータを見るモードを行き来できるようにします。
・1ページ目：キャラクター情報（読み物）
・2ページ目：性能情報（データ）
無理やり詰め込むと大変ですが、
このように「タブ」や「レベル別ボタン」で情報を階層化すれば、スッキリ収まりそうです。
2. バトル・デッキ編成時の表示（性能のみ）
こちらは、先ほどの「2ページ目」の中身をそのまま表示するイメージです。
余計な装飾を削ぎ落とし、戦術に必要な情報だけをシンプルに見せます。
パッと思いつく方法はこんな感じです。
一応、Gemini先生にもっと綺麗に表示させる方法はないか確認してみます。
👨🏫 Gemini先生からの技術アドバイス（綺麗な表示のために）
「情報を詰め込みすぎて見づらいかも？」という懸念に対する、
UE5での解決策をいくつか提示しておきます。
1.Widget Switcher（ウィジェットスイッチャー）の活用
タブ切り替え（キャラ情報 ⇔ 性能情報、Lv1 ⇔ Lv2 ⇔ Lv3）には、
Widget Switcher というパネルを使うのが一番簡単です。
表示・非表示を個別に設定しなくて済みます。
2.Scroll Box（スクロールボックス）の活用
「設定」や「スキル説明文」は、文字数がキャラによってバラバラです。
枠を固定して、文字があふれる場合だけスクロールできるように Scroll Box の中に入れると、レイアウト崩れを防げます。
3.ユーザーウィジェットの入れ子（重要！）
今回の設計を実現するために、WBP_CardStats（性能表示用）というウィジェットを個別に作ってください。
そして、詳細画面（WBP_CardDetail）の中に、その WBP_CardStats を「ユーザー作成」パレットからドラッグ＆ドロップして配置します。
こうすれば、バトル画面でもその WBP_CardStats を配置するだけで使い回しが可能です！
この「入れ子構造（部品化）」こそが、今回のUI作成の最大のキモになります！
OKです。
何となく、方針は固まりました！
性能表示用のウィジェットはどのメニューに置いても使用するので、
まずは入れ子の方から作った方が確実そうですね。
まとめ
今回は、カード詳細画面のデザインイメージを固めたところで区切りとします。
実際のウィジェット作成については
腰を据えてじっくり取り組みたいので、もしかすると制作過程の解説は省いて、
次回いきなり「完成品」のお披露目になるかもしれません。
（正直に言うと、こういう美術・デザイン系のタスクがかなり苦手でして……時間をかけて丁寧に戦いたいのです😅）
苦手分野こそ全力で！
次回、どんな画面が出来上がってくるか温かく見守っていただければ幸いです。
今日のポラリスちゃん
タスク、確かに増えて来たね！
一つづつ着実にやっていこう😆
もしこの記事が「参考になった」「開発の苦労が伝わった！」「続きが気になる！」と思ったら、
記事の下にある「スキ（ハートマーク）」を押していただけると嬉しいです！
皆様の応援こそが、毎日の開発と更新の何よりの励みになります。
最後までお読みいただき、ありがとうございました！
また次回の記事でお会いしましょう！
いいなと思ったら応援しよう！
よろしければ応援お願いします！
いただいたチップはクリエイターとしてのゲーム開発に使わせていただきます！
※チップと共にやって欲しい事があったら言ってください！
可能な範囲であれば頑張ります