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

公式サイトとSNSの投稿で、なんだか雰囲気がバラバラ。そう感じたことはないでしょうか。

複数の制作物をまたいだ一貫性を保つ考え方が「トーン&マナー」です。

この記事では、トーン&マナーとは何か、初心者向けに解説します。

基本の理解

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

トーン&マナーとは何か

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

「トンマナ」と略されることが多い言葉です。

マナーという言葉から「挨拶や礼儀作法」を連想するかもしれませんが、ここでは「表現上のお約束事(フォントの丸み・写真の撮り方・言葉遣いなど)」という意味で使われています。

たとえば、親しみやすさを大切にするカフェのブランドなら、トーンは「温かみのあるパステルカラー」、マナーは「丸みのあるフォントと、手書き風のイラストを使う」というように、色と表現のルールをセットで決めます。

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

実際に見本にすると、次のようなイメージです。

架空のカフェブランドのトーン&マナー見本。ベース・メイン・アクセント・サブの4色のカラースウォッチ、丸みのあるフォントの見本テキスト「やさしい時間。」、コーヒーカップのイラスト

この見本のように、色(ベース・メイン・アクセント)とフォント・イラストの雰囲気をセットで先に決めておくのが、トーン&マナーの基本の形です。

これを実際にWebサイトのコードに落とし込むと、たとえば次のようなCSSになります。

:root {
  /* キーカラー: 温かみのあるパステルカラー */
  --color-base: #FBF3E7;   /* ベース(クリーム) */
  --color-main: #F0C9B8;   /* メイン(パステルベージュピンク) */
  --color-accent: #E0703D; /* アクセント(テラコッタ) */

  /* キーフォント: 丸みのある書体 */
  --font-heading: "M PLUS Rounded 1c", sans-serif;
}

.cafe-button {
  background-color: var(--color-accent);
  font-family: var(--font-heading);
  border-radius: 999px; /* 丸みを強調してマナーを表現 */
}

このように色とフォントを変数(カスタムプロパティ)として先にまとめておけば、新しいページやボタンを追加するときも、この変数を呼び出すだけでトーン&マナーを崩さずに実装できます。

複数の制作物を横断して見ても「同じブランドが作っている」と一目で分かる一貫性が生まれます。

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

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

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

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

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

実践としては、キーカラー(ブランドカラー。

HEXカラーコードのような形式で正確に指定する色)・キーフォント(見出しや本文に使う書体)・キービジュアル(メインで使う写真やイラストの雰囲気)の3つをルールとして決めておく方法があります。

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

媒体ごとに求められる役割(Webは情報量が多い、SNSは目を引く必要があるなど)を考慮しつつ、根本のトーン&マナーは崩さないようにすることが重要です。

実践のポイント

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

最初の一歩:何から決めればいいか

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

最初は、キーカラーを1色、キーフォントを1つ、写真・イラストの雰囲気を「明るい」「落ち着いた」のような一言で決めるだけでも十分な出発点になります。

まとめる資料も、何ページもあるPDFである必要はなく、A4用紙1枚やメモアプリの箇条書きで構いません。

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

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

注意点・よくある間違い

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

よくある質問

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