マスク画像とは？Web制作で使う意味と仕組みをわかりやすく解説

Web制作をしていると、

「マスク画像」

という言葉を見かけることがあります。

最近、画像の一部分だけ色を変更するような機能を作る際にマスク画像を使う機会があり、仕組みを調べてみました。

最初は少し分かりにくかったのですが、考え方自体はそれほど難しくありません。

今回は、マスク画像とは何なのか、どんな場面で使われるのかを簡単にまとめます。

マスク画像とは

マスク画像とは、

「画像のどの部分に処理を適用するのか」を指定するための画像

です。

たとえば家の写真があったとして、

外壁

屋根

窓

ドア

の中から、

外壁だけ色を変更したい

とします。

普通に画像全体へ色を重ねてしまうと、屋根や窓まで色が変わってしまいます。

そこで、

「ここだけ色を変えてください」

という範囲を指定するために使うのがマスク画像です。

白と黒で範囲を指定する

マスク画像では、白黒画像を使うことがよくあります。

基本的な考え方は、

白い部分 → 処理する

黒い部分 → 処理しない

というものです。

たとえば外壁だけを白くして、それ以外を黒くした画像を作ります。

元画像

家

├─ 屋根

├─ 外壁

├─ 窓

└─ ドア

マスク画像では、

屋根 → 黒

外壁 → 白

窓 → 黒

ドア → 黒

のようにします。

このマスクを使えば、

白くなっている外壁部分だけに色を重ねる

という処理ができます。

透明PNGを使う方法もある

マスク画像は必ず白黒でなければいけないわけではありません。

Web制作では、

変更したい部分だけが表示され、それ以外が透明になっているPNG画像

を使う方法もあります。

たとえば、

外壁 → 白

屋根 → 透明

窓 → 透明

ドア → 透明

という画像です。

この白い部分をCSSやJavaScriptで着色すれば、外壁だけ色を変更できます。

そのため、マスク画像を作成するときはPNGなどの

透過に対応した画像形式

が使われることが多いです。

どんなときに使う？

マスク画像はいろいろなところで使われています。

代表的なのが、

外壁カラーシミュレーター

住宅の写真を表示して、

「外壁を白にする」

「外壁をベージュにする」

「屋根を黒にする」

といったシミュレーションができるサイトがあります。

このような機能では、

元の家の画像

+

外壁マスク

+

屋根マスク

のように、変更したい場所ごとにマスク画像を用意する方法があります。

ユーザーが色を選択したら、そのマスク部分だけ色を変更します。

CSSでも使える

Web制作ではCSSにもマスク機能があります。

たとえば、

.icon {

  width: 100px;

  height: 100px;

  background-color: #0066cc;

  mask-image: url("../images/icon.svg");

  mask-repeat: no-repeat;

  mask-size: contain;

}

のように、

mask-image

を使うことができます。

この場合、

画像の形だけを利用して、表示する色をCSS側で変更する

といったことができます。

SVGアイコンの色変更などでも便利です。

Photoshopがなくても作れる

マスク画像というとPhotoshopが必要そうに感じますが、必ずしも必要ではありません。

例えば無料で使える

Photopea

でも作成できます。

ざっくりした流れは、

元画像を開く

マスクしたい範囲を選択する

新しい透明レイヤーを作る

選択範囲を白く塗る

背景を透明にする

PNGとして書き出す

という感じです。

外壁のように複雑な形の場合は、多角形選択ツールなどを使って範囲を囲っていきます。

通常の画像との違い

普通の画像は、

「ユーザーに見せるための画像」

として使います。

一方、マスク画像は、

「どこを表示するか・どこに処理を適用するかをコンピューターに伝えるための画像」

として使われることがあります。

つまり、

通常画像

→ 見た目そのもの

マスク画像

→ 処理する範囲を指定するもの

という違いがあります。

まとめ

マスク画像とは、

画像の一部分だけに処理を適用するための範囲指定用画像

です。

特に、

画像の一部分だけ色を変更する

特定の形だけ表示する

アイコンの形を使って色を変更する

カラーシミュレーターを作る

といった場面で利用できます。

最初は「マスク」という名前だけでは分かりにくいですが、

「ここだけ処理して」という場所を指定するための型紙

のようなものだと考えると理解しやすいです。

Web制作をしていると、CSSのmask-imageや画像加工、カラーシミュレーターなどで出てくる考え方なので、覚えておくと便利だと思います。