トンマナを合わせるには？Webデザインで色・フォント・写真・言葉を揃える手順

「トンマナを合わせて」と言われたけれど、何をどこまで揃えればいいのか分からない…
作ったバナーを並べてみると、なぜか同じ会社のものに見えない…

「トンマナを合わせて」と言われても、具体的に何を直せばいいのか分からないと手が止まりまってしまいますよね。「統一感がない」と指摘されて、自分のセンスが足りないのかなと落ち込むこともあると思います。

トンマナは、作る前に決まりを書き出しておけば揃えられます。

1. 色
2. フォント
3. 写真
4. 言葉

の4つの決まりを先に決めて繰り返し使えば、ページやバナーが同じサービスのものに見えてきます。この記事では、

• トンマナを合わせるの意味
• 揃える4つの要素
• クライアントの既存サイトから「トンマナ表」を作る手順
• バラつきやすい失敗例と直し方

をご紹介します。

トンマナを合わせるとは？見た目と言葉の印象を揃えること

トンマナとは
「トーン＆マナー」の略。トーンは見た人が受け取る印象や雰囲気、マナーはその印象を守るための表現のルールのこと

トンマナは広告業界で使われてきた言葉で、いまはWeb制作の現場でも使われています。修正の依頼に「トンマナは既存サイトに合わせてください」と書かれていることもあります。

「トンマナを合わせる」とは、色・フォント・写真・言葉づかいを同じ決まりで揃えて、どのページを見ても同じ会社のものだと伝わる状態にすることです。

Web制作でトンマナを合わせる場面は、次のようなときです。

• 既存のサイトに新しいページを足す
• サイトに合わせて広告バナーを作る
• 商品やキャンペーンのLPを作る
• SNSの投稿画像をシリーズで作る

どれも、すでにある見た目や言葉に、後から作るものを寄せる仕事です。バナーをクリックした人がLPを開いた瞬間に別の会社のページだと感じたら、不安になって閉じてしまうこともあります。

トンマナを統一するには？Webデザインで揃える4つの要素

トンマナを揃える前に、誰に、どんな印象を持ってほしいかを言葉で決めます。言葉は3つ程度で十分です。

例えば地域の歯科医院のサイトなら、「清潔感」「安心感」「やわらかさ」のように決めます。この言葉が、色やフォントを選ぶときの判断の基準になります。

決めずに揃えると、統一感はあっても目的に合わないデザインになりがちです。デザインは見た目を整えるためではなく、クライアントの目的を達成するための手段です。

同じ決まりを、ページやバナーをまたいで繰り返し使うと統一感が生まれます。デザインの4原則でいう反復の考え方です。デザインの4原則は、以下の記事で詳しく説明しています。

揃える要素は、次の4つです。

1. 色
2. フォント
3. 写真・イラスト
4. 言葉づかい

1、色を揃える｜メイン・ベース・アクセントの役割を決めて増やさない

色は、使う場所ごとに役割を決めます。役割は、次の3つです。

アクセントカラーは、押してほしい場所など目立たせたい部分に使います。見出しにも価格にも同じ強調色を使うと、どこが一番大事なのか読む人に伝わらなくなるからです。

色を足したくなったら、新しい色を探す前に今ある色の明るさを変えて使えないか試します。メインカラーが紺なら、紺を薄くした色を背景の区切りに使う、といった形です。

試しに、よく見るネットショップのトップページで、購入ボタンの色を見てみてください。同じ色がボタン以外にどれくらい使われているかを見ると、色の役割の分け方がつかめます。

配色の基本ルールは、以下の記事で詳しく説明しています。

2、フォントを揃える｜書体は2種類までにして太さとサイズで差をつける

書体は、見出し用と本文用の2種類までにします。見出しと本文を同じ書体にしてもかまいません。

目立たせたいときに書体を増やすと、ページの中で雰囲気がばらつきます。強調は書体を変えずに、太さ（＝ウェイト）と文字サイズで差をつけましょう。

書体のほかに、次のものも決めておくと迷うタイミングが減って効率が上がります。

• 英数字に使う書体
• 本文の文字サイズ
• ボタンの文字の太さとサイズ
• 注釈（※で始まる文）の文字サイズ

ここまで決めておけば、バナーを1枚足すときも書体選びから悩まずに済みます。書体そのものの選び方は、以下の記事で詳しく説明しています。

3、写真・イラストのテイストを揃える｜明るさ・色味・人物の撮り方を決める

色とフォントが揃っていても、写真のテイストがページごとに違うと統一感は崩れます。写真とイラストで揃える点は、次のとおりです。

• 明るさ（明るめか、落ち着いた暗めか）
• 色味（暖色寄りか、寒色寄りか）
• 人物を入れるか、入れるならどんな表情か
• 写真を四角いまま使うか、人物を切り抜くか
• イラストの線の太さやタッチ

フリー素材を複数のサイトから集めると、撮った人が違うためテイストがずれやすくなります。

できるだけ同じ撮影者やシリーズから選び、それでもずれるときは明るさと色味を揃えます。明るさや色味の調整は、PhotoshopでもCanvaでもできます。

4、言葉づかいを揃える｜語尾・呼びかけ・ボタンの文言を統一する

見た目が揃っていても、言葉の温度がずれると別の会社に見えます。Webサイト・バナー・LPの文言で揃えるのは、次の4つです。

1. 語尾（です・ます調か、である調か）
2. 読む人の呼び方（「あなた」か「お客様」か）
3. ボタンの文言（「申し込む」か「お問い合わせ」か）
4. 表記ゆれ（「Web」と「ウェブ」、数字の全角と半角）

とくにボタンの文言は、サイト・LP・バナーで同じ言い方に揃えておきましょう。押した先で何が起きるのかが伝わりやすくなるからです。

トンマナを合わせる手順｜既存サイトから「トンマナ表」を作る3ステップ

トンマナ表は、4つの要素の決まりを1枚にまとめたものです。クライアントにサイトがあれば、そこから拾ってまとめられます。

トンマナ表とは
印象の言葉・色・フォント・写真・言葉づかい・使わないものを、項目ごとに書き出した表のこと。制作中に迷ったときの判断の基準になる

手順1、クライアントの既存サイトと手元の資料を集める

まず、決まりを拾う材料を集めます。集めるものは、次のとおりです。

• 既存サイトのトップページと下層ページ
• これまでに作られた広告バナー
• SNSの投稿画像
• 会社案内のパンフレットなど、手元にある資料

トップページだけで済ませず、下層ページまで見ます。トップページだけ特別なデザインになっていて、普段の決まりは下層ページのほうに表れていることもあるからです。

手順2、色・フォント・写真・言葉の「決まり」を拾って書き出す

集めた材料から、4つの要素の決まりを拾います。拾う中身は、次のとおりです。

1. 色は、よく使われている色を役割（ベース・メイン・アクセント）ごとにカラーコードで書き出す
2. フォントは、見出しと本文の書体と太さを書き出す
3. 写真は、明るさ・色味・人物の扱いを書き出す
4. 言葉は、語尾・呼びかけ・よく使う言い回しを書き出す

色のカラーコードは、画面を画像に保存して、Photoshopのスポイトツールなどで拾えます。書体名が分からないときの調べ方は、画像からフォントを調べる方法｜無料ツールと精度を上げるコツでまとめました。

決まりが見つからない項目や、ページごとにバラバラな項目が出てくることもあります。そのときは自分で決めてしまわずに、クライアントに確認する項目として残しておきます。どれに寄せるかは、サイトの持ち主が決めることだからです。

手順3、トンマナ表にまとめてクライアントに確認する

拾った決まりを、表にまとめます。架空の地域の歯科医院のサイトを例にすると、次のようになります。

揃える項目	決める内容	書き方の例
印象の言葉	誰にどう感じてほしいか	清潔感・安心感・やわらかさ
色	役割ごとの色	ベース＝白／メイン＝紺／アクセント＝オレンジ（ボタンだけ）
フォント	見出し・本文の書体と太さ	見出し＝ゴシック体の太字／本文＝ゴシック体の標準
写真・イラスト	明るさ・色味・人物	明るく暖色寄り・人物は笑顔・切り抜きは使わない
言葉づかい	語尾・呼びかけ・ボタン	です・ます調／「あなた」／ボタンは「予約する」
使わないもの	避ける表現	原色の赤・手書き風の書体・「激安」

※例は架空のサイトです。実際の案件では、既存サイトから拾ったカラーコードや書体名を書きます。

最後の「使わないもの」も大事な項目です。迷ったときに足してはいけないものが分かるので、色や書体を増やしすぎるのを防げます。

表ができたら、制作に入る前にクライアントに見てもらいましょう。食い違いを作る前に見つけられるので、納品後の「イメージと違う」という修正を減らせます。

制作中や納品前にも、この表と見比べて確認します。「なんとなく合っている気がする」で迷わず、決めたとおりに作れているかで判断できるようになります。

トンマナが合っていないサイト・バナーのよくある失敗例と直し方

トンマナがずれるのは、作っている途中で決まりから外れたときです。初めての案件やバナー制作でつまずきやすい形を、直す前と後で比べてみましょう。

失敗1、目立たせたくて色を足し、どこが大事か分からなくなる

LPやバナーで、見出し・価格・ボタンにそれぞれ違う強調色を使ってしまう形です。色を足すほどどれも同じくらい目立ち、読む人の目が止まる場所がなくなります。

失敗2、ページやバナーごとに書体が変わる

バナーを作るたびに、内容の雰囲気に合わせて書体を選んでしまう形です。1枚ずつ見るとよくできていても、並べると別の会社の広告に見えます。

直すときは、トンマナ表で決めた2種類の書体だけで作ります。季節のキャンペーンなどで雰囲気を変えたいときも、書体はそのままにして、写真や色の明るさで変化をつけましょう。

失敗3、写真のテイストがページごとにずれる

明るく暖かい色味の写真のページと、暗く青みがかった写真のページが混ざる形です。写真とイラストが同じページに混ざっている場合も、雰囲気が分かれて見えます。

直すときは、明るさと色味を表の決まりに合わせます。写真とイラストが混ざっているなら、どちらかに寄せられないか考えてみてください。

失敗4、バナーとLPで言葉の温度が違う

バナーは「〜しよう！」と友だちに話しかけるような口調なのに、クリックした先のLPは「〜いたします」と硬い口調、という形です。広告から来た人は、別のサイトに来たように感じてしまいます。

直すときは、語尾と呼び方をLPに揃え、ボタンの文言もバナーとLPで同じ言い方にします。

バナー制作の流れは、バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツでまとめています。

まとめ

1、トンマナを合わせるとは、色・フォント・写真・言葉づかいを同じ決まりで揃えること
2、先に「誰に・どんな印象を」を言葉で決め、既存サイトから決まりを拾ってトンマナ表にまとめる
3、統一感は、同じ決まりを繰り返し使うことで生まれる。迷ったら足す前に表に戻る

決まりを作って揃える感覚を手を動かして確かめたい方は、5日間チャレンジも活用してください。