こんにちは、Unityエンジニアのオオバです。
「ソフトマスク」とは以下の画像の通り 少しずつ透明になっていくマスク表現 です。
↑の画像は女の子の顔を中心に円形のソフトマスクを適用したサンプルです。
※このイラストアセットは中世ファンタジーRPG風2Dキャラクターパックを使わせていただいてます。
ゲームUIをデザインする際には表現の候補に入るのではないでしょうか。
かつてのUnityはソフトマスク未対応で、UIデザイナーを長年悩ませてきました。しかし Unity2020以降は標準機能のRectMask2Dでソフトマスクを実装可能 です。Unity 6になった現在もこの仕組みは現役で使えます。
ただしRectMask2Dは 矩形限定 という条件付き。円形など自由な形のソフトマスクには別の手段が必要です。
本記事では5年前の初公開からアップデートを重ねてきた、uGUIでソフトマスクを作る方法を 2026年現在の定番3パターン に整理して紹介します。この記事を読むだけでソフトマスクは実現できると思いますので、ぜひ最後まで読んでみてください。
矩形はRectMask2D、自由な形はSoftMaskForUGUI
先に結論です。
①RectMask2D（標準機能・矩形のみ）
②SoftMaskForUGUI（外部アセット・自由な形に対応）
③uGUIシェーダーを自作（学習・特殊要件向け）
スクロールの境界をふわっと消したいなど 矩形のソフトマスク なら、標準機能の RectMask2D だけで完結します。
円形マスクや任意形状のマスク画像を使いたい場合は、オープンソースの定番アセット SoftMaskForUGUI がおすすめです。
ここからは順番に解説していきます。
- 方法①ソフトマスク可能な「RectMask2D」の特徴4選
- スクロールリストにソフトマスクを適用する4ステップ
- ステップ①ヒエラルキーに「Scroll View」を追加
- ステップ②Viewportの「Mask」を削除
- ステップ③「RectMask2D」をAddComponent
- ステップ④ソフトマスク具合の調整
- ソフトマスク付きScrollViewの完成
- RectMask2Dの3つの制限を知っておこう
- 方法②外部アセット「SoftMaskForUGUI」できれいなマスクを作る
- 【前提知識】標準のMaskコンポーネントできれいなソフトマスクは作れない
- 方法③uGUI用のマスクシェーダーを自作する
- 【補足】UI Toolkitのソフトマスク事情
- Unity UIでソフトマスクを作る方法まとめ
- マスク表現の次は描画順を理解しよう
方法①ソフトマスク可能な「RectMask2D」の特徴4選
RectMask2DとはUnityのコンポーネントの1種で、矩形型のマスクを作ることができます。
👉 【保存版】Unityのコンポーネント徹底解説【Unity基礎】
Unity2020でこのRectMask2Dにソフトマスク機能（Softness）が追加されました。
| 元画像（マスクなし） | ソフトマスク後 |
|---|---|
 |  |
RectMask2Dコンポーネントを使うとこのようなソフトマスクが簡単に作れます。
時間のない方は次の15秒ショート動画で確認してみてください。RectMask2Dの使い方を紹介しています。
ここからは、文字でじっくりとRectMask2Dの使い方を解説していきます。
①パフォーマンスの良いマスク
②マスク画像は不要
③マスク対象はRectMask2Dの子階層
④X・Y軸それぞれ具合の設定可
特徴①パフォーマンスの良いマスク
RectMask2Dとはマスクコンポーネントの1種です。特徴は マスク領域を四角形にしぼり、従来のMaskコンポーネントよりパフォーマンスが良い点 。
ステンシルバッファを使わないため、ドローコールもマテリアルも増えません。
特徴②マスク画像は不要
RectMask2Dにマスク画像は不要です。なぜなら四角形に限定したマスク領域だからです。
マスクの範囲はRectTransformのWidth（幅）とHeight（高さ）です。
特徴③マスク対象はRectMask2Dの子階層
RectMask2DコンポーネントをアタッチしたGameObjectの子階層がマスク対象です。
子階層であれば複数のGameObjectもまとめてマスク可能です。
特徴④X・Y軸それぞれ具合の設定可
RectMask2Dコンポーネントの Softness の値を0以上にすると、X軸・Y軸それぞれグラデーション具合を調整できます。
スクロールリストにソフトマスクを適用する4ステップ
ソフトマスクの使い所の1つは スクロールの境界表現 です。
今までUIデザイナーから 「スクロールの境界をグラデーションできれいに消したい」 という要望が多くありました。
RectMask2Dを使うことで実現可能です。
①ヒエラルキーに「Scroll View」を追加
②Viewportの「Mask」を削除
③「RectMask2D」をAddComponent
④ソフトマスク具合の調整
上記の手順でソースコードを書かずにソフトマスク付きのスクロールリストを作れます。
ステップ①ヒエラルキーに「Scroll View」を追加
まずはヒエラルキー上で右クリック。 UI > Scroll Viewをクリックしましょう。
ステップ②Viewportの「Mask」を削除
作成されたScrollViewを調整していきます。
ViewportにはデフォルトでMaskコンポーネントがくっついています。この「Mask」を削除します。
- ①
Maskコンポーネントのメニューを開く - ② Remove Component で
Maskの削除
ステップ③「RectMask2D」をAddComponent
Maskを削除したGameObjectにRectMask2Dをアタッチします。
- ① Add Componentボタンをクリック
- ② RectMask2Dを選択
以上で準備は完了です。
ステップ④ソフトマスク具合の調整
最後に「Softness」でソフトマスクの消え方具合を調整します。
Softnessを調整することでマスクのグラデーション具合を調整可能です。
ソフトマスク付きScrollViewの完成
このようにソースコードを1行も書くことなく、ソフトマスク付きScroll Viewを作ることができるのです。
Unityには難しいUI表現がいくつかあります。 「マスク表現」もその1つです。 Unity開発では重要なのは「簡単に実装することが難しいことを事前に知っておくこと」です。 次の記事ではUnityの難しい表現をまとめました。Unityエンジニアのほか、UIデザイナーもぜひ読んでUIデザインに生かしてみてください。
Unityでは難しいUI表現5選
ゲーム開発ではできないことを知るのは重要です。Unity UIも同じ。基本機能で表現できること、できないことを知っておくことで開発計画を立てやすくなります。
RectMask2Dの3つの制限を知っておこう
便利なRectMask2Dですが、使う前に知っておきたい制限が3つあります。
①マスクは矩形のみ（円形は不可）
②Softnessは軸単位の設定
③自作シェーダーはSoftness対応が必要
制限①マスクは矩形のみ
RectMask2Dはあくまで四角形のマスクしか作れません。例えば 円形のマスクを作ることはできない のです。
冒頭のような円形ソフトマスクを作りたい場合は、後述するSoftMaskForUGUIの出番です。
制限②Softnessは軸単位の設定
SoftnessはX軸・Y軸の2つの値で設定します。
つまり 「下端だけぼかしたい」といった辺ごとの個別設定はできません。 Y軸のSoftnessを上げると、上端と下端の両方がぼけます。
制限③自作シェーダーはSoftness対応が必要
RectMask2DのSoftnessは、描画するシェーダー側の対応があって初めて機能します。
Unity標準のUIシェーダーは対応済みなので通常は意識不要です。しかしUI用の 自作シェーダー を使っている場合、_UIMaskSoftnessX / _UIMaskSoftnessY を組み込んでいないとSoftnessが効きません。
「RectMask2Dを付けたのにぼけない」というときは、まずシェーダーを疑ってみてください。
方法②外部アセット「SoftMaskForUGUI」できれいなマスクを作る
矩形以外のソフトマスクを作りたい場合の定番が「SoftMaskForUGUI」です。mob-sakai氏が開発しているオープンソースのアセットで、MITライセンスのため無料で使用できます。
↑このとおり、とてもきれいなソフトマスクを表現できます。
2026年8月時点の最新はv3系。 Unity 6（uGUI 2.0）にも対応しており、今も活発に更新が続いています。 長期運用するプロジェクトでも採用しやすい安心感があります。
SoftMaskForUGUIのインストール方法
SoftMaskForUGUIはパッケージで提供されているため、Package Managerでインストールするのがおすすめです。 メニューWindow > Package Manager からPackage Managerウィンドウを開きます。
「+」ボタンから Add package from git URL を選択して、次のURLを入力してください。
https://github.com/mob-sakai/SoftMaskForUGUI.git?path=Packages/src
v3からはURL末尾の ?path=Packages/src まで必要 です。昔の解説記事にあるリポジトリURLだけの指定ではインストールできないので注意してください。
「Add」をクリックするとインストールは完了します。
SoftMaskForUGUIの使い方
では具体的なSoftMaskForUGUIの使い方を解説します。まずはマスクする側を親、マスクされる側を子という関係のGameObjectを作ります。
↑上図のようにMaskがマスクする側、Imageがマスクされる側です。
マスクする側には「SoftMask」と「Image」の2つのコンポーネントをセットします。標準のMaskコンポーネントは不要です。Imageコンポーネントにセットする画像がマスク画像になります。
今回使用するマスク画像は↑上の円形グラデーションにしました。
TextureTypeを「Sprite（2D and UI）」に設定します。
Imageの「Source Image」に設定してみましょう。
すると↑上図のとおりきれいなソフトマスクが作れます。
マスクされる側に必要な「SoftMaskable」コンポーネントは、 v3では実行時に自動で付与される ため手動セットは不要です。
SoftMaskForUGUIは多階層に対応
SoftMaskForUGUIは「マスクされる側」の階層に依存せずマスクをかけられます。つまり子階層が深かろうときれいなソフトマスクを作れるのです。
上図のようにマスクされる側を3階層にするとどうなるでしょうか。
SoftMaskForUGUIは子階層の階層数に関係なく、きれいにソフトマスクを作ることができるのです。
v3で追加されたMaskingShapeも便利
v3では「MaskingShape」というコンポーネントが追加されました。
マスク領域に対して形状を 足したり引いたり できる機能です。複数の形を組み合わせた複雑なマスクも、コンポーネントの追加だけで作れます。
またSoftMaskableの設定によって、Maskの子階層にあるオブジェクトをマスク対象から除外することも可能です。チュートリアルUIなどで重宝します。
とても便利で使いやすいSoftMaskForUGUIですが、処理を見る限り標準のマスクより負荷は上がります。使用する際は負荷計測しつつ使ってみてください。
→ SoftMaskForUGUIの公式リポジトリはこちら【前提知識】標準のMaskコンポーネントできれいなソフトマスクは作れない
ここで「標準のMaskコンポーネントにマスク画像をセットすればいいのでは？」と思った方のために、Maskの仕様を確認しておきましょう。
| 元画像 | マスク画像 |
|---|---|
 |  |
| image.png | mask.png |
↑このように2つの画像を用意します。
| 理想 | 現実 |
|---|---|
 |  |
理想と現実にはギャップあり。思ったのと違うものができあがります。
MaskはON/OFF2択のみ
Maskコンポーネントにグラデーション表現はありません。白から黒にかけてグラデーション画像を用意したとしても、 グレーだからといって半透明表現になりません。
つまり Maskコンポーネントでソフトマスクは表現できない のです。
マスクの縁が汚い
もう少し、Maskコンポーネントの特徴を紹介します。Maskコンポーネントの マスクの縁は汚い です。
ご覧の通りガタガタです。アンチエイリアスが効かない ため曲線を持つ図形ではジャギが目立ちます。
マスクの輪郭を 上から別の画像で隠す といった工夫でしのぐことが多いです。別の対策として マスク画像の解像度を高くする ことでかなり軽減します。
しかし、ソフトマスクの根本解決にはなりません。だからこそRectMask2DやSoftMaskForUGUIを使うのです。
方法③uGUI用のマスクシェーダーを自作する
最後は自作派向けの方法です。uGUIシェーダーをカスタマイズしてソフトマスクを実現します。
外部アセットへの依存を増やしたくない場合や、 シェーダーの仕組みを学びたい場合 におすすめです。
uGUIのシェーダーを作成する際はUnity公式のビルトインシェーダーをダウンロードしてカスタマイズします。公式のシェーダーをコピーして最低限の変更を加える方針です。
→ Unityダウンロードアーカイブはこちらあなたが使っているUnityバージョンのシェーダー をダウンロードしましょう。
- お使いのUnityバージョンのダウンロードメニューを開く
- Built in shaders をクリック
↑の動画の通りこの手順でシェーダーをダウンロードします。
（動画はUnity2020当時の配布ページです。現在はページデザインが変わっていますが、Built in shadersをダウンロードする流れは同じです）
使っているUnityのバージョンがわからない方は、こちらの記事を参考にしてみてください。
uGUIシェーダーのカスタマイズ
Unity公式からuGUIシェーダーをダウンロードできたら早速カスタマイズしていきます。カスタマイズするシェーダーは UI-Default.shader です。格納場所はこちら DefaultResourcesExtra/UI/UI-Default.shader 。
UI-Default.shaderをコピーして、プロジェクトに追加しておきましょう。「UI-SoftMask.shader」という名前にしました。
今回の実装で重要なのは次の2点です。
- Mask画像をセットできるようにする
- マスク画像のアルファ値を参照してカラー合成
ステップ①Mask画像をセットできるようにシェーダーを修正
Mask画像をインスペクタからセットできるようにシェーダーを調整します。
Propertiesを調整 します。
Properties
{
// マスク画像を外からセットできるようにする
_MaskTex("MaskTexture", 2D) = "white"{}
Propertiesブロックに _MaskTex 変数を定義します。
Pass
{
// Mask画像を定義
sampler2D _MaskTex;
Passブロック中に Propertiesで定義した同名の _MaskTex 変数を定義します。
マスク画像の用意
今回のシェーダーで必要なソフトマスクを作る画像を用意します。
マスク画像はグレースケール（白黒の濃淡画像）で作ります。白から黒に向かって透明になるのです。
TextureのインスペクタでAlpha from Grayscale にチェックを入れましょう。すると、黒に近づくにつれて透明（アルファ:0）に変換されます。
ステップ②マスク画像のアルファ値を参照してカラー合成
シェーダーの中で最も重要なのは次の2行です。
// マスク画像のカラーを取得
half4 maskCol = tex2D(_MaskTex, IN.texcoord);
// マスク画像の透明度を出力のカラーにセット
color.a = maskCol.a;
フラグメントシェーダーで取得したマスク画像のピクセル色が大事なポイントです。
ピクセルごとのアルファ値にマスク画像のアルファ値をセット します。つまり 各ピクセルの透明度はマスク画像の透明度になる のです。
このように きれいなソフトマスク を表現できました。
uGUIシェーダーをカスタマイズすることは意外とあります。 基本機能では乗算しかできませんが、加算合成する場合はシェーダーをカスタマイズ します。次の記事ではUIの加算合成するシェーダーの作り方を紹介しています。本記事とあわせて読んでみてください。
【補足】UI Toolkitのソフトマスク事情
「これからのUnity UIはUI Toolkitでは？」と気になる方もいると思います。
UI Toolkitのマスクは overflow: hidden などによる クリッピングが基本 です。グラデーションでふわっと消えるソフトマスクは、2026年8月時点で標準サポートされていません。
つまり ソフトマスクを含むリッチなマスク表現をしたいなら、引き続きuGUIが有力 です。本記事の3つの方法は当分現役だと思います。
Unity UIでソフトマスクを作る方法まとめ
記事前半では標準機能である RectMask2Dのソフトマスク を紹介しました。
・RectMask2Dの子階層がマスク対象
・SoftnessでX、Y軸それぞれ設定可
・要望の多かったソフトマスク付きスクロールがデフォルトで実装可能
・プログラミングはいっさいなし
また、記事後半ではRectMask2Dの使えない状況におけるソフトマスクの実装方法を紹介しました。
・SoftMaskForUGUI（無料・Unity 6対応）を使う
・uGUIシェーダーをカスタマイズして自作
矩形ならRectMask2D、自由な形ならSoftMaskForUGUI。
2026年現在、uGUIのソフトマスクはこの使い分けで落ち着いています。SoftMaskForUGUIは今も更新が続いている、信頼できるアセットです。
とりあえず、今Unityのソフトマスクで悩んでいる方がこの記事を読んで課題を解決できていると嬉しいです。もしこの記事を読んでいるのがデザイナーさんだった場合、ぜひUI実装担当のエンジニアに見せてあげてください。なにか実装のヒントになるかもしれません。
この記事があなたのゲーム開発に少しでもお役に立てたら嬉しいです。
今回使ったソースコード公開
今回作成したシェーダーコード全文はこちらです。
ご自由にお使いください。
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "UI/SoftMask"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
_MaskTex("MaskTexture",2D) = "white"{}
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend One OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
half4 mask : TEXCOORD2;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
sampler2D _MaskTex;
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
float4 vPosition = UnityObjectToClipPos(v.vertex);
OUT.worldPosition = v.vertex;
OUT.vertex = vPosition;
float2 pixelSize = vPosition.w;
pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
OUT.mask = half4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
half4 maskCol = tex2D(_MaskTex, IN.texcoord);
color.a = maskCol.a;
#ifdef UNITY_UI_CLIP_RECT
half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
color.a *= m.x * m.y;
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
color.rgb *= color.a;
return color;
}
ENDCG
}
}
}
このシェーダーをUnityプロジェクトにコピー後、Materialにアタッチしてお使いください。
マスク表現の次は描画順を理解しよう
マスク表現を突き詰めると、必ず 描画順 の理解が必要になります。
オオバが執筆した 「Unity描画順の教科書」 では、CanvasやSortingOrder、Shaderまで、Unityの描画順 を基礎から体系的に解説しています。
描画まわりの理解を一度整理しておきたい方は、ぜひ確認してみてください。
筆者のXをフォローしよう
記事の内容やUnityゲーム開発について、個別で相談したい 方は「オオバの公式LINE」からご連絡ください。
いまなら期間限定で、Unity開発を加速させる 無料特典 も配布中です！ → 公式LINEに登録して特典を受け取る
最後まで読んでいただきありがとうございました！
すばらしいソフトマスクライフをお過ごしください。
- Unity2020.3.31f1