WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

ホームページ制作において、配色はとても重要な要素のひとつです。
その中でも「差し色」は、視線の誘導や印象づけにおいて大きな役割を担っています。 意識してみないと気付かないのですが、実は、主役を引き立てたり視線を誘導したり全体の色調を引き締めたり豊かにしたりと、デザインにおいて重要なポジションにある要素です。

この差し色は「アクセントカラー」とも言われ、どちらかというとファッションの分野で使われることが多いこともあり、馴染みのない人にはちょっと難しく感じる人もいらっしゃるかもしれません。
「せっかくまとまっているのにわざわざ色を足すなんて本当に必要なの？」とか「なんかセンスが問われそうでちょっと怖い！」など、上級者のテクニックっぽくて手が出しづらいイメージがあるかもしれません。

でも安心してください。 すでに差し色の考え方は、生活の中に浸透しており日常的に触れているものです。主役ではないけれど、全体の印象を引き締め、記憶に残す“ひとさじ”のようなこの差し色についての記事になります。

毎度のことですが個人的主観が多く入りますので、あしからずご了承いただければと思います。

それではどうぞ。

差し色の正体を、生活の中から探ってみる

まずは日常（？）に潜む差し色（とそれに近いアプローチをしているもの）を探ってみましょう。

チャーハンにおける「紅ショウガ」

子供のころはよくわからなかった仕事師としての紅ショウガ。ピリッと赤く、辛味もあるけど、全体の味を引き締めてくれる名脇役です。

チャーハンを食べすすめていくときに、一旦舌をリセットするときや味変に使ったりと本体であるチャーハンをより楽しむためにあり、彩りも豊かになるまさに差し色と同じ役割があります。

ぜんざいにおける塩

見た目は変わらないけどその味を引き立てる例としてぜんざいに加える塩も差し色に近いものと言えるかもしれません。また塩昆布を添える場合も同様の解釈だったります。甘みと塩味は味の対比効果（今検索して学びました：汗）というらしく、スイカに塩も同様の効果を狙ったもののようです。

あの甘さの中に、わずかな塩気を足す。甘味が際立つのはこの“ほんの少しの別のもの”のおかげです。デザインにおける差し色も、まさにこの「ひとつまみ」的ポジションといえるでしょう。また栄養学的にも胃への負担を軽減する役割があるそうです。

ビートルズの謎めいた1曲

ビートルズが発表した曲の中に、ほぼ効果音のみで構成された「Revolution 9」があります。8分21秒に渡る大作でありながら予備知識なしでは意味不明、理解不能で、話声や効果音、逆回転の音などが延々と続くため、スキップされてしまうことがほとんどかもしれません。

しかもこの曲は２枚組アルバムのラスト２曲目に位置し、ラストの曲名が「good night」という、どこまで本気かわからないところも謎めいていて魅力的です。（事あるごとに「意味なんてない」と言ってしまう彼ららしいやりかたでもあります。）

ただこの１曲があるとないとでは、アルバム全体の印象がまるで違うものになります。

アルバム単位で曲順にストーリーを紡いていく感覚、２０２５年現在で体験することが稀かもしれませんが、あえてそこにフォーカスすると全体を引き立てるための対比という手法が、ここにもあるのかもしれないと考えています。

1人だけ見た目がちょっと違うバンドメンバー

拡大解釈としてバンドにいるちょっと雰囲気の違うメンバーがいるのも差し色の方法論に近いかもしれません。（そうでもないかもしれませんが）

例としてあげると、米米CLUBのジェームス小野田さん、BUCK-TICKの今井さん、スピッツの三輪さん、SEKAI NO OWARIのDJ LOVEさんなどなど……全体のビジュアルに“心地よい違和感”を生むことで、かえってそのバンドの世界観が際立たせるのはある意味、差し色の方法論かもしれません。

キャプテン翼における石崎くん

これはもう完全にネタ扱いになりますが、サッカー漫画の金字塔「キャプテン翼」に出てくるキャラクター石崎くんも物語にアクセントを与える差し色的ポジションです。

全てのキャラが必殺シュートを放つなら、パワーのインフレに陥ってしまい話が行き詰ってしまうことは目に見えています。そんな他の選手が超人プレイをする中で、唯一「顔面ブロック」で頑張る石崎くん。彼は小学校時代から活躍する古参キャラでありながら、ストーリーをワンランク盛り上げるカードを持った差し色的要素を持った存在かもしれません。

デザイナー目線で語る差し色のセオリー

話をホームページ制作に戻しましょう。ここからはデザインにおける差し色の使い方についてご紹介します。

1.正攻法は「補色を使う」

差し色を効かせる基本は「補色関係（色相環の反対側の色）」を使うことです。ベースカラーが青ならオレンジ、緑なら赤など、強いコントラストで視線を引きつける。色相環（虹色のドーナッツみたいなもの）をイメージしてすると良いかもしれません。
よくあるのは、白・グレー・黒の落ち着いたデザインの中に、オレンジや明るめの青を一箇所だけ差すパターンです。タイトル部分やリンクボタンなど、視線を誘導したり動きを連想させたり、注目させたりと実にいい仕事をしてくれます。

2.上級者は「近似色」で魅せる

色相環の反対色ではなく近い色を組み合わせると、柔らかくナチュラルな印象になります。ネイビーブルーにターコイズ、ベージュにスモーキーオレンジなど、対比による緊張感をねらうのではなく”微妙に違う”トーンで心地よさを持たせることで全体に奥行きが生まれます。
手堅くまとめるのではなく近似色で豊かさを出す。簡単なようで技術のいることかもしれません。

3.差し色の黄金比は「5%」

ベース70%、サブ25%、アクセント5%という比率が配色の黄金バランスと言われています。わかる範囲で調べたところ、人類の経験値的データよりできた法則らしいですが、差し色は“ほんの少し”が鉄則のようです。かけすぎると途端に全体が騒がしくなってしまいます。差し色がありすぎるとどうなってしまうのかを次のセクションで例えてみます。

差し色は“ひとふり”が粋

ウナギにおける山椒にならう

香りも風味も強い山椒は、ウナギの蒲焼きにおける甘いタレと脂をキリッと締めてくれますが、かけすぎるとせっかくのうなぎが山椒の味に支配されてします。
「串打ち三年、裂き八年、焼き一生」という職人さんが丹精込めて仕上げた逸品を楽しむためにも量の調節が大切です。差し色もこれと同じで、効果的に効かせるには、ちょうどよい差し加減である“量のコントロール”が肝になります。

差しすぎは、対比を越えていく

差し色をもっともっと強く、激しく使っていくと、それはもう対比による絶妙なバランスを持った”調和”ではなく、意図とはかけ離れ崩壊したさきにある“過剰”へと一人歩きしていきます。
対比を越えて過剰を楽しむ領域、いわば激辛料理の世界に通ずる方法論です。美味しさもありますが味のバランスではなくむしろ「刺激そのもの」を楽しむ領域です。

まとめ

今回は差し色についてデザイン以外のジャンルを巻き込みながらご紹介しました。
差し色は、デザインを「まとめる」ためではなく、対比させれものを取り入れてより引き立たせるためにあります。また差し色は、必ずしも使う必要はなくあくまでデザインにおけるテクニックの一つです。

今回の記事がホームページ制作におけるデザインをより深く理解できる参考になればうれしいです。