トンマナを統一すると、ホームページに一貫した世界観が生まれ、ユーザーからの信頼やブランドイメージの向上につながります。しかし、設定の手順や決めるべき項目がわからず、何から手をつければよいか迷っている方も多いのではないでしょうか。
当ページでは、トンマナの意味や設定するメリット、事前に決めること、デザイン・文章それぞれの設定項目、企業サイトの事例をわかりやすく解説します。
トンマナとは
トンマナとは、トーン＆マナーの略で、デザインや文章などの表現に一貫性を持たせるためのルールを指します。
トーンは色調や雰囲気、マナーは様式や作法を意味し、この2つを組み合わせた言葉です。もともとは広告や出版業界で使われていた用語ですが、現在ではホームページ制作やブランディングの現場でも広く使われています。
具体的には、配色やフォント、写真のテイスト、文章の書き方などにルールを設けて、サイト全体の見た目や印象を統一することがトンマナを整えるということです。トンマナは個々のページで個別に考えるものではなく、サイト全体を通じた共通ルールとして設定することが大切です。トンマナが統一されたホームページは、どのページを訪れても同じ世界観が伝わるため、ユーザーに安心感を与え、企業やサービスへの信頼感を高める効果があります。
反対に、ページごとに配色やフォントがバラバラだと、ユーザーは違和感を覚え、ホームページから離脱する原因にもなります。ホームページで成果を出すためには、トンマナの設定が欠かせない要素だと言えるでしょう。
トンマナを設定するメリット
トンマナを設定することで、ホームページの見た目だけでなく、ユーザーの行動や制作の進め方にも良い影響を与えます。ここでは、トンマナを統一するメリットを解説します。
ブランドイメージが向上する
トンマナを統一すると、ユーザーに対して一貫したブランドイメージを届けられるようになります。
配色やフォント、写真のテイストがサイト全体で統一されていれば、ユーザーは自然と企業の世界観を感じ取り、記憶に残りやすくなります。例えば、落ち着いた配色と丁寧な文章で統一されたホームページは、信頼感のある企業という印象をユーザーに与えます。さらに、トンマナをホームページだけでなくSNSやチラシなど他の媒体にも展開すれば、どの接点でも同じ印象を与えられるため、ブランドの認知度や信頼性がより高まります。
中小企業であっても、トンマナを丁寧に設定することで、大手企業に負けないブランドイメージを築くことは十分に可能です。
ユーザーが使いやすいホームページになる
トンマナが統一されたホームページは、ユーザーにとって見やすく、操作しやすいものになります。
例えば、ボタンの色やリンクの装飾がページごとに異なると、ユーザーはどこをクリックすればよいか迷ってしまいます。トンマナでボタンの色やデザインを統一しておけば、ユーザーは直感的に操作できるようになり、ストレスなく目的の情報にたどり着けます。また、フォントや文字サイズが揃っていると文章が読みやすくなり、ページ間を移動しても違和感なく閲覧を続けられます。
こうした細かな統一の積み重ねが、ユーザーの滞在時間やページの回遊率を高め、最終的には問い合わせや商品購入といったコンバージョンの向上につながります。
制作の効率が上がりコストを抑えられる
トンマナを事前に設定しておくと、ホームページの制作や更新にかかる時間とコストを大幅に削減できます。
配色やフォント、文章の書き方が決まっていれば、新しいページを追加する際にその都度デザインや表現を一から検討する必要がありません。制作に関わるメンバーが複数いる場合でも、トンマナというルールがあることで、仕上がりにばらつきが出にくくなります。ホームページ制作会社に依頼する場合も、トンマナが明確であれば修正や手戻りが減り、作業時間の短縮につながります。制作会社の多くは作業時間をもとに費用を算出するため、トンマナの設定は制作コストの削減に直結します。
限られた予算でホームページを制作・運用する中小企業にとって、トンマナの設定は費用対効果を高める有効な手段です。
トンマナの設定前に決めること
トンマナを設定する前に、方向性の土台となる要素を固めておく必要があります。これらが曖昧なままトンマナを決めてしまうと、デザインや文章に一貫性が生まれず、期待する成果が得られません。
ターゲットを具体的にする
トンマナの方向性を決めるために、まずはホームページを見てほしいターゲットを具体的にしましょう。
年齢や性別、職業、抱えている悩みなどを掘り下げてペルソナを設定すると、どのようなトンマナがターゲットに響くかが見えてきます。例えば、30代の女性経営者をターゲットにするなら、洗練された配色や丁寧な文体が適しているかもしれません。ただし、ターゲットを絞り込みすぎると、アプローチできるユーザーの数が極端に減ってしまうリスクがあります。反対に広げすぎると、誰にも刺さらないホームページになってしまいます。
自社の商品やサービスを求める層がどの範囲にいるかを見極めながら、トンマナの基準となる適切なターゲット像を設定しましょう。
ペルソナについて詳しくは、ペルソナ設計とは？ホームページ制作・運用で活用するメリットと設計手順の記事をご覧ください。
ユーザーに持って欲しいイメージを言語化する
ターゲットが決まったら、そのユーザーにホームページを通じてどのようなイメージを持って欲しいかを言語化します。
トンマナはこのイメージを形にするための手段なので、ここが曖昧だとデザインや文章の方向性がぶれてしまいます。言語化のポイントは、できるだけ具体的な言葉に落とし込むことです。例えば、飲食店であれば「料理がおいしそうな店」ではなく「素材の鮮度が伝わる、産地直送のこだわりを感じられる店」というように、どのような印象を与えたいかを明確にします。このとき、自社が伝えたいイメージだけでなく、ターゲットが求めているイメージも考慮すると、ユーザーの期待とトンマナのズレを防ぐことができます。
言語化したイメージは、制作に関わるメンバー全員で共有しておきましょう。
ホームページの目的を明確にする
トンマナの設定前に、ホームページで達成したい目的を明確にしておくことも重要です。
目的が変われば、トンマナの方向性も大きく変わるためです。例えば、認知度の向上が目的であれば、サービスの特徴が一目で伝わるような目立つ配色や大きな見出しが効果的です。コンバージョンの獲得が目的であれば、問い合わせボタンや購入ボタンを際立たせるアクセントカラーの設定が重要になります。ブランディングが目的であれば、写真やイラストの世界観を揃え、ユーザーに企業の価値観を印象づけるトンマナが求められます。
初めてトンマナの設定に取り組む場合は、複数の目的を同時に追うよりも、最も優先度の高い目的を1つに絞って設定する方が成果につながりやすくなります。
デザインのトンマナで設定する項目
デザインのトンマナは、ホームページの見た目の印象を左右する重要な要素です。ここでは、トンマナとして設定しておくべきデザインの項目を解説します。
配色
配色は、デザインのトンマナの中でもホームページの第一印象を決定づける項目です。
まずはメインカラーを決め、次にサブカラー、アクセントカラーの順で設定していくと、スムーズに配色を決められます。メインカラーは企業のブランドカラーや、ターゲットに与えたいイメージをもとに選びます。例えば、青系は信頼感や誠実さ、暖色系は親しみやすさや活気を感じさせます。使う色が多すぎるとデザインの統一感が損なわれるため、3色程度に絞るのが目安です。
配色ルールが決まっていれば、新しいページを作成する際も迷わず、サイト全体で一貫した印象を保てます。
フォント
フォントの選び方ひとつで、ホームページのデザインから受ける印象は大きく変わります。
トンマナの設定では、見出しや本文に使うフォントの種類と太さを決めておきましょう。一般的に、ゴシック体はモダンで視認性が高く、明朝体は上品で落ち着いた印象を与えます。ターゲットに持って欲しいイメージに合わせて選ぶことが大切です。また、フォントサイズや行間もデザインのトンマナとして統一しておくと、どのページでも読みやすい文章になります。
フォントの種類を増やしすぎると統一感が崩れるので、本文用と見出し用の2種類程度に絞ることをおすすめします。
画像や写真のテイスト
画像や写真のテイストも、デザインのトンマナとしてルールを決めておくべき項目です。
同じ商品でも、明るくナチュラルな写真と、コントラストの強いシャープな写真では、ユーザーが受ける印象はまったく異なります。トンマナとして設定しておきたいのは、写真の明るさや色味の方向性、被写体の撮り方、加工の度合いなどです。例えば、柔らかい自然光で撮影した写真で統一すれば温かみのある印象になり、背景をシンプルにして商品だけを際立たせれば洗練されたデザインになります。
フリー素材を使う場合も、サイト全体のトンマナに合ったテイストの素材を選ぶことで、統一感を保つことができます。
アイコンやボタンなどの素材
アイコンやボタンの素材は、ホームページの操作性やユーザーの認識に直接影響する要素です。
トンマナとして統一ルールを設けておくことで、ユーザーが迷わず操作できるホームページになります。例えば、問い合わせボタンやカートに入れるボタンの色を赤に統一すると、ユーザーは自然とその色をアクションボタンとして認識するようになります。アイコンについても、線の太さやデザインのテイストを揃えておくことが大切です。丸みのあるアイコンとシャープなアイコンが混在していると、トンマナの統一感が損なわれ、ユーザーに雑な印象を与えてしまいます。
素材のルールはコンテンツごとに個別で考えるのではなく、サイト全体で共通のルールとして定めましょう。
余白とレイアウト
余白とレイアウトは、トンマナの中でも見落とされがちですが、ホームページの印象を大きく左右する項目です。
適切な余白があることで、コンテンツが見やすくなり、デザインに洗練された印象が加わります。余白が少なすぎると情報が詰まって見え、ユーザーは窮屈に感じます。反対に、余白を十分に取ると一つひとつのコンテンツが際立ち、伝えたい情報がユーザーに届きやすくなります。レイアウトについても、コンテンツの並び順や画像とテキストの配置パターンをトンマナとして定めておけば、ページが増えてもサイト全体の統一感を維持できます。
余白とレイアウトのルールを決めておくことは、ブランディングの面でも効果的な施策です。
文章のトンマナで設定する項目
文章のトンマナは、ホームページに掲載するテキストの書き方に統一ルールを設ける取り組みです。デザインのトンマナと同様に、文章の表現が揃っていないとユーザーに違和感を与えてしまいます。ここでは、文章のトンマナとして設定しておくべき項目を解説します。
表記ルール
表記ルールは、文章のトンマナにおける基本の項目です。
漢字とひらがなの使い分け、英数字の全角・半角の統一、会社名やブランド名の書き方など、細かな表記を揃えるルールを定めましょう。例えば、「一人」と「ひとり」、「行う」と「行なう」のように、どちらでも通じる表記は、ルールがないとページごとにばらつきが出やすくなります。ユーザーは無意識のうちにホームページの表記パターンを感じ取りながら読んでいるため、表記が統一されていないと読みづらさにつながります。
特に複数の担当者で文章を作成する場合は、表記ルールを一覧にまとめて共有しておくと、統一感を保ちやすくなります。
文体と文末表現
文体と文末表現は、文章のトンマナの中でも読者が受ける印象を大きく左右する項目です。
「です・ます調」を使うか「だ・である調」を使うかによって、サイト全体の雰囲気が変わります。一般的に、中小企業のホームページでは「です・ます調」を使うことで丁寧さや親しみやすさを演出できます。また、口語表現や主観表現を使うかどうかもルールとして決めておきましょう。「ですよね」のような口語表現は親しみやすさを出せる反面、信頼感を損なう場合もあります。
ターゲットに持って欲しいイメージに合わせて、文体のルールを定めることが大切です。
NGワード
NGワードの設定は、文章のトンマナを守るうえで見落とされがちですが重要な項目です。
ホームページで使用しない言葉をあらかじめ決めておくことで、ユーザーに誤った印象を与えるリスクを防げます。代表的なNGワードとしては、根拠のない誇張表現があります。「日本一」「最安値」「業界No.1」といった表現は、客観的な裏付けがなければユーザーの信頼を損なうだけでなく、景品表示法に抵触する可能性もあります。また、同業他社を貶める表現や、ターゲットに与えたいイメージと一致しない言葉もNGワードとして定めておきましょう。
自社の強みを正確に伝える言葉を選ぶことが、トンマナの統一につながります。
文字数の基準
文字数の基準も、文章のトンマナとして設定しておくと、サイト全体の読みやすさが安定します。
ページタイトルや見出し、本文の1文の長さなど、それぞれに目安の文字数を決めておきましょう。例えば、ページタイトルは検索結果に表示される文字数を考慮して30文字前後に収める、1文は60文字以内を目安にするといったルールが考えられます。文字数の基準がないと、短すぎて内容が伝わらないページと、長すぎて読みにくいページが混在してしまいます。
あらかじめ基準を設けておくことで、どのページでも一定の読みやすさを保つことができ、トンマナの統一にもつながります。
トンマナが統一されたホームページの事例
トンマナの設定項目を理解したところで、実際にトンマナが統一されたホームページの事例を見ていきましょう。配色やフォント、写真のテイストなど、どのような要素が統一されているかに注目すると、自社サイトのトンマナを考える参考になります。
コカ・コーラ
コカ・コーラは、トンマナの統一が徹底されたホームページの代表例です。
コカ・コーラのブランドカラーである赤は「コークレッド」と呼ばれ、1888年にシロップを運ぶ樽を赤く塗ったことが始まりとされています。ホームページでも、この赤と白の2色を基調にした配色が徹底されており、どのページを開いてもコカ・コーラらしさが感じられるデザインになっています。写真やバナーにも赤を効果的に取り入れ、文字色やボタンの配色まで統一されている点は、トンマナのお手本と言えます。
赤と白のデザインを見るだけで多くの人がコカ・コーラを連想するのは、長年にわたってトンマナを一貫して守り続けてきた成果です。
無印良品
無印良品のホームページは、余白とシンプルさを徹底したトンマナが特徴です。
白を基調にした配色で統一され、装飾を最小限に抑えたデザインがブランドの世界観をそのまま表現しています。フォントも装飾の少ないゴシック体で統一し、商品写真は自然光を活かしたナチュラルなテイストで撮影されています。余白を十分に取ったレイアウトによって、一つひとつの商品情報がすっきりと目に入る設計です。
ブランドカラーのえんじ色はロゴやアクセントに控えめに使われており、主張しすぎない配色がサイト全体の落ち着いた印象を支えています。
デザインの派手さで目を引くのではなく、トンマナの統一による世界観そのものがブランドの価値になっている好例です。
スターバックス
スターバックスのホームページは、白を基調にしつつ、ブランドカラーの緑をロゴやボタンなどのアクセントに効かせたトンマナで統一されています。
全体的に落ち着いた配色で構成されており、店舗で感じる居心地の良さがサイト上でも再現されています。スターバックスのデザインには「手作り感」「芸術性」「洗練」「人間らしさ」「永続性」という5つの要素が基準として設けられており、ホームページの写真やイラストにもその方針が反映されています。
季節ごとに商品のビジュアルは変わりますが、トンマナの基準が明確なため、どの時期に訪れてもスターバックスらしさが感じられるデザインに仕上がっています。
まとめ
トンマナとは、デザインや文章に一貫性を持たせるためのルールであり、ホームページの印象や成果を大きく左右する要素です。
トンマナを設定する前にターゲットや目的を明確にし、配色・フォント・文体・表記ルールなどの項目を一つずつ定めていくことで、サイト全体に統一感が生まれます。トンマナの統一は、ブランドイメージの向上やユーザーの使いやすさ、制作コストの削減など、さまざまな面でホームページの成果を支えてくれます。
まだトンマナを設定していない場合は、まず自社のターゲットと伝えたいイメージを整理するところから始めてください。
