トンマナって結局なんで大切なの？設定のポイントとデザインで意識すること

デザインをする際、「トンマナ」という単語を耳にしたり、意識して制作したりしている方が多いと思います。
「トンマナ」とは何か、重要性や設定するポイント、デザインで意識することをご紹介します。

トンマナの重要性って？

トンマナって？

「トンマナ」は“トーン&マナー”の略で、日本語に訳すと「調子と様式」となります。

言葉の意味通り、デザインやコンテンツの雰囲気や世界観などを統一させるための一貫性を持たせるルールのことです。

この「トンマナ」は企業のブランディングでも重要な要素と考えられており、クリエイティブにおいてトンマナを意識した制作が求められているのです。

トンマナが揃ってないってどういう状況？

例えば、バキバキの筋肉キャラが出てくる漫画を読んでいて、急にゆるふわ漫画に出てくるような動物キャラが敵として出てきたら…どうですか！？

「あれ…なんだか不自然…？」と感じませんか？

このような違和感や現象を「トンマナが徹底されていない」といいます。

トンマナはユーザーに魅力を伝える第一歩！

トンマナをしっかり決めた上で進行することで、企業や制作側がユーザーに伝えたいメッセージやサービスの印象をデザインとして形にすることができます。

トンマナが大切な理由の一つに「印象」があります。
有名な企業や商品が、色や文字などといったデザインだけでブランドを想起させられるのもトンマナが関係しています。

トンマナを合わせることで、ユーザーは、企業やサービス、サイトのコンセプトを自然と理解しやすくなります。
例えば、ページを変えるごとにデザインが異なっていると、本来の魅力が理解されづらく、サイトからの離脱にもつながる可能性があります。

ターゲットに明確に訴求するためにも、企業イメージやサービスのコンセプト・訴求ポイントを一貫したデザインとして表現し、制作を進める必要があるのです。

また、ユーザーに対してのみならず、プロジェクトに携わる全員にとって「トンマナを揃える」ということは「制作のルールが決まる」というとても大切な工程の一つなのです。

複数人が携わるプロジェクトの中で認識のズレが起こってしまうと、プロジェクトが進行していく中で意図せず初期に設定したコンセプトと異なるデザインやビジュアルが採用されていってしまうことも少なくありません。

トンマナをしっかり揃えることで、プロジェクトに携わる全員がデザインや設計に対して同じ認識を持つことができるので、スムーズな作業進行や、一定の質を保つことができます。

トンマナを設定しよう

では実際に以下4つのポイントを踏まえてトンマナを設定してみましょう。

【Point 1】訴求ポイントを明確にする

サービスの訴求ポイントやサービスの価値、魅力などのポイントを洗い出し、最も訴求したい内容に絞り、サービスやブランドが消費者やユーザーにどのようなイメージを抱いてほしいかを明確にします。

ここでイメージやサービス価値を曖昧に設定していると、トンマナが揃わず不自然な印象となり、プロジェクトが進行していく中で認識のズレに繋がることがあります。

【Point 2】ターゲットを決める

大きい括りで設定してしまい曖昧になりがちな「ターゲット」ですが、このターゲットの設定が大切です。
例えばターゲットを「女性」とした場合でも、10代の女性と60代の女性では「色」や「キャッチコピー」に対して持つ印象も変わってきます。

女性というターゲットであっても「どれくらいの年代に向けて」「どのような好みを持っているのか」などできるだけ具体的に設定する必要があり、誰に向けたデザインなのかを考える必要があります。

【Point 3】表記ルールを決める

キーワードひとつで、サービスや製品がユーザーへ与える印象が変わってしまうことがあるため、価値やポイントを明確な言葉として表現してみましょう。

文章表記など、文章に関してのルールを設定することも、トンマナの1つと考えられています。
ひらがな・漢字・カタカナの文章表記が統一されていなかったり、「性質」と「特性」など類似した単語が統一されずに使われていると、価値や魅力が伝わらず逆効果となってしまうため、訴求やコンセプトに明確に合った単語や表記ルールを選定し、あらかじめ文章表記のトンマナを揃え、共有するようにしましょう。

【Point 4】ターゲットやキーワードに合ったデザイン要素を設定する

キーワードに合ったビジュアルやフォントを考えてみましょう。

特にビジュアルやフォントは視覚的にユーザーに対して印象を与える要素です。
コンテンツ内容とビジュアルやフォントのイメージが合わないデザインは、利用意欲を低下させてしまい、離脱に繋がることも多く、サービス理解につながりません。
選定したターゲットやキーワードを意識した上で、ページ構成やカラー、フォントを決定しましょう。

デザインで意識しよう

次に、決定したキーワードやデザイン要素を元に、実際に形として制作を行いましょう。
デザインを行う際にも、4つのポイント「要素の配置」「配色」「フォント」「余白」を抑えることで、より良い価値を生み出すことができます。

要素の配置

人の視線は左から右へ、上から下へと「Z」の形に移動します。
その法則に則ってコンテンツを配置するようにしましょう。

また、コンテンツやテキストの要素の配置の位置を左揃えや右揃えに統一することも大切な要素の一つです。
ユーザーの視線がバラバラと動く配置は、一貫性のないサイトとなってしまうので注意してください。

配色

キーカラーを選ぶ際はその企業やサービス、サイトの印象に合ったイメージを伝えられるカラーを選びましょう。
目立たせるための配色としてよく使用してしまう赤や青、黄といった原色は目立ちすぎるという問題があり、多用しすぎてしまうと、重要視させたいコンテンツがどこか分からずに、他のコンテンツとの差別化ができないことがあるので使い方には注意が必要です。

まず、使う色の数を決め、配色は多くても3色ほどに抑えて、読みやすいページ制作を心がけてみてください。
伝えたいイメージをターゲットに届けるために適切な色はどれかを考え、決定しましょう。

また文字色では真っ黒（#000）や真っ白（#fff）を使わず、少しずらした色を使うのがポイントの一つです。

フォント

フォントひとつでも、与える印象は変わってきます。

代表的な「明朝体」「ゴシック体」の二つのフォントでは、明朝体は落ち着いた印象や洗練されたような印象を与え、ゴシック体は柔らかい印象やとっつきやすい印象を与えます。
フォントにも字体によってそれぞれ魅力があるので、全体で統一感を持たせ、どのフォントを使用することが適切なのかを考え決定してください。

フォントが揃うだけでデザイン全体の印象も大きく変わります。

余白

伝えたい魅力やメッセージがたくさんあると、どうしても内容が盛りだくさんとなり、1ページに含める内容も多くなるかと思います。

コンテンツをたくさん詰め込むと重厚感が出て、内容の厚みも増えるため、このような場合は関連したコンテンツをなるべく同じグループとしてまとめ、違うコンテンツを紹介する際はしっかりと余白を取って配置するようにしましょう。

有効的にスペースを取ることで全体のコンテンツが見やすくなり、盛りだくさんの内容でも理解されやすいデザインとなります。

最後に

トンマナを揃えることで、デザインに一貫性を持たせることができます。
また、コンテンツの配置や配色、フォントの種類や有効的な余白の設定など、よりクオリティの高いデザインを制作するためには多くの要素の調整が必要となります。

より良い価値のあるデザインを作るためにもプロジェクトを開始する段階でしっかりとトンマナを揃えられるようイメージを明確にし、制作に携わる全員が同じ認識を持ってプロジェクトを進行できると、結果的に予想以上の成果を生み出すことができるので、ぜひ実践してみてください！