トンマナの決め方と揃え方｜色・文字・余白で印象を統一する手順

「トンマナを揃えておいて」と言われて、何を揃えればいいのか分からず手が止まったこと、ありませんか？

トンマナは感覚やセンスの話に見えて、中身はただの決めごとの一覧です。色・文字・余白・写真やあしらい・言葉づかい。この5つを先に決めておくと、誰が作っても同じ印象に仕上がります。
このレッスンでは、トンマナの中身、決める順番、そしてバラバラの3枚を1つに揃える手順まで進みます。読み終わったら、そのまま自分の作品で使えますよ。

トンマナ（トーン＆マナー）が指すもの

トンマナは「トーン＆マナー」の略です。トーンは全体の調子、マナーは守る作法。あわせて「この作品はこういう見た目で作る」というルールをまとめたものを指します。

広告やWebの現場では、トンマナを1枚の資料にまとめてから制作を始めます。デザイナーが何人いても、途中で担当が代わっても、見た目が変わらないようにするためです。バナーを10枚シリーズで作るときも、1枚目を作る前にトンマナを決めます。

大事なのは、トンマナが好みの話ではないところ。誰が読んでも同じ判断ができるところまで、言葉と数字に落とします。「やさしい感じで」で止めると、読む人ごとに解釈がずれて、結局バラバラになります。

トンマナで決める5つの項目

決める中身はこの5つで足ります。項目を増やすより、1つずつを具体的に書くほうが効きます。

項目	決める内容	書き方の例
色	メイン・サブ・アクセントの3色	#2F6F4E／#E8F1EC／#F2A03D
文字	見出しと本文のフォント、大きさ3段、太さ	見出し=太ゴシック32px／本文=同じ書体16px
余白	基準になる1単位	8pxの倍数だけ使う（8・16・24・32）
写真とあしらい	写真の明るさ・被写体、角丸や影の有無	明るめの写真・角丸8px・影なし
言葉	語尾、一人称、記号のルール	「です・ます」／感嘆符は1文に1つまで

色は必ずカラーコードで書きます。「緑」と書くと、深緑を選ぶ人と黄緑を選ぶ人が出ます。文字も「ゴシック体」ではなくフォント名まで書きます。ここを曖昧にすると、資料を作った意味がなくなります。

言葉づかいまで入れるのがトンマナの特徴です。見た目だけ揃えても、1枚目が「今すぐチェック！」で2枚目が「ご確認ください」だと、別のブランドに見えます💡

決める順番は「言葉→数字」

いきなり色を選ばないでください。先に言葉を決めて、あとから数字に置き換えます。この順番だと迷いが減ります。

1. 誰に何を伝えるかを1文で書く。「30代の働く女性に、家で試せる手軽さを伝える」
2. 目指す印象を形容詞3つで書く。「清潔・軽やか・親しみやすい」。4つ以上にすると矛盾します
3. 形容詞を具体に置き換える。清潔＝白の面積を6割／軽やか＝細めの書体と広い行間／親しみやすい＝角丸と丸い書体
4. 見本を1枚だけ作る。全部の項目を使った完成品を1枚作ります
5. 見本から表に書き写す。使った色と数値をそのまま表に落とせば、資料ができます

3の「形容詞を具体に置き換える」がいちばん重要です。ここを飛ばして表だけ作ると、あとで「この色、本当に清潔に見える？」ともめます。形容詞1つにつき、色か数字を1つ決めてください。

参考にする既存のサイトやバナーは1つか2つに絞ります。5つ集めると平均化して、どれにも似ていない中途半端なものができあがります。

ミニ実践：バラバラの3枚を1つに揃える

15分の課題です。無料のCanvaで進められます。手を動かすと、トンマナが決めごとの一覧だと実感できますよ◎

1. 同じテーマのバナーを3枚作ります。文言は「新商品発売」「送料無料」「レビュー募集」など、内容が違うものにしてください。この時点では色も書体もあえて揃えません
2. 3枚を並べて眺め、揃っていないところを紙に書き出します。だいたい色数・書体・余白・語尾の4つが出てきます
3. 基準にする1枚を決めます。いちばん気に入った1枚で構いません
4. 基準の1枚から、色3つのカラーコード・フォント名・文字の大きさ3段・余白の単位を書き出します。これがトンマナ表です
5. 残りの2枚を、表のとおりに直します。表にない色と書体は使わないでください
6. 3枚を並べて見比べます。シリーズに見えたら成功です

直しているうちに「表にない色を使いたい」と感じたら、その色を表に足すのではなく、既存の3色でどう表現するか考えてみてください。制約の中で作るほうが、結果として揃います。

やってしまいがちな失敗

形容詞のまま止めてしまう

「上品に」「シンプルに」で終わったトンマナ資料は、実際の制作では使えません。上品の中身が人ごとに違うからです。
直し方は、形容詞の下に必ず色か数字を1行足すこと。「上品＝彩度を抑えた紺（#2B3A55）＋余白を広めに（32px）」まで書けば、迷いません。

項目を増やしすぎる

20項目のトンマナ資料は、作った本人も途中で見なくなります。
直し方は、最初は5項目に絞ること。運用しながら、迷った箇所だけ足していきます。使われない資料より、1枚で足りる資料のほうが役に立ちます。

1枚ごとに最適化してしまう

「この回だけ赤を使うと目立つ」と1枚だけ変えると、シリーズ全体の統一感が消えます。目立ったのは、周りが揃っていたおかげです。
直し方は、変えるなら全部変えること。1枚だけの例外を作らないと決めておくと、判断が速くなります。

よくある質問

トンマナと配色ルールは何が違いますか？

配色ルールはトンマナの一部です。トンマナは色に加えて、書体・余白・写真の雰囲気・言葉づかいまで含みます。
作る順番としては、先に目指す印象を決めて、その中の1項目として色を決めます。色から入ると、あとで書体が合わなくなって組み直しになります。

個人のブログやSNSでもトンマナは要りますか？

1人で作る場合こそ効果があります。作るたびに色と書体を選び直す時間がなくなるからです。
個人なら、色3つとフォント2つ、余白の単位1つをメモしておくだけで足ります。A4の資料は要りません。投稿を並べたときに同じ人が作ったと分かれば、目的は達成できています。

トンマナは途中で変えてもいいですか？

変えて構いません。ただし変えるときは全部まとめて変えます。
途中の1枚だけ新しいルールにすると、古いものと新しいものが混ざって、単に崩れて見えます。切り替える日を決めて、その日以降は全部新しいルールで作る。過去の分は無理に直さなくても、時期で分かれていれば違和感は出ません。

クライアントにトンマナを聞いても答えが返ってきません

聞き方を変えます。「トンマナはありますか」ではなく、参考になる既存の制作物を2つ見せて「どちらが近いですか」と聞いてください。
人は白紙から言葉にするのが苦手でも、比べる判断ならすぐできます。選んでもらった1つから色と書体を書き出せば、その場でトンマナの下書きができます。

次に学ぶこと

今回の要点をまとめます。

• トンマナ＝トーン＆マナー。見た目と言葉のルールをまとめたもの
• 決めるのは色・文字・余白・写真とあしらい・言葉の5項目
• 順番は「誰に何を伝えるか→形容詞3つ→数字と色に置き換える→見本1枚→表」
• 例外を作らない。変えるなら全部まとめて変える

トンマナの中で最初に決めるのが色です。色の選び方そのものは補色と配色の型で扱っています。組み合わせの型を知っておくと、3色を選ぶ時間が短くなります。

次のレッスンはカラーコードの仕組みです。トンマナ表に書く「#2F6F4E」が何を表しているか分かると、色の指定でつまずかなくなります。コース全体の流れはデザインの基本コース目次から確認してください。