「ホームページのページによってデザインの雰囲気が違う気がする」「ブログを書く人によって文章のテイストがバラバラ」「デザインの修正をお願いしたいけど、何をどう伝えれば良いかわからない」――こうしたお悩みの背景には、「トンマナ」が設定されていないという問題が隠れていることが多いです。トンマナとは「トーン&マナー」の略で、WEBサイトのデザインやコンテンツの雰囲気・ルールを統一するための指針のことです。トンマナを設定することで、御社のホームページに一貫した世界観が生まれ、訪問者に「この会社は信頼できそうだ」という印象を与えることができます。この記事では、トンマナとは何か、なぜ統一が大切なのか、そして具体的にどのようなルールを決めればよいのかを、わかりやすく解説します。
トンマナとは何か？基本をおさえよう
まずは、「トンマナ」という言葉の意味と、なぜWEBサイトにとって重要なのかを整理しましょう。
「トーン」と「マナー」のそれぞれの意味
トンマナは「トーン（Tone）」と「マナー（Manner）」の略語です。
トーンは「調子」「雰囲気」という意味で、デザインや文章が持つ全体的な印象のことを指します。たとえば、「温かみのあるトーン」「クールなトーン」「カジュアルなトーン」「フォーマルなトーン」のように使います。
マナーは「様式」「やり方」という意味で、デザインや文章を作る際の具体的なルールやスタイルのことを指します。たとえば、「見出しはゴシック体を使う」「写真は明るめに加工する」「敬語を使う」のような具体的な決まりごとです。
つまり、トンマナとは「どんな雰囲気（トーン）を、どんなルール（マナー）で実現するか」を定めたものです。音楽にたとえるなら、トーンが「ジャズっぽい雰囲気」という方向性で、マナーが「テンポは○○、楽器構成は○○」という具体的なルールです。
トンマナが統一されているサイトとされていないサイトの違い
トンマナが統一されているホームページは、どのページを見ても「同じ会社のサイトだ」とすぐにわかります。色使い、文字のスタイル、写真の雰囲気、言葉づかいに一貫性があり、訪問者に安心感と信頼感を与えます。
一方、トンマナが統一されていないホームページは、ページを移動するたびに「あれ？同じサイト？」と違和感を覚えます。トップページはスタイリッシュなのにブログのページはごちゃごちゃしている、会社概要は堅い文章なのにサービスページはくだけた口調、といったチグハグ感が、企業の信頼性を無意識のうちに損なってしまうのです。
実店舗にたとえるなら、外観はモダンでおしゃれなのに、店内に入ったら昭和レトロな内装だった――こういうギャップは意図的であれば面白いですが、意図せずそうなっている場合は「この店、大丈夫かな？」という不安につながりますよね。WEBサイトも同じです。
用語メモ
トンマナとは「トーン&マナー（Tone and Manner）」の略で、デザインやコンテンツの雰囲気・スタイルを統一するためのルールのことです。広告・デザイン業界で広く使われている用語で、WEB制作においても重要な概念です。
なぜ中小企業にもトンマナが必要なのか
「トンマナなんて大企業が考えることで、うちみたいな中小企業には関係ない」と思われるかもしれません。しかし、むしろ中小企業こそトンマナの設定が効果的です。
中小企業では、WEBサイトの更新を社内の複数の担当者が行っていたり、ブログの執筆を社員が持ち回りで担当していたりすることがあります。このとき、トンマナが決まっていないと、担当者ごとにデザインや文章のテイストがバラバラになりがちです。トンマナを設定しておけば、「誰が作業しても統一感を保てる」という仕組みができるのです。
トンマナは「制約」ではなく「指針」です。迷ったときの判断基準があることで、制作・運用がスムーズになります。
色のルール：カラーパレットの設定
トンマナの中でもっとも視覚的なインパクトが大きいのが「色」です。サイト全体で使用する色のルールを定めましょう。
基本の3色を決める
WEBサイトで使う色は、基本的に3色（多くても4〜5色）に絞ることで統一感が生まれます。一般的に、以下の3種類の色を設定します。
メインカラー：サイト全体の印象を決める主要な色。企業のコーポレートカラー（会社のイメージカラー）を使うことが多いです。サイト全体の25%程度を占めます。
ベースカラー：背景や余白に使う色。白やライトグレーなど、控えめな色が一般的です。サイト全体の70%程度を占めます。
アクセントカラー：CTAボタンや重要な情報を強調する際に使う色。メインカラーと対比のある目立つ色を選びます。サイト全体の5%程度と少量ですが、訪問者の目を引く効果があります。
この3色の比率を「70:25:5の法則」と呼びます。インテリアコーディネートでもよく使われるバランスで、見た目のまとまりが良くなる黄金比率です。
色の持つ心理的効果を理解する
色にはそれぞれ心理的な効果があります。御社の業種やブランドイメージに合った色を選びましょう。
青系：信頼・安心・誠実。金融・IT・医療系の企業に多い。
緑系：自然・健康・安全。環境・農業・健康食品系の企業に多い。
赤系：情熱・エネルギー・緊急性。飲食・エンタメ・スポーツ系に多い。
オレンジ系：親しみ・活発・温かさ。教育・福祉・地域サービスに多い。
茶系：落ち着き・伝統・自然。建設・木工・和風テイストに多い。
すでにコーポレートカラーが決まっている場合は、それをメインカラーとして設定するのが自然です。
色のルールの具体例
色のルールは、単に「メインカラーは青」と決めるだけでなく、具体的なカラーコード（色を数値で表す方法）まで指定しておくと、誰が作業しても同じ色を使うことができます。たとえば、「メインカラー：#2B5DAE（ネイビーブルー）」「ベースカラー：#FFFFFF（白）」「アクセントカラー：#E8832A（オレンジ）」のように、具体的に定めます。
用語メモ
カラーコードとは、色を16進数で表す方法です。「#」に続く6桁の数字とアルファベットで構成されます。たとえば、#FFFFFFは白、#000000は黒、#FF0000は赤を表します。WEB制作では、この方法で正確に色を指定します。
書体（フォント）のルール
色と並んで、サイトの印象を大きく左右するのが「書体（フォント）」です。
ゴシック体と明朝体の使い分け
日本語のWEBサイトで使われる書体は、大きく「ゴシック体」と「明朝体」に分かれます。
ゴシック体：線の太さが均一で、モダンでカジュアルな印象を与えます。画面上で読みやすいため、WEBサイトの本文テキストにはゴシック体が広く使われています。「すっきり」「親しみやすい」「現代的」なイメージに合います。
明朝体：線に強弱があり、格式や上品さを感じさせます。見出しやキャッチコピーに使うと、「高級感」「伝統」「信頼感」といった印象を演出できます。ただし、小さな文字サイズでは読みにくくなることがあるため、本文テキストよりも見出しでの使用が一般的です。
書体のルールの決め方
サイト全体で使う書体を、以下のように役割ごとに決めておきましょう。
見出し（h2・h3）の書体：ゴシック体か明朝体か。太さ（ウェイト）も指定します。
本文テキストの書体：読みやすさを重視して、一般的にはゴシック体が推奨されます。
強調部分の書体：太字にするのか、色を変えるのか、下線を引くのかを統一します。
装飾的な文字：キャッチコピーやバナーに使う特別なフォントがあれば、それも指定します。
フォントの数は、サイト全体で2〜3種類に抑えるのが基本です。多くの種類を使いすぎると、統一感がなくなり、ごちゃごちゃした印象になってしまいます。
写真・画像のルール
サイトに使用する写真や画像にもトンマナのルールを設定しましょう。
写真のトーンを統一する
サイトに掲載する写真の「色調」「明るさ」「雰囲気」を統一することが大切です。ある写真は暗くてクールな印象なのに、別の写真は明るくてポップな印象では、サイト全体のまとまりが失われます。
統一方法としては、すべての写真に同じフィルター（色調の調整）をかけるのが効果的です。たとえば、「全体的に暖色系に寄せる」「コントラストを少し落として柔らかい印象にする」「彩度をやや控えめにしてシックに仕上げる」など、一定のルールを決めておきます。
画像のサイズ・比率のルール
ブログのアイキャッチ画像、サービス紹介のイメージ写真、スタッフ写真など、同じ種類の画像は同じサイズ・比率で統一しましょう。たとえば、「ブログのアイキャッチ画像は横1200px×縦630px（16:9の比率）」「スタッフ写真は正方形（1:1）で統一」のように、具体的に定めておくと、サイトのレイアウトが整います。
使って良い画像・使ってはいけない画像のルール
「こういう画像は使って良い」「こういう画像は避ける」というルールも明確にしておくと、複数の人が更新作業を行う場合に統一感を保ちやすくなります。たとえば、「人物写真は必ず笑顔のものを使う」「暗い印象の写真は使わない」「イラストは使わず写真のみで統一する」といったルールが考えられます。
言葉づかいのルール
トンマナはデザインだけでなく、文章にも適用されます。言葉づかいの統一は、サイト全体の「人格」を決める重要な要素です。
文体の統一：です・ます調か、だ・である調か
サイト全体の文体を統一することは基本中の基本です。「です・ます調」（丁寧体）と「だ・である調」（常体）が混在すると、読み手に違和感を与えます。一般的な企業サイトでは「です・ます調」が適しています。親しみやすく、読み手に寄り添う印象を与えるからです。
表記の統一ルールを作る
同じ意味の言葉でも、書き方が複数ある場合があります。サイト全体で表記を統一するために、以下のようなルールを決めておきましょう。
「お問い合わせ」か「お問合せ」か「お問合わせ」か → 「お問い合わせ」に統一
「ホームページ」か「HP」か「WEBサイト」か → 「ホームページ」に統一
「お客さま」か「お客様」か → どちらかに統一
数字は全角か半角か → 半角に統一
「できる」か「出来る」か → ひらがなに統一
こうした表記ルールを一覧にまとめておくと、誰がコンテンツを作成しても統一感を保つことができます。
トーン（語調）のルールを決める
文体だけでなく、文章全体の「語調（トーン）」も統一しましょう。たとえば、以下のような観点で方向性を決めます。
「親しみやすさ」を重視 → 堅苦しい表現を避け、話しかけるような文章に
「信頼感・専門性」を重視 → データや根拠を示し、落ち着いたトーンに
「やさしさ・温かみ」を重視 → 柔らかい表現を使い、読者に寄り添う文章に
御社のブランドイメージやターゲットに合わせて、どのトーンで統一するかを決めましょう。
言葉づかいのルールは、一度決めたら「表記統一リスト」として文書化しておきましょう。新しいスタッフが加わったときも、このリストを見れば統一感を保てます。
ブランドガイドラインとの関係
トンマナをより体系的にまとめたものが「ブランドガイドライン」です。両者の関係を理解しておきましょう。
ブランドガイドラインとは
ブランドガイドラインとは、企業のブランド（ロゴ・色・書体・言葉づかい・写真のスタイルなど）の使い方を体系的にまとめた文書です。WEBサイトだけでなく、名刺・会社案内・看板・広告など、すべての制作物に適用されるルールブックです。
トンマナがWEBサイトに特化したデザイン・コンテンツのルールであるのに対し、ブランドガイドラインは企業活動全体のデザインルールを包括するものです。つまり、トンマナはブランドガイドラインの一部であるとも言えます。
中小企業向けの「ミニブランドガイドライン」のすすめ
大企業のような本格的なブランドガイドラインを作るのは、費用も労力もかかります。中小企業におすすめなのは、最低限のルールをA4で1〜2ページにまとめた「ミニブランドガイドライン」です。
含める内容は、「ロゴの使い方（最小サイズ、余白の取り方）」「カラーパレット（メイン・ベース・アクセントの3色とカラーコード）」「使用書体（見出し・本文）」「写真のトーン（明るめ・自然光・笑顔中心など）」「文章のトーン（です・ます調、親しみやすさ重視など）」「表記統一ルール」程度で十分です。
このミニガイドラインをWEB制作会社や印刷会社と共有しておけば、どの制作物でも統一感のあるブランドイメージを維持できます。
トンマナは一度作ったら終わりではない
トンマナやブランドガイドラインは、一度作ったら永久に変えないものではありません。企業の成長やビジネスの変化に合わせて、適宜見直しと更新を行いましょう。ただし、頻繁に変えすぎるとブランドの一貫性が損なわれますので、大きな変更は数年に一度程度にとどめ、微調整は年に一回程度のペースで行うのが良いでしょう。
まとめ：トンマナを設定して「らしい」WEBサイトを作ろう
ここまでの内容を振り返りましょう。
- トンマナとは：「トーン&マナー」の略。デザインやコンテンツの雰囲気とルールを統一する指針
- 色のルール：メインカラー・ベースカラー・アクセントカラーの3色を決め、70:25:5のバランスで使う
- 書体のルール：見出し・本文・強調の書体を2〜3種類に絞って統一する
- 写真のルール：色調・明るさ・雰囲気を統一し、サイズ・比率も揃える
- 言葉づかいのルール：文体・表記・トーンを統一し、表記統一リストを文書化する
- ブランドガイドライン：トンマナを含む包括的なデザインルール。中小企業はA4で1〜2ページの「ミニ版」からでOK
トンマナの設定は、一見面倒に思えるかもしれませんが、一度設定してしまえば、その後のサイト運用がぐっとスムーズになります。「次のブログ記事、どんなトーンで書けばいいんだろう？」「バナーの色、何色にすればいいんだろう？」と迷う時間がなくなり、御社のブランドイメージが着実に積み上がっていきます。
私たちmotiveは、群馬県を中心とした中小企業のお客さまのブランディングとWEBサイト制作をサポートしています。トンマナの設定からブランドガイドラインの作成まで、御社の規模やご予算に合わせてご提案いたします。「サイトの統一感を出したい」とお感じの方は、ぜひお気軽にご相談ください。
