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

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

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

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

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

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

身近な例が無印良品です。商品のパッケージ、店内の値札、Webサイト。どれも同じ色数と同じ書体でできています。作った人も置かれた場所も違うのに同じに見えるのは、決めごとが先にあるからです。

ユニクロも同じです。店頭のポスター、チラシ、アプリの画面を並べると、白い背景・赤いロゴ・商品の写真という組み合わせが毎回そろっています。季節ごとに中身は変わるのに、遠くから見ても同じブランドだと分かる。これがトンマナの効き目です。

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

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

決める中身はこの5つで足ります。項目を増やすより、1つずつを具体的に書くほうが効きます。
「あしらい」は、線・枠・アイコン・影といった飾りの部品のことです。

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

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

この表を大きくしたものが、デジタル庁が公開しているデザインシステムです。国のサイトで使う色・文字の大きさ・部品の形が、誰でも見られる形で決めてあります。個人が作るなら、A4の1枚で足ります。

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

言葉まで決めている実例が読めます。SmartHR Design Systemには、色や部品と並んで文章の書き方が載っています。一休が2023年12月に公開したIKYU Design Guidelineは、一休.com・レストラン・スパの3つを横断する指針です。サービスが増えても同じ会社に見せる決めごとが、そのまま置いてあります。あなたが3枚のバナーを作るときも、やることは同じで、規模が小さいだけです。

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

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

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

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

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

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

直しているうちに「表にない色を使いたい」と感じたら、その色を表に足すのではなく、既存の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」が何を表しているか分かると、色の指定でつまずかなくなります。コース全体の流れはデザインの基本コース目次から確認してください。