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

この記事では、トンマナの意味と概要、トンマナの参考になるWebサイト事例3選、トンマナを決める方法と注意すべきポイントを解説します。

トンマナとは

「トンマナ」とは「トーン＆マナー」を略した呼び方です。
「トーン（tone）」には調子や色調、「マナー（manner）」には様式や作風という意味があります。つまり、トンマナとは色調や様式、つまりデザインやスタイルなどに一貫性をもたせるルールを指します。

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

 

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

それでは、なぜトンマナというルールを設定して、コンテンツのデザインを統一するのでしょうか。トンマナの重要性がわかる３つの事例から、実際に見てみましょう。

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

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

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

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

ヤマト運輸のシンボルカラーは、希望や探求を表す黄色と、安全や環境を表す緑色の2つです。事業の創造による成長や安全性といったイメージを打ち出しています。

宅急便センターの看板やトラックに加えて、公式サイトの配色も黄色と緑色です。
さらに、サービスロゴに使われている黒い猫も、公式サイトでは猫の目が動く可愛いアニメーションとして親しみやすさを演出しています。

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

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

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

 

トンマナを合わせることが大事な理由

ここでは、製品・サービスの受け手側／制作側の双方から見た、トンマナを合わせることの重要性を解説します。

受け手側におけるトンマナの重要性

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

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

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

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

また、製品・サービスを選ぶ際に、トンマナから得る印象で「自分がターゲットになっている」と強く感じることにもつながります。

UQモバイルの例では、カラフルな色遣いやモダンかつコミカルな印象の広告から、若者や、インターネットを趣味で使いたい層に向けたサービスであることが伝わります。

制作側におけるトンマナの重要性

制作側にとっても、トンマナの設定により、大勢のメンバーが製品・サービスのイメージを共有できるのは大きなメリットです。
トンマナという方向性がない場合、各自が思い浮かべる完成図がバラバラになり、製品・サービスの統一性が損なわれる可能性もあります。

 

トンマナを設定する方法

製品・サービスのトンマナを決めるには、次の手順を踏むと作りやすくなります。

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

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

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

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

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

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

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

とはいえ、最初から最適な案を出すのは難しく、たとえばフォントなら、複数の候補を並べてふさわしくない案を消去していく方法が現実的です。

 

トンマナを設定するうえでの注意ポイント

Webサイト制作において、トンマナを設定する際に注意したいポイントを解説します。

配色

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

素材の形

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

レイアウト・文章の構成

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

文字数

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

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

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

フォント

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

日本語や英数の表記

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

使用禁止ワード

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

 

まとめ

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

とはいえ、作りたいWebサイトのターゲットやコンセプトを明らかにし、トンマナへと落とし込むのは、なかなか困難な作業となります。
パンタグラフでは、専門家の視点によるWebサイト分析と、効果的なUIデザイン／UXデザインの構築を行っています。

興味のある方は、記事下のボタンよりお気軽にお問い合わせください。

 

お問い合わせはこちら