トンマナとは｜コンテンツのデザインに一貫性を持たせる方法を解説

トンマナという言葉をご存知ですか？コンテンツを制作するとき、トンマナを意識することには重要な意味があります。
今回は、トンマナが重要な理由や、トンマナを設定する項目を紹介します。

トンマナとはトーン＆マナーの略で、コンテンツのデザインに一貫性を持たせること

トンマナは、Webサイトや広告などのコンテンツを制作するときに色調や形式を揃え、そのデザインに一貫性を持たせることを指します。もともとは広告業界で使われている言葉でしたが、最近では企業のブランディングにも欠かせないものとして広く重要視されています。また、Webマーケティングのひとつとして注目されているオウンドメディアでも、トンマナを設定することが非常に大切です。

トンマナがなぜ重要なのか

企業のブランディングになる

トンマナを設定してコンテンツに一貫性を持たせることで、企業の印象が定着しやすくなりブランディングを促進できます。また、社員にも自社の特徴を伝えられ、社員間で企業に対する認識を統一できます。

さらに、製品のパッケージやロゴの色調を揃えれば、より印象深い体験を消費者に与えることもできます。

ユーザーの興味・関心を引く

Webサイトや広告などのコンテンツ内、またその間で色調や形式が統一されていないと、伝えたいことが明確に分からないため、印象に残りにくいものとなってしまいます。さらに、デザインやレイアウトに統一感が無く、ユーザーの欲しい情報がどこにあるか瞬時に分からない場合は、ユーザーの興味・関心を損なう可能性もあります。

ユーザーの興味や関心を逸らさないためにも、トンマナを設定することは非常に重要です。

複数人で制作するときの基準となる

トンマナを設定して共有すれば、オウンドメディアでの記事作成の基準ができることに加え、Webサイトや広告を複数人で分担するときの基準にもなります。ページや項目ごとにバラつきが生じないように、色調や形式などに関する意識を統一することが重要です。

SEO対策になる

オウンドメディアの記事を作成するときにもトンマナは役に立ちます。オウンドメディアを運営するときは、SEO対策を施した記事を作成しなければなりません。ライター間で記事の質を担保できるように、ターゲットに適した文章表記の仕方などのトンマナを設定しましょう。

トンマナを設定する項目

配色

コンテンツにおいて色は、ユーザーの第一印象を決める重要な項目です。トンマナを設定するときは企業のイメージカラーや、ターゲット層の好む色をメインとする配色を始めに行いましょう。色の組み合わせを考え、色の種類をたくさん使いすぎないことがポイントです。

さらに、グラフや表を作成するときは使える色を指定しておき、コンテンツ全体で色に統一感が表われるようにすることも重要です。

文章

ユーザーが見やすいコンテンツを制作するには、文章にも統一感を持たせる必要があります。文章でトンマナを設定する項目は大きく以下の通りです。

• フォントを統一する
  コンテンツ内の全ての文章でフォントを統一しましょう。Webサイトでよく使われるフォントとして、「游ゴシック」「游明朝」「メイリオ」「ヒラギノ」が挙げられます。フォントごとに印象が異なるので、ターゲットに沿ったものを選びましょう。
• 文末表現を一貫させる
  文末表現を「です・ます調」「だ・である調」のどちらかを選択して統一しましょう。これらを混在させてしまうと、文章のリズムが悪くなってしまいます。
• 表記を揃える
  「とき」「こと」など、ひらがな表記にする言葉を決めてコンテンツに一貫性を持たせましょう。難読漢字はターゲットに合わせて判断することが求められます。また、半角・全角や数字・漢数字を統一することもポイントです。そのほか、括弧の使い方や商品名の表記を合わせることも重要です。
• 専門用語を多用しない
  専門用語を用いるときは、ターゲットが知っているかどうかを判断しなければなりません。もし難しい専門用語を使わなければならない場合は、最初に意味を説明しておくと丁寧です。

以上の項目以外にも一文あたりの文字数や、用いてはいけないNG表現を指定しておくのも統一感を持たせるために重要です。

レイアウト

ユーザーが知りたい情報を得やすいレイアウトにすることも、トンマナ設定には欠かせません。コンテンツ内でレイアウトに一貫性を持たせ、どこにどんな情報が載っているのかが明確に分かるものを作成しましょう。

例えば商品についてのページでは、商品の説明を画像とセットで行う、商品説明の最後に購入ページのリンクを貼るなど、どの商品のページでも構成を揃えておくことが挙げられます。

そのほか、ロゴや表などに使う図形も決めておくことで、統一感が生まれて企業のイメージ定着に繋がります。

トンマナを上手く活用している企業例

コカ・コーラ

（出典：https://www.cocacola.jp/）

コカ・コーラと言えば赤色ですが、これはシロップを運ぶ樽を赤色に塗ったところから、そのイメージが定着しました。コカ・コーラはこのイメージカラーを大切にしており、自社のホームページでも赤色を全面的に押しています。

また、ロゴに使われている白色を活用することによって、赤と白の統一感が生まれ印象的なコンテンツとなっています。

ニトリ

（出典：https://www.nitori.co.jp/）

家具の販売で有名なニトリは、そのイメージカラーである緑色をベースとしたホームページを作成しています。また、キャッチコピーである「お、ねだん以上。」を全事業で実現する、という一貫性を保った目標も掲げています。