トンマナとは？設定するメリットや項目を事例を参考に解説

「トンマナってなんだろう」
「トンマナを設定するメリットが知りたい」

と思うことはありませんか？

広告制作に関わっていると、トンマナという言葉をよく耳にします。

企業には重要視されていますが、どんなメリットがあるのでしょうか？

そこで今回は

について解説していきます。

この記事を読めば、トンマナの重要性から設定方法まで理解できます。

ぜひ最後まで読んでみてください。

トンマナとはデザインを統一すること

広告制作をおこなうなら、トンマナについての知識をしっかり習得しましょう。

知識を活かすことができれば、ユーザーからの反応も良くなります。

まずは、トンマナの基礎知識について解説していきます。

1.トンマナの意味

トンマナとは「トーン＆マナー」の略です。

具体的には、トーン（色調）やマナー（様式、作風）を一貫し、企業の広告やwebサイトのデザインに統一性を持たせることです。

例えば、あるWebサイトを見た時に、LPは高級志向で重厚感のあるイメージであるのにも関わらず同じサイト内の別のページにとんだら、アメコミ風なデザインに変わっていた。

という場合は、そのWebサイトには一貫性がなくイメージから何を伝えたいのか理解もできず、その会社に対する信頼感も薄れてしまいますよ。

つまり、トンマナが崩れている企業は基盤となる核がぶれており、信頼に欠けるといえます。

それを防ぐためにユーザー目線のトンマナを設定する必要があるのです。

2.トンマナの役割

コンテンツの制作においてトンマナにはさまざまな役割があります。

具体的には、

これだけの役割があります。

コンテンツの好印象を与えるだけでなく、デザインしやすくなり全体のクオリティを上げることが可能です。

WEBデザイナーを目指すなら必要なプログラミングスキル。

自分もプログラミングを学習してみたい！と思った方には、初心者でも確実にプログラミングスキルが身につく【DMM WEBCAMP】がおすすめです。

97%以上の受講生がプログラミング初心者からのスタートであるため、ライフコーチによる手厚い学習サポートが受けられます。

また、プログラミングの基礎知識からしっかり身につけられるコースも用意されており、安心して学習を進めていくことが可能です。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

トンマナがもたらす3つのメリット

トンマナを設定することは、企業とユーザーの双方にメリットをもたらします。

これらのメリットについて解説していきます。

1.ブランディング効果

トンマナがもたらすブランディング効果は絶大です。

なぜならコンテンツと顧客のイメージを一致させることができるからです。

例えば、トンマナを設定しておくことで、一目見ただけでここの企業のサイトか！○○の広告か！などがわかりやすくなります。

デザインのルールを統一しておけば、ユーザー側はページを開いた際に既視感を覚え、あの会社と同じかなと想起するのです。

2.時間やコストの削減

トンマナは、時間とコストの削減を可能にします。

なぜなら、作業工数における判断の工数を削減できるからです。

例えば、

このように制作過程で発生する材料費のカットや、デザイン決めに時間を取られることがなくなります。

つまり、トンマナを取り入れることで他の作業にリソースを費やすことが可能です。

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

トンマナの設定により、ユーザーの記憶に残りやすくなります。

なぜなら、統一されたコンテンツは情報が理解しやすいからです。

フォントや、レイアウトが整っていないデザインを見ても、なにが重要なのか分かりません。

知りたい情報が理解しやすいようになっていることで、ユーザーの記憶にも残りやすくなります。

トンマナに成功した4つの企業事例

ブランディングの成功している企業は、必ずトンマナの設定をしています。

実際に、どんなトンマナを設定して成功を収めているのか見ていきましょう。

これら4つの企業を解説します。

1.ティファニー

ティファニーに使用されているスカイブルーの色は、「ティファニーブルー」と呼ばれるまでになっています。

自社ブランドの「らしさ」を、表現できた成功例です。

使用されているスカイブルーは、コマドリの卵の青色が由来しています。

ティファニーのブルーは、多くの女性を魅了している世界を代表するブランドカラーです。

2.コカ・コーラ

3.ヤマト運輸

ヤマト運輸は、64年ぶりにシンボルマークである「クロネコマーク」とリニューアルします。

それとともに、コーポレートカラーは「黒・黄色・白・グレー」の4色を選定しています。

配送車両もこれまでは「クリーム色と青緑」のツートーンでしたが、「白と黄色」のデザインに変更されました。

「トラックはもちろん、あらゆるアイテムで、どのようなかたちになっても環境にノイズを生まず、それぞれの土地に根差し、自然に溶け込む」
参考：”クロネコのマークが少し変わります。”ヤマトグループ公式HP

この4色には、このような意味が込められています。

4.VOGUEのYouTubeチャンネル

VOGUEはファッション雑誌であり、若者がターゲットです。

YouTubeでトンマナを揃えユーザーを獲得しています。

動画のサムネイルのデザインと、雑誌表紙のロゴデザインを統一させているので、チャンネル登録者でない視聴者も、すぐにVOGUEの動画だとわかるようになります。

スキマ時間に効率よくプログラミングを学習したいという方には、プログラミングスクールがおすすめです。

受講料はかかってしまいますが、短期間で効率よくプログラミングスキルを習得することが可能です。

【DMM WEBCAMP】なら、初心者向けに開発された独自のカリキュラムと充実した学習サポートで、挫折することなくプログラミング学習を進めることができます。

また、学習を進めていく中で分からないことが出てきたときは、 チャットもしくはビデオ通話でメンター（講師）に好きなだけ質問をすることができます。

オンラインと教室受講のどちらも可能なので、あなたのライフスタイルに合わせて好きなコースを選択してみてください。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

トンマナ設定するべき5つの項目

トンマナを設定するのは、企業のロゴマークだけではありません。

これらのような項目にも、トンマナを設定することで、コンテンツ全体の統一感が出ます。

1.配色

自社ブランドをイメージするカラーを設定しましょう。

イメージを表すカラーを「コーポレートカラー」と言います。

例えば

このように、企業の業界から連想できるカラーを設定するのもおすすめです。

2.挿入する素材

Webサイトや、広告デザインを行なう際には、写真・イラスト・アイコンにも、トンマナを設定します。

素材のトンマナを設定しなければ、記事全体のデザインにばらつきが生まれ、ユーザーは何が重要ポイントなの理解できません。

つまり、記事内に挿入する画像やアイコンのデザインが統一されていれば、ユーザーは情報が読み取りやすくなります。

3.レイアウト

レイアウトは、人の心理を考えながら設定していきましょう。

人は細かいデザインに目をとおすのではなく、無意識のうちにメリットがあるかの判断をしています。

例えば、日本語の横書きの文章であれば、左から右に読み進めますよ。

つまり、大事なポイントは左側に記載しておくべきです。

このように伝えたいことは、ユーザーが無意識に目にする箇所にレイアウトしましょう。

4.フォント

フォントの種類にはゴシック体など3,000種類以上あります。

その種類によって、ユーザーが受け取る印象や、情報の捉え方は左右されるのです。

例えば、

このように、どんなイメージをユーザーに持たせたいか考えて、そのイメージに合うフォントを選択しましょう。

5.余白・文字数

トンマナを設定する際は余白（ホワイトスペース）の活用が重要となります。

なぜかというと、情報の詰め込みすぎは本来伝えたいことも伝わらなくなってしまうからです。

具体的には、素材や文字が詰め込まれすぎたサイトは見づらく、見る人を疲れさせてしまいます。

伝えたい魅力やメッセージがたくさんあってもそれでは逆効果です。

適度に余白を設けることで情報は伝わりやすくなり、ユーザーの理解度も高まります。

Webデザインに必要な基礎知識3つを解説！ツールやおすすめの本7選も紹介

トンマナにおける2つの注意点

よりよいコンテンツを制作するために、気をつけたいポイントがあります。

トンマナはメリットがたくさんありますが、設定方法を間違うと逆効果です。

この2つを頭に入れて、トンマナの設定をします。

1.ペルソナの設定

ひとつ目のポイントは、ペルソナの設定を明確にすることです。

なぜかというとペルソナの設定にはトンマナの軸を決めて、一貫性を持たせる役割があるからです。

例えば、ペルソナの設定が10代後半の女性でいわゆる「ギャル系」に設定したときは、トンマナもポップで明るいイメージなどを軸すると、そこから一貫性があるものが必要になります。

つまり最初にペルソナを設定することで、方向性を明らかにすることができるのです。

2.目立たせれば良いわけではない

二つ目のポイントは、伝えたいことを闇雲に目立たせようとしないことです。

なぜなら、伝えたいことを主張しようとしすぎては、デザインにばらつきが生まれるからです。

具体的には

上記のことをしてしまうと、ユーザーは押し売りの強さに不信感を抱いてしまいます。

ユーザーの立場になって、共感ができるデザインをこころがけましょう。

まとめ：トンマナを設定する際はユーザー視点で考える

本記事では、トンマナについて解説しました。

トンマナは、ユーザー目線に立って設定をします。

いいデザインができても、見た人が魅力や必要性を感じなければ意味がありません。

見る人の気持ちを理解できれば、ユーザーと企業のお互いにメリットが生まれるでしょう。