ユーザーが心地よく使えるWebサイトを作るには「トンマナ」が不可欠です。

この記事では、トンマナの定義と概要から、実際のWebサイト事例3選、ルール設定の手順と注意点まで、トンマナをはじめて学ぶ方にも実務担当者にも役立つ情報を体系的に解説します。

トンマナとは

「トンマナ」とは「トーン＆マナー」の略称で、デザインやスタイル、文言などに一貫性をもたせるルールのことです。

「調子や色」という意味を持つトーン（tone）と、「様式や作風」という意味を持つマナー（manner）を組み合わせて作られた言葉です。

元は広告・出版業界の用語ですが、近年では企業のブランド戦略やWebデザインなどでも広く使われています。ちなみに、英語圏では「tone and style」の方が一般的な呼称です。

トンマナを設定することで、コンテンツに一貫性・統一性が生まれ、企業の世界観をユーザーに印象づけることができます。

例えば、パンタグラフのコーポレートサイトでは、青や白を基調としたトンマナを設定し、各ページの印象を統一しています。

＜トンマナ設定の例：パンタグラフのコーポレートサイト＞

なお、文章のトンマナにかかわる「文体」については、「「文体」とは？意味・種類・記事タイプ別の事例を紹介！」で詳しく解説しています。あわせてご覧ください。

トンマナの必要性が伝わるサイト事例3選

Webコンテンツ制作におけるトンマナ設定の必要性は、実際にトンマナが設定されているサイトを見るとわかりやすいです。ここでは、トンマナの必要性が伝わるサイト事例を3つご紹介します。

トンマナ事例1：コカ・コーラの製品サイト

コカ・コーラ社におけるコーポレートカラーは赤です。
1888年の発売当時、運搬用の樽を赤く塗って目立たせたのが由来で、コカ・コーラ製品の赤いデザインを見ればだれもがコカ・コーラをイメージする強いブランド性をもっています。

赤字に白でロゴをかたどった製品ラベルだけではなく、公式サイトのデザインも赤と白で統一することで、ユーザーに「コカ・コーラらしさ」を印象づけています。

このように、コカ・コーラはデジタル・アナログを問わず一貫したトンマナを維持しており、ブランド認知の強化に成功しています。

トンマナ事例2：クロネコヤマトのサービスサイト

以前は黄色と緑をコーポレートカラーとしていたヤマト運輸は、2021年4月に実施された「クロネコマーク」のリニューアルに伴い、メインのコーポレートカラーをクロネコマークに使用している黄色と黒に変更。その2色を引き立たせる白、グレーを加えて、4色をコーポレートカラーとしました。

安心・丁寧のシンボルであるクロネコマークのカラーに白とグレーが加わることで、「これまで以上に都市や街、自然と調和しながら進化していく」という企業の姿勢が反映されています。

ヤマト運輸の事例は、ブランドの方向性転換をトンマナのアップデートによって明示した好例です。コーポレートカラーを変えることで、企業メッセージをビジュアルとして広く伝えることができました。

トンマナ事例3：UQ mobileのサービスサイト

UQコミュニケーションズのコーポレートカラーは、オープンな姿勢や協調性を表す青色です。
人気キャラクターのカラーリングを青に変更したテレビCMを思い出す方も多いのではないでしょうか。

さらに、同系色の水色とポイントカラーのピンクを、CMやサービスサイトで統一して使い、この3色を見るだけでユーザーがUQ mobileらしさをイメージしやすくなっています。

UQ mobileの事例は、色・キャラクター・媒体を横断したトンマナの徹底によって、ターゲット層への訴求力を高めた成功モデルといえます。

 

トンマナを設定する重要性・メリット

トンマナを設定することには、製品・サービスの受け手（ユーザー）と制作側の双方にとって大きなメリットがあります。

• 受け手側：コンテンツの魅力が増す・UI/UXの質が高まる
• 制作側：メンバー間で製品・サービスのイメージが共有できる

以下では、それぞれの観点から重要性を解説します。

受け手側：コンテンツの魅力が増す・UI/UXの質が高まる

事例からわかるように、製品・サービスに関わる複数のコンテンツでトンマナを合わせることが大事な理由は、受け手側にコンテンツのイメージが印象づけられることで、魅力が増し記憶にも残りやすくなるためです。

製品・サービスとユーザーとの接点をUI（User Interface）、製品・サービスからユーザーが得られる体験をUX（User Experience）と呼びます。
サイトのデザインやフォントなど、ユーザーに働きかける要素はすべてUIです。
また、サイトのデザインまわり、注文や発送などの対応、製品自体への感想はすべてUXとなります。

トンマナを合わせることで、受け手に世界観の統一された経験を与えることができ、より良いUIとUXを提供できます。

反対に、ページごとにデザインや文章のトーンがバラバラな場合、ユーザーはブランドへの信頼感を持ちにくくなり、購入や問い合わせなどのコンバージョンにもつながりにくくなります。

例えば、前述したUQ mobileのサイトは、スマートフォンから見ると、サービスのイメージカラーでもある大きなピンクのボタンから、目的のコンテンツにアクセスしやすく、UI/UX双方の質を高める作りとなっています。

また、トンマナから受ける印象によって、ユーザーは「自分がターゲットになっている」と強く感じることにもつながります。UQ mobileの例では、カラフルな色遣いやモダンかつコミカルな印象の広告から、若者やインターネットを趣味で使いたい層に向けたサービスであることが自然に伝わります。

UIデザインについて詳しく知りたい方は、「UI（ユーザインターフェース）デザインとは？事例・基礎知識を紹介」の記事もご覧ください。

制作側：メンバー間で製品・サービスのイメージが共有できる

制作側にとっても、トンマナの設定により、大勢のメンバーが製品・サービスのイメージを共有できるのは大きなメリットです。

トンマナという方向性がない場合、各自が思い浮かべる完成図がバラバラになり、製品・サービスの統一性が損なわれる可能性もあります。また、デザインや文言のトンマナが決まっていることで、制作物のチェックが効率的に行えるほか、アウトプットの質も上がります。

さらに、外部のパートナーや新しいメンバーが参加する際にも、トンマナが明文化されていることで、スムーズなオンボーディングが可能になります。制作効率と品質を同時に高める仕組みとして、トンマナは非常に有効です。

特に複数のプロダクトや部署が同時にコンテンツを制作する企業では、トンマナを「デザインシステム」として体系化し、配色やフォント、コンポーネントのルールをまとめておくことで、組織全体の一貫性を保ちやすくなります。

 

トンマナを設定する方法

トンマナを設定するには、以下の3ステップを順に踏むことが重要です。
ターゲットとコンセプトを明確にし、競合との違いを把握したうえで、具体的なデザインや文言へと落とし込んでいきます。

1. コンテンツを通してだれに何を伝えたいかを考える
2. 競合サイト・市場をリサーチする
3. コンセプトが伝わるようにトンマナを作成する

ターゲットとコンセプトを明確にしてから、具体的なデザインや文言へと落とし込んでいきます。

1. コンテンツを通してだれに何を伝えたいかを考える

まずは、ターゲットとなるユーザーはどのような層で、何を伝えたいのかを考えます。

例えば、婚活イベントのWebサイトを作成する場合、ターゲットは20代後半～40代前半の男女が多いでしょう。
ほかの婚活イベントやマッチングアプリ、結婚相談所との差別化を図るため「素の自分で話せる、長く付き合える相手が見つかるカジュアルなイベント」というメッセージを伝えたい、などコンセプトを具体的に想定します。

ターゲット像が明確になると、コンテンツに込めるべき「感情や価値観」が自然と見えてきます。「だれのために、何のために作るか」を最初に言語化することが、ブレないトンマナの土台となります。

2. 競合サイト・市場をリサーチする

トンマナを検討する際は、自社だけでなく、同じターゲット層に向けた競合サイトや市場の傾向もリサーチすることが重要です。

競合サイトのデザインやトーンを比較すると、業界内で広く使われている配色や表現の傾向、反対に他社と差をつけられそうな要素が見えてきます。

例えば、同じ婚活イベントのWebサイトでも、競合の多くが落ち着いた配色を採用している場合、あえて明るくカジュアルな配色を選ぶことで「親しみやすさ」という独自のポジションを打ち出せます。

競合分析の結果は、ターゲット設定やコンセプトの精度を高めるための材料として、次のステップに反映させましょう。

3. コンセプトが伝わるようにトンマナを作成する

コンセプトが決まったら、ターゲットにコンセプトがより良く伝わるように、デザインや色、フォントなどのトンマナを作成します。

例えば、上記の婚活イベントのWebサイトなら、デザインで重視したい雰囲気は「楽しさ」や「気楽さ」です。
また、気の合う相手と出会えそうな雰囲気づくりには、ラフでポップなデザインより「信頼感」のある方がよいでしょう。

こうした「楽しさ」や「信頼」など、コンテンツの雰囲気を表すキーワードを、配色やレイアウト、フォントといった具体的なデザインに落とし込んでいきます。
例えば「気楽さ」の伝わる手書きの文字を取り入れたり、「信頼感」の伝わる穏やかな配色を用いたりして、デザインのトンマナを形作っていきます。

また、サイト内で使う文言においては、「です・ます調」で信頼感を出しながらも、漢字の多用を避け、やわらかい雰囲気にすることで親しみやすさが伝わるでしょう。

最初から最適な案を出すのは難しいものです。例えばフォントなら、複数の候補を並べてふさわしくない案を消去していく方法が現実的です。チーム内で意見を交換しながらトンマナを設定していきましょう。また、設定したトンマナはドキュメントにまとめ、メンバー全員が参照できる状態にしておくことが重要です。

 

トンマナ設定の注意点

トンマナは、設定する項目が多岐にわたります。以下の表に主要な注意点をまとめましたので、チェックリストとしてご活用ください。

項目	設定内容	チェックポイント
配色	メイン・ベース・アクセント・文字色	色数が多すぎないか
素材の形	丸み or 角ばり	全体で統一されているか
ホワイトスペース	余白量のルール	情報が詰まりすぎていないか
フォント	書体・サイズ・行間	印象とコンセプトが合っているか
レイアウト・文章構成	導入・本文・まとめの型	ページ間で構成がバラバラでないか
文字数	タイトル・見出し・本文の上限	情報量に偏りがないか
日本語・英数の表記	ひらがな・漢字・半角全角ルール	同一単語の表記が混在していないか
文体	です・ます調 or だ・である調	記号の使用ルールはあるか
使用禁止ワード	差別語・誇張表現など	固有名詞の使用可否は決まっているか
画像・写真	色調・フィルター・人物や物の写し方	全ページで雰囲気が統一されているか

以下では、各項目についてさらに詳しく解説します。

配色

トンマナの設定には、コンテンツを印象づける色であるメインカラーを最初に決めます。
そして、メインカラーを引き立てるベースカラー、ポイントとして少量使うアクセントカラー、文字色を決めます。
色の数や種類が多すぎると、どこがポイントか伝わらなくなる点に注意しましょう。

一般的には「3色ルール」（メイン・ベース・アクセントの3色に絞る）を意識すると、視覚的にまとまりやすくなります。

素材の形

ロゴやアイコン、見出しなどの素材の形は、柔らかい雰囲気を出したいなら丸みを帯びた形、シャープな雰囲気なら角ばった形など、出したい雰囲気に応じて統一します。

ボタンや画像の角丸の有無など、細部の形状まで統一することで、ページ全体の一体感が高まります。

特に、購入ボタンや入力フォームのアイコンなど、ユーザーの操作に直結するUIパーツは、形だけでなく色やサイズも統一しておくと、サイト全体での操作のしやすさにつながります。

画像・写真のトーン

写真やイラストなど、素材として使う画像のトーンを統一することも、トンマナ設定では欠かせないポイントです。

写真の明るさや色調、フィルターの有無がページごとに異なると、サイト全体の世界観がちぐはぐな印象になってしまいます。

例えば、温かみのあるブランドイメージを伝えたい場合は暖色系の色調で統一した写真を使う、人物が写る写真は表情や構図のテイストを揃えるなど、具体的なルールを決めておくとよいでしょう。

イラストを併用する場合も、線の太さやタッチを統一することで、写真とイラストが混在しても違和感のないデザインになります。

ホワイトスペース（余白）

ホワイトスペースとは、デザイン上に何も置いていない空間です。情報を詰めすぎず余白を上手に使えば、コンテンツの情報が伝わりやすくなり、ユーザーの理解度が上がる効果があります。

余白の量は、ブランドの雰囲気にも影響します。高級感を出したい場合は余白を広めに、情報量を重視したい場合はコンパクトにまとめるなど、コンセプトに合わせて調整しましょう。

フォント

フォントは「明朝体は高級感がある」「太ゴシック体はインパクトがある」など、字によって与える印象が異なるため、伝えたいイメージに合うフォントを選びましょう。行間や字間、見出しと本文のフォントサイズにも考慮する必要があります。

Webサイトの場合、OSやデバイスによって表示されるフォントが異なることがあるため、Webフォントの使用やフォールバック設定も忘れずに確認しましょう。

レイアウト・文章の構成

サイト内で不統一な印象を与えないよう、「画像の上下は一行空ける」「冒頭に導入文・文末にまとめを設置する」などの、レイアウト・文章の構成についてのルールを決めてから、執筆などを依頼するのがポイントです。

特にブログ記事やコラムのような継続的なコンテンツは、構成ルールが統一されていることで読者の読み慣れが生まれ、回遊率やリピート率の向上にもつながります。

文字数

文章の構成と合わせて、タイトルや導入文、各見出しや記事全体など、構成ごとの文字数を決めておくと、ページごとの情報の偏りを防げます。

検索エンジン最適化（SEO）の観点からも、タイトルは32文字以内、メタディスクリプションは120文字前後など、プラットフォームに応じた目安を設けておくと効果的です。

日本語や英数の表記

サイト内で「ひとり」「一人」「1人」など異なる表記で同じ単語が出てくると、デザインの統一感が失われます。
よく使われる単語については、ひらがな・カタカナのどちらを用いるか、漢字は開くか、常用漢字以外の使用はNGか、英数字は半角・全角のどちらを用いるかなど、細かい表記ルールを設定しましょう。

表記ゆれは、文章校正ツールを活用することで効率よくチェックできます。表記の確認を行う文章校正のやり方については、「文章校正とは？校閲との違いから作業内容、無料ツールまで徹底解説！」の記事で詳しく解説していますので、ぜひご覧ください。

文体

「です・ます調」「だ・である調」などの文末表現や、「！」「？」などの記号の使用ルールも決めておきましょう。デザインと文言の印象がちぐはぐだと、違和感が生じてしまいます。

文体は、ブランドのパーソナリティを直接反映する要素です。カジュアルなブランドなら「です・ます調」に句読点を多用、フォーマルなブランドなら「だ・である調」を使うなど、ターゲットに合わせて選択してください。

使用禁止ワード

サイトの信頼性を高めるには、差別的な単語や煽り・誇張表現などは使用禁止ワードに設定しておくのが適切です。また、固有名詞や商品名などを使うかどうかも、サイトの温度感を伝える一助となります。

使用禁止ワードのリストは、ブランドガイドラインの一部として文書化し、制作に関わるすべてのメンバーと共有しておくことが重要です。特に外部ライターやデザイナーに依頼する際には、最初に共有することでリテイクを減らすことができます。

 

サイト制作ではトンマナの設定が重要！

トンマナは、WebサイトのUI/UXを高め、ひいては売上や業績の向上につなげるために非常に重要な要素です。

トンマナは、一度設定して終わりではありません。ブランドの成長や市場の変化に合わせて、定期的に見直すことが大切です。ヤマト運輸の事例のように、コーポレートカラーを刷新することで、企業の新たなメッセージを伝えることもできます。

とはいえ、作りたいWebサイトのターゲットやコンセプトを明らかにし、トンマナへと落とし込むのは、なかなか困難な作業となります。

パンタグラフでは、専門家の視点によるWebサイト分析と、競合調査を踏まえた効果的なUIデザイン／UXデザインの構築を行っています。また、サイトのトンマナに合わせた記事制作も併せて対応可能です。

トンマナの設定にお困りの方や、既存サイトのデザイン・コンテンツを見直したい方は、下記の資料からパンタグラフのUX/UIコンサルティングサービスをご確認ください。

お問い合わせはこちら