トンマナとは？デザインに一貫性を出すために必要なこと
Webデザイン用語でよく耳にする「トンマナ」という単語。
これは「トーン＆マナー」という言葉を省略して、使用されています。Web関連だけでなく、ブランド戦略などさまざまな場面で重要視されている要素です。本記事ではWebデザインやコンテンツ制作で重要なトンマナについて、解説したいと思います。
目次
トンマナの重要性とは？
海外では「tone and style」と呼ばれることが一般的のようですが、日本ではトンマナと横文字の略称がよく使われています。
これは「トーン＆マナー」という言葉を省略した単語であり、トーン(tone)は「調子」や「色」、マナー(manner)は「やり方」、「様式」や「作風」などの意味があります。
元々は広告や出版業界で使われていた用語でしたが、最近はWeb業界で使われる言葉としてのイメージが強いのではないでしょうか。
その言葉の意味合い通り、デザインやコンテンツの雰囲気や世界観などを統一させようと使用されている言葉です。
企業ブランディングにおいても重要な要素と捉えられ、トンマナを意識した制作が求められています。
では、なぜさまざまな場面でトンマナが重要視されているのでしょうか。
明確に意図を伝えられる
トンマナを揃えることで、企業や制作側がターゲットに与えたいメッセージや印象をデザインで伝えることができます。
企業ブランドのイメージや、商品の魅力などを一貫した表現やデザインで制作することでユーザーたちも理解しやすく、視認しやすい傾向にあります。
文体やデザインがページを替えるごとに異なっていると、理解してもらえなかったり、サイトやページから離脱してしまったりと、購買機械の損失を生み出してしまいます。ターゲットに明確に訴求するためにも、トンマナを揃えたデザイン制作が必要です。
制作側のイメージが揃う
ユーザーにとってだけでなく、制作するチームや担当者にとってもトンマナを揃えることは重要です。
ページを制作することを企画した担当者と制作者側での認識のズレがあれば、コンセプトと異なるデザインやビジュアルが採用されてしまうこともあります。
チーム全体でトンマナを統一することで無駄なく、一貫性のあるデザイン制作や運営が行えます。
これにより作成後にデザインを修正する手間がなくなり、作業効率のアップが見込めるでしょう。
トンマナの設定方法
ターゲット層やカラー、キャッチコピーなどからトンマナは設定されていきます。関係する担当者たちからユーザーまでが、同じ認識を持って商品の購入や問い合わせなどに進めるように設定しなくてはいけません。
商品価値やブランドのイメージを明確化
まずは自社製品や売り出したい製品の価値、魅力を明確な表現で認識しましょう。幾つかのポイントを提示し、最も推奨したい内容を共有します。同じくブランドとして、消費者やユーザーに抱いてほしいイメージも共有しましょう。イメージや製品価値は、曖昧なニュアンスで理解してしまっていると、トンマナが揃わずに不自然な印象を与えてしまいます。
キーワードを選定
上記で判明した価値やイメージを、明確な言葉や表現にしましょう。例えば「自然素材」の製品を販売するのに「自然」の素材なのか「天然」の素材なのか。言葉のニュアンスだけでもユーザーがイメージする製品が異なってきます。「上質」と「高級感」や、「定番」と「鉄板」など類似した単語が並んでいると、価値や魅力が伝わり辛くなってしまいます。製品やイメージに明確に合った単語を選定し、一貫して選んだ単語を使用するようにしましょう。
ターゲットやキーワードに合ったデザイン要素を設定
選定したキーワードに合ったビジュアルやフォントを使用しましょう。
コンテンツ内容とイメージの合わないデザインは、購買意欲を低下させてしまったり、商品理解につながりません。
またターゲットにそぐわないデザインも購買機会の損失を発生させてしまいます。
選定したキーワードを意識しながら、レイアウトやカラーを設定していきましょう。
また、ターゲットを明確にすることも重要です。
年齢や性別などの属性はもちろん、趣味や職業、収入など、できる限りターゲットのイメージをはっきりさせましょう。
このターゲットのイメージをペルソナといい、ユーザー層を指す言葉です。
ペルソナを設定することでどんな相手にどう思われたいのかが誰にでも分かるようになります。
ペルソナが共有されるようになれば、自然とトンマナの方向性も定まっていくでしょう。
Webデザインで必要なこと
トンマナを揃える重要性を解説してきましたが、Webデザインでは一貫性を持った制作が重要です。
一貫性を保つために、トンマナと合わせて次の3つのポイントを意識して制作しましょう。
配置
視線は左から右へ、上から下へと移動することが一般的です。この移動法則に則ってコンテンツを配置するようにしましょう。さらに左揃え・中央揃え・右揃えとコンテンツやテキストの配置始めは揃えることも大切です。ユーザーの視線がバラバラと動く配置はトンマナが揃わず、一貫性のないサイトとなってしまいます。
配色
赤や青、緑といった原色は認識しやすい色なため積極的に使用したい色ですが、その反面で目立ちすぎるという問題もあります。乱用しすぎてしまうと、重要視させたいコンテンツがどこか分からずに、他のコンテンツとの差別化ができないことがあります。配色は多くても3色ほどに抑えて、読みやすいページ制作を行いましょう。
余白
コンテンツやビジュアルを詰め込むと重厚感があり、内容の厚みも増やせます。関連したコンテンツはなるべく同じグループとしてまとめ、違うコンテンツを紹介する際はしっかりと余白を取って配置しましょう。余白が多すぎてしまうと内容の薄いページに見えますが、有効的にスペースを取ることで見やすく、分かりやすいデザインになります。
フォント
使うフォントによって与える印象は大きく変わります。
例えば明朝体のフォントは高級感を感じやすく、太めのゴシック体はインパクトが出やすいです。
どんな印象を与えたいのかを踏まえてフォントを選びましょう。
また、フォントそのものだけでなく行間や字間、見出しと本文それぞれのフォントサイズにも気を配りましょう。
これらは与えるイメージも変わりますが、それ以上に読みやすさ、感じるストレスなどが大きく変わってきます。
読んでいてストレスの強い記事では高い評価を得ることは難しいのはもちろん、場合によっては最後まで読んでもらえないかもしれません。
統一性
サイトや文章の統一性も非常に重要な要素です。
例えば同じ内容の言葉をどう記載するかは予め統一しておくと混乱が少なく済みます。
記事では「日本語」「数字」「記号」の全てを取り扱う可能性がありますし、場合によってはカタカナで表記すべきか英語で表記すべきか悩む言葉もあるでしょう。
同じ日本語だとしても、ひらがな、かたかな、漢字のどれで表現するべきか意見が別れるかもしれません。
例えば「こと」なのか「事」なのか、記号は半角なのか全角なのか、数字はアラビア数字なのか漢数字なのか、はたまた「ひとつ」とひらがなで表すのか。
文章中一度しか使わない言葉であれば統一の必要はないように感じられますが、サイト内の別のページとも文章が統一されていた方が読みやすいことには変わりません。
制作側にとっても最初からルールを決められていることで迷うことが少なくなるでしょうから、作業効率が減るというメリットが見込めます。
また、レイアウトも最初にルールを作っておいて統一性を高めることをおすすめします。
例えば「画像を載せる際は上と下に行間を空ける」「すぐに本文を始めず、文章の最初には導入を設置する」などのルールを決めておくと良いでしょう。
この際見落としがちなのが文章量です。
サイトの中にあるページを読んで、良いなと思ってらえたとします。
その結果ほかのページを読んだ際、文章量が最初に読んだ記事と比べて半分だったらどうでしょうか。
半分というのはさすがに少ないとしても、テーマによって文章量が多くなったり少なくなってしまったりするのは決して珍しいことではありません。
しかし、その結果ページによって文章量が違うサイトができてしまうと、非常に読みにくいサイトだと思われてしまうかもしれません。
それを避けるために、文章量についてもある程度決まりを作っておくと良いでしょう。
文章量が統一されていれば画像の量や差し込むタイミングなどにも統一性を感じやすくなります。
まとめ
さまざまな場面で用いられるトンマナは、揃えることでデザインの一貫性を演出してくれます。その他にもコンテンツの配置場所や配色展開、余白の有効活用など良質なデザインにするためには多くの要素を取り込んでいます。
まずはトンマナを揃えられるようにイメージを明確にしてからキーワードを選定しましょう。
へのお問い合わせはこちらから
