◀ 22.

UE5でコンテンツブラウザに画像を追加する方法｜インポートとテクスチャ設定

▶
編集

Unreal Engine 5（UE5）でコンテンツブラウザに画像を追加するには、PNGやJPGなどの画像ファイルをエクスプローラからコンテンツブラウザへドラッグ＆ドロップするか、コンテンツブラウザの「インポート」ボタンを使います。取り込まれた画像はUE5内部では「テクスチャ（Texture2D）」というアセットに変換され、マテリアルやUIで使える状態になります。この記事では、取り込みの2つの方法、対応フォーマット、取り込み後に確認すべきテクスチャ設定、そしてよくある落とし穴までをまとめて解説します。

この記事の要点
  • 画像の取り込みは「ドラッグ＆ドロップ」か「インポートボタン」の2通り。どちらも結果は同じ「テクスチャアセット」になる。
  • 対応フォーマットはPNG・JPG・TGA・EXR・TIFF・PSD・BMP・DDSなど。透過（アルファ）を使うならPNGかTGAが扱いやすい。
  • 取り込み後はsRGBと圧縮設定（Compression Settings）を用途に合わせて確認する。色（アルベド）はsRGBオン、UI画像はTextureGroupをUserInterface2Dに。
  • 画像サイズは2のべき乗（256, 512, 1024…）を基本に。2のべき乗でないとミップマップ生成やストリーミングが行われない。
  • 巨大な画像はメモリ消費が大きいため、用途に必要な解像度に抑えるのがコツ。

画像の取り込み方法（2通り）

UE5で画像を追加する方法は大きく2つあります。どちらを使っても、取り込まれた画像はコンテンツブラウザ内にテクスチャアセット（拡張子の見えない「.uasset」として保存されるアセット）として現れます。元の画像ファイルそのものがコピーされるのではなく、UE5が扱える内部形式に変換される点を押さえておきましょう。

まず共通の準備として、コンテンツブラウザで取り込み先のフォルダを決めておきます。プロジェクトが大きくなると画像が散らかりやすいので、Content/Textures や Content/UI のように用途別のフォルダを作っておくと管理が楽になります。

方法①：ドラッグ＆ドロップで取り込む

もっとも手軽な方法です。手順は次の通りです。

  1. Windowsのエクスプローラ（macOSならFinder）で、取り込みたい画像ファイルが入ったフォルダを開きます。
  2. UE5エディタ側で、コンテンツブラウザの取り込み先フォルダを表示しておきます。
  3. エクスプローラから画像ファイルを選び、そのままコンテンツブラウザの中へドラッグ＆ドロップします。複数ファイルをまとめてドラッグすることもできます。
  4. ドロップすると自動的にインポート処理が走り、フォルダ内にテクスチャアセットが追加されます。

取り込み直後のアセットは未保存（アセット名の左に「*」マークが付く状態）です。コンテンツブラウザで右クリックして「保存」するか、エディタ上部の「すべて保存」で確定させましょう。保存しないとプロジェクトを閉じたときに取り込んだ画像が失われます。

方法②：インポートボタンから取り込む

ファイルダイアログから選びたい場合は、こちらが確実です。

  1. コンテンツブラウザで取り込み先フォルダを選択します。
  2. コンテンツブラウザ上部にある「インポート」ボタン（バージョンによっては「+追加」→「インポート」）をクリックします。
  3. 開いたファイルダイアログで取り込みたい画像ファイルを選び、「開く」を押します。
  4. 画像の場合は通常そのままインポートが完了します（FBXなど一部のアセットではインポートオプションのウィンドウが表示されますが、単純な画像では基本的に追加設定は不要です）。

どちらの方法でも、取り込み後にやるべきこと（保存・設定の確認）は同じです。

対応している画像フォーマット

UE5がテクスチャとして取り込める主な画像フォーマットは次の通りです。一般的な用途ではPNGかTGAを使えばほぼ問題ありません。

フォーマット 拡張子 アルファ(透過) 主な用途・特徴
PNG.png対応もっとも汎用的。透過付きのUI画像やアイコンに向く。可逆圧縮で劣化しない。
TGA.tga対応ゲーム制作で定番。アルファチャンネルを安定して扱える。
JPG / JPEG.jpg / .jpeg非対応写真など。非可逆圧縮のため画質が落ちる。透過は持てない。
BMP.bmp非対応無圧縮。手軽だがファイルが大きい。
TIFF.tif / .tiff対応高ビット深度に対応。制作ツールからの書き出しで使われる。
PSD.psd対応Photoshop形式。統合された見た目を1枚のテクスチャとして取り込む。
EXR.exr対応HDR（ハイダイナミックレンジ）画像向け。ライティングやキューブマップに利用。
DDS.dds対応あらかじめ圧縮・ミップ生成された形式。2Dテクスチャやキューブマップに対応。

※対応フォーマットや細かな仕様はUE5のバージョンによって追加・変更されることがあります。最新の正確な一覧は、Epic Gamesの公式ドキュメント（「Texture Format Support and Settings」）の確認を推奨します。

取り込み後に確認するテクスチャ設定

取り込んだテクスチャをダブルクリックすると、テクスチャエディタ（アセットエディタ）が開きます。右側の詳細パネル（Details）で、用途に応じて次の項目を確認しましょう。設定を間違えると色味が変わったり、メモリを無駄に使ったりします。

sRGB（色空間）

「Texture」セクションにあるsRGBのチェックボックスです。考え方はシンプルで、人が見る「色」の画像はオン、データとして使う画像はオフが基本です。

  • sRGBオン：見た目の色を表す画像（アルベド／ベースカラー、UI画像、アイコンなど）。
  • sRGBオフ：色ではなく数値データを格納した画像（ノーマルマップ、ラフネス、メタリック、マスクなど）。

ここを取り違えると、色が妙に明るく／暗く見えたり、ノーマルマップの凹凸が破綻したりします（詳しくは後述の落とし穴を参照）。

圧縮設定（Compression Settings）

「Compression」セクションのCompression Settingsで、画像の役割に合った圧縮方式を選びます。代表的なものは次の通りです。

  • Default：一般的なカラーテクスチャ。アルベドやUIのカラー画像はこれが基本。
  • Normalmap：ノーマルマップ専用。法線情報に適した圧縮になる。
  • Masks：ラフネスやメタリックなど、チャンネルごとの精度が欲しいデータ用。
  • UserInterface2D (RGBA)：UI用途で、品質を優先したいときに使う設定。

UI用途のTextureGroup

UI（ボタン画像やアイコンなど）に使う画像は、「Texture」セクションのTexture GroupをUserInterface2Dに設定するのがおすすめです。UserInterface2DはインターフェイスやSlate用の画像を想定したグループで、sRGBに対応し、用途に合った内部フォーマット（高ビット深度の画像にも対応）で扱われるため、UIで意図しない劣化が起きにくくなります。

UIで使う場合 / マテリアルで使う場合

UIで使う場合（Slate Brush / Image ウィジェット）

取り込んだテクスチャをHUDやメニューなどのUMG（ウィジェットブループリント）で使うときは、次の流れになります。

  1. ウィジェットブループリントを開き、パレットからImageウィジェットをキャンバスに配置します。
  2. Imageを選択し、詳細パネルのAppearance → BrushのImage（Slate Brush）に、取り込んだテクスチャを指定します。
  3. UI画像は前述の通り、Texture GroupをUserInterface2Dにしておくと品質面で安心です。透過を活かしたいPNG／TGAは、sRGBオンのままカラー画像として扱います。

マテリアルで使う場合

3Dモデルの表面（アルベド／ベースカラーなど）に使うときは、マテリアル経由で適用します。

  1. コンテンツブラウザで右クリック →「マテリアル」を作成し、ダブルクリックでマテリアルエディタを開きます。
  2. 取り込んだテクスチャをマテリアルエディタのグラフ上にドラッグ＆ドロップすると、Texture Sampleノードが作られます。
  3. Texture Sampleの出力（RGB）を、メインノードのBase Colorなどの入力に接続します。透過を使う場合はAlpha出力をOpacity等に接続します。
  4. 保存し、このマテリアルをメッシュに割り当てると、画像がオブジェクトの見た目として反映されます。

つまずきやすい落とし穴

落とし穴 何が起きるか・対処
2のべき乗でないサイズ幅・高さが256/512/1024のような2のべき乗でないと、ミップマップが生成されず、テクスチャストリーミングの対象にもなりません。遠景でちらつきや負荷増の原因に。可能な限り2のべき乗サイズで用意します（UIの一枚絵など、ミップ不要な用途では非2のべき乗でも使えます）。
アルファ（透過）が消える／効かないJPGは透過を持てないため、透過が必要ならPNGかTGAを使います。透過があるのに反映されない場合は、マテリアル側でAlpha出力を接続しているか、ブレンドモードがTranslucent/Maskedになっているかを確認します。
巨大画像によるメモリ圧迫4Kや8Kの画像を大量に取り込むとVRAM／メモリを大きく消費します。アイコンや小さなUIに高解像度は不要です。用途に必要な解像度に抑え、不要に大きい画像は縮小してから取り込むのが安全です。
sRGBの取り違えカラー画像でsRGBをオフにすると色が暗く（または不自然に）なり、逆にノーマルマップなどのデータ画像でsRGBをオンにすると凹凸表現が崩れます。「色＝オン／データ＝オフ」を基本に見直してください。

よくある質問（FAQ）

Q. 取り込んだ画像を後から差し替えたい（元画像を更新した）。
A. テクスチャを右クリックし、「リインポート（Reimport）」を選ぶと、元の画像ファイルから取り込み直して内容を更新できます（元ファイルのパスが残っている場合）。差し替え後は保存を忘れずに。

Q. PNGとJPG、どちらで取り込むのがよい？
A. 透過が必要なUI画像やアイコンは、劣化のないPNG（またはTGA）が無難です。写真のような重い画像で容量を抑えたい場合はJPGも選択肢ですが、非可逆圧縮で画質が落ち、透過は持てない点に注意してください。最終的にはUE5内部で圧縮されるため、可逆形式で取り込むのが基本です。

Q. 取り込んだはずの画像がコンテンツブラウザに見当たらない。
A. 取り込み先フォルダが意図と違っていないか、コンテンツブラウザの検索・フィルタが絞り込まれていないかを確認します。また、保存していないと別の場所からは見えにくいことがあるため、まず「すべて保存」を試してください。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ～」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは？
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法（UE5）
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは？
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法
2026-06-12 14:59:20 atom 118

人気ページ

最近更新/作成されたページ