「トンマナ」とは「トーン（tone）＆マナー（manner）」を略した呼び方です。

トンマナとは色調や様式、つまりデザインやスタイルなどに一貫性をもたせることを言います。

もとは広告・出版業界の用語でしたが、近年では企業のブランド戦略やWebデザインなどでも広く使われるようになりました。

トンマナを守ることは、ユーザーに興味を抱かせる役割があります。また、あらかじめトンマナを決めて作業を進めることで、チームでの制作も進めやすくなります。

ユーザーも、トンマナが守られていることで、情報を違和感なく受け入れることができるのです。

サイトデザインにおける決定するべきトンマナ

レイアウト

視線は左から右へ、上から下へと移動することが一般的です。この移動法則に則ってコンテンツを配置するようにしましょう。さらに左揃え・中央揃え・右揃えとコンテンツやテキストの配置始めは揃えることも大切です。

サイト内で不統一な印象を与えないよう、画像の前後は一行改行する、コンテンツの最後にはまとめ文を設置するなど、細かな点までレイアウトのルールを決めてから、一貫性のあるサイトを制作しましょう。

フォント

フォントの種類は数多くあり、代表的なものだけでも明朝体、ゴシック体、行書体、ポップ体や手書き文字などがあります。

ユーザーは潜在的に、明朝体には高級感を感じたり、太ゴシック体にはインパクトを感じたりします。そのため、サイト全体で伝えたいイメージに合ったフォントを選びましょう。

配色

トンマナルールのデザイン要素で最も影響が大きいものとしてあげられるのが、配色です。

はじめに、イメージや世界観に合わせて、サイト全体のメインカラーを決めます。次に、メインカラーを引き立てるベースカラー、ポイントとして使うアクセントカラー、文字色を決めます。ただし、色の種類が多すぎてしまうと、ユーザーはどの色が重要であるか混乱してしまうため、できる限り3色ほどに抑えることが良いと言われています。

余白（ホワイトスペース）

デザインには、ホワイトスペースと呼ばれる、何も置かれていない場所があります。

あまりに多くの文章や素材を詰め込むことは、ユーザビリティーを損ねてしまいます。

情報を詰めすぎず上手に余白やホワイトスペースを使えば、コンテンツの情報が伝わりやすくなり、ユーザーの理解度を上げる効果が得られます。

素材（写真・イラストなど）

サイトは、写真やイラストを使用することで可読性を高め、ユーザーの離脱率を抑えます。

それらの素材を使用する際も、色味が多すぎないものは使用しないなどのトンマナを決めるようにしましょう。

素材の形も、柔らかい雰囲気を出したいなら丸みを帯びた形、シャープな雰囲気ならを出したいなら角張った形など、雰囲気に合わせて選びましょう。

まとめ

トンマナを設定することは、デザインの一貫性を演出してくれます。

トンマナの設定でまず大切なのは、ユーザーの目線に立つことです。トンマナが揃っていないと、ユーザーは違和感を感じてしまいかねません。ユーザーの目線に立つことによって、設定すべき統一性、どうすれば読みやすくなるかも次第に見えてくるでしょう。

読みやすいサイトはユーザーの満足度を上げ、売上や業績の向上にも繋がります。マーケティング効果を上げるためにも、トンマナの統一ルールを決めてサイトの品質を上げていきましょう。