公式LINEの構築や運用に慣れてくると、リッチメニューや配信バナーのデザインにこだわりたくなりますよね。
「よし、今回はクライアント企業のロゴに合わせて、パキッと目立つ黄色をさし色に作るぞ！」
そう意気込んで、Illustrator（イラレ）の画面に向かって何時間もかけて最高のデザインを完成させたあなた。大満足の出来栄えに胸を張って、確認のために自分のスマホへデータを送ってみました。
すると、どうでしょう。
スマホの画面に映し出されたのは、あなたが作ったはずの鮮やかな黄色ではなく、なんだか泥が混ざったような、どんよりと濁った「くすんだ黄色」。
「えっ……嘘でしょ？画面と全然色が違う……！」
今回は、この「スマホで見ると色が濁ってくすんでしまう怪奇現象」の理由と、クライアントのブランド世界観を崩壊させないための正しい解決策を、現場の視点から分かりやすく解説しますね。
目次
なぜ、パソコンのイラレ画面で作っていた綺麗な色が、スマホに持ってきた瞬間、ドカンとくすんで濁ってしまうのでしょうか？
結論から言うと、原因は「RGB」と「CMYK」という、カラーモードの設定ミスにあります。この2つは、そもそも生きている世界が全く違うのです。
RGBは、レッド・グリーン・ブルーの3色の「光」を掛け合わせて色を作ります。こちらは暗闇の中でスポットライトを重ねていくイメージで、光を混ぜれば混ぜるほど、色は明るく鮮やかになっていきます。スマホやパソコンのモニターなど、デジタル画面で表現される色はすべてこのRGBです。LINEは100％、ユーザーがスマホの画面で見るものなので、このRGBの世界で作るのが大原則です。
一方でCMYKは、シアン・マゼンタ・イエロー・ブラックの4色のインクを混ぜ合わせて色を作ります。小学校の図工の時間、絵の具を混ぜれば混ぜるほど、色がどんどん暗く、濁っていったのを覚えていますか？あのイメージです。光の世界に比べて、表現できる色の鮮やかさの範囲（色域）がガクンと狭くなってしまいます。
もし、LINE用のデザインなのに、間違えて印刷用のCMYKモードの部屋でデザインを作ってしまうと、大変なことが起きます。
あなたがいくらRGBのような鮮やかな黄色を指定したつもりでも、CMYKの部屋の中では「そんな光の鮮やかな色は、インクでは表現できません！」と強制的に色が濁らされ、くすんだ色に変えられてしまうのです。
大切なクライアント企業のブランドカラー（ロゴの色など）が、公式LINEを開いた瞬間にどんより濁っていたら、せっかくの洗練された世界観も台無しになってしまいますよね。プロとして、デザインの見た目を整える前に、まずは「画面用のRGBの世界」で正しく部屋を設定することが何よりも大切です。
▼上：カラーモードCMYKで作成した黄色（illustrator上での見え方）/ 下：実際に書き出した画像
色は変更していませんが、かなりくすんで見えます。
「もうCMYKのままで作り始めちゃったから、色がくすんで濁っているんだ……！」と焦っているあなた、大丈夫です。今からでも間に合う救済処置と、これから迷わないための正しい設定方法をお伝えしますね。
イラレを開いて「新規ドキュメント」を作成するとき、必ず右側の詳細設定を確認してください。カラーモードという項目が、デフォルトでCMYKになっていたら、そこをポチッと「RGBカラー」に変更しましょう。これだけで、WebやLINEに最適な、鮮やかな光の部屋が完成します。
すでにデザインを作り込んでしまっている場合は、イラレの上のメニューバーから以下のように進んでください。
[ファイル] ＞ [ドキュメントのカラーモード] ＞ [RGBカラー] にチェックを入れる。
これで、ドキュメント全体の部屋がRGBに切り替わります。
ここで1つだけ、気をつけてほしいポイントがあります。
途中でCMYKからRGBに部屋を切り替えても、一度CMYKの世界で濁ってくすんでしまった色が、自動で100％元通りの鮮やかな色に復活するわけではありません。部屋はRGBに変わりましたが、塗られている色自体のデータは、くすんだ状態のままキープされてしまうのです。
そのため、RGBに切り替えた後は、必ずもう一度カラーパネルを開いて、カラーピッカーで色味を再調整してあげてください。スマホで綺麗に見える、本来のみずみずしく鮮やかな色に手動で戻してあげるのが、失敗を防ぐための大切なひと手間です。
カラーモードをRGBに設定したからといって、そこで安心しきってはいけません。実は、もうひとつ知っておくべき罠があります。それは、パソコンのモニターとスマホの画面では、色の見え方が全く違うということです。
高価で高性能なパソコンの画面で見ている色と、ユーザーが日常的に使っているiPhoneやAndroidの画面で見ている色は、液晶の性質が違うためどうしてもズレが生じます。
そこで、クライアントにデザインを提出する前に、現場で必ず行ってほしいルーティンが実機確認です。これをやるだけで、色味のトラブルは100％防げるようになりますよ。手順はとっても簡単です。
デザインが完全に完成してから確認するのではなく、全体のレイアウトや色付けが終わった段階（5割から7割ほど進んだ状態）で、一度JPGやPNG形式で画像を書き出します。
書き出した画像を、自分のデモアカウントに設置して実際に確認してみましょう。このとき、文字の大きさや余白感も確認しておくとこの後の調整がスムーズになります。
スマホで画像を確認しながら、「あ、思ったより背景のグレーが薄くて文字が読みにくいな」「この水色、スマホで見るとちょっと緑っぽく濁って見えるから、イラレ側でもう少し青みを足そう」といった微調整を行います。
パソコンのモニターを過信せず、ユーザーと同じ環境（スマホのLINE画面）でどう見えているかを常に意識すること。このひと手間を惜しまない丁寧さこそが、クライアントの信頼を勝ち取るデザイナーになるための大切なポイントです。
今回は、公式LINEのデザインで絶対にやってはいけないカラーモードの罠と、その解決策についてお話ししました。
「イラレで作っていたのに、スマホで見たら色がくすんで濁ってしまった……」
その原因は、画面用のRGBではなく、表現できる色の範囲が狭い印刷用のCMYKモードで画像を作ってしまっていたことにありました。LINEのデザインを作るときは、最初から最後までRGBモードの世界で進めること。そして、途中で必ず自分のスマホを使って実機確認をすること。この2つを徹底すれば、もう色が濁る大失敗に怯える必要はありません。
デザインは、アカウントを訪れてくれるユーザーへの大切なおもてなしです。親しみやすさや魅力的な世界観を正しく伝えるためにも、正しいカラーモードの選択は欠かせません。
最初は設定のチェックに慣れないかもしれませんが、一度覚えてしまえばなんてことはありません。まずは今作っているデータの左上のタブを見て、CMYKになっていないかチェックすることから始めてみてくださいね。
あなたの作るデザインが、たくさんのユーザーに届くのを応援しています！
