トーン&マナーとは?複数の制作物で色の一貫性を保つ考え方

公式サイトとSNSの投稿で、なんだか雰囲気がバラバラ。

そう感じたことはないでしょうか。複数の制作物をまたいだ一貫性を保つ考え方が「トーン&マナー」です。

この記事では、トーン&マナーとは何か、何をどう決めればよいのかを、そのまま使えるメモの例とあわせて初心者向けに解説します。

基本の理解

まずはトーン&マナーとは何か、具体例を交えて押さえましょう。

トーン&マナーとは何か

トーン&マナーとは、Webサイト・広告・SNSなど複数の制作物の間で、雰囲気(トーン)と表現のルール(マナー)を統一するための考え方のことです。

「トンマナ」と略されることが多く、広告やデザインの現場でよく使われる言葉です。

「トーン」と「マナー」を分けて考える

トーン&マナーは、2つの言葉を組み合わせた言葉です。

	意味	例
トーン(Tone)	見た目や言葉から伝わる雰囲気・空気感	明るい、高級感がある、ポップ、シック、誠実
マナー(Manner)	その雰囲気をつくるための具体的なルール・約束事	使う色、フォントの種類、角の丸み、写真の撮り方、言葉遣い

つまり、「どんな雰囲気にするか(トーン)」を決めて、それを実現するための「約束事(マナー)」を守る、というペアの考え方です。

マナーという言葉から「挨拶や礼儀作法」を連想するかもしれませんが、ここでは「表現上のお約束事」という意味で使われています。

また、配色の解説で使う「トーン」は明度と彩度の組み合わせ(色の調子)を指しますが、トーン&マナーの「トーン」は、色に限らず全体から伝わる雰囲気を指す、より広い意味の言葉です(色のトーンについては明度・彩度を使った配色とは?で解説しています)。

たとえば、親しみやすさを大切にするカフェなら、トーンは「温かみがあって親しみやすい」です。

マナーは「ベージュと緑を使う」「丸みのあるフォントと手書き風のイラストを使う」「やわらかい話し言葉で書く」のように決めます。

この組み合わせを守るだけで、メニュー表もSNSの投稿も、同じお店が作ったものだと一目で伝わるようになります。

制作のたびに毎回ゼロから雰囲気を考える必要がなくなり、判断のブレを減らせるという実務上の利点もあります。

なぜトーン&マナーが必要なのか

Webサイト・SNS・広告など、担当者や制作時期が異なる複数の制作物を運用していると、放っておくと雰囲気がバラバラになりやすくなります。

たとえば、オーガニック系カフェのWebサイトはやさしいベージュと緑なのに、Instagramの投稿だけ蛍光ピンクの背景に「超お買い得!!」と派手な文字が並んでいる、という状態です。

Webサイト

季節の野菜ランチ

メニューを見る

Instagram

超お買い得!!

今だけ半額!!

NG:同じお店なのに、別のお店に見える

Webサイト

季節の野菜ランチ

メニューを見る

Instagram

秋の新メニュー

今週から始まりました

OK:SNSは目立たせつつ、色とトーンはサイトと揃えている

見る人からすると、同じお店の発信だと気づきにくく、ブランドの印象も積み上がりません。

色の統一感は1つの制作物の中で色のトーンを揃える話であるのに対し、トーン&マナーは色だけでなくフォント・写真やイラストのテイスト・言葉遣いまでを含めて、複数の制作物・複数の媒体をまたいで統一する、より広い範囲の考え方です。

1つのサイトの中だけで使う場合も間違いではありませんが、本来は「媒体をまたいでも同じブランドだと分かるか」に主眼があります。

トーン&マナーで決めること

ここからは、トーン&マナーとして具体的に何を決めればよいのかを見ていきましょう。

見た目のルール:キーカラー・キーフォント・キービジュアル

見た目のルールとしては、次の3つを決めておくのが基本です。

キーカラー
ブランドを象徴する色です。
HEXカラーコードのような形式で正確に指定します。
キーフォント
見出しや本文に使う書体です。
キービジュアル
メインで使う写真やイラストの雰囲気です。

「使ってよい色」だけでなく、「使ってはいけない色(NGカラー)」もあらかじめ決めておくと安心です。

NGカラーは、ブランドのトーン(雰囲気)を壊してしまう色を基準に選びます。

たとえば、落ち着いた和風のブランドなら蛍光イエローのような派手な色、やさしいオーガニック系のブランドなら蛍光色や原色の赤などがNGカラーの候補になります。

言葉のルール:語尾・口調・表記

トーン&マナーは見た目だけでなく、文章にも関係します。

同じデザインでも、言葉の雰囲気がバラバラだと、別の人が書いたように感じられてしまうためです。

決めること	例
語尾(文末)	「〜です・ます」で書くか、「〜だ・である」で書くか
口調	「お気軽にお問い合わせくださいね!」(親しみやすい)にするか、「お気軽にお問い合わせください。」(丁寧・誠実)にするか
表記	「お問い合わせ」「お問合せ」「問合せ」のどれに揃えるか
記号・絵文字	「!」や絵文字を使うか、使わないか

変えないもの・媒体に合わせて変えてよいもの

トーン&マナーを揃えるといっても、すべての媒体でまったく同じデザインにする必要はありません。

媒体ごとに求められる役割(Webは情報を読みやすく伝える、SNSは一瞬で目を引くなど)が違うためです。

迷ったときは、「ブランドの核」は変えず、見せ方は媒体に合わせて変えると考えましょう。

変えないもの(ブランドの核)	媒体に合わせて変えてよいもの(見せ方)
ロゴとロゴの色キーカラー・NGカラーキーフォント写真・イラストの雰囲気言葉遣いの口調	レイアウトや情報量文字の大きさ写真の切り取り方や枚数キーカラーを使う面積

たとえばWebサイトでは、情報を読みやすく伝えるために白背景に濃い文字を中心にし、キーカラーは見出しやボタンに使います。

Instagramでは、スマホでパッと目に入るように文字を大きくし、キーカラーを背景に広く使うこともあります。

このように見せ方が違っても、色・フォント・雰囲気が揃っていれば、同じブランドだと伝わります。

実践のポイント

トーン&マナーを運用する際の最初の一歩と、陥りやすい失敗、よくある疑問をまとめます。

最初の一歩:メモ1枚の「トンマナメモ」を作る

いきなり完璧なルールを目指す必要はありません。

最初は、雰囲気を一言で決め、キーカラーを1色、キーフォントを1つ決めるだけでも十分な出発点になります。

まとめる資料も、何ページもあるPDFである必要はなく、メモアプリやチャットに貼れる箇条書きで構いません。

たとえば、次のように書きます。

トンマナメモの例(Webサービスの場合)

雰囲気(トーン):清潔感がある・シンプル・誠実
キーカラー: #1D4ED8(濃い青)
NGカラー:蛍光色、原色の赤
キーフォント:Noto Sans JP(丸ゴシックは使わない)
写真・イラスト:自然光の入った明るい写真(暗い写真は使わない)
言葉遣い:丁寧な「です・ます」調、絵文字は使わない

自分用に書き換えて使える、空欄のテンプレートも置いておきます。

【トンマナメモ】
雰囲気(トーン):
キーカラー:#
NGカラー:
キーフォント:
写真・イラスト:
言葉遣い:

大切なのは「決めて、共有する」ことであり、体裁の立派さではありません。

ルールは後から育てていくものだと考えましょう。

注意点・よくある間違い

ルールを決めても文書化・共有をしないと、担当者が変わるたびに解釈がずれ、少しずつ雰囲気が崩れていきます。
簡単なメモでよいので、必ず文書として残し、関係者全員が参照できるようにしましょう。
媒体ごとの特性を無視してまったく同じデザインを機械的に当てはめようとし、かえって使いにくくなることがあります。
「ブランドの核」は変えず、見せ方は媒体に合わせて調整する、という切り分けで考えましょう。

よくある質問

Q. トーン&マナーはどんな形でまとめればいい?
A. 最初は、上のトンマナメモのような箇条書き1枚で十分です。
運用が回り始めたら、少しずつブランドガイドラインやスタイルガイドとして整えていけばよく、最初から立派な資料を作る必要はありません。
Q. 色の統一感とトーン&マナーは何が違う?
A. 色の統一感は色のトーン(明度・彩度の傾向)を揃える話で、主に1つの制作物の中の話です。
トーン&マナーは色に加えてフォント・写真の雰囲気・言葉遣いまでを含み、複数の制作物・媒体をまたいだ一貫性を指す、より広い言葉です。
Q. ルールでガチガチに縛られて、デザインがつまらなくならない?
A. トーン&マナーが固定するのは、キーカラーやキーフォントなど「ブランドの核」となる少数の要素だけです。
レイアウトや写真の選び方、細かい装飾表現には自由な余地が残ります。
むしろ核が決まっているからこそ、その中で安心して表現の工夫に集中できると考えるとよいでしょう。