名刺やチラシと、ホームページの色が違って見える

1. 「名刺の緑と、サイトの緑が違うと言われまして」

中小企業の経営者の方とお話していて、こんな言葉を聞くことがあります。

「取引先に、名刺とホームページで色が違いますねと言われたんです。どちらも同じ緑で作ってもらったはずなんですが。どちらかが間違っているんでしょうか」

これは、たいていの場合、どちらも間違っていません。紙と画面では、色の出し方そのものが違うからです。同じ「緑」を指定しても、インクで刷った緑と、光で映した緑は、同じには見えないことがあります。

ただ、だからといって放っておいてよいわけではありません。並べて見たときに別の会社のように見えるほど離れていれば、それは直したほうがいい状態です。違って見える理由を知っておくと、どこまで揃えればいいかが決められます。

この記事で書くこと

• 紙と画面で、色の出し方がどう違うのか
• 画面どうしでも、同じ色に見えない理由
• 会社の色を「印刷用」と「画面用」の両方で控える方法
• ロゴのデータを、形式ごとに持っておくこと
• 完全に一致させるより、「同じ会社に見える」を目指す考え方
• 色の控えを、制作会社や印刷会社に渡すこと

会社の色そのものをどう決めるかは ホームページの色と書体を、どう決めるか に、社名や住所の表記を名刺とサイトで揃える話は ホームページと名刺・封筒で、書いてあることが違う に書きました。この記事は、決まった色を、紙と画面の両方で同じ会社の色に見せるための話です。

2. 紙と画面では、色の作り方が違う

まず、なぜ違って見えるのかを押さえておきます。ここが分かると、あとの話がすっと入ります。

画面は、光を混ぜて色を作る

スマートフォンやパソコンの画面は、赤・緑・青の3色の光を混ぜて色を作っています。3色を強く光らせるほど明るくなり、全部を最大にすると白になります。この仕組みを、3色の頭文字をとって「RGB」と呼びます。

画面は自分で光っているので、鮮やかな色や明るい色が出しやすいのが特徴です。蛍光色に近い緑や、澄んだ青も、画面ならそのまま映せます。

紙は、インクを重ねて色を作る

一方、名刺やチラシは、水色・赤紫・黄色・黒の4色のインクを重ねて色を作るのが一般的です。こちらは4色の頭文字などをとって「CMYK」と呼ばれます。インクを重ねるほど暗くなり、紙そのものの白が、いちばん明るい色になります。

紙は自分では光りません。部屋の明かりや日の光を跳ね返して、色が見えています。そのため、画面で出せる鮮やかさの一部は、インクでは出せません。画面で見て気に入った明るい緑が、刷り上がると少しくすんで見えるのは、このためです。

同じ紙の上でも、変わる

紙の側にも、色を変える要素があります。

• 紙の種類 ― つやのある紙は色がくっきり出て、つやの無い紙や再生紙は、やわらかく沈んで見えます
• 紙の白さ ― 少し黄みのある紙だと、青や緑がわずかに黄色に寄ります
• 見る場所の明かり ― 蛍光灯の下、電球色の照明の下、窓際の日の光で、同じ名刺でも色みが変わります

3. 画面どうしでも、同じ色には見えない

紙と画面の違いだけではありません。画面と画面のあいだでも、色の見え方は揃いません。ここは、ホームページを作る側でもどうにもできない部分です。

機種によって、色の出方が違う

スマートフォン、パソコン、タブレット。それぞれ画面の作りが違うので、同じページを映しても色が少しずつ違います。鮮やかに見せる機種もあれば、落ち着いた色に寄せる機種もあります。

見る人の設定でも、変わる

見る人の側の設定も効きます。

• 画面の明るさ ― 明るさを落としていると、薄い色の違いが見分けにくくなります
• 夜間の設定 ― 目に優しくするために画面を黄色っぽくする設定を使っていると、青や緑の色みが変わります
• 画面を暗い色にする設定 ― 背景を黒くする設定にしていると、ページによっては色の組み合わせ自体が変わって見えます
• 外の光 ― 屋外の日差しの下では、画面の色はかなり白っぽく見えます

社長のスマートフォン1台で、決めない

ここから言えるのは、1台の画面で色の良し悪しを決めないということです。社長のスマートフォンでちょうどよく見えても、社員のスマートフォンでは派手すぎる、ということは珍しくありません。

色を確かめるときは、社内の何人かのスマートフォンと、事務所のパソコンで同じページを開いて見比べてください。違う画面での見え方の確かめ方は 自社のホームページを、いつもと違う画面で見てみる にまとめてあります。画面ごとに違って当たり前、という前提に立つと、どこまで揃えるかの判断がしやすくなります。

4. 会社の色を「印刷用」と「画面用」の両方で控える

ここからが本題です。会社の色を、2つの形で書き残しておきます。

画面用は、#から始まる6桁

画面で使う色は、「#」から始まる6桁の英数字で指定するのが一般的です。カラーコードと呼ばれます。たとえば「#2E7D4F」のように、0〜9の数字とA〜Fの英字の組み合わせで1色が決まります。ホームページの制作では、この番号で色を指定します。

赤・緑・青の強さを3つの数字で書く方法もありますが、控えには6桁の番号を書いておけば、たいていの制作会社に通じます。

印刷用は、4つのインクの割合

印刷で使う色は、4色のインクをそれぞれ何パーセント使うかで書きます。たとえば「水色80・赤紫20・黄色90・黒10」のように、4つの数字の組み合わせです。名刺やチラシを刷った印刷会社には、この形で色が残っていることが多いです。

決まった1色のインクで刷る方法もある

もう1つ、知っておくとよい言葉があります。特色です。4色を重ねて色を作るのではなく、あらかじめ調合した1色のインクで刷る方法です。印刷会社が使っている色見本の番号で指定します。

看板やロゴの色にこだわりがある会社は、名刺や封筒を特色で刷っていることがあります。特色は4色の重ね刷りより色が安定しやすい反面、画面にそのまま持ってくることはできません。特色で刷っている会社は、その番号も控えに書いておいてください。

数字が手元に無いときの、探し方

「そんな数字は、どこにも無い」という会社も多いと思います。探す先は、だいたい次のとおりです。

• 名刺や封筒を刷った印刷会社 ― 入稿したデータが残っていれば、印刷用の数字が分かります
• ロゴを作ったデザイナー ― 使い方の決まりを書いた資料に、両方の数字が載っていることがあります
• 看板や車両を作った会社 ― 看板用に指定した色の番号が残っていることがあります
• 今のホームページを作った制作会社 ― サイトで使っている画面用の番号が分かります

どこにも残っていなければ、実物から決め直します。画面用は、名刺の実物を横に置いて、画面で見比べながら番号を決めます。印刷用は、次に刷るときに印刷会社へ名刺の実物を渡して、合わせてもらいます。片方の数字を計算で置き換えるより、実物を見て合わせるほうが、ずれが小さく済みます。

5. ロゴのデータを、形式ごとに持つ

色と同じことが、ロゴのデータにも起きます。同じロゴでも、画面用のデータと印刷用のデータは中身が違います。

画面用のデータを印刷に回すと、色も形も崩れる

ホームページに載っているロゴの画像は、画面用に作られています。中の色は光の色で書かれていて、大きさも画面にちょうどいい分しかありません。

これを名刺やチラシの入稿に使うと、2つのことが起きます。色がインクの色に置き換えられて、くすむことと、拡大したときに輪郭がぎざぎざになることです。「サイトから画像を保存して印刷会社に送った」という流れで、色が違う名刺ができあがることがあります。

印刷用のデータをサイトに載せても、うまくいかない

逆もあります。印刷用のデータをそのままホームページに載せると、色が沈んで見えたり、ファイルが重くてページの表示が遅くなったりします。印刷用のデータは、紙にきれいに刷るために作られているので、画面にはそのまま向きません。

持っておく形式

ロゴは、使う場所ごとに次の形式で持っておくと困りません。

• 拡大しても粗くならない元データ ― ベクター形式と呼ばれます。看板や車両、大きなのぼりに使います。印刷用の色で作っておきます
• 印刷会社に渡す用のPDF ― 名刺やチラシの入稿に使います。印刷用の色で作られているかを確かめておきます
• 画面用の、背景が透明な画像 ― ホームページや資料に置くときに使います。PNGという形式が一般的です
• 画面用の、拡大しても粗くならない画像 ― SVGという形式です。ホームページの左上のロゴなど、画面の大きさが変わる場所で使います

ファイル名に「web」「print」のような目印を入れておくと、取り違えが減ります。カラー・黒1色・白抜きといった版の作り分けや、受け取っておくファイルの一覧は ロゴが無い会社の、ホームページ の後半に書いてあります。ブラウザのタブに出る小さなアイコンも、画面用の色で作るものの1つです。作り方は ブラウザのタブに出る小さなアイコンを、どう作るか にまとめました。

6. 完全に一致させるより、「同じ会社に見える」を目指す

ここまで読むと、「では、紙と画面の色を完全に一致させるにはどうすればいいのか」と思われるかもしれません。結論から言うと、完全な一致は目指さなくて大丈夫です。

一致させようとすると、終わらない

第2章と第3章で書いたとおり、紙は紙の種類と明かりで変わり、画面は機種と設定で変わります。どこか1か所で完全に合わせても、別の場所で見ればまたずれます。ぴったり合わせることにこだわると、校正と刷り直しが終わらなくなります。

それに、お客様が名刺とスマートフォンを横に並べて、色を見比べる場面は多くありません。名刺をもらって、あとでサイトを開く。チラシを見て、検索してサイトにたどり着く。見るのは別々のときです。その間をつないでいるのは、細かな色の数字ではなく、「あの会社の色だ」という印象です。

揃えるところと、ずれてもいいところ

では、何が揃っていれば「同じ会社に見える」のか。優先する順に並べます。

• 色み ― 緑なら緑、紺なら紺。緑が青寄りになる、紺が紫寄りになる、という色みのずれは気づかれやすいので、ここをいちばん揃えます
• 明るさ ― 紙の深い緑が、画面で明るい黄緑に見えるほど離れていると、別の色に見えます。大きく離れないようにします
• 使い方 ― どこに会社の色を使い、どこに差し色を使うか。紙とサイトで同じ使い方をしていると、多少色が違っても同じ会社に見えます
• 細かな差 ― わずかな鮮やかさの違いや、紙の種類による沈み方は、気にしすぎなくて構いません

3つ目の「使い方」が、意外と効きます。ロゴの位置、色を敷く場所、写真の雰囲気が揃っていると、色が少し違っても同じ会社として受け取られます。紙とホームページの役割の分け方は 会社案内・チラシとホームページの、役割分担 で整理しています。

確かめ方は、3つ

揃っているかどうかは、次の3つで確かめると判断しやすくなります。

• 昼間の窓際で、名刺とスマートフォンを並べる ― 蛍光灯の下より、色の差が分かりやすくなります
• 社内の何人かの画面で開く ― 1台ではなく、何台かで見て「同じ会社に見えるか」を聞きます
• 次に刷るときは、試し刷りで見る ― 印刷会社に頼めば、本番の前に色を確かめる刷りを出してもらえることがあります。画面と並べて見ます

見比べるときの問いは、「色が同じか」ではなく、「同じ会社のものに見えるか」です。この問いに変えるだけで、判断がずいぶん早くなります。

7. 色の控えを、制作会社や印刷会社に渡す

控えを作ったら、使ってもらわないと意味がありません。最後に、渡し方を書きます。

渡す相手は、思ったより多い

会社の色を使うのは、ホームページの制作会社だけではありません。

• ホームページの制作会社 ― 画面用の番号を使ってもらいます
• 名刺・封筒・チラシの印刷会社 ― 印刷用の数字と、特色の番号を使ってもらいます
• 看板や車両の会社 ― 屋外で使う素材は、紙ともまた色の出方が違います。印刷用の数字と実物の名刺を一緒に渡します
• 作業着や販促品を作る会社 ― 布や樹脂に色をつける場合も、近い色を探してもらう手がかりになります

新しく頼むとき、最初に渡す

渡すのは、見積もりや打ち合わせの最初です。デザインが仕上がってから「色はこれでお願いします」と伝えると、作り直しになることがあります。

渡すときは、次のように一言添えておくと、話が早く進みます。

「会社の色はこの控えのとおりです。紙と画面で完全に同じにならないのは承知しています。合わせきれないところがあれば、どちらに寄せたかを教えてください」

完全に合わないことを、こちらが分かっていると伝えるのがポイントです。相手も、どこを優先して合わせたかを正直に教えてくれやすくなります。

実物を1枚、添える

数字だけでなく、今の名刺やチラシの実物を1枚添えてください。数字は同じでも、刷る会社や紙が違えば色は変わります。実物があると、目指す色がはっきりします。

控えを直す時期

控えは、一度作れば終わりではありません。次のときに見直します。

• ロゴや会社の色を変えたとき ― 新しい色で控えを作り直し、古い控えは「使わない」と分かるようにします
• 印刷会社を変えたとき ― 新しい会社で刷った色が、控えとどれくらい違うかを確かめます
• ホームページを作り直すとき ― 画面用の番号が変わっていないかを確かめます

控えの置き場所は、社名や住所の表記ルールと同じ場所にしておくと探しやすくなります。1枚の紙にまとめる方法は、先ほどの ホームページと名刺・封筒で、書いてあることが違う に書いてあります。

8. 雄喜晃の伴走：名刺の実物を見ながら、画面の色を決めます

私たち雄喜晃のホームページ制作では、画面の色を決めるときに、名刺やチラシの実物を見せていただくところから始めます。紙で使っている色を、画面でどう見せるかを一緒に決めます。

私たちがやること

お打ち合わせで、名刺・封筒・チラシ・看板の写真など、すでに世の中に出ている色を並べて見せていただきます。そのうえで、実物を横に置きながら画面用の色の番号を決め、社内の何台かの画面で見え方を確かめていただきます。ロゴは、印刷用のデータをお持ちであれば、そこから画面用の画像を整えます。決めた画面用の色の番号は、控えとしてお渡しします。印刷用の数字が分かっていれば、同じ控えに並べて書きます。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。月5回までの更新代行も同じ月額の中なので、ロゴや色を変えたときの差し替えも、ご連絡いただければこちらで反映します。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

紙と画面の色を、完全に一致させるお約束はしません。第3章のとおり、見る人の画面によって色は変わるからです。その代わり、同じ会社に見えるところまでは一緒に詰めます。

また、画面で映えるからといって、会社の色をこちらの判断で変えることもしません。名刺や看板で長く使ってきた色は、お客様の記憶に残っている色です。変えるかどうかを決めるのは貴社です。ロゴの作り直しを前提に話を進めることもいたしません。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。「名刺とサイトの色が違うと言われて、どちらを直せばいいか分からない」という方は、一度ご相談ください。

9. まとめ：色は2つの形で持ち、揃えるところを決める

名刺やチラシとホームページで色が違って見えるときに押さえることは、5つです。

• 紙と画面は、色の作り方が違う ― 紙はインクで光を跳ね返し、画面は光そのもので色を作る。同じには見えなくて当たり前です
• 画面どうしでも、色は揃わない ― 機種や設定で変わる。1台の画面で良し悪しを決めない
• 会社の色を、印刷用と画面用の両方で控える ― #から始まる6桁と、4つのインクの割合。特色を使っているならその番号も
• ロゴのデータを、形式ごとに持つ ― 画面用を印刷に、印刷用を画面に、そのまま回さない
• 完全な一致より、同じ会社に見えることを目指す ― 色み、明るさ、使い方を揃え、控えは最初に渡す

色が違って見えるのは、たいていの場合、誰かの失敗ではありません。紙と画面の違いを知ったうえで、どこを揃えるかを決めておけば、名刺もチラシもホームページも、同じ会社のものとして受け取ってもらえます。

まずは今日、手元の名刺を1枚持って、昼間の窓際で自社のホームページと並べてみてください。並べてみて、別の会社のように見えたという方は、一度ご相談ください。