すべてのカテゴリ

Web制作をしていると、「マスク画像」という言葉を見かけることがあります。最近、画像の一部分だけ色を変更するような機能を作る際にマスク画像を使う機会があり、仕組みを調べてみました。最初は少し分かりにくかったのですが、考え方自体はそれほど難しくありません。今回は、マスク画像とは何なのか、どんな場面で使われるのかを簡単にまとめます。マスク画像とはマスク画像とは、「画像のどの部分に処理を適用するのか」を指定するための画像です。たとえば家の写真があったとして、外壁屋根窓ドアの中から、外壁だけ色を変更したいとします。普通に画像全体へ色を重ねてしまうと、屋根や窓まで色が変わってしまいます。そこで、「ここだけ色を変えてください」という範囲を指定するために使うのがマスク画像です。白と黒で範囲を指定するマスク画像では、白黒画像を使うことがよくあります。基本的な考え方は、白い部分 → 処理する黒い部分 → 処理しないというものです。たとえば外壁だけを白くして、それ以外を黒くした画像を作ります。元画像家├─ 屋根├─ 外壁├─ 窓└─ ドアマスク画像では、屋根 → 黒外壁 → 白窓 → 黒ドア → 黒のようにします。このマスクを使えば、白くなっている外壁部分だけに色を重ねるという処理ができます。透明PNGを使う方法もあるマスク画像は必ず白黒でなければいけないわけではありません。Web制作では、変更したい部分だけが表示され、それ以外が透明になっているPNG画像を使う方法もあります。たとえば、外壁 → 白屋根 → 透明窓 → 透明ドア → 透明という画像です。この白い部分をCSSやJavaScriptで