- 公開日： 最終更新日：
トンマナとは？デザインの事例とホームページ制作法を解説
効果的なホームページ制作にはトンマナの統一が重要です。
トンマナを統一することで、ユーザーの信頼感が向上し、コンバージョン率の向上が期待できます。
当ページでは、トンマナとは何か、統一するメリット、デザインの事例、設定する前に考える内容、ホームページ制作法を解説します。
目次
トンマナとは
トンマナとは、トーン＆マナーの略で、広告やコンテンツにおいて、デザイン、構成、文章などに一貫性を持たせることを言います。
企業がトンマナを統一させることで、一貫してユーザーに打ち出したいメッセージを伝えることができるようになり、問い合わせや商品購入などのコンバージョンを高めることが可能です。
ちなみにコンバージョンについて詳しくはこちらのページをご覧ください。
トンマナを設定することで、ホームページに統一感が生まれるので、Webブランディングとしても高い効果を発揮します。
トンマナを統一するメリット
具体的にトンマナを統一するメリットを解説します。
制作時間やコストの削減
トンマナを設定していない状態だと、全体的なイメージや作成方針がぶれてしまう可能性があり、各コンテンツごとに個別で検討しなくてはならないので、制作時間が伸びてしまいます。
ホームページ制作会社では、作業時間に基づいて見積もりが行われるため、作業時間が長くなるほどコストも高くなります。
トンマナを設定することで、レイアウトやWebデザイン、文章をスムーズに作成することが可能になるので、時間やコストの削減に繋がります。
UI・UXが最適化される
トンマナを整えることで、UIとUXが最適化され、訪問者がホームページに良いイメージを持ってくれるようになります。
UIとは、ユーザーが操作するホームページの画面やレイアウト、文字サイズなどのデザイン要素を指し、使いやすさを向上させる役割を持ちます。
UXとは、ユーザーがホームページを利用する際の体験全体を指し、期待通りの操作やセンスの良いデザインによって、ユーザーに優れた体験を提供することを指します。
見やすいフォントや使いやすいナビゲーションなど、トンマナの統一によってホームページの魅力が向上し、期待以上の成果を得ることができます。
ブランディングに繋がる
サイト全体のトンマナを決定することで、統一感のある世界観が生まれ、ユーザーに「〇〇と言えば××会社」といった強いブランドイメージを持ってもらいやすくなります。
例えば、「コカ・コーラと言えば赤を使ったデザイン」、「アップルと言えばシンプルで洗練されたデザイン」といったように、特定の色やデザインが企業を連想させることは、ブランディングにおいて非常に重要です。
トンマナを活用し、サイト全体の配色やフォントを統一することで、企業のイメージをユーザーに強く印象づけ、高いブランディング効果を得られます。
トンマナを活かしたデザインの事例
トンマナを活かしたデザインの事例を解説します。
コカ・コーラ
コカ・コーラは、1888年の発売当初から、運搬用の樽やロゴ、販促物など、さまざまな広告物で赤と白を重視したデザインを採用しています。
結果、現在では赤と白のデザインと言えば、多くの人が「コカ・コーラらしさ」を感じるようになりました。
また、ホームページでも、赤と白の配色を効果的に使用し、ブランドイメージの強化を図っています。
マクドナルド
マクドナルドと言えば、黄色と赤を使ったロゴが象徴的です。
通常は黄色のロゴが使われますが、背景やテキストに赤が使われることも多いです。
この黄色いロゴは「ゴールデンアーチ」とも呼ばれ、マクドナルドを象徴するシンボルとなっています。
M字型の黄色や赤のアーチを見ると、多くの人がマクドナルドを連想します。
また、ホームページでも、黄色を効果的に使用し、Webブランディングの強化に役立てています。
UQ mobile
UQ mobileでは、青色とピンクが基調のデザインで、水色がアクセントとして使われています。
青とピンクの組み合わせを見ると、UQ mobileのテレビCMを思い出す方も多いのではないでしょうか。
ホームページでも、魅力的な青やピンク、水色が活用され、ブランドカラーを効果的に取り入れたデザインに仕上がっています。
トンマナを設定する前に考える内容
トンマナの設定を行う前に考えておきたい内容を解説します。
ユーザーに持って欲しいイメージの検討
トンマナを設定する前に、ホームページにアクセスをしたユーザーに持って欲しいイメージを定めましょう。
具体的であるほど良い結果を生み出せ、例えば以下のようにイメージを検討します。
| ホームページ制作会社 | SEOやSNSを使った集客対策の知識をアピールして、見込み顧客が集まる成果の出るホームページを思い浮かべてもらう |
| 飲食店 | 料理人の腕の高さをアピールして、最高のディナーと他では味わえない時間をイメージしてもらう |
具体的なイメージであるほど、トンマナを活かしたWebデザインを作成できるようになるので、時間をかけてじっくりと検討することがおすすめです。
目的の設定
ユーザーに持って欲しいイメージを実現するための目的を設定します。
目的によってトンマナの方向性が変わってきます。
| 認知度向上 | 料金やサービス内容などの重要なコンテンツを目立たせる |
| Webブランディング | 写真やイラストなどうまく活用してユーザーに良いイメージを持ってもらう |
| コンバージョン数の向上 | ユーザー行動を最適化するためのリンクやCTAボタンを設置する |
初めてトンマナの統一に取り組む方は、最初から多くの目的を設定するよりも、1つずつ確実に実行していった方が成果を実現できる可能性が高くなります。
ターゲットの設定
ペルソナ設計を行い、具体的なターゲットを定めましょう。
ペルソナ設計とは、年齢や性別、住んでいる地域、職業などを定めて、具体的な見込み顧客となる可能性が高い仮定のターゲットを定める手法です。
ターゲットを絞り込むほど、ホームページのコンバージョン率は高まりますが、絞り込み過ぎてしまうとユーザー数が減少する恐れがあるので、御社にとってベストな範囲を検討しなくてはなりません。
ターゲット選定はトンマナにおいて重要な要素になるので、具体的な成功例と失敗例を紹介します。
ターゲット選定の成功例
ある飲食店は、新規顧客層として20代から30代の女性をターゲットにしたペルソナ設計を行いました。
具体的には、「休日に友人とカフェ巡りを楽しむ女性」というペルソナを設定し、メニューやインテリア、SNS広告をそのターゲットに合わせて調整を行いました。
結果、女性客の来店が増え、売上が20%向上し、ターゲット層を絞り込むことで効果的な集客が実現しました。
ターゲット選定の失敗例
ホームページ制作会社は「大手企業のIT部門だけ」にターゲットを絞りすぎた結果、問い合わせが減少し、売上が落ち込む事態に陥りました。
ターゲットを絞り込みすぎたことで、他の潜在顧客層（例えば中小企業や個人事業主）を逃してしまい、結果として売上が減少してしまったのです。
ホームページ制作会社はターゲット範囲を広げ、様々な規模の企業向けにサービスを提供することで、再び顧客層を取り戻しました。
トンマナを設定
具体的なトンマナの設定法は以下になり、検討したイメージや、目的、ターゲットを活かすことで、ホームページのコンバージョンを大きく伸ばすことができます。
トンマナを活かしたホームページ制作法
具体的なトンマナを活かしたホームページ制作法を解説します。
表記ルール
ホームページで利用する表記のルールを定めましょう。
| 日本語 | ブランドや会社名の表記の統一 また、表記が混在しそうな「ひとりor一人」、「行うor行なう」など |
| 英数字 | 全角と半角の統一や大文字の利用法を定める など |
| 記号 | 【】や「」、？などの利用ルールを定める 利用しない記号を定める など |
ユーザーは自然とホームページごとに表記のルールを感じ取り閲覧しているので、表記がころころ変わってしまうと、読みづらいと感じられる可能性が高くなります。
NGワードの設定
ホームページで利用しないNGワードを設定しましょう。
| 誇張表現 | 「最も」、「最安値」、「日本一」などの根拠のない誇張表現 根拠のない誇張表現はユーザーを混乱させるだけです |
| ネガティブな表現 | 同業他社を貶める表現やターゲットを傷つける表現 など 大切なのは自社の強みと弱みを打ち出すことです |
| イメージと一致しない表現 | ユーザーに持って欲しいイメージと一致しない表現 など 持って欲しいイメージと異なる表現を使うとユーザーの混乱を招きます |
配色
配色は、ホームページのイメージを決定づける要素です。
ターゲットユーザーに持って欲しいイメージから、メインカラーを定め、サブカラー、アクセントカラーの順で定めることで、スムーズに配色を決定することができます。
ホームページの色の印象や影響はこちらのページからご覧いただけます。
フォント
ターゲットユーザーに持って欲しいイメージからフォントの選択を行います。
フォントが少し太いだけでユーザーが持つ印象が異なってしまうので、ターゲットユーザーに持って欲しいイメージや、ホームページの読みやすさを考えて、フォントの選択を行いましょう。
フォントについて詳しくはこちらのページからご覧ください。
画像
ターゲットユーザーに与える印象を考えた画像の加工を行いましょう。
例えば、細部まではっきりと見てもらうのか、少しぼやかすことで魅力的になるのか、画像の目的に合わせた加工を行うことで、より魅力的なホームページへと成長します。
また、サイズや配置などもトンマナに大きな影響を与えるので、どこにどんな画像を設置することが最もホームページの魅力を際立たせるのかを考えて設置することが重要です。
素材
統一感のあるアイコンやボタンなどの素材を利用しましょう。
アイコンやボタンの素材は、ホームページの操作性やユーザーの認識に大きな影響を与えるので、コンテンツごとに考えるのではなく、サイト全体で共通ルールを持つことが大切です。
例えば、お問い合わせやカートに入れるなどのリンクボタンは、赤に統一することで、訪問者は自然とコンバージョンボタンを赤と認識してくれるようになりユーザー行動が最適化されます。
余白
デザインにおいて余白の重要性は高くなります。
余白があることで、そのデザインが一気に見やすく魅力的なものに感じられるようになるので、Webブランディングの実現に必須の対策になります。
文体
トンマナ設定で定める文体については以下になります。
| 文末表現 | 「です・ます」、「だ・である」調などの利用のルールを定める |
| 口語表現 | 「ですよね」、「するんですか」などの利用の可否を定める |
| 主観表現 | 「わたしは〇〇だと思う」などの主観表現の利用可否を定める |
その他ホームページによっては、さまざまな文体ルールを定めることになり、自社に合ったトンマナ設定を行いましょう。
文字数
トンマナ設定における文字数については以下になります。
| ページタイトル | 表示される箇所を洗い出し適切な文字数を定める |
| meta description | 表示される箇所を洗い出し適切な文字数を定める |
| 見出し | ユーザーが読みやすい見出しの文字数を定める |
| 1文の長さ | ユーザーの読みやすさを意識した1文の長さを定める |
また、ページタイトルとmeta description、見出しについては、それぞれで別ページを使って解説しているので興味がある方はご確認ください。
meta descriptionとは
トンマナのまとめ
トンマナを解説しました。
トンマナの設定は、ホームページのコンバージョンを最大化させるには必須と言えます。
トンマナって何？とお思いのWebマスターの参考になれば幸いです。
