UnityのUIシェーダー6例｜画像効果・ぼかしとMaskの確認

2018年8月27日2026年10月3日

UI画像の明るさ、白黒、単色、色相、模様、ぼかしを変える6例を整理します。色を変えるだけならImageやButtonの標準設定から確認し、画像の色成分を加工する場合にシェーダーを選びます。下に掲載するぼかしコードは、UIに割り当てた画像をぼかす処理です。パネルの背後にあるシーンの映像は取得しません。

掲載画像とShaderLabの例は旧記事の資料です。元のUnity Editorの詳細版・描画方式は記録から確定できず、Unity 6／URP／HDRPでのコンパイル・描画・マスク動作は未検証です。標準機能の説明はuGUI 2.0の公式資料に照合しています。新しい環境で試す際は、まず別の検証用Sceneで確認してください。

あわせて読みたい

Unityの使い方ガイド｜環境構築・UI・2D・アセット活用 Unityの環境構築、UI制作、2D素材の組み込み、アセット導入、Prefab管理を目的別に案内。書籍・オンライン教材の選び方と、制作中につまずいたときの解説記事を探せます。

目的から標準機能とシェーダーを選ぶ

目的・確認項目	方法・判断
押したときの色・操作不可の見た目	ButtonのTransitionをColor TintまたはSprite Swapにする。白黒の見た目だけでクリックを無効にせず、Interactableも指定する。
画像全体を暗くする・色を重ねる	まずImageのColorを変更する。元画像の色を白まで持ち上げる加工とは区別する。
画像を白黒・単色・別の色相にする	画像のRGBを加工するシェーダーを検討。透明部分とUIマスクへの対応も確認する。
模様を繰り返して枠内に表示する	ImageのType＝Tiledと、親のMask／RectMask2Dを先に検討。独自UI/TextureMaskは標準の配布機能ではない。
UIに使う1枚の画像をぼかす	画像のTextureをサンプリングする処理。この記事の9点平均コードはこの用途。
モーダルの背後のシーンをぼかす	シーン映像の取得と、その描画方式に合ったぼかし処理が別途必要。この記事のコード単体では実現しない。

Buttonの状態別表示は公式のTransition Optionsで確認できます。表示の開閉やImageの有効・無効を切り替える手順は、末尾のボタン切替記事へ進んでください。

最初に確認する環境とMaterialの割り当て

Unity Editorの版、uGUIの版、Built-in／URP／HDRP、CanvasのRender Mode、ビルド先を控えます。旧Sprite用コードがあることだけで、すべてのCanvasや描画方式に対応するとは判断できません。
Canvas内にImageを1つ置き、Spriteを指定します。ImageのColorは白・Alphaは1、Materialは標準のままにして、元画像が表示されることを先に確認します。
配布元の完全な.shaderファイルと、必要なスクリプト・includeファイル・利用条件を確認して導入します。下の変更用断片だけを.shaderとして保存しても、完全なシェーダーにはなりません。
Consoleのシェーダーエラーを確認します。エラーがなければ検証用Materialを作り、そのShader欄で目的のシェーダーを選択し、ImageのMaterialへ割り当てます。複数のUIで共有したMaterialを変更すると、他の表示にも影響する可能性があります。
マスクなしで効果を確認した後、親Maskと親RectMask2Dを別々に追加して確認します。ScrollViewへ入れるのは、クリッピングの確認後にします。Editorだけでなく対象ビルドでも確認します。

1．明るさを変える：旧Sprites/Defaultの改変例

旧例はSprites-Default.shaderを複製し、Shader名とフラグメント処理を変更したものです。参照元のUnity 5.x向けの記事と、当時の標準シェーダーを前提にしています。異なる版のファイルへ関数断片だけを差し込む手順としては使わず、元ファイルの構造と利用条件を確認してください。

次の1つ目はShader宣言の変更前・変更後、2つ目はfrag関数の置き換え例です。両方を続けてコピーする完全ファイルではありません。Sprites用の元コードが、uGUIのMask／RectMask2Dにも対応するとは限りません。

// 変更前
Shader "Sprites/Default"
// 変更後
Shader "Sprites/Default_Custom"

fixed4 frag(v2f IN) : SV_Target
{
    fixed4 c = SampleSpriteTexture(IN.texcoord) * IN.color;
    c.rgb = c.rgb * 2 + max(fixed3(0,0,0), IN.color.rgb - 0.5) * 2;
    c.rgb *= c.a;
    return c;
}

旧設定画面です。コード上は、テクスチャ色に頂点色を掛けた後にRGBを2倍し、頂点色が0.5を超えた分を加算します。各RGBが0.5のときは加算項が0になり、先の乗算と2倍が打ち消し合う計算です。Inspectorの8ビット値128は約0.502であり、色空間やMaterialの設定もあるため、常に元画像と完全一致する値とは断定しません。

GIFは旧例の変化を示す資料です。新しい環境では、元画像・中間値・最大値を同じ条件で比較し、透明な縁が黒くならないかも確認します。単にButtonの押下色を変える用途なら、先にColor Tintで必要な表示を作れるか確認してください。

2．グレースケール：白黒表示と操作不可を分ける

RGBの色成分を白黒にする旧Sprite用シェーダーの例です。参照元は2014年のSpriteグレースケール記事です。掲載された完全コードと元の対応環境を確認し、検証用Materialを作ってImageへ割り当てます。

旧画像はGrayscale.shaderを使った例です。白黒になったことだけではButtonは操作不可になりません。クリックを止める場合はButtonのInteractableをオフにし、Disabledの表示も別に設定します。元コードはSprite向けで、uGUIのStencilや矩形クリッピングを備えた現行UIシェーダーとしては確認できていません。マスク内で使う場合は表示領域からはみ出さないかを確認してください。

3．単色ベタ塗り：元のRGBを置き換える

ImageのColorによる乗算と違い、模様のRGBを指定色に置き換える旧例です。参照先はSpriteBetaMask.shader。下のコードは変更箇所の抜粋なので、これだけでコンパイルできる.shaderにはなりません。

//[MaterialToggle] _MaskOn ("Mask On", Float) = 0
//_Color ("Tint", Color) = (1,1,1,1)
//[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
//fixed4 _Color;
OUT.color = IN.color; //* _Color;
fixed4 m = lerp(c, _MaskColor, 1);

旧記事の変更は色指定を頂点色に寄せ、色の補間をベタ塗り側へ固定するものです。元テクスチャのAlphaを残す処理やブレンド設定まで含めて確認し、透明部分まで四角く塗られていないかを比較します。UIマスクへの対応は、単色化の計算とは別です。

配布元のREADMEはソースコードをMIT、サンプル画像をUnity Technologies JapanのUCLと区別しています。導入するコードのライセンス表示を保持し、サンプル画像を自分の素材として配布しないよう、使用するファイルごとの条件を確認してください。

4．色相変更：HsvUIとUIHueの役割

色相を変える旧例は配布元の記事とHueリポジトリを参照します。HsvUI.shaderは色変換を行い、UIHue.csはGraphicのMaterialへ_Hueの値を渡します。ImageのColorは白にして、元画像への色の乗算と色相変更を混同しないようにします。

導入したHsvUI.shaderとUIHue.csにエラーがないことを確認します。ファイル名やShader名は配布コードと一致させます。
検証用ImageにUIHueを追加し、Hueを0から変えて色を比較します。スクリプトはCustom/HsvUIをShader.Findで探し、必要時にMaterialを生成する実装です。
マスク内での表示、再生開始・停止、対象UIの破棄、対象ビルドを確認します。値を固定してスクリプトを外す場合は、使用するMaterialと_Hueを保存し、外した後も同じ表示になるかを確認します。

取得したUIHue.csはUpdateから毎フレーム値を設定します。「色を決めたらスクリプトを削除すれば軽くなる」とは断定できません。生成Materialの保存・共有・破棄と、ビルドにShaderが含まれる条件を確認する必要があります。Shader.Findの公式資料にも、Editorで見つかるShaderがビルドに含まれるとは限らないことが説明されています。

HsvUI.shaderにはStencil設定、UNITY_UI_CLIP_RECT、Alpha Clipに関する処理があります。この旧コードを「マスク処理がない」と一括りにはしません。ただし処理の存在と、自分のUnity版・Softness・入れ子マスクで正しく表示できることは別であり、ここでは実行確認済みとはしていません。

5．模様のタイリングとマスク：標準機能から組む

旧画像のUI/TextureMaskは独自シェーダー名です。Unity標準のShaderメニューから同名の機能を選べるという意味ではありません。現在追跡できた記事用リポジトリには、このシェーダーの完全な配布ファイルがなく、以下の画像やAlpha変更の断片だけでは再現できません。

これらは旧独自シェーダーの設定・結果です。模様を繰り返して枠内だけに表示する目的なら、標準のImageとMaskで次の構成を検討できます。この手順の新しい検証画像として、上の旧画像を扱うことはできません。

繰り返し用の画像をSprite（2D and UI）として用意します。最小例はSprite Mode＝Single、Borderなしの画像にします。
Canvas内に枠用の親RectTransformを作り、表示範囲を決めます。長方形なら親へRectMask2Dを追加します。画像の輪郭で切り抜く場合は、親へImageとMaskを追加し、マスク用Spriteを指定します。
親の子として模様用Imageを作り、Source Imageに繰り返し画像を指定、Image TypeをTiledにします。子を枠より大きくして、繰り返し模様の枠外が隠れるか確認します。
親の画像を表示したくない場合はMaskのShow Graphicをオフにします。枠の形や子の表示範囲を確認してから、ScrollViewなどへ組み込みます。

ImageのTiledは領域内へSpriteを繰り返す方式です。独自コードで不透明度を1−opacityへ反転することと、標準Maskの内側・外側を反転することは同じではありません。切り抜きの反転が必要なら、専用の実装とマスク条件を別に確認します。

6．ブラー：9点平均でUIのTextureをぼかす

下の既存コードは_MainTexを中心と周囲8点で読み、合計を9で割る処理です。Camera映像や画面の取得処理、GrabPassは含みません。背景写真をUI画像として渡せばその写真が対象になり、パネルを置くだけで背後の3Dシーンがぼけるわけではありません。

上は旧例の資料です。完全なコードは次のとおりですが、uGUI用StencilやRectMask2Dのクリッピング処理はなく、現在のUnity・描画方式でのコンパイルと描画は未検証です。マスク対応済みの汎用UIシェーダーとしては使わず、単独画像で用途を確認する旧例として参照してください。

Shader "Unlit/Transparent Colored Blurred"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _Distance ("Distance", Float) = 0.015
    }
SubShader
{
    LOD 100
    Tags
    {
        "Queue" = "Transparent"
        "IgnoreProjector" = "True"
        "RenderType" = "Transparent"
    }

    Cull Off
    Lighting Off
    ZWrite Off
    Fog { Mode Off }
    Offset -1, -1
    Blend SrcAlpha OneMinusSrcAlpha

    Pass
    {
        CGPROGRAM
        #pragma vertex vertexProgram
        #pragma fragment fragmentProgram
        #include "UnityCG.cginc"

        struct appdata_t
        {
            float4 vertex : POSITION;
            float2 textureCoordinate : TEXCOORD0;
            fixed4 color : COLOR;
        };

        struct vertexToFragment
        {
            float4 vertex : SV_POSITION;
            half2 textureCoordinate : TEXCOORD0;
            fixed4 color : COLOR;
        };

        sampler2D _MainTex;
        float4 _MainTex_ST;
        float _Distance;

        vertexToFragment vertexProgram(appdata_t vertexData)
        {
            vertexToFragment output;
            output.vertex = UnityObjectToClipPos(vertexData.vertex);
            output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);
            output.color = vertexData.color;
            return output;
        }

        fixed4 fragmentProgram(vertexToFragment input) : COLOR
        {
            float distance = _Distance;
            fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y - distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y - distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y + distance)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y)) * input.color;
            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y - distance)) * input.color;
            computedColor = computedColor / 9;
            return computedColor;
        }
        ENDCG
    }
}
}

検証用の.shaderに完全コードを保存し、Consoleでコンパイル結果を確認します。エラーがある場合はMaterialの調整へ進まず、Editor版とエラー内容を控えます。
検証用MaterialのShaderをUnlit/Transparent Colored Blurredにして、Imageへ割り当てます。最初はAtlas化していない検証用Spriteを指定し、ImageのColorを白・Alphaを1にします。
Distanceを0にした表示を基準にし、少しずつ増やします。元画像との比較、透明な縁、Textureの端、マスク外へのはみ出しを確認します。

Distanceは画面上のピクセル数ではなくUVのずれです。単純な1枚の512×256 Textureで0.015を使うと、各軸のずれは計算上7.68×3.84テクセル相当になります。これは実測値ではなく寸法からの換算です。Texture寸法やAtlas内の配置で意味が変わるため、同じ数値が常に同じ見た目のぼかし幅になるとは限りません。9回の読み込みがあることだけで、特定端末での処理時間や推奨個数は判断できません。

表示が崩れる場合の確認順

目的・確認項目	方法・判断
ピンクになる・表示されない	ConsoleのShaderエラー、include、元の対応版、描画方式、MaterialのShaderを確認。Shader名だけを変更して互換性が直るとは限らない。
白黒や色相が反映されない	Imageに目的のMaterialが入っているか、元のSprite・Image.Color・値の渡し先を確認。標準Materialへ戻した状態とも比較。
Maskの外へ出る	親子関係とImageのMaskableを確認し、標準Materialで切り抜けるか比較。標準で成功するなら独自ShaderのStencil／Clip対応を確認。
ScrollViewの外へ出る	ViewportのMask方式と子Graphicを確認。MaskとRectMask2Dを同じ仕組みだとみなさず、対応を個別に調べる。
色を変えたら別のUIも変わる	Materialの共有とスクリプトの変更対象を確認。UIごとに生成した場合は所有と破棄も管理する。
Editorだけ動く	ビルド先でのShader収録、必要なバリアント、Shader.Findの名前、コンパイル結果を確認。Editorでの成功だけを対応済みとしない。
ぼかしが背景へ反映されない	入力は_MainTexかシーン映像かを確認。この記事のコードにシーン取得処理を追加した実装や比較結果は掲載していない。

公式資料ではMaskはStencilを使用し、RectMask2Dは共平面の2D要素を矩形内に制限します。どちらも「画像が一度表示できた」だけでは確認できません。未検証のまま既存画面へ適用せず、マスクなし・Mask・RectMask2D・CanvasGroupのAlpha・対象ビルドを分けて結果を残してください。