デザインの意図

まずは、なぜブレンドモードを使用することになったのか、簡単に経緯をお話ししましょう。ピクセルグリッドのコーポレートサイトをリニューアルすることになり、社内デザイナーの小原がデザインを担当しました。

• ピクセルグリッドサイト

コーポレートサイトは、ピクセルグリッドらしいシンプルなデザインが基調となっています。ですが、シンプルすぎて、サイト全体の印象が弱くならないように、また全体のコントラスト不足を補うために、今までのピクセルグリッドのコーポーレートサイトにはなかった「ヒーローエリア」のデザインが提示されました。

デザインされたIllustratorファイルを見てみると、グラデーションに重なっている白い模様に、描画モード（オーバーレイ）が適用されていました。

ひと昔前であれば、こういったオーバーレイなどの描画モードが使用されていると、CSSではどうにもならず、画像をうまい具合に書き出す必要がありました。実装する側は、ちょっと苦い顔をせざるをえません。

ですが、現在では、最近のブラウザをターゲットにして良いのであれば、mix-blend-modeやbackground-blend-modeというプロパティを使用することで、描画モードを扱うことができるようになりました。

ピクセルグリッドのサイトは、ところどころに比較的新しい技術を使った実装が行われています。そういった新しい技術をさりげなく取り入れるのも、ピクセルグリッドという会社の特徴をうまく表現してくれそうです。そこで、ヒーローエリアの画像表現にはmix-blend-modeを使った実装を取り入れることにしました。

デザインを見てどのように実装するか考える

そもそも、デザインを作成していく過程で、小原からは「mix-blend-modeは使っても大丈夫そうか？」という相談はされていました。

実装方法を考えるにあたって、まず、小原が作成したデザインと、それに記載された指示をどのように実現するかを検討しました。

デザインと細かい指示をみると、以下の3つの要件を満たす実装をする必要がありました。

1. グラデーションは2種類。それぞれヒーローエリアの上部と下部に利用する
2. 画像（SVG）と、グラーデーションを合成した表現をする。合成のブレンドモードにオーバーレイを使用する
3. もしブレンドモードが使えない場合は、SVGの不透明度を調整して、グラデーションと重ねる

上記の条件を満たしつつ実装するために筆者が考えた仕様は次のようなものです。いくつかの要素を組み合わせて、実装していこうと考えました。

まずは、1つの要素にグラデーションを2つ描画する方法と、ブレンドモードについて解説し、SVGとグラデーションを合成する部分について解説します。

なお、以降で紹介するコードは次のリポジトリにまとめてあります。

1つの要素に2種類のグラデーションを敷く

まずは、1つめの要件です。1つの要素に2種類のグラデーションを敷きます。

デザイナーからは、特に「1つの要素でなくてはいけない」とは言われてはいませんが、なるべく少ないマークアップで実現したいので1つとしました。ここでは、解説のために、サイトで使用したコードを簡略化して解説します。

ヒーローエリア用のdiv要素です。

<div class="hero"></div>

CSSは、次のように指定します。

.hero {
  width: 100%;
  height: 200px;
  background-image:
    /* 赤いグラデーション */
    linear-gradient(to right, #594b14 0, #591532 100%),
    /* 青いグラデーション */
    linear-gradient(to right, #37124d 0, #145951 100%);
  background-repeat: no-repeat;
  background-size: 100% 100px;
  background-position: 0 100px, 0 0;
}

グラデーションを複数指定し、それぞれの幅と高さをbackground-sizeで調整します。そして、background-positionで縦位置を100px移動します。これで1つの要素にグラデーションを2つ表示することができました。

これといって難しいことはないかと思います。なるべくヒーローエリアの高さの変化にも対応できるよう相対的に配置したい場合は、次のような書き方もできます。

.hero {
  width: 100%;
  height: 200px;
  background-image:
    /* 赤いグラデーション */
    linear-gradient(to right, #594b14 0, #591532 100%),
    /* 青いグラデーション */
    linear-gradient(to right, #37124d 0, #145951 100%);
  background-repeat: no-repeat;
  /* 幅100%、高さの50%のサイズにする */
  background-size: 100% 50%;
  /* 画像の100%分（100px）移動させる */
  background-position: 0 100%, 0 0;
}

.heroの高さが可変であれば、パーセンテージの指定にしておくほうが良いでしょう。

ブレンドモードの指定

次に、前述のグラデーションに、SVGをオーバーレイのブレンドモードで重ねるために必要なmix-blend-modeとbackground-blend-modeについて解説します。これは、Compositing and Blending Level 1に登場します。

• Compositing and Blending Level 1
• Compositing and Blending 日本語訳

mix-blend-modeとbackground-blend-modeは色の合成と混色を行うためのものです。どちらも同じような働きをしますが、簡単に説明すると、要素同士の合成はmix-blend-modeで行い、背景画像・背景色の合成はbackground-blend-modeで行います。

mix-blend-mode

mix-blend-mode | Compositing and Blending Level 1

mix-blend-modeでは、要素のブレンドモードを指定します。このプロパティで指定できる値は、次のとおりです。PhotoshopやIllustratorのブレンド・描画モードで同じようなものを見たことがあるのではないでしょうか。そして、mix-blend-modeは執筆現在、Chrome、Firefox、Safari（一部の値をサポートしない）で利用できます。

また、normal以外を指定するとスタック文脈*を形成します。

実際に各値を試せるデモを用意したので、どういった変化が起きるのかを確認してみてください。白いテキストを内包する.box1と、グラデーションが指定された.box2は絶対配置で重ねています。

ソースコードは次のようになっています。

<div class="box-1" style="mix-blend-mode: normal;">私のHome Pageにようこそ</div>
<div class="box-2"></div>

セレクトボックスで値を選ぶと、どういった効果が得られるかを確認することができます。

(function () {
  if ('CSS' in window && 'supports' in window.CSS) {
    if (window.CSS.supports('mix-blend-mode', 'soft-light')) {
      document.documentElement.classList.add('mix-blend-mode')
    }
  }
}())

実装では、結果的にSVGとグラデーションを合成するために、mix-blend-modeを使用しているのですが、その理由については後述します。

background-blend-mode

background-blend-mode | Compositing and Blending Level 1

次に、背景のブレンドモードを指定するbackground-blend-modeプロパティを解説します。background: url(foo.png), url(bar.png);のように複数背景を指定したときに、それぞれの背景にブレンド効果を付けて、背景同士を合成することができます。

このプロパティに使える値は、mix-blend-modeと同様です。backgroundプロパティのサブプロパティのため、background-blend-mode: overlay, screen, normal;のように複数の指定することもできます。

これも先ほどと同様に、セレクトボックスで値を選ぶと、どういった効果が得られるかを確認することができます。

まとめ

今回はピクセルグリッドのコーポレートサイトリニューアルにあたってのデザイン意図と、その結果、ヒーローエリアにブレンドモードを採用した実装を施すことになった経緯を説明しました。

また、その実装に必要な2つのプロパティ、mix-blend-modeとbackground-blend-modeの仕様を解説しました。

次回はこの知識をもとに、実際の実装をどのように行ったのか、また実装の際の注意点についても解説します。