「トンマナ」という言葉をご存じでしょうか?
トーン&マナーの略称で、デザインや文章における「雰囲気や世界観の一貫性」を意味し、ロゴ・Webサイト・SNSで使われている「色」「フォント」「デザインのテイスト」が挙げられます。
たとえば、以下のような「赤と黄色」という色の組み合わせを見たとき、多くの人が無意識にマクドナルドを思い浮かべるのではないでしょうか。

この2色は、マクドナルドで使われています。
ポテトのパッケージに書かれた、赤地に黄色のMが印象的です。
人は文字を読む前に、まず色や形を数秒で認識します。
だからこそ、ロゴ・SNS・Webサイトの「色やトーン」が統一されていると、ユーザーは迷うことなく「あのブランドだ!」と認知でき、自然と親近感や安心感を抱くようになります。
逆に、SNSとWebサイトで色がバラバラだと、その「パッと見て直感的に伝わる効果」が失われ、ユーザーに混乱を与えてしまいます。
これが、マーケティングにおいてトンマナが重要視される大きな理由です。
今回、ロゴとサイトのメインカラーが異なったWebサイトのリニューアルのお手伝いをさせていただきました。
このリニューアル例を元に、トンマナの整え方のポイントを紹介します。
ロゴとWebサイトのメインカラーが異なっていた事例
私がWebサイトのリニューアルをお手伝いしたのが、郡上市白鳥町にある「AORAKI」という貸し切りキャンプ場。
元々のWebサイトで気になったのが、ロゴとサイトのメインカラーが異なっていたことでした。


ロゴはブルー系、Webサイトはグリーン系をメインカラーとした構成でした。
Webサイトはとても綺麗に作られていたのですが、ロゴから受ける色の印象とWebサイトのメインカラーが異なっていたため、Webサイトを一新しました。

ロゴと同一色を背景に使い、統一感を持たせました。
また、キャンプ場の自然を意識してアクセントカラーには落ち着いたグリーン系を使い、見てほしい部分が目立つ構成を心がけました。
▼AORAKI公式サイト▼
https://camp-site-aoraki.com/
トンマナの整え方のポイント
WebサイトやSNSのトンマナを整えるといっても、ただ「おしゃれにする」だけでは意味がありません。大切なのは、「ブランドの世界観をブレずにユーザーへ届けること」です。
プロにデザインを依頼する場合でも、事前に次の3つのポイントを押さえておくことで、デザインのズレを劇的に防ぐことができます。
ロゴの「色」と「世界観」を基準にする
ロゴはブランドの顔であり、一番最初に決めたコンセプトが詰まっている場所です。
まずはロゴに使われている色を基準にして、WebサイトやSNSのメインカラーを決定しましょう。
ロゴとサイトのテーマカラーが揃うだけで、一気に統一感とプロっぽさが生まれます。
「メインカラー」と「アクセントカラー」の役割を分ける
色をたくさん使いすぎると、トンマナが散らかってしまいます。
基本的には、ベースとなる色ロゴと同系色などに加えて、全体を引き締める役割を果たす「アクセントカラー」を1〜2色に絞って設定するのがコツです。
「カラーコード」や「参考画像」で視覚的に共有する
「おしゃれに」「ナチュラルに」といった言葉のニュアンスは、人によって受け取り方が異なります。
デザインを依頼したり社内で共有したりする際は、カラーコード(#ffffffなどの色番号)を明記したり、理想に近い参考画像(Instagramや既存サイト)を添えて「この世界観に合わせたい」と伝えると、認識のギャップがなくなります。
トンマナを揃えることが「信頼」を生む
トンマナを整える作業は、単に見た目をキレイにするだけではありません。
どこから見ても「あのブランドだ」と一目でわかる世界観を作ることが、ユーザーに安心感を与え、最終的な「予約」や「お問い合わせ」という成果に繋がっていきます。
唯一無二の世界観を作り、お客様から指名されるサービスを目指しましょう。