黒はNG？目に優しい色の選び方

• デザインにおいて色の選び方は、メッセージの伝達や視覚的な魅力に直接影響します。
• しかし、色の選択には注意が必要です。
• 「うるさいデザイン」を「優しい配色」にしていくと、メッセージが素直に伝わりやすいなります。

これだけが正解というわけではないです。
「デザインを優しくしたいな」と思ったときの参考になれば。

1. なぜ黒（#000）を避けるべきなのか（基本の文字色）

黒（#000）は、その絶対的な濃さにより、目に負担をかける可能性があります。

特に背景色として白と組み合わせると、コントラストが強くなり、目の疲れや読みづらさを引き起こしやすいです。
また、デザインにおいて黒を多用すると、重たい印象を与えがちです。

そういうときは黒の代わりに「かなり濃い目のグレー（#333）や紺色」を使うと、読みやすさを保ちながらデザインの美しさを保つことができます。

イメージ的には、万年筆のインクの文字が読みやすい感じだね。

2. 色の選び方はデザインの「気持ち」を決める

このように色は、伝えたいメッセージや「気持ち」を乗せる大切な要素です。

例えば、
温かみのある色（赤やオレンジ）は活動的な感情を、
冷たい色（青や緑）は落ち着きや信頼感を表現できます。

2-1. 色数を絞る：ベース、メイン、アクセント

いろんな色を使って目立たせようとして、かえって読みにくくなります。
これは、見る人の「気持ち」がごちゃごちゃと混乱してしまうから。

そのために大切なのは、まず色数を絞ること。
一般的に、3〜4色以内に抑えて作られています。

• 色数を増やしすぎると「目移り」して、情報として認識しにくくなります。
• もちろん、写真やイラストなどで多少違う色が含まれるのは大丈夫。

料理の味付けと一緒だね。

また、選んだ色は「均等には使わない」のもコツ。
メリハリが大事です。

• 70%（ベース：薄め）
• 20~25%（メイン）
• 10~5%（アクセント：濃いめ）

くらいの配分にすると、メッセージが伝わりやすくなります。

服のコーディネートとかと一緒かも。
アクセントは「挿し色」ってことだね。

3. 純色も避けた方がいい（特に赤）

完全な黒と同様に、「純色」も避けた方が良いです。
見ていて疲れるデザインは色の強さが原因で、バランスを崩しやすいです。

とくに赤（#FF0000）は警告色としての印象が強いです。
目立つのですが脳を興奮させて疲れさせるので、使いどころは選びましょう。

たとえば、Canvaの色パレットを見てみると、少し彩度を落としてあります。

柔らかい色を「目に優しい」というように、やや明度や彩度を抑えた色を選ぶようにすると、快適な視覚体験を提供できます。

• 色相は、色の種類（赤、青、黄など）を指します。
• 彩度は、色の鮮やかさや純度を示し、彩度が高いほど色は鮮明になります。
• 明度は、色の明るさを表し、高明度は明るい色、低明度は暗い色を意味します。

3-1. 迷ったら配色サイトをお手本に（Adobe Color）

色使いは一人で悩む必要はありません。
自分が「いいな」と思うチラシで使われている色から、3〜4色のカラーテーマを見つけてみましょう。

あるいは、配色サイトもお手本になります。
Adobe Color では、キーワード検索でいろんな配色が出てくるので参考になります。

そこからちょっとずつ「自分の色」を出していけばよいのです。

3-2. モノクロで仕上がりを確認する

色使いのバランスを評価するコツとして、仕上がりをモノクロ（グレースケール）で確認する方法があります。

もし、派手な色彩に頼って情報を目立たせていると、モノクロにしたときに読みにくくなります。
色どうしの主張が強すぎるのです。

反対に、モノクロにしても伝えたい情報がちゃんと際立っているなら、色のバランスが取れているはずです。

色の選び方一つで、デザインの印象は大きく変わるんだね。

こちらもどうぞ。

[游ゴシック] WindowsとMacに共通で入っているけど注意が必要なフォント

Windows と Macに共通するフォントに、「游明朝体」、「游ゴシック体」があります。ただし、「同じフォント」が入っているといっても、扱いが微妙に異なるので注意が必要です。Windowsでは「游ゴシック」、Macでは「游ゴシック体」というフォント名で、文書ファイルに設定されたフォントがうまく認識されないことがあります。また、Mac の方が文字の太さ（ウェイト）を細かく設定できるため、Windows だと表現し切れないことがあります。それぐらいなら、「源ノ角ゴシック」などの...

chiilabo.com

ポップ体フォントの定番なら？【モッチーポップ と けいふぉんと！】

パソコンで作ったチラシでよく見る「HG創英角ポップ体」。独特の「素人感（手作り感）」で使いやすいのですが、似たフォントで Windows PC 以外でも使えるものはありますか？「HG創英角ポップ体」をフリーフォントで代用したいなら、「モッチーポップ」と「けいふぉんと！」が有力です。実は、多くの漢字はゴシック体からの流用ですが、かな混じり文だとちゃんとポップ体の印象になります。ポップ体のフォントポップ体って ちょっとオシャレ感は薄いけど、縁日とかのチラシだったりするとかえって安...

chiilabo.com

教室のトップページの色数を減らしてみた

教室のトップページを「すっきり」した印象にしようと、白基調にして要素の色数を減らしてみました。枠を目立たなくして、中の背景色を白にしてみました。こちらもどうぞ。（参考）短時間で得られる刺激から距離を置く | Piyopanman

chiilabo.com

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。