カラーシミュレーターの仕組みとは

塗装会社や住宅会社のホームページでよく見かける「カラーシミュレーター」。

外壁の色を選ぶと、建物の色がその場で変わり、塗装後のイメージを確認できる機能です。

一見するとかなり複雑なシステムに見えますが、基本的な考え方はそこまで難しくありません。

今回は、Webサイトにあるカラーシミュレーターがどのような仕組みで動いているのかをまとめます。

カラーシミュレーターとは

カラーシミュレーターは、ユーザーが好きな色を選択すると、建物や商品の特定の部分だけ色を変更して表示する機能です。

外壁塗装のサイトであれば、

外壁

屋根

ベランダ

玄関

などの色を変更し、完成後のイメージを確認できるようになっています。

実際に塗装してから「思っていた色と違った」となるのを防ぐためにも便利な機能です。

基本は「元画像」と「マスク画像」

カラーシミュレーターの仕組みを理解するうえで重要なのが「マスク画像」です。

例えば、家全体が写っている写真があったとします。

この写真の外壁だけ色を変更したい場合、写真全体に色を付けてしまうと、窓や屋根、空まで色が変わってしまいます。

そこで、

「この部分だけ色を変更してください」

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

外壁部分だけを指定したマスク画像を元の写真の上に重ね、その部分にだけ選択した色を反映させます。

マスク画像とは

マスク画像とは、画像の中で「どこを変更するか」を指定するための画像です。

外壁カラーシミュレーターなら、外壁部分だけを切り抜いたような画像を作ります。

例えば、

元画像

↓

家全体が写っている写真

マスク画像

↓

外壁部分だけが指定されている画像

という2つを組み合わせます。

ユーザーがベージュを選べばマスク部分をベージュにし、グレーを選べばグレーに変更するという仕組みです。

色を選ぶとJavaScriptが処理する

ユーザーがカラー一覧から色を選択すると、その操作をJavaScriptが検知します。

そして、

「選択された色を外壁部分に反映する」

という処理を行います。

つまり、大まかにいうと、

色を選択する → JavaScriptが色を取得する → マスク部分の色を変更する

という流れです。

ユーザーから見ると一瞬で家の色が変わっているように見えますが、裏側ではこのような処理が行われています。

外壁と屋根を別々に変更する場合

外壁だけではなく、屋根も変更できるカラーシミュレーターもあります。

この場合は、

外壁用のマスク

屋根用のマスク

というように、変更する場所ごとにマスクを分けます。

さらに、

ベランダ

ドア

シャッター

なども変更したければ、それぞれ別のマスクを用意します。

それぞれを独立して管理することで、

「外壁は白、屋根は黒」

といった組み合わせを自由に試せるようになります。

色ごとの画像を用意する方法もある

カラーシミュレーターには、マスクを使わない方法もあります。

それが、

あらかじめ色違いの画像をすべて作っておく方法

です。

例えば、

白い外壁の画像

ベージュの外壁の画像

グレーの外壁の画像

ブラウンの外壁の画像

をあらかじめ用意しておき、ユーザーが色を選択したら表示する画像そのものを切り替えます。

色の種類が少ない場合はこちらの方が簡単です。

ただし、

外壁10色 × 屋根10色

となると100パターンの画像が必要になります。

組み合わせが増えるほど管理が大変になるため、本格的なカラーシミュレーターではマスクを使って色を変更する方法が便利です。

実はマスク画像を作る作業が大変

カラーシミュレーターというとプログラム部分が難しそうに見えますが、実際には画像側の準備もかなり重要です。

特に外壁の場合、

窓

雨樋

屋根

ドア

植物

電線

などが重なっています。

外壁部分を雑に指定してしまうと、窓まで色が変わったり、塗りたくない部分に色がはみ出したりします。

そのため、PhotoshopやPhotopeaなどを使って、色を変更したい範囲を正確にマスクする必要があります。

自然なカラーシミュレーターを作るには、このマスク画像の精度がかなり重要です。

写真の明るさや影も残す必要がある

単純に外壁部分をベタ塗りしてしまうと、不自然な見た目になります。

実際の建物には、

日なた

日陰

凹凸

外壁の模様

光の反射

があります。

そのため、元の写真が持っている明るさや影を残しながら色だけを変更することで、より自然な仕上がりになります。

カラーシミュレーターによってリアルさに差があるのは、この画像の合成方法やマスクの作り方にも違いがあるためです。

カラーシミュレーターの大まかな流れ

仕組みをまとめると、

建物の写真を用意する

色を変更したい部分を指定する

マスク画像を作る

元画像とマスクを重ねる

ユーザーが色を選択する

JavaScriptで選択された色を取得する

マスク部分に色を反映する

という流れになります。

見た目はかなり高度な機能ですが、一つずつ分解すると比較的シンプルな仕組みです。

まとめ

カラーシミュレーターは、基本的に

「元画像＋マスク画像＋色を変更する処理」

という組み合わせで作られています。

特に重要なのがマスク画像で、

「画像のどの部分だけ色を変更するのか」

を指定しています。

この仕組みは外壁塗装だけではなく、

車のボディカラー

家具

洋服

靴

商品カラー

などにも応用できます。

普段ホームページを見ていて「これどうやって作っているんだろう？」と思う機能も、仕組みを分解してみると意外とWeb制作で使っている技術の組み合わせだったりします。

こういった視点でWebサイトを見るようになると、普段のサイト閲覧もかなり勉強になります。