動画で解説｜画像のカラー表現がアップするブレンドモードの設定

ホームページ作成サービスBiNDupでは、CSSを記述しなくても細かなデザイン設定ができる「Dress」があります。今回は、新たに搭載された、ブレンドモードの設定方法について解説したいと思います。

使い方を動画でも解説しています。

ブレンドモードとは

ブレンドモードは要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。
CSSのbackground-blend-modeが該当します。

ブレンドモードを使う事でDress側で簡単に画像の色味や表現を変更する事が可能になります。
BiNDup（Dress）に於いては背景色と背景画像の掛け合わせに限定されますのでご注意ください。

ブレンドの種類

ブレンドモードは15種の中から選択出来ます。
同じ背景画像と背景色での違いを一覧化しました。
画像や色により組み合わせ方の良し悪しが変わりますので、切替ながら探るのが良いでしょう。

ブレンドモードの設定方法

それでは具体的に設定方法に入ります。
設定はDressを使って行います。
背景であれば基本的にはどの要素でも設定可能ですが、今回はメインビジュアルとなるビルボードの背景に設定する前提で解説します。

基本構成

まず、Dressに於けるブレンドモードの構成について。

ブレンドモードを設定出来るのは背景要素に限られます。
更に同じ背景要素（セレクタ）に対して背景画像と背景色が設定されている事が前提となります。

例えばページ背景の背景画像とビルボードの背景色でブレンドモードを指定する事は出来ません。
必ず同じ背景要素内で設定すると云う事を覚えてきましょう。

設定手順

具体的にDressでの設定をしてみましょう。

Dressからセレクタを指定

先ずはブレンドモードを設定する要素を指定します。
今回はビルボードの背景なので、以下の流れで指定します。

詳細設定 ＞ 項目追加（+） ＞ エリア ＞ ビルボードエリア ＞ 次へ

スタイルから背景画像を指定

指定対象が決まったらスタイルを指定します。
まず通常の手順で背景画像を設定しましょう。

スタイル追加（+）＞背景＞背景イメージ背景グラデーション＞画像ファイルを指定＞画像を選択

設定が完了したらオプションを開いて、サイズから「背景領域を覆うサイズで表示」を選択します。
これで画像が表示領域に対して適正に表示される様になります。

スタイルから背景色を指定

続いて背景色を指定します。

この時点では背景色は特に反映されません。

ブレンドモードを指定する

最後にブレンドモードを設定しましょう。
15種のブレンドモードを切り替えると背景画像と背景色が組み合わさって変化するのが分かると思います。

尚、ブレンドモードは明るさと暗さが変化に大きく影響します。
真っ黒になったり真っ白になったりした場合は、背景色の明暗を調整したり、背景画像の明暗を調整すると良いでしょう。
白黒画像を使うとより効果的に背景色の影響が解ると思います。

暗い色であればしっかり色の出る『乗算』、明るい色であれば柔らかい雰囲気になる『スクリーン』の相性が良い感じがしますね。

まとめ

如何でしたか？
ブレンドモード自体は切り替えるだけなので、背景画像と背景色の設定が出来ればそこまで難しくはないと思いますが、複雑に感じた方は動画で見るとよりわかりやすいのでチェックしてみてください。

Dress側で画像の色味などが変えられるのでちょっとした変更に良いですね。

background-blend-mode自体はテキストにも反映出来たり、複数画像をブレンド出来たり（この表現が一番面白い）幅のあるプロパティなのですが、現状のBiNDupでは背景画像と背景色の組み合わせのみの指定になっています。
開放する事で様々な表現が出来る様になるので、いずれバージョンアップさせたいですね。

無料でBiNDupを使ってみるBiNDの制作事例を見る