- トンマナって、結局なに？色やフォントを揃えること？
- ふわっとした要望を、どうデザインに翻訳する？
- AI時代、トンマナはなぜ前より大事になった？
「トンマナ、トンマナってよく言われるけど、結局なんなの？」
デザインを始めたばかりの頃の私は、ずっとそう思っていました。先輩もクライアントも当たり前のように「トンマナを揃えて」と言うのに、その正体がよく分からない。色を統一すればいいのか、フォントを決めればいいのか、なんとなく手を動かしてみても、しっくりこない。
Web制作を17年やってきて、ようやく腑に落ちた答えがあります。
トンマナとは、色やフォントを揃えることではなく、「なんとなく良い／悪い」を、チームやクライアントと共有できる“判断基準”に変えることでした。
言い換えると、トンマナは見た目を揃えるためのものというより、判断のブレを減らすための共通言語です。ここが腑に落ちると、初心者の頃の「分からなさ」が一気に解けます。
この記事では、トンマナ（トーンアンドマナー）の正体を、教科書的な「色彩統一・フォント選定」の網羅はせず、17年の現場で実際に効いた使い方として書きます。
記事を書いている人
R（アール）
Web制作の現場で17年（現役進行中）。精密栄養カウンセラー。
個人開発をアプリ6本並行しながら、AIと「作る・届ける」を実験しています。
うまくいったことも、月収2,000円みたいな冴えない数字も、隠さず公開中。
教える人ではなく、少し先で転んで戻ってきた人として、あなたと同じ目線で現在地を観測していけたらと思います。
トンマナとは？「見た目を揃える」より「判断を揃える」もの
「トンマナとは何か」を調べると、たいてい「デザインの全体的な雰囲気やスタイルを統一するためのルール」と出てきます。色・フォント・レイアウト・ビジュアルを揃える、という説明ですね。間違ってはいません。
でも、初心者の頃にいちばん分からなかったのは、実は色やフォントの話ではありませんでした。
分からなかったのは、何を基準に「これは合っている」「これは違う」と判断しているのか、のほうです。
ベテランの先輩は、上がってきたデザインを見て「うーん、これはちょっとトンマナと違うね」と一瞬で言う。でも当時の私には、何がどう違うのか見えなかった。色は合っているように見えるのに、何かがズレている。その「何か」を言葉にできる状態が、トンマナを掴むということでした。
だから私は、トンマナをこう捉えています。トンマナは、デザインの見た目を揃えるためのものではなく、判断のブレを減らすためのもの。揃えるのは見た目より、まず「判断の基準」のほうです。基準が揃えば、見た目は自然とついてきます。
正体①：ふわっとした要望を、デザイン要素に翻訳する
トンマナがいちばん効くのは、クライアントの“ふわっとした要望”を扱う場面です。
現場では、こういう言葉が当たり前に飛んできます。
- 「もっと信頼感を出したい」「もう少し親しみやすく」
- 「高級感がほしい」「今っぽくしたい」
- 「ちょっと硬い」「なんか安っぽい」「もう少しシュッと」
初心者の頃は、これが本当に分からない。「信頼感って、どの色のことだ？」と固まっていました。
「高級感を出して」って言われても、具体的に何を変えればいいか分からなくて、毎回止まります…
そこ、私も固まってました。コツは、雰囲気の言葉を「要素」に翻訳することです。次に、私の変換表を出しますね
17年やってくると、この雰囲気の言葉を、具体的なデザイン要素に翻訳できるようになります。私の場合は、だいたいこう変換しています。
- 信頼感 → 余白を広めに取る／彩度を抑える／書体を落ち着かせる／写真の表情を整える
- 親しみやすさ → 角丸／柔らかい配色／人の気配がある写真／少し口語寄りのコピー
- 高級感 → 情報量を減らす／余白を増やす／細めの線／彩度を落とす／写真の光を落ち着かせる
こうして見ると、トンマナは雰囲気の言葉を、色・余白・書体・写真・言葉づかいに翻訳するための設計図だと分かります。特に余白は効きます（このあたりはWebデザインにおける余白の使い方で深掘りしています）。雰囲気を言葉で分解する力そのものは、デザイナーのための言語化トレーニングとも地続きです。
正体②：レビューの往復を減らす
トンマナのもう一つの正体は、レビューの往復を減らすことです。
トンマナを最初に決めていないと、レビューが感覚論になります。
- 「なんか違う」「もう少し明るく」「もう少し高級に」
- 「ちょっと弱い」「もっと今っぽく」
こうなると、デザイナー側も何を直せばいいのか分からない。直しても、また別の感覚が返ってくる。あの終わらない往復です。
でも、最初にトンマナを共有しておくと、判断の基準ができます。たとえば、こんなふうに。
- 今回は「親しみやすさ」より「専門性」を優先する
- 彩度は抑える／写真は明るすぎない／余白は広め
- コピーはフランクにしすぎない
たしかに、最初に基準があると「好き嫌い」で揉めずに済みそうですね
そうなんです。「好き嫌い」のレビューが、「基準に合っているか」のレビューに変わります。これが揃うだけで、現場の消耗はかなり減ります
トンマナの本当の価値は、ユーザーに一貫して伝わることだけではありません。制作側の判断が揃うこと。ここが、現場で何度も助けられたところです。
でも、トンマナは「縛り」になると死ぬ
ここは正直に書いておきたいところです。トンマナを守ること自体が目的になると、デザインが死ぬことがあります。
ルールとしてのトンマナを厳格にしすぎると、こういうことが起きます。
- どのページも同じに見えて、キャンペーン感が出ない
- 情報の強弱がつかない／必要な変化まで消してしまう
- ブランドらしさはあるけれど、肝心の中身が伝わらない
ルールを守ってるはずなのに、なんだか全部のっぺりして見える…ってことありますね
それ、トンマナが「縛り」になってる状態です。だから私は、守るルールと一緒に「ここは崩していい」という崩し方まで、最初に決めておきます
トンマナは、あくまで判断基準です。守るものだけど、必要なときの“崩し方”まで決めておくものだと思っています。例外を許さないルールは、現場ではすぐ使いづらくなる。だから「ここぞの一画面だけは彩度を上げる」「キャンペーンは余白を詰めて熱量を出す」のように、崩す場所と理由を先に決めておく。これはデザインシステムの考え方にも、そのままつながります。
AI時代のトンマナ｜量を出せる時代ほど、トンマナがないと選べない
ここ数年で、トンマナの大事さは、むしろ上がりました。AIです。
AI時代は、画像も文章もUI案も、大量に出せます。でも、トンマナがないと、全部が散らかります。
AIに「明るくて親しみやすいデザインにして」「高級感のあるLPにして」「スタイリッシュな画像を作って」「いい感じのコピーを出して」と頼むと、それっぽいものは出ます。ただ、毎回違う「いい感じ」になる。方向がバラバラなまま量だけ増えていきます。
AIがたくさん出してくれるのに、なぜか「これだ」が選べなくて、結局迷子になります…
選べないのは、選ぶ基準＝トンマナが無いからなんです。トンマナは今や、AIに指示するプロンプトの“軸”でもあります
たとえば、こんなトンマナを先に決めておきます。
- 明るい／親しみやすい／でも幼すぎない
- 余白は広め／彩度は少し抑える／写真は自然光
- 言葉づかいはやわらかいが、煽らない
これがあると、AIに出させる画像・文章・UIの方向が揃いやすくなります。トンマナを自分の頭の中だけで持つ時代から、AIに渡す“軸”として言葉にしておく時代に変わりました。量を出せる時代ほど、トンマナがないと選べない。これが、いま一番伝えたいところです。
まとめ｜トンマナは、判断のブレを減らす共通言語
長くなったので、最後に1本にまとめます。
トンマナは、色やフォントを揃えるための見た目のルールではありませんでした。「なんとなく良い／悪い」を、自分とチームとクライアントで共有できる、判断のブレを減らす共通言語です。
雰囲気の言葉を、色・余白・書体・写真・言葉づかいに翻訳する。レビューを「好き嫌い」から「基準に合うか」へ変える。縛りにならないよう、崩し方まで決めておく。そして、AIに量を出させる時代には、選ぶための軸になる。どれも、見た目の話ではなく、判断の話でした。
もし今、「トンマナがよく分からない」と止まっているなら、まず手元のデザインを1つ選んで、「これは何の雰囲気を出したくて、そのためにどの要素をどう振っているか」を、3つだけ言葉にしてみてください。それが、あなたのトンマナの最初の1ページになります。今の自分の判断基準を、一度言葉にして観測してみる。そこから、ブレは減っていきます。
あわせて読みたい
「自分の強みは何か」が、見えなくなる時期があります。
診断を受けても、本を読んでも、「結局どう動けばいいか」が分からない。考えるほど止まる。これは個人クリエイターによくある状態です。
個人開発8本、月収2,000円。Web制作17年のクリエイターが、AI と「作る」「届ける」を honest に実験している過程をメルマガで公開しています。「観測する」生き方の実践ログです。
登録特典:「AI時代に取り残されないための構造整理シート」（PDF 12p / 5ステップ）― スキル棚卸しから、自分のポジション設計まで。
