Sass/LESSでカラーバリエーションをつくるなら tint() を使おう

この記事は「Adobe Illustrator Advent Calendar 2017」24日目の記事です。

タイトルがイラレと関係ないと思われる方もいらっしゃるかもしれませんが、私にとっては完全にイラレの話ですので、しばしお付き合いいただければと思います。

Webデザインとの親和性が高いIllustratorのデータ構造

Webデザインツールとしてデファクトスタンダードだった「Fireworks」の開発中止がAdobeから発表されたとき、多くのWebデザイナーはFireworksの代わりに「Photoshop」を選びました。
しかし私は、Webデザインとの親和性が高いのは「Illustrator」だと考えました。
Illustratorのデータ構造がHTML/CSSの構造に似ていると思ったからです。

• 画像を「リンク」で配置できる
• スタイル（段落スタイル・文字スタイル・グラフィックスタイル）は、CSSのクラスにできる
• 複数アートボードで複数ページを一度に作れる
• シンボルで、ボタンやアイコンだけでなく、ヘッダー・フッター・サイドバーを一元管理できる
  （シンボルは入れ子に出来ます）
• ベクターグラフィックなので解像度に依存しない

さらに、CSSプリプロセッサ（Sass/LESS）が一般的になって、Illustratorの優位性がますます高まっています。

• スウォッチは、Sass/LESSで変数にできる
  （スウォッチはグローバルにしておかないと意味がありません）
• グラフィックシンボルは、mixinやextendにできる

最近になってPhotoshopにIllustraorの機能が取り込まれたりしていますが、かえって使いづらくなっているのではないかと思っています。
AdobeCCを契約すれば両方使えるのですから、わざわざPhotoshopに詰め込んだりせずに役割分担したほうがいいですよね。

Illustratorのカラーパネルは平網の指定

さて、ここでイラレ使いの方に質問なのですが、スウォッチに登録したカラーのバリエーションってどうやって作っていますか？

カラーパネルで「スウォッチの30%調」とか使いますよね？
オフセット印刷における特色の平網指定でおなじみの方法です。

じゃあ、それをSass/LESSでどうやって実現してますか？

Sass/LESSの使い方を説明しているサイトのほとんどは、色調節を行う方法として次のものしか掲載されていないと思います。

• 明度：lighten()、darken()
• 彩度：saturate()、desaturate()
• 透明度：rgba()

でも、これらの関数ではIllustratorのカラーパネルでやっているような「base-colorの30%調」って作れないんです。
やり方はあります。mix関数で白と30%で重ねるという方法です。
（白と重ねるので数値が逆になることに注意してください）

@base-color: #ff0000;
background-color: mix(white, @base-color, 100%-30%);

LESSには平網の関数があった

mix関数はちょっと面倒だなぁと思っていたんですが、調べてみたらLESSにはそのものずばりの関数がありました。

tint

Mix color with white in variable proportion. It is the same as calling mix(#ffffff, @color, @weight)

Parameters:

• color: A color object.
• weight: Optional, a percentage balance point between color and white, defaults to 50%.

Returns: color

Example:

no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%);

Output:

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

 ➜ 

Functions | Less.js

ちなみに”tint”はオフセット印刷の平網のことです。
tint関数を使うと、さきほどのmix関数を下記のように置き換えられます。

@base-color: #ff0000;
background-color: tint(@base-color, 100%-30%);　⇒　#ffb2b2;

Sassには tint() は実装されていませんが、Compass、Bourbonといったフレームワークを導入していれば使えます。
Sassでフレームワークを使っていない場合は、mixinを作っておくといいです。

@function tint($color, $percentage) {
   @return mix(white, $color, $percentage);
}

これでますますIllustratorでWebデザインがしやすくなったと思います。
あとは、IllustratorがExtractに対応してくれるといいんですけどね。
AdobeにはそろそろPhotoshop偏重を止めてほしいなと思っています。