こんにちは、いけあつです。
先日、このようなツイートをしました。
ブログのアイキャッチ画像トーン&マナー改善 突貫工事でひとまず、共通の要素(グラデーション、白文字、枠線など)もたせてみた。 これから記事をどんどん追加して増やしていくからには、グラフィックの統一感意識しないとなぁ。
この「デザインのトンマナ」について深掘りして行きたいと思います。
- 仕事の資料やブログの記事のデザインで統一感を出したい！
- サイトの画像素材を自分で作っているんだけど時間がかかって大変、、、
といった悩みをお持ちの方に、この記事の情報がお役に立てれば幸いです。
本記事の内容
1. トンマナとは？トーン＆マナーの略です
トンマナとはトーン＆マナーの略で、「デザインに一貫性を持たせること」を指します。
「トンマナって初めて聞いた」という方も多いと思います。
デザインや広告系のお仕事でよく使われる言葉です。
「トンマナが揃ってない」とか「ここのトンマナ揃えて」みたいに「揃う」という動詞とセットで使うことが多いです。
たとえば、「コカコーラの製品や広告はどれも赤と白が使われている」などが挙げられます。
言い換えると「デザインする上でのルール決め」のようなものです。
2. トンマナが揃っていると何かいいことあるの？
トンマナが揃っている（規定されている）ことによるメリットは、大きく下記の２つだと思います。
【トンマナが揃っていることのメリット】 ・ユーザーが理解しやすい ・デザイナーの作業効率が上がる
それぞれを詳しく見ていきましょう。
トンマナが揃っているとユーザーが理解しやすい
トンマナが揃っていると、コンテンツや雰囲気に統一感が生まれて、ユーザーが「ブランド」と「構造」を理解をしやすくなります。
「ブランドを理解しやすい」というのは上にあげたコカコーラの例でいうと
- 赤い色の自動販売機を見て、コカコーラの自販機だと予想する
- コンビニでコカコーラを買おうとして赤いペットボトルを探す
のように「ユーザーが類推をできるようになる」ことを指します。
「構造を理解しやすい」というのは「連続する情報の中で、どこに何の情報があるのかがわかりやすい」ということです。
たとえば、最近僕が作ったアイキャッチ画像の例で説明すると、画像の上部分に小さな文字で記事のジャンルや副題が書かれています。
そして一番大きな文字で記事のタイトル、この記事を読みと何がわかるのかが書いてあります。
また、タイトルの下のイラストは記事の内容を想起させるイラストが表現されています。
僕のブログに訪れてくれたユーザーはアイキャッチ画像をザーッと流し見るだけでも「その記事は何のジャンルの記事なのか？どんな内容の記事なのか？」が簡単にわかるように設計しています。
トンマナが揃っているとデザイナーの作業効率が上がる
この点について、下記のようなツイートをしました。
「アイキャッチ画像のトンマナを揃える」っていちど決めたら、この先つくるアイキャッチ画像の生産スピードは通常の3倍くらいに速くなる気がする。シャア並みだ。 その分、質の向上とか記事の量を増やすことに時間をかけて、ブログ全体の満足度をあげてこう。
なぜ作業効率が上がるのかというと「考える要素が少なくなるから」です。
僕は、アイキャッチ画像を作る際に下記のような要素を自分自身に規定しました。
【いけあつのブログのアイキャッチ画像のトンマナ】 ・背景は色のグラデーションを使う ・文字やイラストは白を使う ・枠線で囲む ・上部分に小さい文字で記事のジャンル（副題）を書く ・その下に大きい文字で記事のタイトルを書く ・フォントはマキナスを使う などなど
これによって僕が今後、ブログのアイキャッチ画像を作る際に考える要素は、ぐっと少なくなりました。
主に下記の３つだけです。
【いけあつのアイキャッチ画像を作るときに考えること】 ・背景のグラデーションは何色にするか ・タイトルと副題は何を書くか ・イラストは何を表現するか
トンマナを決める前は、すべての要素を考えながらアイキャッチ画像をデザインしていたので「１つあたり40分から90分ほど」かかっていたと思います。
今はトンマナを決めて考える要素が減ったことにより「１つあたり15分から30分」で作ることができています。
作業効率がぐんと上がっていることがわかりますね！
3. トンマナが揃っていることのデメリットはある？
「ぱっと見のバラエティー感が弱くなる」これがトンマナを揃えることのデメリットだと思います。
いちど、アイキャッチ画像のテイストを統一してみようかなー。 すっきりするだろうけど、バラエティ感無くなるのもなぁ、、、悩ましい！ ひとまずやってみて、そのあと考えればいいか！まずは行動、試行錯誤あるのみ！
こちらのツイートで悩んだ点でもあるのですが、トンマナを揃えることで統一感が生まれます。
その一方で「色々なものがある感」「ぱっと見のバラエティー感」が弱くなってしまいます。
とくに「使う色を決める」とバラエティー感がぐっと弱くなります。
ここは「自分がどのくらいの統一感を出したいのか？バラエティー感を出したいのか？」を考えて決める必要があるところですが、ツイートで言及しているように「ひとまずやってみて、そのあと考える」のがおすすめです。
気になったら改善していけばよいので、悩んで固まってしまう前に、ひとまず行動してみましょう！
4. トンマナを揃えるにはどうしたらいいの？
それでは具体的に「トンマナを揃えるにはどうしたらいいのか？」を紹介していきたいと思います。
ポイントは下記の２つです。
【トンマナを揃えるときのポイント】 ・要素を言語化する ・要素を反復する
要素を言語化する
まずは揃えたいトンマナの見本を見つけましょう！
自分が過去に作ったものでもよいですし、自分の好きなデザインを見本にしてみるのもOKです。
そして、選んだ見本に含まれている要素を言語化していきます。
このとき、箇条書きでなるべく短いシンプルな言葉を使うのがコツです。
ここでは例として先ほど少し説明した僕のアイキャッチ画像を使ってみます。
【いけあつのブログのアイキャッチ画像のトンマナ】 ・背景は色のグラデーションを使う ・文字やイラストは白を使う ・枠線で囲む ・上部分に小さい文字で記事のジャンル（副題）を書く ・その下に大きい文字で記事のタイトルを書く ・フォントはマキナスを使う などなど
要素を反復する
そして、新たに同じトンマナのデザインを作るときには、上記で言語化したキーワードをひとつひとつ素直に実行していきます。
難しく考えずに素直に反復してみましょう！
するとトンマナの揃った統一感のあるデザインがサクッと出来上がります。
もっと統一感を出したい場合は、トンマナのキーワードを増やしてみましょう。
逆に、統一感を弱くしてバラエティー感を出したいときには、トンマナのキーワードを減らしてデザインの制約を緩めてみてください。
5. トンマナを揃えて作業効率とブランド力をアップしよう！
ここまで読んでいただきありがとうございます！
「デザインのトンマナ」についてポイントを紹介させていただきました。
トンマナは資料ひとつのデザインからサイトやブランド全体のデザインまで幅広く応用ができるテクニックです。
上手に活用すると作業の効率アップだけでなく、自身のサイトやブログなどのブランド力向上も狙えます。
ぜひ意識して、取り入れてみてくださいね！
ではまた。
