トンマナ（トーン＆マナー）｜ホームページ制作 用語集

「トーン＆マナー」で統一された世界観をつくる、デザイン・表現の基本設計指針

トンマナ（トーン＆マナー）とは、広告やWebサイト、パンフレット、動画などの制作物において、ビジュアルや言語表現に一貫性を持たせるための“デザイン・表現のルール”です。
正式には「Tone and Manner」の略で、色使い、フォント、写真テイスト、アイコンの形、文体など、制作物の雰囲気全体を構成する重要な要素を指します。

トンマナが適切に設計・統一されていると、ブランドイメージに一貫性が生まれ、視覚的な安心感や信頼感をユーザーに与えることができます。逆にバラバラだと、「なんとなく不安」「使いにくい」といった印象につながり、ユーザーの離脱要因にもなります。

トンマナが重要とされる理由

ブランドの世界観を構築するため

デザインのトーンが統一されていることで、「この会社らしさ」「このサービスらしさ」が視覚的に表現され、ブランドイメージが自然に浸透します。

ユーザーの混乱を防ぎ、操作性を高める

色や形、文字の使い方に統一感があると、ユーザーが違和感なくコンテンツを読み進められ、使いやすいと感じやすくなります。

制作や運用の効率化

トンマナが明文化されていると、複数の制作者が関わるプロジェクトでも意思統一がしやすくなり、無駄な修正が減ります。

ホームページ制作におけるトンマナの具体例

要素	トンマナの統一例
配色	ブランドカラーをベースに、見出し・背景・リンクカラーに展開
フォント	本文・見出しで使う書体の種類とサイズを明確に設定
写真のトーン	明るめの自然光中心、背景にぼかしを入れる、人物は笑顔など
文体（トーン）	です・ます調、口語体、フレンドリー／フォーマルの使い分け
アイコン・図のテイスト	線の太さや角の丸み、色数、サイズを統一

トンマナの作成・共有方法

1. ブランドガイドラインを作る
   ロゴ使用ルール、カラーコード、書体指定、使用禁止例などを明文化
2. デザインカンプでルール確認
   主要ページを先に作成して、「これが基準」と示すことで以降のブレを防ぐ
3. トンマナ資料を共有
   制作者やクライアントに向けて、簡易的なトンマナ資料（PDF）を配布することで制作全体の品質と速度を向上

実際のWeb制作現場で使える「トンマナテンプレート」

実際のWeb制作現場で使える「トンマナテンプレート」をご用意しました。制作初期の方向性確認や、チーム内・クライアントとの共有に活用してみてください。

1. プロジェクト概要

項目	内容（記入例）
サイト名	ABC建設株式会社 公式コーポレートサイト
対象ユーザー	30〜50代の法人担当者（建設業界・不動産）
ブランドの印象	信頼・実績・安心感
目的	企業ブランディング強化、問い合わせ増加

2. ビジュアルトーン

要素	指定内容（記入例）
メインカラー	#002F6C（ネイビーブルー）
サブカラー	#E0E0E0（ライトグレー）、#C49A6C（アクセント・ゴールド）
使用フォント	見出し：Noto Sans JP（太め） 本文：ヒラギノ角ゴ ProN W3
写真の方向性	明るく自然な光、作業風景や笑顔の人物、清潔感重視
アイコン	単色、角丸、2pxのライン、シンプルな図解
イラスト	使用しない（写真ベースで構成）

3. コピー／文体トーン

要素	指定内容（記入例）
文体	「です・ます」調の丁寧な口調
トーン	フォーマルだが、固すぎない親しみ感も含む
表現キーワード	「信頼」「誠実」「安心」「地域密着」
NGワード例	若者向けスラング、過度な煽り表現、業界用語の多用

4. コンポーネントの設計ルール（要約）

UIパーツ	指定内容（例）
ボタン	角丸8px／カラー：メインカラー基調／ホバーで明るく
ナビゲーション	中央揃え・太めフォント／アクティブ状態にアンダーライン
フッター	ロゴ・主要リンク・会社情報・コピーライト表示

5. その他・備考

• レスポンシブ対応はPC・SP両方を重視（モバイルファースト設計）
• ページによるブレが出ないよう、構造と配色のルールをCSS化して統一
• クライアント担当者にも配布予定の「ブランドガイドラインPDF」に準拠

トンマナ（トーン＆マナー）　まとめ

トンマナは単なる“見た目の美しさ”のためではなく、「誰に、何を、どう感じてもらいたいか」というブランドの本質をデザインに落とし込むための設計指針です。
ホームページや広告、動画など、あらゆるクリエイティブの現場でトンマナを意識することが、ブランディングや成果のあるデザインに直結します。

特にWebサイトでは、ページ単体ではなくサイト全体での統一感が重要なため、トンマナ設計と共有は“プロジェクトの初期段階”で必ず行っておくべきです。