WEBデザイナーの多くは「トンマナ」という言葉を聞いたことがあるのではないでしょうか？
トンマナを揃えると、
「制作物をイメージに合わせて制作することができる」
「特定の企業を認識できる」
このような役割があります。
逆に、トンマナが揃っていないと、
「コンセプトに合わせたデザインにならない」
「ターゲットに訴求するデザインにならない」
というように、クライアントの要件に合わせた制作が難しくなり、
修正回数が著しく増加して心身ともに疲弊することになりかねません。
だけど、実際にどうしたらトンマナが揃うのか、
どうやって決めたら良いのか、
分からないという方もいるでしょう。
そこで、今回の記事では
トンマナの役割や決め方などを解説していきます。
私の記事が、あなたの今後の制作に活きてくれたら嬉しいです！
トンマナとは？
トンマナとはトーン&マナーを略した言葉で、
企業やブランドの世界観を統一するためのガイドラインのことを言います。
デザイン全てにおいて、
ペルソナやコンセプトに合わせてデザインのルールを決めて、
イメージを固めていく必要があります。
このデザインのルールを決めることが、
トンマナの設計にあたります。
トンマナに合わせて制作されていることが分かる
例えば、Starbacks Coffeeの商品は、トンマナの設計ができているので、
一目で特定し認識できるようになっています。
では、デザイン視点でトンマナのポイントを解説していきます。
Starbacksの商品を比較しよう
Starbacksといえば緑が印象的ですよね。
どの商品も、フォントや色、人魚のロゴは
統一感があって分かりやすいデザインになっています。
複数の商品を比較してみると、
一貫して統一されたロゴを使用していたり、
トンマナに合わせたデザインやスタイルになっていることが分かりますよね！
トンマナの3つのメリット
では、トンマナを揃えるメリットはなんでしょうか？
3つのメリットを解説いたします。
１．ターゲットに伝わる
まずひとつは、トンマナから得る印象で
「親しみがあるな、この落ち着いた雰囲気好きだな」等、
与える世界観を統一することで、イメージが定着してブランドを認知してもらうことができます。
例えば、
先ほどの、Starbacksの商品を比較しても分かるように、世界観を統一させているから
色やロゴを見ただけで「Starbacksの商品だ」と認識することができています。
２．情報を分かりやすく伝えることができる
２つ目のメリットは、トンマナを合わせることで、
バナー広告やサイトを見てくれた人に、より良いUIとUXを提供できるようになるからです。
製品・サービスとユーザーとの接点をUI、
製品・サービスからユーザーが得られる体験をUXと言います。
例えば、ユーザーが海外のStarbacksに行きたくて
店舗まで道を案内されたとします。
目的地に着いた時に、
「ロゴが人魚じゃない…」
「Starbacks Coffeeの文字がスクリプト体になっている…」
「お店の色がピンク色…」
お店を見つけたけれど、
イメージしていた印象と違うと
ユーザーは、
「ここは私の求めているStarbacksではないかもしれない…」
と感じて、不安になりそうですよね。
きっと、求めている商品のバナーをクリックした時と、
遷移先のデザインの世界観が違ったときにも、同じように感じると思います。
なので、デザイン制作をする際には、
トンマナ設計をしたら全体のデザインを統一することで、
ユーザーにとって見やすく分かりやすいと感じてもらうことができます。
３．迷わずにデザイン制作ができる
３つ目は、トンマナを設計することで
世界観を持ったままスムーズに制作を進められるというメリットがあります。
配色やレイアウト、フォント選びに時間がかかることってありますよね。
でも事前にトンマナが決まっていれば、悩む必要がなくなりそうです。
また、クライアントさんの持つデザインの、
イメージに合わせた制作をするためには
よりトンマナの設計が重要になります。
合わせたいトンマナの5つの要素
ここでは、トンマナ設計で
必要な要素を解説していきます。
１．配色
配色はトンマナを決める上で、一番重要な要素です。
配色を決めるときは、
「メインカラー・ベースカラー・アクセントカラー」
の3色を目安に考えましょう。
色の種類を抑えて、
バランスよく配色を決めると
印象の良いデザインを制作しやすくなります。
配色バランスは
・ベースカラー70％
背景や余白で使用することが多いです。
・メインカラー25％
ロゴの色や企業の色など、伝えたい印象を決める色です。
一番始めに決めると、ベースカラーやアクセントカラーも決めやすいです。
・アクセントカラー5％
目立たせたせたいところに使用します。
ボタンに使用される事が多いです。
補色を選ぶと目立たせることができます。
配色を考える際は、どんな印象をもってもらいたいか
色の心理効果も考慮していきましょう。
２．フォント
フォントは、ユーザーに与える印象を決める、
重要な要素のひとつです。
なので、フォントも伝えたいイメージに合わせて統一しましょう。
「丸ゴシックは優しく親しみやすい印象を与える」
「角ゴシックは力強さや現代的な印象を与える」
など、フォントが少し形を変えるだけで、人に与える印象が変わってきます。
細部まで拘って、
「フォントウエイト」
「行間」
「文字間」
にも考慮していきましょう。
３．素材
写真やイラスト、ボタンなどの素材も、
伝えたい印象に合わせて統一することが重要です。
例えば、20代ママさん向け、お子さんと使用できるスキンケア商品であれば、
「20代ママさんの写真、もしくはママと子供が写る写真を使用して、背景は白っぽい色を基調としたもの」
というルールを決めると、LPでもバナーでも写真に統一感をもたせることができます。
４．余白
余白は、デザインの印象や情報の伝わりやすさを左右する重要な要素の一つです。
ユーザーに伝えたい情報を強調できたり、
余白を統一することで、洗練されたデザインになります。
強調したい情報は、あしらいをつけたりサイズを大きくするだけじゃなくて、
要素の周りに余白をつくることでも、情報を目立たせることができます。
また、文字間や要素間の余白の広さでも印象は変化します。
例えば、
下記の写真の様に
番号が振られたグループごとに、余白が設けられているので
情報をグループ化することができて、
分かりやすくなっています。
このように、余白で伝わる印象も変わるので
トンマナに合わせて余白を設けましょう。
５．文章
次に文章についてのトンマナをご紹介します。
「ですます調」にする、「である調」にするなど、
文章も統一しないと、世界観が変わったりするので情報が伝わりづらくなります。
話し方だけじゃなくて、見出しに対してどこに画像を配置するのか、
改行や段落はどのように分けるのか、
文章はどれくらいいれるのか決めておくことも重要です。
また、よく使う単語や英数字の表記も
統一すると分かりやすくなります。
例えば、「Webデザイン」「WEBデザイン」「webデザイン」と様々な言葉で表現できます。
このように表記をバラバラにすると、統一感がなくて読みづらかったり、違和感を感じますよね。
なので、一つの表記（例：「Webデザイン」）に統一すると、 ブランドの世界観を崩さず、情報を分かりやすく伝ることができます。
トンマナの設計方法
さて、ここで実際にトンマナを設計する方法を、３つのステップで解説していきます。
理解が深まると、バナーやWEBサイト等の全てのデザイン制作において、
デザインに統一感を持って、制作できるようになるでしょう。
１．ペルソナの設定をしよう
ペルソナの設定とは、ターゲットとは違って
「架空の人物のプロフィールを詳細に作成すること」です。
ペルソナ設定が曖昧だと、トンマナの軸もズレてしまいがちなので、
ターゲットの満足度を高めたり、制作物の成果を上げることが難しくなります。
例えば、ペルソナが20代ママ向けなのに、
黒を基調とした男性向けのデザインでは
トンマナが合っていないことになります。
そうなると、ターゲットは自分の求めていたサービスではないと感じて、
バナーやLP等のデザイン効果も得ずらくなります。
「このコンテンツは自分がターゲットになっている」と感じてもらうには、
バナーやLP制作等の商品企画段階で、ペルソナを理解することが必要になります。
２．コンセプトに合わせてトンマナを考える
次に、想定したペルソナに、
コンセプトが伝わるように
- デザイン
- 配色
- フォント
等の、トンマナを決めます。
例えば、旅行に行きたい20代子育てママがターゲットなら、
デザインで重視したい雰囲気は「楽しい」「癒し」や
「親子の旅行の写真」などが伝わると、アクセスや滞在時間が増えそうですよね。
伝えたい印象に合わせて、デザインを統一すると、コンセプトに合わせたトンマナ設計ができます。
３．ムードボードを作成する
ムードボードとは、トンマナ設計に合わせてデザインを集めたもののことを言います。
ムードボードを作成すると、
- デザインの作業効率を上ることができる
- イメージを視覚的に共有できるので、より詳細に印象のすり合わせができる
- ビジュアルイメージのズレがなくなるので、デザインの修正を減らせる
このように、伝えたい印象に合わせて、文字だけではなく視覚的にイメージをまとめることができます。
例えば、
楽しい印象を与える画像を、
- 色
- 形
- テクスチャ
等、いろんな角度で集めてくることで、
世界観がズレることなく、イメージをデザインに落とし込むことができます。
まとめ
今回は、トンマナの役割や決め方についてお話しました。
トンマナに合わせたデザイン制作では、
コンセプトや印象を、デザインに落とし込むことが重要ということが分かりましたね！
トンマナを合わせることで、イメージを統一し、
ターゲットに情報を分かりやすく伝え、
ブランド力を高めることができます。
もし自分が、トンマナに合わせたデザイン制作ができているかどうか
不安になったら、添削を受けてみましょう。
WithComiでは、プロからの添削を無制限で受けることができます。
デザイン制作に限らず、本気でフリーランスを目指す方向けに、
- マーケティング
- ライティング
- クライアントワーク
等、必要なスキルを学べる環境が揃っています。
気になる方は、まずは無料カウンセリングを受けてみてくださいね！
