トンマナとはトーン＆マナーのこと！印象的なサイトをデザインする3つのコツと注意点

トンマナ（トーン＆マナー）は、「デザインや文章に一貫性を持たせるルール」のことです。

トンマナを揃えることで、ブランドやサイトの世界観をわかりやすく伝えられます。

よいデザイン、読みやすい文章は、私たちを大きく助けてくれます。

「らしさ」を表現するロゴやカラー。なんとなく目にしながら、その印象は私たちにそのサイトやブランドへの愛着を抱かせます。

反対に、悪いデザインは、印象に残らず、記憶に残らず、社のモチベーションも上がりません。

今回は、トンマナとは何か、トンマナの必要性、トンマナの事例、トンマナの揃え方や注意点をわかりやすく解説いたします。

特別な才能がなくても、ちょっとした知識があることが、大きな違いを生みます。

トンマナについて知っておくことは、印象的なサイト作成に大いに役立つことでしょう。

1 【トンマナとは】デザインや文章の一貫性を保つルールのこと
2 【トンマナの必要性】「らしさ」を印象づける
3 【デザインのトンマナ合わせ】3つのコツ
4 【文章のトンマナ合わせ】3つのコツ
5 【メリット】トンマナ合わせ2つのメリット
- 5.1 メリット1. 作業効率がアップする
- 5.2 メリット2. ユーザーが世界観を理解しやすい
6 【注意点】トンマナ合わせ2つの注意点
- 6.1 注意点1. 目立つことを追求しない
- 6.2 注意点2. ターゲットを曖昧にしない
7 ユーザーの記憶に残る世界観を構築しよう

【トンマナとは】デザインや文章の一貫性を保つルールのこと

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

もともとは広告業界で使われていた用語で、デザインの統一性を保つためのルールのことです。

英語では下記の意味があります。

トーン（tone）　　調子
マナー（manner）　様式

調子や様式を合わせることで、デザインに統一性をもたせ、企業やブランドのイメージや世界観を印象づけます。

「なんとなく」印象に残るサイトやデザインは、実は、カラーなどを綿密に考え、印象に残るよう計画的に作成されているのです。

現在では、文章表記など、文章に関してのルールを設定することも、トンマナ合わせの1つと考えられています。

【トンマナの必要性】「らしさ」を印象づける

それでは、なぜトーン＆マナーが必要なのでしょうか。

トンマナで上手に世界観を構築できると、そのブランド「らしさ」を印象づけ、愛着のわく存在になれるためです。

たとえば、下記のブランドは、カラーやデザインで誰もがそのブランドらしさを認識しています。

ティファニー　：　ひと目でわかるティファニーブルーで圧倒的な存在感
コカ・コーラ　:　　赤いカラーとコカ・コーラの瓶の形が特徴的
IKEA　：　　　　　ブルーとイエローのロゴで北欧家具の代表的存在

詳しく見ていきましょう。

事例1.　ティファニー：ティファニーブルーで気高さをイメージ

ティファニーのシンボルカラーであるスカイブルーは、「ティファニーブルー」と呼ばれ、多くの女性の心をときめかせています。

ティファニーのスカイブルーは、春の訪れを告げるコマドリの卵に由来します。

古くからイギリスでは、コマドリの卵の青は、大切なものを表す色として使われてきました。ティファニーの気高いイメージに、コマドリの卵の青はピッタリだったのです。

このティファニーカラーが初めて使用されたのは1853年のことです。チャールズ・ルイス・ティファニーが社名を「Tiffany＆Co.」に改修し、ティファニーブルーと呼ばれるカンパニーカラーも使用しました。

さらに、ティファニーの商品を購入した人だけが手にできる特別な箱として、あのティファニーブルーボックスを作り出しました。

白いリボンが結ばれたティファニーブルーボックスは、世界中にブランドの品格を印象づけています。

事例2.　コカ・コーラ：鮮烈な赤の印象

コカ・コーラのシンボルカラーといえば鮮烈な「赤」です。

コカ・コーラ社では、この赤色を「コーク・レッド」と呼び、ブランドのシンボルカラーとして大切にしています。

コーク・レッドを見れば、多くの人がコカ・コーラだと認識する、とても印象的なカラーです。

この赤色の起源は1888年に遡ります。コカ・コーラの事業を引き継いだ実業家のエイサ・キャンドラが、

コカ・コーラのシロップを運ぶ樽の全てを赤く塗り、アメリカ中の話題となった事が始まりです。

事例3.　IKEA：北欧家具の世界観

IKEAは、北欧らしいブルーとイエローのロゴがひと目でIKEAらしさをイメージさせる世界観を作り出しています。

IKEAの公式サイトも、イラストや文字に、ロゴと同じ色調のイエローやブルーがごく控え目に使われ、丁度よい具合に統一感を出しています。

また、商品の写真も、北欧テイストの家具を上手に配置していて、見せ方がとても巧みです。

【デザインのトンマナ合わせ】3つのコツ

サイトのデザインでトンマナを揃えるなら、まず、カラーとフォントを戦略的に選びましょう。

コツ1. カラーは3色まで

キーカラー選びは、トンマナを揃える際に、もっとも重要視すべきです。

その企業、製品、サイトの世界観を間違いなく伝えられるカラーを選びましょう。

1色or2〜3色を組み合わせるか

まず、使う色の数を決めます。

1色だけならインパクトがあります。このカラー戦略は「1色訴求」と呼ばれ、印象の全てを1色に委ねます。

2〜3色を組み合わせる手法もあります。

たとえば、IKEAやサーティーワンのようにキーカラーにかけ離れたサブカラーを組み合わせて特徴を出す配色を「バズカラー」と呼びます。

独自の世界観を作りやすく、演出もしやすいです。

コツ2. 世界観に合うキーカラーを決める

色数を決めたら、キーカラーを選びます。

「色見本帳」などを眺めながら考えるとよいでしょう。

コンセプトが伝わるカラー
世界観がわかるカラー
ターゲットが好むカラー
自社のストーリーに由来するカラー

上記から絞り込んでいきましょう。

たとえば、美容がメインのサイトなら、女性が好む明るく綺麗な色、健康系のサイトならビタミンカラー、ナチュラル系のサイトならベージュなど、伝えたいイメージを、ターゲットに届けるためにどうすべきか、戦略を練りましょう。

コツ3. フォント（書体）はシンプルに2種類まで

フォントにはそれぞれの魅力があります。

ロゴデザインなどに使うのであれば、下記のシンプルなフォントをおすすめします。

明朝体
ゴシック体

種類は2つまでがすっきりして見やすいです。

大切なのは統一感と伝わりやすさです。

もしも、コンセプトを表現するために個性的なフォントを使用するのであれば、フォントの種類は1種類にしておきましょう。

【文章のトンマナ合わせ】3つのコツ

サイト作成では、文章もトンマナを設定しましょう。

コツ1. 「ですます調」か「だ・である調」を選ぶ

まず、文末を「ですます調」か「だ・である調」にするかを統一しましょう。

とくにこだわりがないのであれば、サイトでは親しみやすく丁寧な「ですます調」がおすすめです。

もしも、断定口調で独特の空気感を表現したいのであれば、「だ・である調」もありかもしれません。

設定したら、ライターや編集の方で共有しましょう。

「です・ます調」と「だ・である調」については、記事ブログ内に私が詳しくご説明した記事があります。両者の特徴、どのような文章で使うべきか、記事を読めばすぐわかるようになっています。「です・ます調」と「だ・である調」の使い分けにお悩みの方は、こちらの記事を、ぜひ、参考にしてみてください↓

「です・ます調」と「だ・である調」の違いを5つの事例から分析【例文あり】

コツ2. ひらがな・漢字・カタカナ表記を決める

文章表記のトンマナを揃えておくことも大切です。

【文章表記の例】

「特に」　　　　　→「とくに」
「時」　　　　　　→「とき」
「〜上で」　　　　→「〜うえで」
「コンピュータ」　→「コンピューター」

ひらがな・漢字・カタカナの文章表記を統一することで、ライターによって表記が異なることを防ぎ、読みやすいサイトになります。［注2］

あらかじめ文章表記のトンマナを揃え、社内で共有しましょう。

ひかがな・漢字・カタカナの表記についてお悩みの方は、記事ブログ内に私がわかりやすく解説した記事があるので、ぜひ、こちら↓をご覧ください。堅実な印象を与える漢字、柔らかい印象を与えるひらがな、軽快な印象を与えるカタカナと、それぞれの特徴と適した文章がすぐにわかるようになっています。参考にしてみてくださいね。