トンマナの意味とは？ビジネスで役に立つトンマナの使い方・決め方を解説します。

「トンマナって聞くけど、どういった意味なんだろう」

そのようにお悩みではないでしょうか？

マーケティング用語はたくさんあって覚えるのが大変ですよね！近年のサイト制作にはトンマナが必要不可欠となっています。

この記事では、トンマナの意味やサイトを使って事例を解説します。さらにトンマナの失敗しない使い方・決め方も解説しているのでトンナマのことで分からないことはなくなります。

トンマナが分からずお困りの方は、今後のビジネスの参考にして頂けると幸いです。

それでは、早速トンマナについて解説していきます。

無料相談会・分析へのお問合せはこちら
1営業日以内にスピード返信します！

トンマナとは？

トンマナとはトーン（tone）＆マナー（manner）の略称で、WEB広告やWEB制作コンテンツにおいてデザインやスタイルの統一感・一貫性を持たせることです。

「トーン（tone）」は言葉の表現のぐあい・文章の言い回しや色合い、マナー（manner）はスタイルの型・作品の傾向や特徴を予め決定しておくことで、ユーザーに企業や商材のコンセプトを伝えやすくなるといったメリットがあります。

トンマナを設定したコンテンツは、ユーザーに与える印象を統一することができるので、企業のブランド戦略にも有効で近年広く使われています。

ユーザーにとって違和感のないサイトを作るためにトンマナが重要と言えます。

トンマナのメリットや3つの効果

トンマナのメリットや3つの効果は下記の通りです。

・ユーザーにサイトの記憶が残りやすくなる

・サイトの離脱率を防ぐことができる

・サイトの修正時間が少なくなるために効率的になる

それぞれ詳しく解説していきます。

ユーザーにサイトの記憶が残りやすくなる

WEBサイトなどのコンテンツをトンマナで揃えることでユーザーの記憶に残りやすいといった効果があります。

サイトやロゴがユーザーの記憶に残っていると、パッと色の組み合わせを見るだけで企業や商品を思い浮かべてもらうことにも繋がります。

トンマナでブランディング戦略に使うことで、よりブランドに関心がある人にクリックしてもらいやすくなり、成果にもつながりやすくなります 。

サイトの離脱率を防ぐことができる

トンマナを設定するとサイトの離脱率を防ぐことができます。

トンマナをしっかり設定していないとサイトが読みづらかったり、ユーザーが求めている情報が見つけづらく、ユーザーが迷ってしまう可能性があります。

また、記事ごとに統一感や一貫性のないサイトだった場合は、誤ったサイトに訪問したのか不安を与えてしまいます。

統一感のあるサイトに仕上げることによって、違和感や不安を与えずにサイトの回遊率が上がり、離脱率を防ぐことができます。

サイトの修正時間が少なくなるために効率的になる

 トンマナを一度決めると、サイトやコンテンツなどの完成後の修正時間が少なくなるために業務が効率的になります。

事前にトンマナを設定すると、全体的にコンテンツの方針がブレにくくデザインのズレを防ぎます。スタイルの型や言葉の表現、色調など1から考えなくてもいいために、特に複数人で作業する際にはますますトンマナの設計が重要性を感じるでしょう。

事前にトンマナを設計しておくことでメンバーが持つデザインの方向性のズレを防ぎ、記事の品質を保ちやすくなります。

トンマナの重要性が分かる参考になるサイト事例3選

ここからトンマナの重要性が分かる参考になるサイト事例3選を紹介します。

ヤマト運輸

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

親しまれていた大切な子猫をくわえて運ぶクロネコの姿は変更せずに、新たにコーポレートカラーは「黄色・黒・グレー・白」の4色を採用しています。

「トラックはもちろん、あらゆるアイテムで、どのようなかたちになっても環境にノイズを生まず、それぞれの土地に根差し、自然に溶け込むように配慮していく」

引用：ヤマト運輸HP

コーポレートカラーは、さらに進化した物流サービスをつくりあげていくヤマトグループの活力を表現しています。

クロネコヤマトは、トラックを見ただけで「クロネコヤマトだ」と気づけるようになっています。

ローソン

ローソンのコーポレートカラーは青(メイン)、白(サブ)の2色のみです。

ローソンのロゴに使われている青のメインカラーは、創業者のJ.J.ローソンさんが経営していたローソンミルク社の看板のイメージを踏襲したものとなっています。

白の部分はそこで売られていたミルク缶の色を表しています。

フォントには、どこかレトロで懐かしく感じるようなセリフ体が使われています。

コーポレートカラーのローソンブルーで信頼感を感じてもらいつつ、企業スローガン「マチのほっとステーション」にあった世界観を実現しています。

街中でもすぐにローソンを発見できるのは、企業としてトンマナをそろえてブランド展開した功績だと言えるでしょう。

みずほ銀行

みずほ銀行のブランドカラーは、コズミックブルー（青色）とホライズンレッド（赤色）の2色です。

コズミックブルー（青色）は、信頼、誠実、ワールドスケール、クオリティを、ホライズンレッド（赤色）は、お客さまとのリレーションシップ、ヒューマニティ、情熱を表しています。引用：みずほ銀行HP

みずほ銀行はトンマナを設定することによって、信頼関係・情熱・活力を大切にしている企業ブランドの品格を印象づけています。

トンマナを失敗しないための2つのポイント

最も届けたいペルソナを明確にする

トンマナは最も届けたいペルソナを明確にすることで、 ユーザーのイメージや雰囲気があったデザインにすることができます。

例えば、メイク商材のサイトを作る場合、ターゲットは10代〜40代の女性が多く、さらに学生向け・社会人向けなのかでもアプローチやデザインも大きく変わって来ます。

ペルソナが明確になっていないと色んなテイストが混ざってしまい、一体感のないサイトになってしまいます。

トンマナを決定する際は、しっかりと届けたいペルソナを言語化するようにしましょう。

企業のコンセプトに合わせたトンマナを設定する

企業のコンセプトに合わせたトンマナを設定した場合、企業のブランディングの効果が期待できます。

Webサイト全体の世界観を統一することで、「このサイトや色は、あの企業だよね」など、企業や商品の世界観をユーザーに印象づけることができます。

例えば、セブンイレブンのサイトがローソンのような配色になっていたらどうでしょうか？

多くのユーザーが戸惑ってしまい、違和感を感じて離脱してしまいます。

トンマナを難しく考えず、まずは第一歩として全体的な色調を統一させるところから始めて見ることが大事です。

トンマナは企業のコンセプトに合わせたトンマナを設定するようにしましょう。

ライティングのトンマナを決定する際の4つのポイント

ライティングのトンマナを決定する際のポイント

・ 表記を統一にする

・ 末尾表現を設定する

・ 文字数制限を設ける

・ 避けるべき文言を明確にする

表記を統一にする

ライティングのトンマナ決定する際は表記を統一することが大事です。

ライティングでは「ひらがな・カタカナ・漢字・数字」を主に使用しますが、言葉遣いがバラバラだとユーザーに違和感を与えてしまいます。

例えば、筆者のことを「自分」や「私」など表現することができますし、金額を「1万円」か「10,000円」のどちらかを記載することができます。

ただし、稀にSEOのために重複表記などを避けるためにあえて違う言葉を使うときは例外です。

また、言葉遣いやテイストを統一することで、ライティングで迷うことがなくなるために作業効率を飛躍的に上げることが可能です。

末尾表現を設定する

トンマナを決定する際には末尾表現を設定することも重要です。

例えば「ですます調」にするのか「である調」に統一するのかなどが挙げられます。

いろいろな文尾表現が混じっている文章だと非常に読みづらく、ユーザーにとってストレスになる文章になります。

「ですます調」は柔らかい文章を書く、「である調」は堅い文章を書くときに使い分けるなど工夫が必要です。

体言止めを使用してもいいのかなど、サイトのコンセプトやユーザーの属性に合わせた文末表現に設定しましょう。

 文字数制限を設ける

トンマナでは、一文の文字数制限を設定するようにしましょう。

通常、PCで見た時に2行以内にしている100文字以内が適切と言われていますが、最近では、スマートフォンからのユーザーも増えているために50文字程度に抑えるのが理想です。

また、段落と改行を統一させることで文章を読みやすくなります。

文字数は運営者の判断基準になりますが、ユーザーに読みやすい印象を与えるために、あくまで目安として設定しましょう。

避けるべき文言を明確にする

トンマナでは、稀に避けるべき文言を明確にすることも必要になります。

基本的にブランディングのために企業側がライターに対して設定されることが多いため、避けるべき文言は、よほどのことがない限り設定はされません。

ただし、避けるべき文言がないからといってネガティブな表現を記載するのは好ましくありません。

企業の理念や特色によって変わってくるので一概には言えませんが、主観的な意見を避けたいや企業イメージを損なうことを排除したい、不当表示を避けたいなどクライアントから説明があるのでしっかりと把握するようにしましょう。

デザインのトラマナを決定する際の5つのポイント

デザインのトラマナを決定する際のポイントは下記の通りです。

・ イメージに合った文字のフォントにする

・ レイアウトや配色の割合を決める

・ 余白を与える

・ 一目で分かりやすい写真やイラスト等の素材を使用する

・インタラクションでUXを意識する

イメージに合った文字のフォントにする

コンテンツは、イメージに合った文字のフォントを揃えることで情報が入りやすく、読み取りやすいサイトに仕上がります。

特にバナーなどの広告などは視認性も大事で、Webサイト全体で伝えたい世界観に合ったフォントを都度選ぶことが重要です。

文字フォントには手書き文字で親近感を出してみたり、明朝体で高級感を出すなど、多数のフォントが混じってしまうと文字が読み取りにくくなってしまいます。 

雰囲気の統一感を出すためには、なるべく1種類から2種類に抑えた方が好ましいです 。テーマやロゴに合わせたフォントにしましょう。

レイアウトや配色の割合を決める

トンマナを決定する際は、レイアウトや配色の割合を決めましょう。

コンテンツごとにレイアウトがバラバラだったり、配色に統一感がなければユーザーにとって大事な情報の読み取りにくさに繋がってしまいます。

配色は、彩度と明度を組み合わせて考えるが必要です。カラーチャートの同系色のグループを選ぶことで、色のトーンを統一させることができます。

リード文にはまとめボックスを入れたり、メインカラーを3色ほどに抑えるなどサイト全体の統一感を意識したトンマナを設定するようにしましょう。

余白を与える

コンテンツを読みやすくするために適度な余白を意識しましょう。

文章・画像・ボタンなど、サイトに入れたい要素はたくさんあるので気持ちは分かりますが、要素を詰めすぎとユーザーが疲れてしまうので注意が必要です。

また、要素を詰めすぎてしまうと、ユーザーにとって肝心の部分が見つけにくくなり、サイトの役割を果たせなくなってしまいます。

句読点のあと改行にする・柔軟に余白の大きさを変えるなど、見やすいサイトになるように工夫してみましょう。

一目で分かりやすい写真やイラスト等の素材を使用する

トンマナを設定する際に、一目で分かりやすい写真やイラスト等の素材を使用することも意識することも必要です。

画像が少なく、文章ばかりのコンテンツだと可読性が低くなり、ユーザーの離脱率が高くなってしまいます。

画像を使う際は、人物や背景・アイコン、グラフがWebサイトの世界観にマッチしているのか細かくトンマナを決定する必要があります。

また、ユーザーに覚えてもらいやすいようにプロフィール写真は揃えるなど、工夫してみましょう。

インタラクションでUXを意識する

トンマナではインタラクションでUXを意識するようにしましょう。

近年ではサイトに視覚的に分かりやすいアニメーションを導入してみたり、アコーディオンメニューでユーザーが迷わないように設計してみたり、コンセプトやイメージにあったUXを導入するサイトも増えてきています。

サイトにインタラクションを入れることによって、他社とは違った独特の世界観をユーザーに与えることができ、差別化を図ることにも期待できます。

トンマナでよくある質問

トンマナの英語や言い換えはどんなの？

英語圏では「tone and style」の方が一般的に使われています。

トンマナのテンプレはある？

しっかりとしたテンプレはないのですが、自社のコンセプトやイメージの近いサイトを参考にしてみましょう。

トンマナ　まとめ

今回はトンマナの意味について解説しました。

トンマナは、UI/Uの向上やユーザーにとって見やすいサイトにすることで、企業のブランディングに欠かせない要素です。

ただし、1からコンセプトや世界観を設定し、レイアウトや色彩、文章のレギュレーションなどを落とし込んでいくのは、とても大変な労力になります。

・トンマナ（用語集） | 東京都池袋のWeb制作・ホームページ制作会社 | 株式会社ブルートラスト
・ブランディングに必須のトンマナって？ルールを決めて品質を担保しよう！
・デザインとトンマナについて
・デザインにおけるトンマナとは？←トンマナを定めるとは、キャラ作り！？
・トンマナとは？｜個人起業家が知っておきたい基本と活用術