1. 在宅起業後の裏話ラジオ
  2. 図解の配色で悩む場合の解決策..
2025-06-10 11:01

図解の配色で悩む場合の解決策:70:25:5の法則

【今回の放送概要】
図解の配色で悩む場合の解決策::5の法則
・配色は3色くらいに抑えるのがベター
:5の法則を抑えておくとよい
・ベースから―、メインカラー、アクセントカラー
・最低限トーンを揃えておけば違和感が減る
・クライアントのトンマナに合わせるのが●

…─…─…─…─…─…─…─…─…─…─…─…
この番組では、東京での会社員生活を辞めて一転、兵庫県は淡路島に移住したこばやしが、個人でできる小さくても自分らしい働き方について、日常の中の気づきやナリワイづくりのヒントをお届けします。

大きなリスクを取るのはちょっと怖い…
でも何か自分に合ったことを始めたい。

そんなあなたに寄り添いながら、無理なく、楽しく、自分だけの仕事を作っていく方法を一緒に考えていきたいなと思います。
わたしの経験や失敗談、(たまにはゲストとのおしゃべりを通じて)「小さくてもいいからやってみる」を応援するラジオです。

話し手は東京から淡路島に家族で移住
現在はライターをしたりデザインをしたり
在宅・個人事業主として働いているこばやしです。

主な配信内容は
✔個人でできる小さくても自分らしい働き方の考え方
✔Webライターやデザインの仕事で飯を食うノウハウ・営業術
✔地方×在宅×起業のキャリア作り
…─…─…─…─…─…─…─…─…─…─…─…

▼X(旧Twitter)はこちら
https://twitter.com/koba_iju/

▼note(コラム書いたり)
https://note.com/kobadanna

▼最近のお仕事はこちら
https://kobayashibase.com/works/

▼【電子書籍】地方移住の進め方解説本(Kindle)
https://amzn.to/33YDRgj


#Webライター #在宅ワーク #副業 #兼業 # #田舎暮らし #淡路島移住 #地方移住 #脱サラ #SEOライティング #島暮らし #自然のある暮らし #古民家 #古民家暮らし #子育て #パラレルキャリア #テレワーク #リモートワーク #起業 #BtoB #子育て世代 #フリーランス #地域おこし協力隊 #田舎 #田舎生活 #限界集落 #ブロガー #レター募集中 #移住 #ゆるっと雑談 #トーク雑談 #働き方改革 #音声配信 #ポッドキャスト #勉強
地方移住の経験談と移住後の稼ぎ方を発信中!

WEB⇛https://iju-kobayashike.com/

https://listen.style/p/koba_iju?gQRKsiDc
https://stand.fm/channels/5ffa5601fc3475e2c8593028

Summary

図解の配色についての悩みを解消する方法として、70対25対5の法則や色のトーンの重要性が紹介されています。具体的には、ベースカラー、メインカラー、アクセントカラーの使用法や配色の調和を考慮し、クライアントのニーズに合わせた配色の選択が強調されています。

図解の配色の基本
おはようございます。ライターをしたりデザインをしたり、在宅個人事業主として働いているこばやしです。
今日は、前日開催した図解の講座の中で、質問があって、図解の配色ですね。
どういったロジックで設定しているのかな、みたいなところの質問があったので、
僕もその場で解答できなかったので、追加で解答していこうかなと思います。
ただ、音声だとなかなかわかりにくいので、これもゆくゆくノートとかに写真とかも織り混ぜながら解説したいなと思います。
先に音声で言語化したいなと思います。
今回、図解の配色で悩む場合の解決方法ということで、
70対25対5の法則だったり、77対3対1ぐらいの法則みたいな、いろいろ言いがわれ方がたくさんあるみたいなんですけど、
配色の比率っていうところをまず抑えるのがいいかなということで、
それの周辺の話についても進めていきたいなと思います。
図解だけじゃないんですけど、デザイン系の話全般で言うと、
基本的には配色はあまり多くない方がごちゃつかないのでいいかなと思います。
基本的には3色くらいに抑えておくのがいいかなと思いますね。
ここで70対25対5の法則みたいなものが登場するっていう感じですね。
どういうことかというと、配色を3つに抑えるというのは、
例えばベースカラーと呼ばれるもの、そしてメインカラーと呼ばれるもの、
そしてアクセントカラーと呼ばれるもの、3つ登場してきたりもするんですけど、
そこで色をどう分けていくのかっていうのを考えるのはこの配色になりますね。
想像してほしいのは、例えばスライド1枚あって、
そこに何か図解が載っかるみたいな感じなのを想像してほしいんですけど、
よくあるベースカラーはやっぱり白とか淡いグレーとか、
一番紙面上でよく使われるようなもの、白がベースカラーになったりすると思います。
ちょっと白黒判定する場合もあったりするんですけど、
だいたいベースカラーは白が多いですかね。
これが7割ぐらい使われる紙面上で表現されるという感じかな。
そこにメインの図形とかがちょっと入ってくるようであれば、
それが青だったり、グリーンだったり、黄色だったりとか色々あると思うんですけど、
それがメインカラーになりますよね。
そこにやっぱり5%ぐらいの差し色というか、アクセントカラーと呼ばれるものが入ってきていて、
大事なところを強調したりとかするのにこのアクセントカラーを用いるみたいな感じで、
この3つですね。ベースカラー、メインカラー、アクセントカラーというものが配色としては定められれば、
図解としては結構まとまり、図解としてというか、ごちゃつかない配色になるかなという感じですかね。
トーンと配色の調和
配色の時にごちゃつかないというか、違和感が少なくなるようにするためには、
よく同型色で揃えてみようみたいなのもあったりしますかね。
ベースカラーが白であれば、メインカラーは、例えば青にした時にアクセントカラーをどうするかというと、
メインカラーが濃いめの青なのであれば、青系の明るい水色っぽいものにする、
ちょっと近いもの、同型色でまとめるパターンがあったりとか、
または思い切って反対色と言ったりするんだったっけな、
名前の故障は忘れちゃったんですけど、青のメインカラーに対して黄色のアクセントカラーにするみたいな、
反対色って、色の対比が目立つようなものがあるんですけど、
そこに合わせて黄色系にしてアクセントカラーに持っていくとか、
ああいうやり方もありますかね、同型色か反対色かみたいな感じ。
中途半端に濃いめの青に濃いめの緑を合わせちゃうと、見にくかったりとかメリハリがつかなかったりするので、
こういうのはあまりいけてないかなっていう感じですかね。
あとは、配色のそのものもそうなんですけども、
ちょっと音声ながら伝えにくいんですけど、色のトーンを揃えておくっていうことも結構重要です。
トーンってなんやねんって話なんですけど、
例えば、パステルカラーと呼ばれるものだったりとか、
くすみ系のちょっと落ち着いた色系とか、
その赤、青、黄色とかって色そのものではなくて、
全体のトーン、ちょっと落ち着いてるとか、もしくは蛍光色みたいな、
蛍光ピンクとか蛍光の黄色とか蛍光の青とかって結構あると思うんですけども、
そういうもののトーンを揃えておくと、
図解としても見やすくなるっていう感じかな。
デザインの基礎的なところなんですけど。
トーンがバラバラだとどうなるかというと、
めちゃめちゃ蛍光色の黄色使ってるのに、
そこにめちゃめちゃ落ち着いたパステルみたいな、
くすみ、ブルーみたいなのをちょっと合わせてしまうと、
そのトーンが合ってないので、なんか違和感が出ちゃう。
ちょっと感覚的な話では恐縮なんですけど、
違和感が出ちゃうっていう感じなんですよね。
なので、色自体は同じ色。
色相が一緒って言い方でやってるのかな。
なんか調和が取りやすく、青に水色に白みたいな、
そういうもので合わせていたりとか、
類似色って言ったりするんですけど、
お隣、緑の隣って黄色だったり黄緑だったりするので、
そういうものと合わせていたりとか、
あとアクセントカラー、補色って言ったりするのかな。
全然反対側の色、青であれば黄色だし、
っていうような感じの、
そういう配色にするっていうことと、
あとはトーンを合わせて配色をする。
色調ですかね。トーンは色調かな。
薄系だったり、ビミッド、鮮やか系なものは、
なるべく両立というか、
どっちも使うようなことはせずに、
クライアントワークにおける配色
合わせておくっていうのがポイントかなと思います。
実際のクライアントワークだと、
クライアントさんありきで図解を作るので、
この辺りはメディアのトンマナに合わせる。
SEO記事に挿入するのであれば、
だいたいウェブメディアの配色ってあるじゃないですか。
黒系、ボタンがアクセントカラーになっていて、
ベースカラーが白なのかグレーなのかベージュなのかって決まっていて、
グローバルメニューとかがメインカラーになっている、
黒っぽいみたいな感じで決まっていたりすると思うので、
そこの配色をカラーピッカー拡張機能とかを使って、
組み取ってそこにある程度合わせていくような感じがいいかなと思います。
アンミカじゃないんですけどね。
白って二役色あんねんみたいな感じで、
カラーピッカーで合わせてあげたほうがいいかなと思いますね。
あとは全くなんでもいいですって言われた場合は、
配色ツールを使って参考になる配色を提案するのがいいかなと思います。
デザインって説明できないと本当は良くなくて、
なんとなく青にしましただとちょっとあんまり良くなくて、
例えばコーポレートカラーに合わせましたが、
一応メディアのトンマナに合わせましたっていう論拠になるので、
それはもちろんOKなんですけど、
例えば新規にメディアを立ち上げたいとか、
図解自体は新しいテイストで配色はしたいんですって言われた時には、
やっぱり色を選ぶ時に色自体にも色から受ける印象っていうのが結構あって、
例えば青のちょっと落ち着いてる系だったら知的に見えるとか、
オレンジとかだと元気に見えるとか、
赤だと情熱的みたいな、
一応色によっての感情みたいなイメージがあったりするので、
やっぱりそういうところをクライアントさんの思いだったりとか、
メディアの与えたい印象みたいなものだったりとか、
配色の組み合わせによっても、
なぜこの配色にできたのかっていうのを説明できるように、
自分の中でだけでもいいので、
クライアントさんに説明できるように配色のイメージを付けてあげると良いのかなと思いますね。
この領域まで至ってくると結構デザイナーっぽい感覚になってきたりするので、
ぶっちゃけ僕がノンデザイナーに近いので、
そこまでは別に求めないと思います。
求めないというか、ライター向けにデザインだったり図解っていうのをやるにあたっては、
そこまではいらないけど、そこまでできたらなお差別化になるよねっていうぐらいの程度かなと思いますので、
図解の配色を結構悩む場合もあったりもするし、
若干のセンスみたいなのもあったりするので、
あそこは無駄に配色ツールを使ってみたりとか、
クライアントさんの本物に合わせるっていうのが最低限できたら問題ないかなと思うので、
そういう感じでやってみるといいのかなというふうに思います。
ちょっと音声だとわかりにくいと思うので、またこれもノートとかに書き起こしたいなというふうに思います。
ではでは、失礼いたします。
11:01

Comments

Scroll