「スマホでは綺麗だったのに…」納品後に後悔しないための色の裏話

記事
デザイン・イラスト
こんばんは!
今日一つ目の投稿の「色彩心理」はいかがでしたか?
二つ目は、デザインの現場で実は一番「あちゃ〜!」となりやすい、
色にまつわる2つの落とし穴について深掘りしてお話ししますね。

これを知っているだけで、
皆さんのデザイン選びの失敗はグンと減るはずです!




1. 画面の色と紙の色、実は「住んでいる世界」が違います


ココナラでバナーやロゴを作った後、
「これ、チラシにも印刷して配ろう!」と思うこと、ありますよね。
そこで皆さんに驚かれるのが、
「スマホで見ていた時より、色が沈んで見える…」という現象です。

これ、実はデザイナーのミスではなく、
WEBで表示される色と印刷物の色では
根本的な「色の仕組み」が違うんです。

▼PCやタブレット、スマホなどのWEB画面(RGB
Red(赤)、Green(緑)Blue(青)の
3色の「光」を混ぜて色を作っています。
だから、蛍光色のようなピカピカした鮮やかな色が得意です。

▼印刷物(CMYK
Cyan(シアン)、Magenta(マゼンタ)、Yellow(イエロー)、Key plate(キープレート=黒)の4色の「インク」を混ぜて色を作ります。
自宅や職場にプリンターがある方はインクの色はなじみがあるかもしれませんね。
光を放たない分、どうしても画面より表現できる色の範囲が狭くなってしまうんです。

特に、鮮やかな青空のようなブルー、ピンク、黄緑などは、印刷すると少しだけ「くすんだ」感じになりがち。
また、繊細なグラデーションも、印刷機によっては階段状に色が割れてしまうこともあります。

なので、
そのまま転用したい気持ちはめちゃくちゃわかりますが、
「WEB用の画像をそのまま印刷に回す」のはちょっと待って!なんです。

デザイナーの使うツールは様々ありますが、
この部分を理解している人は
WEB用制作後に印刷もしたいとお客様が申し出てくださる可能性も考慮して
初めから困らないようツールを選んで制作しています。

お客様自身が印刷する場合も
ここを知らずにうっかり通ってしまうと、
手元に印刷物が届いた時に「思ってたのと違う…」と悲しい思いをしてしまうので、ぜひ覚えておいてほしいです。




2. 「おしゃれ」は「読みやすさ」に勝てません(本当です)


デザインの仕事をしていると、たまに
「薄いグレーの背景に、白くて細い文字」のサイトを見かけます。
確かに、シュッとしていて、ものすごくおしゃれに見えます。

でも……正直に言います。めちゃくちゃ読みにくいと思うのです!(笑)

これ、デザイン業界では「背景と文字の明度差(コントラスト)」の問題と呼びます。
特に今の時代、お客様は「太陽の下」でスマホを見ているかもしれません。
画面に光が反射している状態で、
背景と文字の明るさの差=コントラストの弱い文字を読むのは至難の業。

どんなに良いことを書いていても、読んでもらえなければ存在しないのと同じです。
背景と文字の色の差をパキッとつけることは、
単なる技術ではなく、見てくれる方への「優しさ」であり「おもてなし」なんです。

「自分の色、大丈夫かな?」
「自分のサイトの色、おしゃれだけど読みにくいかも…」

と不安になったら、客観的にチェックしてくれる便利な味方がいます。

▼Adobe Color(アクセシビリティツール)
これ、私も愛用している無料ツールです!
背景の色と文字の色を入力するだけで、誰にとっても読みやすい組み合わせかどうかを「A〜AAA」というランクで判定してくれます。

他にも似た機能を持つツールが多く存在していて、
ツールによっては色盲の方や高齢の方など見え方に考慮したデータを出してくれるものもあります。

★ちなみに、自分が見ているサイト上の色味を調べたい場合、
『色の番号(カラーコード)』が必要です。
そんなのわからないよ!という方、ご安心ください。
そんな時に使える、プロもこっそり(?)使っている裏ワザを教えちゃいます。




~プロの裏ワザ~Chromeの「スポイト」で色を盗んじゃおう
もしパソコンでGoogle Chromeを使っているなら、
拡張機能などを入れなくても、標準機能の「検証」でページ内の色を調べられます。

「検証」って何?壊しちゃわない?

右クリックをして一番下にある「検証」というボタン。
これを押すと、画面の右側(または下側)に英語や数字がビッシリ並んだ、
まるで映画のハッカーが出てきそうな画面が現れます。

「えっ、なんか変なところ触っちゃった!?」
「自分のサイトが壊れた!?」と焦るかもしれませんが、
100%大丈夫なので安心してくださいね!

この画面は、サイトの裏側の「設計図」を一時的に覗き見しているだけ。
ここで何をしても、実際のサイトが壊れたり、データが消えたりすることはありません。

!戻りたくなったら!
英語の画面の右上にある「×」ボタンを押すだけ。
リロード(更新ボタンを押す)すれば、万が一表示が変になっても、
ページを読み込み直せば元通り。

いわば「魔法の虫眼鏡」を持っているようなものだと思って、
リラックスして触ってみてください。


「やり方はわかったけど、やっぱり自分でやるのは面倒だな…」
「判定は良かったけど、もっとおしゃれな組み合わせを提案してほしい!」
そんな時は、迷わず私を頼ってくださいね。




サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら