CSSブレンドモードとSVGを使用して、商品の色を動的に変更する方法

この記事ではSVGデータを作成し、CSSブレンドモードを適用させることで、商品の配色を動的に変更する方法をご紹介します。

以下の事例では、右下のカラーパネルをいじることで、簡単にシャツの色を変更できるようになっています。

See the Pen Dynamic Colour Picking – Part 4 by Kyle Wetton (@kylewetton) on CodePen.

この機能には、SVGと、色を変更したい部分のベクターデータが使用されています。CSSの mix-blend-mode: multiplyで、特定部分の塗りつぶし色を変更しているのです。

この記事に沿ってコーディングの練習をしたい場合は、こちらから写真をダウンロードしてください。写真は1920×1280pxのものを使用していますが、必要に応じてカスタマイズすることをおすすめします。なお色を変えたい部分は、もともとの写真では「白」である必要があります。

ステップ1：ベクターシェープとSVGマークアップを作成する

この記事ではAdobe Illustratorを使用します。持っていない人は、オンラインで無料で使える『Method Draw』で代用してみてください。

使用する写真と同じサイズでキャンバスを作成し、フレームの中心に写真を配置します。写真をロックし、ズレてしまうことを防ぎましょう。

次にペンツールを使用します。ズームインをして、Tシャツの輪郭のパスを描きます。

ペンツールの使用方法がわからない人は、こちらのビデオでやり方を確認してください。

このとき、パスを描くのはTシャツの部分だけである必要はありません。色を動的に変えたい箇所のぶんだけ、パスを描きましょう。

SVGをエクスポートする

Tシャツの形にパスが描けたら、色を塗りたして輪郭を確認しましょう。

背景の写真を隠すと、以下のようになります。

このSVGをエクスポートする際、Adobe IllustratorではTシャツの輪郭の外にある余白も保持されます。

「ファイル→書き出し→スクリーン用に書き出し」を選び、アートボードそのものを含めてエクスポートしましょう。

PCにSVGデータを保存します。ファイルをテキストエディタで開くと、SVGマークアップを確認できるはずです。

このSVGマークアップをWebサイトで使用するため、コピーしましょう。

SVGマークアップを綺麗にする

SVGファイルを軽量化／最適化するツール『SVGOMG』を開き、SVGマークアップをペーストしましょう。

このステップを踏むことで、Adobe IllustratorからエクスポートしたSVGマークアップデータをクリーンにできます。

もし一つの画像上に複数のアイテムがあり、それぞれの色を別々に操作したい場合は、「Merge Paths」オプションをオフにしておきましょう。

SVGマークアップをコピーし、新しくCodePenを開きます。まだここまで出来ていない人は、以下の例からコピペしても大丈夫です。

See the Pen Dynamic Colour Picking – Part 1 by Kyle Wetton (@kylewetton) on CodePen.

まずは、以下のスタイルコードをCSSに埋め込みましょう。

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

ステップ2：SVGデータとイメージ

HTMLに、2つのIDを埋め込みます。

ここでは、product-svgをSVG要素に、パスエレメントにはproduct-shapeを使用します。

#container {
  position: relative;
}

最終的に、HTMLは以下のようになります。

<div id="container">
<svg id="product-svg">
<path id="product-shape" d="..." />
</svg>
</div>

ここに、以下のスタイルを挿入しましょう。

#product-svg {
  position: relative;
  z-index: 2;
  mix-blend-mode: multiply;
}

mix-blend-mode:multiplyモードを使用することで、色を背景画像に貼り付けられます。

続いて画像を2つ目の要素として、SVGの後に挿入しましょう。このチュートリアルでは、background-imageをIDとして使用しています。

<div id="container">
<svg id="product-svg">
<path id="product-shape" d="..." />
</svg>

<img id="background-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/alex-holyoake-unsplash_hkda7r.jpg" alt="">

</div>

background-imageのなかに、以下のスタイルを挿入します。

#background-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}

背景画像とSVGのサイズが、完全一致していることが重要です。

SVGデータ上において、パスエレメントはIllustratorで使用したHEXが「塗りつぶし色」として使用されているはずです。

これらを切り出し、product-shapeエレメントに挿入します。

#product-shape {
  fill: #DBED64;
}

ここまでできたら、以下のような結果が得られるはずです。

See the Pen Dynamic Colour Picking – Part 2 by Kyle Wetton (@kylewetton) on CodePen.

ステップ3：色を変更する

ここからはJavaScriptを使用して色を変更していきます。

以下のコードをHTML、CSS、JavaScriptに貼り付けます。

【HTML】

<div class="colors">
  <div class="color" style="background-color: #e1e851" data-hex="#e1e851"></div>
  <div class="color" style="background-color: #8cd147" data-hex="#8cd147"></div>
  <div class="color" style="background-color: #4a9ccf" data-hex="#4a9ccf"></div>
  <div class="color" style="background-color: #661f45" data-hex="#661f45"></div>
  <div class="color" style="background-color: #1e2024" data-hex="#1e2024"></div>
</div>

【CSS】

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

【JavaScript】

// Reference the color shape that was drawn over the image
const overlay = document.getElementById("product-shape");

// Click on a color

var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  // set the hex color
  overlay.style.fill = hex;
}

これで完成です。

See the Pen Dynamic Colour Picking – Part 3 by Kyle Wetton (@kylewetton) on CodePen.

おわりに

以下はjscolorライブラリ向けに作成した、より完成度の高いコードです。

SVGが、CSSプロパティであるbackground-size: coverに代わって機能しています。

See the Pen Dynamic Colour Picking – Part 4 by Kyle Wetton (@kylewetton) on CodePen.

他にも、ソファの色と背景色を変更できるデモもあります。ぜひ遊んでみてください。

なお2019年12月時点において、CSSブレンドモードはIE／Edge／Chrome for Androidに対応していません。お気をつけください。

執筆：Kyle Wetton
翻訳：Sugita Mariko
編集：内田一良（じきるう）

こちらもおすすめ！▼