デザインをやっているとトンマナという言葉をよく耳にします。
「トンマナとは一体何？」
「トンマナが統一されていたらどうなるの？」
「トンマナの作り方ってどんな？」
といった疑問に答えていきます
目次
・トンマナとは
・トンマナ作り方のポイント
ー コンセプトを細かく言語化
ー サンプルイメージで見える化
ー 表現の引き出しから具現化
・トンマナを掴むコツ
トンマナとは
トンマナとは「トーン＆マナー」を略した呼び方です。
トーンマはデザインの色調やレイアウト、手法などデザインやスタイルに一貫性を持たせるルールのことです。
つまりトンマナはデザインキャラクターや世界観などの方向性を決めるものなのです。
具体的には画面（デザイン）の中の色、イラスト、空間のとり方、構造、フォント、情報量、写真の扱い方といった要素のトンマナを揃えることで、
画面がまとまって見え、伝わるイメージの威力を倍増させることができます。
人間が情報を集める時、五感の中でも視覚の占める割合は8割以上と言われています。
なのでトンマナがそろっているとよりその画面が心に残ります。
さらに画面に統一感があるため、見やすく、結果的に伝わるデザインとなります。
トンマナ作り方のポイント
トンマナをそろえるためにはいくつかのステップを踏みデザインの方向性を定めていきます。
この方向性を定めることで、違和感のある要素やあしらいをしてしまうことが軽減されるので、制作する前にしっかり見える化しておきましょう。
それでは早速順番に紹介していきます。
コンセプトを細かく言語化
初めに、イメージを具現化するため次のフローに従い、その画面のコンセプトを細かく言語化していましょう。
- 一般的なイメージ
- テーマ分析
- 視覚言語化
- 構成エレメント
- アイディア
一般的なイメージ
初めは一般的なイメージからテーマを決めます。
例えば制作のテーマが「喜び」と決まったとします。
テーマ分析
次にそのテーマの細かい分析をしていきます。
「喜び」というテーマに対してどういった感情や行動があるかを考え、書き出していきます。
・明るい
・リズミカル
・楽しい
・ポジティブ
・精気がある
・跳ねる
・歌う
・踊る
・パワフル など
視覚言語化
テーマ分析で書き出した感情や行動を表現できるデザインの見た目を考えていきます。
・明度の高い色
・ビビットトーン
・暖色系
・丸み
・動き
・リズム
構成エレメント
次は言語化した見た目を表現できるデザインを構成するエレメントや手法を考えていきます。
・色
暖色系のビビットトーンをメインに
・形
円形/円弧
・構図
画面全体に強弱をつけて
アイディア
これまでに洗い出したイメージやデザイン手法などを組み合わせて、デザインを形にしていきます。
できるだけたくさんのパターンを作ってみましょう。
全く違うものだけではなく、配置を少し変えたり、構成エレメントを変えてみたりなど少しの変化を加えたものも作ります。
そのアイデアの中から一番良いと思うものを作り込んで完成という流れになります。
最初は言語化することが難しいと感じるでしょう。
そんな時は言語化シートを使うのも有効的です。
ここまで掘り下げておくと、参考資料探しが楽になり、途中で違う方向性のデザインをしてしまう可能性が低くなります。
それにデザインを制作した後の、どうしてこのデザインにしたのかの説明もロジカルにすることが可能になります。
こちらの言語化シートを活用してください！
サンプルイメージで見える化
制作イメージを関係者と共有してスムーズに案件を進めるために、思い描いたサンプルのイメージを見える化しましょう。
本格的な制作に入る前にクライアントさんとイメージを共有できるものを作ります。
イメージ共有を行うことで、完成イメージのすれ違いを防ぐことができます。
先程の言語化シートで選んだ単語をまとめて文章にしていきます。
しかし文章だけではイマイチイメージが掴めないなんてこともありますよね。
だからイメージボードやムードボードといったものを作ります。
例えばPinterestなどからイメージに近い画像や素材を集めてきて、コラージュ画像を作ったり、
Canvaという無料のデザイン制作サービスを利用することで、簡単に制作することが可能です。
Canvaにはテンプレートが豊富で、「ムードボード」と検索するとたくさんのテンプレートがあるので自分の制作イメージにあったものを見つけてサックッと作ることができてしまいます。
ちなみに、複数ページあるサイト制作の場合は、見た目以外の部分も掘り下げる必要があります。
例えば、文章の言い回しであったり、フォント、素材のあしらい方までを細かく掘り下げます。
この時の言語化のポイントは擬人化して考えていくことです。
サイトは訪れたユーザーとコミュニケーションをとり接客してくれているものと言えますよね。
そのコミュニケーションを作るのに人×媒体（制作物）だとイメージがしにくいです。
そこで、制作物を擬人化、つまりユーザーを接客しているのはどんな人かを考えて、イメージを掘り下げていきます。
擬人化バージョン → デザイン要素に置き換え
・見た目 → UI（色やデザイン手法など）
・服装 → 情報の見え方（余白や写真の使い方など）
・動作 → インタラクション（スクロール時の動き）
・声 → 音声効果（どんな効果音を入れるか）
・言葉遣い → 文章の雰囲気（文章の口調）
・性格 → サービス（クーポンや動画、紹介など）
表現の引き出しから具現化
設定したトーン&マナーを実現し、 思い通りの成果を上げるために、使う分のパーツをイメージボード・ムードボードを参照して制作していきます。
ここで大事になるのが自身のデザインの引き出しです。
初心者デザイナーによくあるのがせっかくイメージは固まったのに、いざ本番のデザインで残念になってしまうことです。
この残念になってしまうデザイナーには共通した傾向があります。
それは記憶の片付け方が雑だということ。
ここでいう記憶の片付け方とは、デザインを言語化する時の分類の細かさについてです。
例えば同じガーリー系でも子供っぽいものから、大人かわいいもの、シンプルめ、派手めなどさまざまです。
デザインの引き出しの分類が雑な人はガーリー系を一括りにして記憶してしまっているために、デザインとして落とし込んだ時にトンマナがズレて違和感のあるデザインになってしまうというわけです。
ですので、イメージの観察言語化をする際にデザインをどう感じるかだけではなく、なぜそう感じるかなで深く観察し微妙なニュアンスの違いを言語化してデザインの引き出しに入れることを繰り返していくことでトンマナのあったデザインを制作できるようになります。
トンマナを掴むコツ
トンマナを掴むためにはまずデザインの中の共通項を言語化します。
・色の塗り方
ベタ塗り、ムラあり
・角の尖り方
角まるの大きさ
・ラインの印象
細い、太い、手書き
・オブジェクトの印象
デフォルメ具合
言語化をしたら、そのデザインの世界観にはどんなパーツが当てはまるか、想像を働かせながら制作していきます。
ボタンやタイトル１つがデザインの世界観に馴染んでいなければ違和感へとつながります。
そういった細かい部分にも注意をすることでトンマナが統一された、伝わるデザインになるのです。
パーツひとつの色・形状を決して軽んずるべからず!!
トンマナトレーニング
トンマナを作るには言語化命！
こちらでは言語化トレーニングの方法とコツを紹介します。
チラシやサイト、バナーなどを見たときは、「感想」と一緒にデザインを記憶します。
この感想を書くことで記憶に定着しやすくなります。
また、感想＝言語化することにもなるのでデザインの勉強につながります。
もし、ふわっとした感想しか出てこない時は、同じジャンルの広告やサイトをいくつか並べて、それらに比べてどう感じるかレビューするといいです。
最低でも、色・文字・レイアウトを考察します。
最初にどう感じたか、次になぜそう感じたのかをそれぞれの項目で深掘りする。
このトレーニングを続けると、画面の中に潜む違和感に気づきやすくなります。
バナーやサイトを模写する際にもぜひやってみてください！
バナー模写のやり方は別の記事で紹介していますので、そちらをご覧ください。
