デザイン制作と数学は一見すると関連が薄いものというイメージを浮かべる人も多いかと思いますが、実は良いデザインや完成度の高いものは数学的な知識や手法を活用したものがよくあります。今回はウェブデザイン制作において、数学的なアプローチを取り入れた例をみていきます。第一回目の今回は配色におけるグラデーションやカラースケールの設計に数学のエッセンスを取り入れてみたいと思います。過去にも「黄金比を落とし込んだ様々なデザインを見てみよう」 でレイアウトやロゴデザインなどに黄金比や白銀比を使った例をまとめてみましたが、それ以外にもまだまだ使えるところはありそうですね。   （関連記事） 黄金比を落とし込んだ様々なデザインを見てみよう 【実践テクニック＃5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる    

2色間（#000、#FFF）の線形グラデーションから適当に色を抽出して作成したカラースケール

今回はカラースケールやグラデーションをテーマに数学的なアプローチを導入してみるのですが、配色を決める際にはどうしても感覚や経験則に頼ってしまう場合も多いですが、微妙な違和感やバランスの悪さなどが目立ってしまうこともあります。例えば下記のように配色を決める際にカラースケールを設計する場合、ざっと目視で適当に色をピックアップした場合、なんとなく階調が整っているように見えるものの、よく見比べてみると若干グラデーションにムラが出てしまっているのがわかるかと思います。    

開始点（#010101）から終了点（#FDFDFD）を等差的に変化させたカラースケール

そこで、階調の変化率が一定になるように調整してみます。大きな違いは見られませんが、変化が均一になったことでグラデーションの変化がなめらかになりました。これがいわゆる一般的にイメージされるグラデーションですね。変化を一定にするということで数学で扱う「等差」の計算でカラーコードの値を算出しています。   ただし、変化が一定になるということは緩やかに色が遷移しているという状態を意味します。つまり中間色が多数を占めるようになり、そのまま配色で使ってしまうとメリハリのないものになってしまいます。また、デザインをする上で中間色ばかりだと意外とデザインもやりづらいものです。そこで新たに調整してみたいと思います。    

開始点（#010101）から終了点（#FDFDFD）で中間色を対称に等比的に変化させたカラースケール

先ほどのものは変化率が一定の等差的な階調ですが、続いては変化率が一定の法則に基づき変化するパターンです。どのように変化させるかというと、変化率を2倍ずつ増やしたり減らしたりするというものです。ですので、初回は緩やかな変化となっているのが徐々に急な変化へと変わっていくというものになります。数学でいうところの「等比」的に値が変わるような計算を行います。   先ほどの等差的に変化させた時に、中間色が増えるという問題がありましたが、それを補うように開始色と終了色付近の変化を緩やかに、中間色付近の変化を強くすることで中間色を減らしながらも階調を増やすことが実現できます。先ほどのグラデーションと比べるとよりメリハリがあるものになりましたね。    

開始点（#010101）から終了点（#FDFDFD）で中間色を頂点とした正弦波の値で変化させたカラースケール

ただし、緩やかなグラデーションとして使いたい場合、等比的な変化のものはややコントラストが目立ちすぎるという場合もあります。でも等差的な均等に変化するグラデーションでは物足りないという場合、三角関数で扱う正弦（sin）の値を使うことで、自然に変化を加えることができます。   sinは0度から360度の間で、0から1、そして0に戻りそのまま-1まで推移して再び0になるという変化になります。つまり山と谷が連続する波形のような曲線を描きます。このイメージで、中間色が山の頂点になるよう、sinの値を調整していくと、開始色からなめらかに中間色への変化を描き、そのまま同じ感じで終了色につながるというグラデーションになります。等差型のものと比べて開始色と終了色付近は強い変化になっていて、中間色は柔らかく変化が続いていくような感じになりますね。   今回試してみた、「等差型」「等比型」「正弦波型」のカラースケールを比較してみるとこのような違いが出ました。等差型のものを中心に等比型は2色間のコントラストが強調され、正弦波型のものは中間色のエリアが大きくなるという見た目になります。   線形グラデーションの場合にはこのようになります。等差型と正弦波型は違いが分かりにくいのですが、段階的な色の変化が広い範囲で見られます。等比型が階調変化がよくわかる範囲は狭いですが、グラデーションの見た目で言うとより最もナチュラルに見えますね。   このように、使い方にもよるのですがグラデーションや階調の変化は等差型や正弦波型より、等比型にした方がより自然な見た目になり実用的であると言えるのではないでしょうか。次に具体的な理由とメリットを挙げていきたいと思います。    

等比型のグラデーションやカラースケールが扱いやすくなる理由とメリット

階調変化を等比型の関係にすることで、どのようなメリットや、なぜ扱いやすくなるのかを考察してみたいと思います。まずはカラースケールとしてみる場合に、以下のような理由が考えられるのではないでしょうか。   中間色を基準に、明度ベースでスケールを設計する場合、等差型のものでは変化が一定のため、どうしても幅広い明度変化から色を抽出しないと中間色だらけになってしまいます。そのため、階調変化をある程度間引いていく必要があります、そうするとせっかくのなめらかな階調変化を活かすことができなくなってしまいます。その点、等比型の場合には、中間色側の階調変化は大きいものの、開始色と終了色付近は緩やかに変化が繋がるのでより自然な階調変化にすることができます。   また、ウェブデザインの場合、クオリティの高いデザインを目指す場合には、どうしても細い部分の作り込みやニュアンスの変化というのが求められます。これらは中間色を使って表現するのは難しく、高明度や低明度の色味のバリエーションが少ない場合だとどうしても手詰まりになってしまいがちになります。等比型のカラースケールとすることでウェブデザインに適した配色を設計できるようになります。   続いて、グラデーションとしての側面で見ると、等差型の場合には中間色の割合が増えてしまうという特性から、高い彩度の組み合わせや補色関係のグラデーションの場合、中間色が濁ってしまい綺麗な色味のグラデーションにならないという問題が発生してしまいます。（参考記事「【実践テクニック＃5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる」）   その点、等比型の場合には中間色の範囲が狭くなるので、濁った色味が少なくなり、綺麗な色味のグラデーションを作成することができます。混ざり合う範囲も少ないということにもなりますので、元の色味を活かすことができるとも言えます。特に近年のデザイントレンドとして、鮮やかな色味のグラデーションが扱われているのをよく見かけるので、このテクニックは有効なのではないでしょうか。  

---

  デザインと数学は意外なようで実はとても関係が深いというのが分かりますね。感覚やセンスも大事ですが、やはり理論に裏付けされたデザインのクオリティは高いものです。そんな場合に数学的思考やアプローチはとても役に立つのではないでしょうか。今回はグラデーションやカラースケールをテーマに数学のエッセンスを取り入れてみましたが、また別のところでも活かせそうなところはあるので別記事にてまとめてみたいと思います。