01 / LIGHT & DARK
色が同じでも、背景で変わる。
真ん中のピンクは、どちらも同じ色。
周りだけを変えて、目立ち方を見比べよう。
暗い背景#081E3C
明るい背景#FBF6E9
ピンクはどちらも
#FF3985
COLOR, IN MOTION動かして学ぶ、配色のしくみ
気持ちいい配色を、
触って見つける
きれいな色を集める、その先へ。
明るさ、鮮やかさ、使う量。
ひとつずつ変えて、自分の「好き」を
見つけてみよう。
01 / GEOMETRIC PLAYGROUND動いています
7つの色、違う役割。丸と線の小さなオーケストラ。ORIGINAL STUDY — 001
この配色のメンバー
色を押すとカラーコードをコピー上の図の色を表示。白黒モードでも、元のカラーをコピーできます。
FOUR WAYS TO SEE
変えるのは、ひとつだけ。
ここからは、上の操作とは独立した4つの実験。
「どちらが正しい？」ではなく、
「どこに目が向く？」で比べてみよう。
02 / SATURATION
鮮やかさで、空気が変わる。
同じ図形、同じ色相。HSLの彩度だけを変更。
ポップな感じと穏やかな感じ、どちらが好き？
元の鮮やかさ100%
彩度を下げる25%
鮮やかさは、
全部を最大にしなくていい。
03 / AREA
同じ黄色が、主役にも差し色にも。
ここでは色を変えず、黄色の面積だけを変更。
少ないと「点」、増やすと「面」。視線はどう動く？
ネイビー %黄色 10%
「好きな色」と
「たくさん使う色」は別。
04 / REPETITION
色を、離れた場所で繰り返す。
黄色の総面積を保って、1つの丸から4つの丸へ。
目が集まる感じ、散らばる感じを比べてみよう。
4つの丸は、1つの丸の半径の1/2。合計面積は同じ。
色の量だけでなく、
置く場所もデザイン。
YOUR NEXT LITTLE EXPERIMENT正解の配色より、
正解の配色より、
「好き」を再現する手がかり。
このページの配色や割合は、ひとつの制作例。
必ず気持ちよく見える公式ではありません。
ひとつずつ変えると、自分が何を気に入ったのか
見つけやすくなるはず。
01
動きを止めて、白黒にする。
形の境目と、明暗の配置を確かめる。
02
カラーに戻して、差し色を小さくする。
色は同じままで、目が向く場所の変化を観察。
03
気に入ったら、色や図形を保存する。
CSSで配色をコピー、SVGで今の図を保存。次の制作の出発点に。