September 21.2021

トンマナって?ブランディングに欠かせないトンマナの設定方法

トンマナの設定方法

こんにちは!Webデザイナーの橋本です。

「トンマナ」とは「トーン&マナー」を略した言葉で、元々は広告業界や出版業界で使われている用語でしたが、近年では一般的にも多く使われるようになってきました。

簡単に言ってしまうと、デザインや文章などに一貫性を持たせることで、消費者に統一された世界観を伝え、一目見ただけで「あのブランドの商品かな?」「あのブランドのCMかな?」といったブランドの持つ世界観を根付かせていくためのルールのようなものです。

今回は、この「トンマナ」についてもう少し詳しくご説明します!

トンマナとは

制作現場における「トンマナ」とは、「トーン&マナー」の略です。

・トーン(tone):色合い、色調、調子
・マナー(manner):方法、様式、しきたり

などの意味があります。

この「トンマナ」を設定し一貫性をもって商品やサービスを展開していくことで「〇〇らしさ」、「〇〇といえば▲▲」といったイメージを消費者に持たせることができます。

狙った世界観を根づかせる事で、ブランドの価値を高めていくことが可能となるのです。

トンマナの設定方法

実際にどのようにトンマナ設定をするのか、以下にポイントにまとめました。

1 商品やサービスのイメージを明確にする

まず、トンマナを設定したい商品やサービスの魅力や、提供できるベネフィットなどを明確にします。

さらに商品やサービスで何をしたいか等を設定し、消費者にどういったイメージを抱いて欲しいのかを明確にします。

2 目的やターゲットユーザーを決定する

「誰が、どのような商品やサービスを、誰に、どのように伝えたいのか」等の、コンセプトになる部分を固めていくことが必要になります。

もうすこし具体的にすると、5W1Hという「いつ、どこで、だれが、なにを、なぜ、どのように」という基本的な設定を固めていきます。

なぜなら、ターゲットとなる年齢や性別が異なるだけでも、好みとなる色やフォント、写真やイラストなど好みの傾向が異なるため。

目的やターゲットを明確にすることで、具体的なトンマナを設定していくことが可能となるのです。

さらに、洗い出したコンセプトを元にキーワードを抽出し、一貫性を持ったイメージを膨らませていきましょう。

3 目的やターゲットに合ったデザイン要素を設定する

設定した目的やターゲット、キーワードを元に「配色」「ビジュアル」「フォント」「文章」などを設定していきます。

【配色】

色には人にイメージやメッセージ性を伝える効果があります。色を見ただけでブランドのイメージが出てくる人も多いのではないでしょうか。それがブランディングの効果という事になります。

設定する色自体は1色、多くても3色くらいに抑えておく方が、消費者もイメージしやすいでしょう。

別の記事でご紹介している「色でWEBサイトの印象がかわる!ユーザーに与える心理効果の紹介」も参考にしていただき、色の設定をしていただければと思います。

【ビジュアル】

ビジュアルというと範囲が広くなってしまいますので、今回は「写真」「イラスト」「余白の使い方」に絞ってお話します。

■写真:商品やサービスを最もイメージさせやすく、密度が高く直接的なイメージの伝達が可能となります。

■イラスト:写真ほど密度や直接的なイメージの伝達はできないですが、その分、デフォルメしやすく大きなインパクトを与える事が出来ます。また複雑な内容をイラストにすることで分かりやすくすることができます。

■余白:商品やサービスをアピールする広告やWEBサイトを作成する際、余白の使い方でも消費者に与える印象を変えることができます。密度が濃ければにぎやかな印象を与えやすく、余白が多いほどシンプルで洗練されたイメージやオシャレなイメージが付きやすいでしょう。

【フォント】

フォントにも様々な種類があり、代表的な種類だけでもゴシック体、明朝体、筆書体、デザイン書体(手描き文字やポップ体など)が存在します。

フォントの使う種類、使い方などでも与える印象が変わりますので、一定のルールを決めておくのが望ましいですね。

【文章】

文章でも「表記の統一」「文末の表現」「構成と文字数」「使用しない言葉」など、「〇〇らしさ」を出すためのルール決めが大事なってきます。

トンマナ設定でブランディングの軸を定めよう!

トンマナを設定する事で、ブランディングにおける軸を定めることができます。

一貫性を持たせることで、消費者に対しても共通したイメージを明確に伝えることができるようになりますので、まずはトンマナの設定を行う事をお勧めします。

■こちらの記事もおすすめ
『色でWEBサイトの印象がかわる!ユーザーに与える心理効果の紹介』

『フォントの選び方のコツ|ゴシック体と明朝体で読みやすさや印象が変わる!デザインとの関係』

『WEBデザインに活かすユニバーサルデザインの基本例|視認性を意識してユーザーのストレスを下げよう!』

■その他、クリエイティブ関連の記事一覧はこちら
【CREATIVE一覧】