トンマナとは？初心者向けに意味・作り方・ホームページで統一する手順を解説

トンマナとは、色・文字・写真・言葉遣いを、伝えたい印象に合わせてそろえるためのルールです。
ホームページで作るなら、「誰が、何を知るために訪れるか」を決め、その人に合う表現を具体例と一緒に共有資料へまとめます。
「落ち着いた感じで」と伝えるだけでなく、使う色、文章の例、写真の選び方まで残すと、担当者が変わっても判断の基準を共有できます。

最初から厚い資料を作る必要はありません。
トップ・サービス・料金・問い合わせのページで使う基準を決め、一つのページへ当てはめて、実際に読めるか、操作できるかまで確かめることが先です。
ここでは意味と使い方から、ルールの作成、ホームページへの反映、公開後の見直しまでを説明します。

トンマナは、見た目と言葉を同じ方向へそろえる考え方です
1. デザイン以外にも、同じ基準が必要です
最初に、読み手・仕事の強み・伝えたい印象を結び付けます
1. 印象を表す言葉は、選ぶ理由まで書きます
2. 競合を見るときは、真似する要素と自社の事実を分けます
見た目のルールは、用途と実際の値まで決めます
文章のルールは、言い方の例と判断理由を添えます
1. 採用例・避ける例・理由を一組にします
2. SNSとホームページは、役割に合わせて調整します
決めた基準を一つの資料へまとめ、ページで試します
1. 読める色と操作できる状態を、統一感より先に守ります
2. 別の人が同じ判断をできるかを試します
更新のたびに使い、必要なときにルールを見直します
1. 細かすぎる、共有されない、見た目だけで決める失敗を防ぎます
まとめ
関連記事
参考資料

トンマナは、見た目と言葉を同じ方向へそろえる考え方です

トンマナは「トーン＆マナー」を短くした言葉です。
トーンは全体から受ける雰囲気や印象、マナーはそれを保つための表現上の決まりと考えると分かりやすくなります。
ここでのマナーは、挨拶や礼儀作法の良し悪しを判定する意味ではありません。

言葉	この場面で考えること	具体例
トーン	読み手へどのような印象で伝えるか	誠実、落ち着いている、相談しやすい
マナー	その印象をどの表現で保つか	本文はです・ます調、色の用途を固定、写真の明るさをそろえる
トンマナを合わせる	複数の表現を、合意した基準へそろえる	料金ページとSNSで、サービス名や約束する内容をそろえる

「トンマナを合わせてください」と言われたら、単に同じ色へ塗り直すという意味とは限りません。
既存ページやガイドラインのどこを基準にし、色・書体・文章・写真の何をそろえるのかを確かめます。
資料がなければ、合っている例を一つ選び、「この見出しの言い方」「この写真の明るさ」のように対象を指すと、作る側も直しやすくなります。

同じ税理士事務所でも、濃紺と余白を生かした表現と、明るい色や人物写真を使った表現では、受ける印象が変わります。
ただし、濃紺なら必ず信頼される、明るい色なら必ず相談が増えるという関係ではありません。
誰へどの仕事を伝えるか、文章や写真との組み合わせが合っているかを見ます。

デザイン以外にも、同じ基準が必要です

ホームページだけが丁寧でも、自動返信メールで何が受け付けられたか分からなければ、利用者は戸惑います。
SNS、名刺、営業資料、ブログのアイキャッチも、同じサービスの発信だと分かる表現へつなげます。
見た目を統一することは、その会社だと認識する手掛かりになりますが、信頼を得るにはサービスの内容や実際の対応も必要です。

言い換えるなら、「表現の統一ルール」「デザインと言葉遣いの共通基準」などが使えます。
デザイナー以外へ依頼するときは、このように言い換えたうえで、そろえたいものを示す方が意図を伝えやすくなります。

最初に、読み手・仕事の強み・伝えたい印象を結び付けます

色やフォントを先に決めると、担当者の好みを比べるだけになりがちです。
まず、ホームページへ来る人が何を知り、どのような判断をしたいのかを一文にします。
会社員、自営業者、副業の個人サイトでも、基本の進め方は同じです。

たとえばホームページ制作サービスなら、大企業の広報担当者は運用体制や実績を見たいかもしれません。
小さな店舗の店主なら、依頼の流れ、費用に含まれる作業、公開後に自分で更新できる範囲が気になる場合があります。
業種名だけで決めず、相談や問い合わせで実際に多い疑問があれば、それも読み手の材料にします。

印象を表す言葉は、選ぶ理由まで書きます

「誠実」「分かりやすい」「相談しやすい」のように、印象を三つ程度から選ぶ方法があります。
三つは扱いやすくするための例で、必須の個数ではありません。
「高級」「格安」「楽しい」「厳格」などを全部同じ強さで並べず、今のサービスで何を優先するかを決めます。

小さな店舗に初めて制作を依頼してもらうサービスなら、次のようにつなげられます。

誠実：料金に含まれる範囲を明記し、根拠のない「絶対に集客できる」は使いません。
分かりやすい：専門用語は初出で説明し、依頼から公開までの順番を示します。
相談しやすい：人物や仕事の様子が伝わる写真を選び、問い合わせ後の流れを説明します。

印象の言葉を、このような作り方の判断へ変えることが目的です。
「相談しやすい」と書いただけでは、写真を選ぶ人と文章を書く人が別の解釈をすることがあります。
優先する印象と、そのために採用する表現をセットにすると、後で戻れる基準になります。

高級感と親しみやすさを両立させたい場合も、どちらかを捨てる必要はありません。
余白を広めにして色数を抑えつつ、表情が分かる人物写真とやわらかい案内を使うなど、役割を分けた案を作れます。
実際のサービス内容に合うか、文章と写真を並べた状態で見て判断します。

競合を見るときは、真似する要素と自社の事実を分けます

同じ業種のサイトをいくつか見ると、読み手が探す情報や、よく使う表現を知る手掛かりになります。
その際は「提供する価値」「対象とする相手」「伝え方」の三つで、自社との違いをメモします。
速さより丁寧な相談を強みにするなら、短納期を大きく掲げるサイトの見た目だけを移すと、仕事の内容とずれます。

参考ページは、「余白が広く見出しを追いやすい」「料金の条件がすぐ読める」など、参考にする理由も残します。
文章や写真をそのまま使うための見本にはしません。
他社の実績や最短日数を自社の表現へ持ち込まず、自分たちが説明できる強みを基準にします。

見た目のルールは、用途と実際の値まで決めます

伝えたい印象が決まったら、色・書体・写真・余白・配置へ落とし込みます。
同じ青でも人によって選ぶ色は違うため、色の名前だけでは制作の指定として足りません。
値と使う場所を一緒に決めると、ページごとに迷う箇所を減らせます。

色は、メイン・補助・強調の役割を分けます

最初はメインカラー一つ、補助の色一～二つ、強調用の色一つ程度から考える方法があります。
色数の規則ではなく、主役と補助を分けて管理するための出発点です。
メインは見出しや主要な部品、補助は背景、強調は特に見てほしい箇所など、用途を資料に残します。

「青」ではなく「見出しは#1E3A56」のようにカラーコードで指定します。
ボタンなら背景だけでなく、ボタン上の文字色も一緒に記録してください。
同じブランドカラーでも、薄い色に白い文字を載せれば読みにくくなる場合があります。

青に堅実さ、緑に自然さ、赤に力強さを感じる人はいても、印象は使う面積や周囲の色、読み手によって変わります。
好きな色を選ぶことと、必要な情報が読めることを分けて確かめます。
落ち着いた相談サービスで赤を使いたいなら、全面の背景ではなく、小さな強調へ使う案も比較できます。

フォントは、種類と使い分けを残します

明朝系の落ち着き、丸みのある書体のやわらかさ、ゴシック系の実用的な印象などは、候補を考える手掛かりになります。
ただし、本文で長く読めることを優先し、細すぎる文字や装飾の強い書体を続けて使わないようにします。
見出しと本文で使うフォント名、サイズ、太さ、行間を資料に残します。
種類をむやみに増やす前に、同じ書体のサイズや太さで、見出し・本文・強調の違いを作れるかを試します。

たとえば「本文は既存テーマのゴシック系書体、16pxを起点に表示を確認し、行間は1.7倍」のように指定します。
これは作成例で、すべてのサイトに同じ見た目を指定するものではありません。
使うCMSや端末でその書体が使えるか、別の書体へ置き換わったときに崩れないかも、制作者と確かめます。

スマートフォンでは、長い見出しの折り返しや、本文の一行の長さも変わります。
PCの見本だけで採用せず、実際の本文を入れたスマートフォン表示を見て、読みづらい部分のサイズや行間を調整します。

写真とイラストは、選ぶ理由を共有します

「明るい自然光」「仕事の様子が分かる」「人物の表情が見える」「過度に演出しない」など、サービスに合う写真の条件を言葉にします。
人物を中心にするのか、商品や作業を見せるのかも決めておきます。
暗い素材写真と明るい仕事写真を理由なく混ぜると、別々のサービスのように見えることがあります。

イラストを使うなら、リアル調、フラット調、手描き風などの方向をそろえます。
写真を含めてすべて同じ構図にする必要はありません。
何を伝えるための画像かを優先し、共通させる明るさや色調、混ぜてよい表現の範囲を決めます。

余白とページの型をそろえます

見出しと本文の間、画像の前後、節と節の間に、共通の間隔を設けます。
余白が詰まりすぎれば情報を追いにくく、広げすぎれば関係する説明が離れて見えるため、文章と画像を入れた状態で比べます。
サービス紹介なら「内容→料金の条件→実績→問い合わせ」など、読者が判断する順に型を作ります。

料金ページまでトップと全く同じ配置にする必要はありません。
見出し、料金の注記、ボタンなど、同じ役割の部品を共通化することが大切です。
ボタンは形や角の丸み、内側の余白も決め、同じ用途のボタンへ共通のスタイルを使います。
ロゴには既存の使用規定があれば優先し、担当者の判断だけで縦横比や色を変えないよう、使用データと余白の指定も共有します。

文章のルールは、言い方の例と判断理由を添えます

基本の語尾、呼びかけ方、専門用語、商品・サービス名の表記をそろえます。
です・ます調にするか、だ・である調にするかは媒体と読者に合わせて決めます。
同じ語尾が続くときも、語尾を変えるためだけに断定を推測へ変えたり、根拠のない安心感を足したりせず、文のつながりを整えます。

採用例・避ける例・理由を一組にします

「誠実に」「親しみやすく」だけでは、何を直せばよいかが分かりません。
小さな店舗向けの相談サービスを想定すると、たとえば次のような判断例を共有できます。

場面	採用する表現の例	避ける表現と理由
料金の見出し	初めての方にも分かる料金の考え方	「知らないと損する裏ワザ」は、不安をあおる見せ方になるため使いません
問い合わせへの案内	相談方法と依頼の流れを見る	「今すぐ申し込まないと損」は、このサービスの落ち着いた案内に合いません
対応内容	不安な点を一つずつお聞きし、必要な作業をご説明します	「必ず不安を解消します」は、相手の感じ方まで約束するため使いません

これらは、あらゆるブランドで同じ言葉を禁じる一覧ではありません。
目的と根拠に合うかを判断するための例です。
「最短」「無料」などを使う場合も、実際の条件と一致している必要があります。
無料の相談を実施していないサービスに、雰囲気だけで「無料相談を予約する」というボタンを付けることはできません。

「当該」「ご高覧ください」などの硬い語も、必要な場面では使えますが、初めて読む人に通じるかを見ます。
専門用語は必要なものを残して初出で説明し、「CV」なら問い合わせや購入など、サイトで達成したい行動を指すと補います。
用語を消して曖昧にするより、何を意味するかをその場で伝える方が内容を保てます。

SNSとホームページは、役割に合わせて調整します

SNSでは短い案内や会話に近い言葉を使い、ホームページでは料金や条件を詳しく説明するなどの違いは作れます。
ただし、約束するサービス内容や、相手への敬意まで変えるわけではありません。
SNSで「何でも対応します」と書き、ホームページでは対応範囲を限定していれば、話し方の違いでは済みません。

語尾や絵文字の使い方だけでなく、サービス名、料金の条件、問い合わせ後の流れがそろっているかも見ます。
自動返信メールなら、受け付けた内容と次の連絡方法を先に示し、そのうえでブランドに合う丁寧さへ整えます。
親しみやすさのために、利用者が知りたい事実を薄くしないことが大切です。

決めた基準を一つの資料へまとめ、ページで試します

読み手、印象、見た目、文章が決まったら、共有ドキュメントやA4数枚の資料へまとめます。
形式より、更新する人や外注先が同じ最新版を開けることが大切です。
資料名、担当者、更新日と版を付け、参考ページや採用例も同じ場所から見られるようにします。

最初の資料は、次の項目がつながっていれば運用を始められます。

基本情報：主な読み手、提供する価値、読み手がページで判断したいこと。
印象の方針：優先する言葉と、その理由。
たとえば誠実さを、料金の条件を隠さない表現へ結び付けます。
見た目：色コードと用途、文字色と背景色の組、見出し・本文の書体とサイズ、写真・余白・ロゴの扱い。
文章：語尾、呼びかけ方、用語の説明、サービス名の表記、ボタン文言とリンク先。
判断例：採用する見本、避ける見本、それぞれの理由。
運用：確認する人、資料の保存先、更新日・版、判断に迷った場合の相談先。

資料を作っただけでは、実際のページで使えるかは分かりません。
既にあるサイトなら、変更前のページと設定を控え、まず代表となる一ページへ当てはめます。
共通スタイルやテンプレートを変更する場合は、制作者へ変更項目と影響するページを伝え、料金表やフォームにも反映される範囲を確かめます。

初めにトップページの写真・見出し・ボタンを見て、次にサービス・料金・実績・問い合わせへ進みます。
「問い合わせ」ボタンが実際には料金説明へ移るなど、文言と行き先が違っていないかも確かめます。
雰囲気がそろっていても、動かないボタンや意味の曖昧な文章は修正が必要です。

読める色と操作できる状態を、統一感より先に守ります

ブランドカラーをそのまま使った結果、文字が読みにくくなる場合があります。
WCAGの通常のテキストの最低コントラスト比は4.5対1、大きなテキストでは3対1という条件があります。
この大きなテキストは、18pt（24 CSS px）以上、または太字の14pt（約18.7 CSS px）以上が目安です。
大きな文字の条件に当てはまるか判断していなければ、通常の本文と同じ4.5対1以上で確認します。
デジタル庁デザインシステムは、それよりそろえた運用として、文字サイズにかかわらず4.5対1以上を確保しています。
採用する基準を資料へ明記し、色の名前や見た目の好みだけで合格にしないようにします。

配色を調べるときは、まず文字の色と、その文字が載る背景の色のコードを控えます。
WebAIMのContrast Checkerなら、Foregroundへ文字色、Backgroundへ背景色のコードを入力し、Contrast RatioとNormal TextのWCAG AAの結果を見ます。
通常の本文で4.5対1を下回るなら、文字や背景の明るさを変え、同じ組み合わせで測り直します。
決めた色コードを資料とページの両方へ反映し、PC・スマートフォンで文字が読めることを再確認します。

写真やグラデーションに文字を重ねる場合は、背景が一色ではないため、一組の色コードだけの結果で全体を判断できません。
背景を単色の面にするなど、文字の載る場所を安定させる方法も検討します。
ボタンは通常時だけでなく、カーソルを重ねた状態やキーボード操作時にも、文字と現在の位置を見失わないかを確かめます。

必須項目やエラーは色だけで区別せず、「必須」「入力内容を確認してください」などの文字も添えます。
色の統一を理由に、そのような案内や読みやすさを弱めないでください。
判断できない項目は、対象ページと文字・背景の色、困っている状態を制作者へ渡し、修正後に同じ条件で確かめます。

別の人が同じ判断をできるかを試します

資料を渡した担当者に、代表ページの見出し、写真、ボタンを選んでもらいます。
判断が分かれたら、好みの違いとして終わらせず、どのルールが曖昧だったかを見ます。
「自然な写真」だけで伝わらなければ、「人物の表情が分かる仕事風景」などの採用例を加えます。

修正したページを開き直し、担当者と制作者が最新版の資料を参照できることまで確かめます。
公開後にも同じ画面を見て、文字・画像・リンクが予定どおり表示されているかを確認します。
変更で崩れた場合に控えていた設定へ戻せるよう、変更した箇所と戻し方も残しておきます。

更新のたびに使い、必要なときにルールを見直します

よく作るサービス紹介、実績紹介、ブログやアイキャッチには、合意した基準を反映したテンプレートを作ります。
毎回同じ文章にするためではなく、書体・見出し・余白などの共通部分から始められるようにするためです。
社内の更新担当者と外注先が使うテンプレートをそろえ、古い見本を参照し続けないよう保存先も共有します。

公開前は、次の順に完成したページと資料を照合できます。

読み手とサービスの強みが一致し、見出しや写真が別の印象へ引っ張っていないかを見ます。
色の用途、書体、余白、写真の基準を照合し、PCとスマートフォンで文字の折り返しや読みにくさを確かめます。
語尾・専門用語・サービス名・条件を読み、ボタンの文言と実際の行き先を確かめます。
不一致を直して開き直し、変更が必要だった理由を資料の例へ加えます。
ルール自体を変えた場合は版と更新日もそろえて共有します。

細かすぎる、共有されない、見た目だけで決める失敗を防ぎます

最初から何十ページものルールを作ると、確認が追い付かず使われないことがあります。
まず色・文字・写真・文章と判断例をそろえ、繰り返し迷う項目が出たときに詳しくします。
小さな会社や個人事業で、すべての部品を最初から細かく規定する必要はありません。

資料があっても担当者が見られなければ、依頼は「いい感じに」で止まってしまいます。
制作を頼むときは、保存先と適用する版を伝え、修正依頼も「この表現はこの採用例と異なる」と具体的に示します。
一人で運用する場合でも、次の更新で同じ判断ができる資料として役立ちます。

事業内容や対象顧客、価格帯が変われば、ふさわしい表現も見直します。
半年～一年に一度を社内の目安にする方法はありますが、一律の期限ではありません。
サービス変更やリニューアル時にはその時点で点検し、何を、なぜ変えるかと、変更を反映する媒体を残します。

まだ事業の方向が固まっていないなら、誰へ何を伝えるか、優先する印象、色と文章の基本だけの簡易版から始めます。
反対に、ホームページ・SNS・名刺など複数の媒体や複数の担当者が関わるなら、共通資料を先に作る利点が大きくなります。
おしゃれさや流行だけで選ばず、実際の仕事と読み手に合うかを最後まで基準にします。

まとめ

トンマナは、読み手へ伝えたい印象を、色・文字・写真・言葉遣いの具体的な基準へ変えるものです。
誰に何を伝えるかを決め、用途と値、採用例と理由を共有し、一つのページへ当てはめて確かめます。
資料を作って終わりにせず、読める・操作できることと、更新担当者が同じ基準を使えることまで確認すると、継続して運用しやすくなります。