TextureCreate（テクスチャクリエイト）は、インストール不要で使えるブラウザ版のゲーム向けテクスチャジェネレーターです。CircleやNoise、Fire、Lightningなど100種類以上のベース素材を選び、レイヤー、ポストエフェクト、グラデーションを組み合わせながら、プレビューを見て質感を作れます。
完成した素材は、透過PNG、アニメーションGIF、ノーマルマップとして保存できます。この記事では、初めて使う人が迷わない最短手順から、Unity・After Effectsへ持ち込むときの考え方、よくある失敗の直し方まで解説します。
※画面と機能は2026年8月時点の内容です。画面が狭いと各パネルを確認しづらいため、最初はPCブラウザでの操作をおすすめします。
1. まずは4ステップでテクスチャを作る
細かい機能を覚える前に、まず1枚書き出してみましょう。最初は次の流れだけで十分です。
- タイプを選ぶ：左パネルの「タイプ（Type）」からCircle、Ring、PerlinNoiseなどを選びます。
- 形を調整する：表示されたSOURCE PARAMSのスライダーを動かし、中央プレビューで結果を確認します。
- 色を付ける：必要なら右下のグラジエントランプを有効にし、Fire、Water、Neonなどのプリセットを選びます。
- 保存する：解像度を選び、「Save Export」からPNG保存、GIF保存、ノーマルマップ保存のいずれかを実行します。
迷ったら、CircleまたはPerlinNoise、512×512px、PNG保存から始めると、各機能の変化を確認しやすくなります。
2. 画面の基本レイアウト
まずは全体の構成を把握しましょう。画面は大きく分けて3つのエリア+上部ボタンエリアで構成されています。
画面全体のレイアウト
- 左パネル: ベースとなるテクスチャ形状の選択と、その詳細パラメータの調整
- 中央エリア: 現在のテクスチャのリアルタイムプレビュー
- 右パネル: 解像度設定、アニメーション速度、ポストエフェクト（全体効果）、グラジエントランプ（色付け）
- 上部ボタン: 画像としての保存・出力とプリセットのセーブ・ロード
3. 素材を選んで形を整える（左パネル）
左パネルの操作
ベーステクスチャの選択
左パネルの中央にあるアイコンリストから、作りたいベースのテクスチャを選びます。
基本的な丸（Circle）から、星（Star）、ノイズ（PerlinNoise、FbmNoise）、チェック柄など100種類以上の素材が用意されています。
パラメータの調整
素材を選択すると、左下の「〇〇 PARAMS」という箇所にその素材専用の調整スライダーが現れます。
- 例：Circleなら「半径」や「ぼかし」
- 例：Noiseなら「スケール」や「粗さ」 スライダーを動かすと中央の画像がリアルタイムに変化するので、直感的に狙った形を作ることができます。
基本的な加工（極座標変換・反転）
「テクスチャ・質感＆基本」のタブには便利なスイッチがあります。
- 極座標変換: 直線の模様を円状に歪めたり、逆に円状のものを直線にほぐしたりできます。
- トーン反転: 白黒を反転させます。（マスク画像などに重宝します）
4. レイヤーを重ねて複雑な質感を作る
画面左上の「＋」を押すとレイヤーを追加できます。目のアイコンで表示・非表示を切り替え、「Layer Name」で用途が分かる名前を付けておくと管理しやすくなります。
- 通常（Normal）：上のレイヤーをそのまま重ねます。
- 加算（Add）：発光、火花、フレアなど明るい演出を重ねるときに向いています。
- 乗算（Multiply）：汚れや陰影、暗い模様を加えるときに使います。
- スクリーン（Screen）：黒をなじませながら明るい成分を合成したい場合に便利です。
- マスク（Mask）：別レイヤーの形で表示範囲を制御したいときに使います。
たとえば、1枚目にFbmNoise、2枚目にSparkやBurstを置いて加算し、不透明度を下げるだけでも、単一素材より情報量の多いエフェクト用テクスチャになります。最初は2〜3レイヤーに絞り、各レイヤーの役割を確認しながら増やすのがおすすめです。
5. アニメーション確認・解像度設定
右パネル上部
- 解像度: 64×64〜2048×2048から選択できます。UIアイコンや小さなパーティクルは256〜512px、拡大して使う素材は1024〜2048pxを目安に、実際の表示サイズで確認します。
- 時間 (Time) と 速度: NoiseやRippleなど、時間経過で動くテクスチャのアニメーションを確認できます。アニメーションが必要ない静止画を作る場合はそのままでもOKです。
6. ポストエフェクトで見栄えを調整する
今回の目玉機能とも言えるのが、右パネル下部にあるポストエフェクトのセクションです。出来上がったテクスチャの全体に対して、さらに特殊効果を重ねることができます。
ポストエフェクト一覧
複数のエフェクトをチェックボックスで同時にONにすることも可能です。エフェクト横の三角形（▶）をクリックすると、詳細な調整項目が開きます。
おすすめのエフェクト
- ミラータイル: X軸またはY軸で画像を反転コピーして、シンメトリーな万華鏡のような美しい模様を作ります。（※作例の画像でも使用しています）
- 色収差 (RGBズレ): 画面のふちに向かって赤青緑の色が滲むようなデジタルノイズ効果を加えます。サイバー系の演出に最適。
- 渦巻き (スワール): 画像の中心からグニャッと渦を巻くように歪めます。
- 階調化 (TOON): 滑らかなグラデーションをパキッとしたアニメ調の階調に変換します。
7. グラジエントランプで色を付ける
白黒画像として形ができあがったら、最後は色付けです。右パネルの一番下にあるグラジエントランプ機能を使います。
グラジエントランプ機能
「有効」にチェックを入れると、白黒（画像の明るさ）だった部分が、指定したグラデーションカラーに置き換わります。
- お手軽プリセット: 右下の「Water」「Plasma」「Lava」「Fire」などのボタンを押せば、一発でそれっぽい色になります。
- カスタムカラー: カラーバーの領域をクリックしてピン（Stop Color）を追加し、自由な色を選ぶことで、自分専用のグラデーションを作成できます。（消すときはピンをダブルクリック）
8. 用途別の作り方
最初から正解のパラメータを探すより、用途に近いタイプと色から始め、プレビューを見ながら調整すると早く仕上がります。
- 炎・爆発：Fire、Flame、Lava、FbmNoiseを出発点にし、FireまたはLavaのグラデーションを適用します。輪郭が整いすぎる場合はSwirlやノイズ系の変形を少量加えます。
- 魔法陣・エネルギーリング：Ring、EnergyRing、Ripple、RadialLinesを重ね、AddまたはScreenで合成します。青、紫、Neon系のグラデーションと相性が良い構成です。
- 煙・雲：Smoke、Cloud、FbmNoiseを使い、ScaleやRoughnessを調整します。白黒のまま出力すれば、UnityやAfter Effects側で着色しやすいマスク素材になります。
- UIマスク・背景パターン：Circle、Rectangle、Checker、Scanline、Halftoneなどを使い、必要に応じてトーン反転や極座標変換を加えます。
9. 完成したテクスチャを保存・出力する
テクスチャが完成したら、画面上部（ヘッダー部分）のボタンを使って画像ファイルとしてPCに保存します。
画像や設定の保存機能
- PNG 保存: 中央プレビューを、透明度を保ったPNG画像として保存します。
- GIF 保存: アニメーション設定を反映したGIFとして保存します。動きの確認や共有用プレビューに便利です。
- 黒背景 オプション: 「PNG保存」ボタンの下（右）にある「黒背景」にチェックを入れてから保存すると、透過されている部分が黒く塗りつぶされて出力されます。加算合成用素材として使いたい時などに便利です。
- ノーマルマップ保存: 白黒の凹凸情報だとみなして、ライティング用のノーマルマップ（法線マップ）に自動変換して保存してくれます。
お気に入りの設定を残す（プリセット保存）
毎回一からパラメータを調整するのは大変です。気に入ったテクスチャができたら右上の「Save Preset」を押します。現在の設定を含むJSONファイルがダウンロードされ、次回「Load Preset」から読み込むとパラメータを復元できます。
10. Unity・After Effectsで使う
Unityへ読み込む場合
- UI、スプライト、パーティクルの形として使う場合は、黒背景をOFFにした透過PNGが扱いやすいです。
- 繰り返す模様はWrap ModeをRepeat、1枚だけ表示する素材はClampを基準に、用途に合わせて設定します。
- 小さく表示するUI素材は256〜512px、拡大や高精細表示が必要な素材は1024px以上を目安にし、実際の表示サイズで確認します。
- ノーマルマップは、ライティング対応のマテリアルやシェーダーで立体感を付けたい場合に使用します。
After Effectsへ読み込む場合
- 透過PNGはそのままフッテージとして読み込み、色調補正やディストーションを追加できます。
- 黒背景付きで保存した発光素材は、描画モードの「加算」や「スクリーン」を試すと合成しやすくなります。
- GIFは動きの確認や共有用に便利です。最終制作では、必要な画質や制御方法に合わせてPNG素材とAE側のアニメーションを使い分けます。
制作物で利用する前に、最新のTextureCreate利用規約も確認してください。
11. うまくいかないときの確認項目
- 背景が透明にならない：「黒背景」がOFFになっているか確認してからPNG保存します。
- 輪郭がぼやける・ギザギザする：素材側のBlurを調整し、最終表示より少し大きい解像度で書き出して縮小表示を試します。
- 動きが確認できない：NoiseやRippleなど時間変化に対応したタイプを選び、「アニメーション」を開いてTimeと速度を調整します。保存時はGIF保存を選びます。
- 色が付かない：グラジエントランプの「有効」がONか、Stop Colorが適切に配置されているか確認します。
- 操作が重い：制作途中は解像度、レイヤー数、ポストエフェクト数を減らし、最後に必要な品質へ戻します。
12. よくある質問
インストールは必要ですか？
必要ありません。TextureCreateをブラウザで開けば使用できます。
設定を保存できますか？
Save PresetでJSONファイルを保存し、次回Load Presetから読み込むことで同じ設定を復元できます。案件名や用途が分かるファイル名に変更して管理すると便利です。
商用利用できますか？
用途や配布方法によって確認事項が異なるため、公開中の利用規約を確認してください。
すべての素材タイプを見る方法は？
中央プレビュー付近の「全タイプ一覧を表示」を押すと、利用できるタイプをまとめて確認できます。目的が決まっていないときのアイデア探しにも使えます。
まとめ
TextureCreateは、ベース素材を選ぶだけでなく、レイヤー、ポストエフェクト、グラデーションを組み合わせることで、ゲームUI、パーティクル、映像演出に使える素材を短時間で試作できます。まずは512×512pxで1枚作り、Save Presetで設定を残しながら用途別に調整してみてください。