メインコンテンツに移動
Webマーケティング入門 公開日:2022.08.25

トンマナとは? デザイン・文言で決めるべき項目、重要性や設定時の注意点を解説

Yahoo!広告

広告や出版業界だけでなく、Webマーケティングでも「トンマナ」という言葉をよく耳にするようになりました。何となく意味はわかるものの、「具体的に何を指しているのかわからない」という方も多いのではないでしょうか。

本記事はWeb広告、コンテンツの制作担当者、Webマーケティング担当者に向けて、トンマナとは何か、重要性、設定手順などの基礎知識を解説します。配色やフォント、文体などの具体的な設定も紹介するので、ぜひ自社のトンマナ設定にお役立てください。

トンマナとは?

トンマナとは、広告や記事などに存在する一環した調子や様式です。Web広告、読みものコンテンツ、チラシなどの文体、画像、配色を特定のコンセプトに基づいて作成します。

トンマナの正式名称は「tone and manner(トーン&マナー)」です。もともとは広告・出版業界の用語でしたが、現在はWebマーケティング業界でも一般的になりました。

トンマナの重要性

トンマナを設けると、制作物に統一感を持たせられます。それにより、広告やコンテンツの訴求力や魅力が増し、制作時間やコストを削減できます。

世界観が統一されブランディングにつながる

トンマナが整っている広告やコンテンツは、ひとめ見ただけでどの企業のものなのかがわかります。その一例を見てみましょう。

コカ・コーラ 赤と白のロゴ
※コカ・コーラはこの赤色を「コーク・レッド」と呼び、CMや広告のメインカラーともなっている
マクドナルド 赤と黄色のロゴ
・商品パッケージやアプリのデザインなどでも、この2色はよく使われる

このように、トンマナが消費者の顧客に浸透すると、条件反射的に特定の企業を連想します。そのため、トンマナはブランディングの手段としても、とても強力です。

制作時間やコストの削減につながる

トンマナを確立すると制作時間やコストの削減につながります。

例えば、コカ・コーラなら、メインカラーは「コーク・レッド」、ロゴのフォントは「Coca Cola ii」、広告訴求の基本路線は「スカっと爽やか」とほぼ決まっています。そのため、新たな広告を作るときも、スタッフ全員がこれらのルールにしたがってスムーズに作成できます。

結果、制作にかかる時間が短くなり、やり直しや修正も少なくなるため、コスト削減につながります。もちろん、この水準になるまでは長い時間がかかりますが、一度トンマナを確立できれば、そのメリットは大きくなります。

ユーザーの記憶に残りやすい

トンマナを整えると、以下のようにUIやUXが向上し、顧客によい印象を残せます

UI(User Interface):商品やサービスのなかでユーザーが触れる部分。レイアウトや文字サイズなどでトンマナを整えれば、操作性や機能性を向上できます。

UX(User Experience):商品やサービスから受ける顧客の体験。画像や配色などのトンマナを整えると「センスのよさを感じる」「わくわくした感情を持つ」などの良質な体験を増やせます。

UX、UIについて、こちらの記事でも詳しく解説しています。ぜひ併せてご覧ください。

UXとは? 意味や重要性、広告に取り入れる際のポイントを解説」を読む

基本的なトンマナの設定方法

トンマナ設定は、大きく分けると「ビジョン設定→施策の目的設定→ターゲット設定→トンマナ設定」という4ステップで進めます

ここでは、結婚式場のWeb広告制作担当者がトンマナを設定する例を交えて解説します。

Webサイトやサービスのイメージ設定

トンマナには、核となるビジョンやコンセプトが必要です。このプロセスでは、ユーザーに自社商品のよさをどのようにイメージしてほしいのか考えるのがポイントです

【具体例】

  • 本場フランスのシェフの料理をアピールして、ゴージャスな披露宴を思い浮かべてもらう
  • 離島の絶景ロケーションを全面に押し出して、特別感を持ってもらう

ビジョンを具体化するには、5W1Hで要素の洗い出しをおこなうとよいでしょう。例えば、キャンペーン期間や広告費など、広告制作の諸条件も検討します。

目的の設定

施策の目的も明確にしておきましょう。例えば、認知度向上やブランディング、コンバージョン数(契約や問い合わせ)向上などです。目的によって、次のようにトンマナの方向性も変わってきます

【具体例】

目的 トンマナで重視する要素 具体例
認知度向上 情報伝達 ・式場や料金など記憶してもらいたい情報を目立たせる
ブランディング 好感度 ・写真や動画などビジュアルコンテンツをメインにする
コンバージョン数向上 行動喚起 ・行動を促しやすい配色や文言にする・CTAボタン中心でデザイン設計する

ターゲットの設定

年齢、性別、住んでいる地域などでターゲットを設定しましょう。ターゲットを絞り込むほどトンマナに個性を出せますが、好印象を与えられる範囲は狭まります。したがって、アプローチしたいユーザー数を考えながら、ターゲットの範囲を絞り込むことが大切です

目的とターゲットに合ったトンマナを設定

ターゲットが決まったら、ペルソナ設定をおこないます。ペルソナ設定とは、ターゲットの年収や趣味やよく閲覧するWebメディアなどを具体的に推測して、実在する人物のように設定する手法です。ペルソナの設定によって、トンマナの微妙な部分まで調整できるようになります

【具体例】

仮にペルソナが「年収600万円以上の30代カップル、ロケーションのよい観光地への旅行が趣味、旅行やアウトドア関連のWebメディアをよく見る、結婚式は親しい家族と友人だけ来てほしい」と決まったとしましょう。

この場合、トンマナはアットホームなナチュラル路線で、景観のよさをメインに訴求する、などが挙げられます。また、広告掲載候補となる旅行、アウトドア関連のWebメディアと相性のよいトンマナも考慮します。

ペルソナについて、こちらの記事でも詳しく解説しています。ぜひ併せてご覧ください。

ペルソナとは? ターゲットとの違いと設定時に用いる要素を解説」を読む

デザインのトンマナで決めるべき項目

ここでは配色、フォント、画像、ボタンなどの素材を取り上げ、設定のポイントを解説します。

配色

配色は全体の印象を決定付けるため、もっとも重要なトンマナの要素です。配色はメインカラーを先に決めると、アクセントカラーや文字色などを選びやすくなります。また、一般的には記憶への定着や見やすさなどを考えて、1?3色程度に絞ります。

色の心理的な効果も検討しておきましょう。例えば、明度と彩度が高い赤・黄系はアグレッシブで目立ち、逆青系はクールで落ち着いた雰囲気になるなど、与える印象が違います。

フォント

フォントも配色と同じくらい重要なトンマナの要素です。太さや大きさが少し違うだけで印象が変わるため、いろいろ試してみるとよいでしょう

例えば、フォーマルな雰囲気にしたければ明朝体、親しみやすさを重視するならゴシック体、個性を出したければポップ体や手書き体を選ぶなど、広告やコンテンツに合ったフォントがあります。

もちろん読みやすさも重要です。Web媒体の場合、メイリオ、游ゴシック、ヒラギノ角ゴ Proなどがよく使われます。

画像

画像のトンマナは編集加工です。例えば、ボカしを入れてふんわりさせるのか、細部までくっきりさせるのかによって、印象はガラッと変わります。画像だけ見て編集加工すると浮いてしまう場合があるので、常に全体をイメージするとよいでしょう

また、画像のサイズや配置もトンマナに含まれます。例えば、商品紹介ページなどは画像サイズや位置を統一すると、ユーザーの見やすさや利便性が上がります。

アイコンやボタンなどの素材

アイコンやボタンもサイト内で統一しておくべき重要なトンマナの要素です。これらはユーザーの操作性や情報識別に大きな影響を与えるため、ルールとして決めておくとよいでしょう。

例えば、購入ボタンをカートのアイコンが付いた赤ボタンで統一すれば、そのボタンを押せば購入できるとすぐに認知できます。ユーザーにとってのわかりやすさを考えてデザインを統一しましょう。

余白

余白とは、文章と画像の間などのように何も配置していないスペースです。適度な余白があれば、ユーザーは情報を受け取りやすくなります

例えば、以下のように余白の取り方を統一すると、見やすさがアップします。

  • 画像の上下は1行分の余白を空ける
  • 記事と広告の間に大きめのスペースを空けて区切りを明確にする

文言のトンマナで決めるべき項目

ここでは表記ルール、文体、文字数を取り上げ、設定のポイントを解説します。

表記ルール

表記ルールは大きく日本語、英数字、記号に分けられます。

日本語 ・ブランド名や会社名の統一
・共同新聞社の記者ハンドブックに従う、常用漢字以外は使わないなどのガイドライン
・事/こと、ひとり/一人、など表記が混在しそうな言葉のルール
など
英数字 ・英数字を半角、全角のどちらにするか、など
記号 ・会話は「」、引用は""を使う、など

上記は最低限の内容です。自社が求める水準を満たすようにルールを決めましょう

文体

文体のトンマナ設定は主に以下のとおりです。

文末表現 「です・ます」調、「だ・である」調など
口語表現 「ですよね」「?するんです」などの口語表現の使用可否
記号 ?や!などの使用可否
主観表現 ?だと思う、私は?、などの主観表現の使用可否

このほか語り手のキャラクターを設定する場合や、独自の世界観を出したい場合は、もっと高度なトンマナが必要になります

文字数

文字数のトンマナ設定は主に以下のとおりです。

タイトル、ディスクリプションの文字数 広告や検索結果などに表示できる文字数内に納める、など
見出しごとの文字数 1つの情報だけボリュームが多くなったり、少なくなったりしないように文字数を決める、など
パラグラフの文字数 200?300文字ごとに1行空白の改行を入れる、など
1文の長さ 読みやすさを考えて100文字以内にする、など

トンマナを設定するときの注意点

トンマナは抽象的な要素が多いため、できるだけ明確にルール化しなければ、効果は半減します。

ターゲット設定が曖昧なまま進めない

ターゲット設定が曖昧なまま進めてしまうと、トンマナの軸もズレてしまいがちです。例えば、文章は若年層向けのくだけた調子、画像は高級路線などでは統一感がありません。結果として、ユーザーニーズを満たせず成果も上がらないでしょう。

このような状況を避けるためには、企画段階でターゲットを絞り込み、ペルソナ設定まで明確にする必要があります。

フレームワークも活用する

トンマナ設定にはさまざまな要素が含まれるため、漏れや抜けが出たり、分析に時間がかかったりしがちです。そこで活用したいのが、スムーズに情報を整理できるフレームワーク「5W1H」です

5W1H

5W1Hとは、「When(いつ)」「Where(どこで)」「Who(だれが)」「What(なにを)」「Why(なぜ)」「How(どのように)」に分け、情報を過不足なく整理できるフレームワークです

先ほどの、結婚式場の制作担当者がトンマナを設定するシチュエーションで分析した例が次のとおりです。

When(いつ) キャンペーン期間中
Where(どこで) ターゲットが閲覧しそうなWebメディアの広告枠
Who(だれが) 景観が美しい結婚式場を探しているカップル
What(なにを) 離島の絶景ロケーションを訴求する
Why(なぜ) コンバージョン数向上
How(どのように) 画像や動画で訴求できるディスプレイ広告

NGルールを決めておく

広告やコンテンツに避けるべき表現やデザインを掲載してしまうと、あとでトラブルになったり、作り直しになったりしてしまいます。制作に取りかかる前に、次のようなNGルールを決めておきましょう。

誇張表現 ・もっとも、最安、日本一などの誇張表現を根拠なしに使う
など
ネガティブ表現 ・他社をおとしめる表現・ターゲットを傷つける表現
など
トンマナと一致しない表現 ・例えばポジティブなトンマナを設定している場合に、後ろ向きの表現を使わない、暗い色を使わない
など

SEOも意識する

トンマナ設定では、以下のようなSEO(検索結果上位に掲載されるための対策)も合わせて検討します。

検索エンジンに内容を正しく伝える ・タイトルやディスクリプションのなるべく前半に検索キーワードを含める
・検索キーワードと共起語(検索キーワードと一緒に使われやすい言葉)を文章に含める
など
ユーザーニーズを満たす ・ターゲットが求める情報を、ターゲットが好むトンマナで伝える
・一目で内容が理解できるレイアウトにする
など
ユーザビリティを向上する ・読みやすい文字サイズを選ぶ
・大きなサイズの画像掲載や、動画の入れすぎを避けて、ページの表示時間を早くする
・スマートフォンで操作しやすいボタンサイズにする
など

あとからSEOを実施すると不自然さが出やすくなるため、なるべく制作段階でルール化しておきましょう

トンマナ設定は広告効果アップやコストカットに役立つ

広告やコンテンツに一貫性、統一感を持たせるためには、トンマナが必要です。トンマナには抽象的な部分もありますが、個々の要素を検討すればルール化できます。広告やコンテンツの魅力を高めるためにも、制作時間やコストを減らすためにも、トンマナを明確にしましょう。

この情報は役に立ちましたか?