デザイン

デザイナーが教えるトンマナの意味とデザインの一貫性を出すコツ

デザイン

トンマナはデザインをしているとよく耳にする言葉です。

デザインやブランディングをする上でこのトンマナは非常に重要になります。

 

Renton
Renton

トンマナとは、トーン(tone)&マナー(manner)の略称です。

このトンマナを統一させる上でのコツやポイントをプロのデザイナーが解説します。

デザインの一貫性を出すにはいくつかのセオリーが存在しますので、
しっかりポイントを押さえればデザインに統一感が出るので参考にしてください。

スポンサーリンク

トンマナとは?トンマナの意味を解説

トンマナとは英語のトーン(tone)&マナー(manner)の略称の事を指します。

トーンには音調や色調といった調子や様子を表す意味があります。マナーには行儀や作法といった立ち振る舞いや雰囲気を表す意味があります。

デザインにおいてのトンマナとはつまり、
数あるデザイン要素を一貫させるルールやスタンスの事を意味します。

 

Renton
Renton

トンマナを合わせるとは、
デザインにルールを設けて統一感を出す事を意味します。

なぜトンマナはデザインにおいて重要なのか

このトンマナがしっかり意識されていないと、チグハグした統一感のない印象になります。

WEBサイトやブランドなど、コンテンツが数多く存在するときにデザインに統一感がないと、
それぞれのコンテンツをユーザーは別物と認識してしまいます。

 

POINTユーザーが別物と認識することで、ブランドイメージを印象付けられないなど、
デザインを通して伝えたい思いや狙いがユーザーに届かなくなります。

トンマナが合っていないとデザインがゴチャゴチャしたイメージになり、発信側と受手側でミスマッチが起こりやすくなるので、トンマナは重要なのです。

 

スポンサーリンク

トンマナを合わせてデザインの一貫性を出すポイント

トンマナを合わせるためには、デザインに決まりを持たせることがポイントです。

 

Renton
Renton

トンマナはweb、グラフィック、ブランディングなど
全てのデザインで重要です。

その際に、どのような決まりを持たせるかを具体的なポイントを挙げて説明します。

カラーを統一する

出典 : etvos

コンテンツに使っている色がバラバラだったり、様々な色を使っている場合は、
デザインの統一感が薄れるため、使っているカラーを統一します。

 

Renton
Renton

コンテンツのイメージカラーの事をキーカラーともいいます。

デザインに多くの色を使用せず1色もしくは2色程度のキーカラーでコンテンツを展開する事でトンマナを合わせることが出来ます。

 

企業サイトなどではコーポレートカラーなどをキーカラーにしている例が多いです。

デザインをフォーマット化する

出典 : Muse+Metta(Behance)

デザインのレイアウトなどを
ある程度フォーマット化(固定)することで統一感のとれたデザインに仕上がります。

カラー展開などがあるパッケージデザインなどやカラー統一が難しいコンテンツにおすすめの方法です。

POINTフォーマット化は全てではなく、一部でもトンマナを合わせるのには効果的

全ての要素をフォーマット化することは難しいので、

大きなレイアウト要素のみや、ロゴやアイコンのみという風に、
どこまでをフォーマット化するかは全体のバランスを見ながら判断する事をおすすめします。

 

スポンサーリンク

フォントを合わせる

出典 : HAPPY SPRITZ

コンテンツに使っているフォントを合わせる事もトンマナを合わせる上では重要です。

フォントはトンマナに必要な様子や雰囲気などを担う役割があるので、たくさんのフォントを使うとデザインに一貫性がなくなります。

 

Renton
Renton

見出しやタイトルなどポイントで
フォントをあえて変える場合は問題ありません。

かと言って、コンテンツのフォントを全て1つに統一するとデザイン性が薄れるので、全体のバランスを見ながら使うフォントを合わせてください。

使う写真やイラストなどの素材のテイストを合わせる

出典 : KIRIN moogy

デザインに使っている写真やイラストなどのテイストを合わせる事でトンマナを合わせることが出来ます。

水彩イラストなら水彩イラストで統一したり、
モノクロ写真を使っているなら、他もモノクロ写真を使ったデザインにするなどです。

 

Renton
Renton

特にイラストのタッチは描いた人によって微妙に変わってくるので
出来れば同じ人が描いたイラストを使うのがベターです。

あくまでテイストを合わせることが重要なので、
違う素材でもテイストを壊さない範囲であれば組み合わせても問題ありません。

POINTex…水彩イラストと線画を組み合わせる=“手書き”という範囲でテイストが合っている

 

スポンサーリンク

まとめ

いかがでしたか?
デザイナーが教えるトンマナの意味とデザインの一貫性を出すコツをご紹介しました。

このトンマナがしっかり意識されていないと、チグハグした統一感のない印象になってしまうので、
デザインする上では重要になってきます。

ご紹介したセオリーを意識するだけでトンマナを合わすことがある程度出来るようになると思いますので実践してみてください。

 

さらにトンマナについて詳しく知りたい場合はこちらの本が参考になります。

 

この記事のまとめトンマナを合わせてデザインに一貫性を出すポイント

カラーを統一する
デザインをフォーマット化する
フォントを合わせる
使う写真やイラストなどの素材のテイストを合わせる