ホームページ制作でよく聞く『トンマナ』の意味と設定の仕方

そもそもトンマナ（トーン＆マナー）とは何か？

トンマナとは、トーン(Tone)とマナー(Manner)を組み合わせた造語です。ホームページの雰囲気や語り口、振る舞いや約束事など、サイト全体の印象を決定づける要素のことを指します。具体的にトーンとマナーがどのような意味を持つのか、詳しく見ていきましょう。

トーンとは？

トーンとは、ホームページの雰囲気や語り口のことを指します。サイトのデザインや文章から感じ取れる印象や個性のことです。例えば、以下のようなトーンがあります。

・フレンドリーでカジュアルなトーン
・上品で高級感のあるトーン
・専門的で信頼感のあるトーン
・元気で明るいトーン

トーンは、配色やフォント、写真、イラスト、文章の書き方によって表現されます。例えば、パステルカラーを多用し、丸みを帯びたフォントを使えば、柔らかく優しい印象を与えることができるでしょう。一方、シャープなデザインに、硬めの言い回しを多用すれば、クールで都会的な雰囲気を演出できます。

サイト全体で統一感のあるトーンを保つことで、ユーザーはブランドの個性を感じ取ることができます。逆に、ページごとにトーンが異なっていると、ユーザーは戸惑ってしまうかもしれません。

マナーとは？

一方、マナーとはホームページ上での振る舞いや約束事のことです。サイトの信頼性を高め、ユーザーに安心して利用してもらうための行動規範と言えるでしょう。具体的には、以下のようなルールがマナーに含まれます。

・正確で最新の情報を提供する
・読者に対して敬意を払う
・誇大広告や虚偽の情報を掲載しない
・プライバシーポリシーを明示する
・アクセシビリティに配慮する
・問い合わせへ迅速に対応する

例えば、「当サイトに掲載された記事は、信頼できる情報源に基づいて作成されています」といった一文があれば、ユーザーはサイトを信頼できると感じるはずです。また、問い合わせフォームが用意されていて、すぐに返信が得られるサイトは、ユーザーに安心感を与えます。

一方、マナー違反が多いサイトは、たとえコンテンツの質が高くても敬遠される恐れがあります。例えば、個人情報の取り扱いが不透明だったり、重要な情報がわかりづらい場所にあると、ユーザーはサイトを信用できないと感じてしまうでしょう。

ホームページ制作におけるトンマナの役割

トンマナは、ホームページ制作において欠かせない要素です。なぜなら、トンマナはブランドイメージを形作る重要な役割を担っているからです。適切なトンマナを設定し、サイト全体で一貫性を保つことで、ユーザーはブランドの個性や価値観を理解しやすくなります。逆に、トンマナが不明確だったり、ページごとにバラバラだったりすると、ブランドイメージが曖昧になってしまうでしょう。

また、トンマナはユーザー体験の向上にも寄与します。ユーザーの目的や嗜好に合ったトーンを用いることで、サイトを心地よく利用してもらえるでしょう。マナーを守ることで、ユーザーの不安を取り除き、信頼感を醸成することもできます。つまり、ブランディングとユーザビリティの両面から、ホームページの価値を高める重要な役割を担っているのです。だからこそ、トンマナの設定は、サイト制作の早い段階から意識的に行う必要があります。後付けでトンマナを変更するのは容易ではありません。

トンマナはサイト制作者の感性が問われる領域でもあります。ユーザーやクライアントの要望を汲み取りつつ、独自の世界観を作り上げていく。ホームページ作り、そんな創造性が求められる仕事だと言えるでしょう。

【関連記事】成果につながるコーポレートサイトの理想的な『構成』と『コンテンツ』の作り方

なぜトンマナが重要なのか？

前章で、トンマナの基本的な概念について説明しました。次はトンマナがなぜ重要なのか、その理由を具体的に解説していきます。

ブランドイメージの統一

トンマナを設定することで、ホームページの各ページで一貫したブランドイメージを維持できます。例えば、高級ブランドのサイトであれば、ゴールドを基調としたカラーリングに、斜体の優雅なフォント、そして丁寧な言い回しの文章を使うことで、「上品で洗練されている」というイメージを訪問者に与えることができます。トップページから問い合わせフォームに至るまで、トーンを統一することで、ユーザーに「このサイトらしさ」を感じ取ってもらえるのです。

なぜブランドイメージの統一が重要かと言えば、それがユーザーの記憶に残りやすいからです。一貫性のあるブランドイメージを繰り返し見せることで、ユーザーの潜在意識に刷り込むことができます。また、ブランドイメージが明確になることで、競合他社との差別化も図れます。他社にはない独自の世界観を構築できれば、ユーザーの記憶に強く残り、ブランドへの愛着にもつながるでしょう。

逆に、トンマナが不明確で、ページごとに印象が異なるサイトは、ユーザーに「このサイトは何者なのか」という疑問を抱かせてしまいます。ブランドイメージが曖昧なサイトは、ユーザーの心に残りにくいと言えるでしょう。

ユーザー体験の向上

適切なトンマナは、ユーザー体験の向上にも寄与します。サイトが提供するサービスや商品の特性に合ったトーンを用いることで、ユーザーは快適にサイトを利用できるようになります。例えば、子育て中の主婦をターゲットにしたサイトであれば、柔らかく優しいトーンが適しているでしょう。堅苦しい専門用語を避け、イラストを多用することで、読者に寄り添う姿勢を示すことができます。

一方、IT系のサービスを扱うサイトであれば、技術的な正確さを重視しつつも、難解にならないよう平易な言葉で説明することが求められます。こうしたユーザー体験の向上が重要な理由は、それがサイトの滞在時間や再訪率、ひいては売上やコンバージョンにも影響するからです。居心地の良いサイトであれば、ユーザーは何度でも訪れたくなるでしょう。ECサイトであれば、商品説明が分かりやすく、写真も魅力的で、購入手続きもスムーズであれば、ユーザーは「このサイトで買い物をしたい」と思うはずです。そうした積極的な感情が、購買行動につながっていくのです。

逆に、トンマナが不適切だと、ユーザーは「このサイトは自分に合わない」「使いづらい」と感じ、すぐに離脱してしまうかもしれません。せっかく訪問したユーザーを逃さないためにも、トンマナの設定は慎重に行う必要があります。

信頼性の構築

マナーを守ることは、企業の信頼性を高める上でも大切です。約束を守り、誠実な対応を行うことで、ユーザーからの信頼を得ることができます。ホームページに掲載された情報は、正確で最新のものでなくてはなりません。古い情報をアップデートせず放置していると、ユーザーを混乱させてしまうでしょう。常に情報を更新し、必要に応じて訂正や削除を行う姿勢を見せることが重要です。

また、ユーザーからの問い合わせには迅速に対応する必要があります。メールや電話での問い合わせに長時間放置していると、ユーザーは不信感を抱いてしまうかもしれません。24時間以内の返信を心がけるなど、ユーザーの声に真摯に耳を傾ける姿勢が求められます。

こうした信頼性の構築は、ひいてはブランドの長期的な価値につながります。信頼できるブランドであれば、ユーザーは安心して商品やサービスを利用できるため、良い体験をどんどん積み重ねてブランドへの愛着やロイヤルティが生まれていくわけです。

プライバシーポリシーをしっかり掲載し、個人情報の取り扱いについて丁寧に説明しているサイトは、ユーザーから信頼されやすいでしょう。「このサイトは信用できる」という安心感が、リピート率の向上や口コミの拡散にもつながります。逆に、マナー違反の多いサイトは、たとえ商品やサービスの質が高くても、ユーザーに敬遠されてしまいます。一度失った信頼を取り戻すのは容易ではありません。長期的な視点に立ってマナーを守ることが、ブランド価値の維持につながるのです。

トンマナは、ブランディング、ユーザー体験、信頼性の3つの観点から、非常に重要な意味を持っています。ホームページ制作において、トンマナの設定はけして疎かにしてはならないのです。

トンマナの要素

トンマナを適切に設定するには、それを構成する要素について理解しておく必要があります。

本章では、トンマナに関わる代表的な要素を6つ取り上げ、それぞれの役割と注意点を解説します。

色使い（配色）

色は、サイトの雰囲気を大きく左右する重要な要素です。配色によって、ユーザーに与える印象は大きく変わります。トンマナに合った色を選ぶためのポイントは、以下の3つです。

・ブランドイメージに合った色を選ぶ
・色の組み合わせを考える
・色の心理的効果を意識する

色は感情に訴えかける力があります。例えば、赤は情熱や興奮を、青は冷静さや信頼を、緑は自然や安らぎを連想させるイメージがあります。狙ったブランドイメージを色で表現するには、色彩心理学の知見を活用するのも一案です。「高級感を演出したい」「活気のあるイメージを付けたい」など、目的に合わせて色を選びましょう。

また、色の組み合わせにも気を配る必要があります。メインカラーとアクセントカラーのバランス、背景色と文字色のコントラストなどを考慮し、見やすく美しい配色を心がけましょう。色の組み合わせが多すぎると、かえって統一感が失われてしまうので注意が必要です。

フォントと文字使用

フォントもホームページの印象を大きく左右する要素の一つです。適切なフォント選びとルール作りが求められます。フォント選定の際は、以下の点に留意しましょう。

・ブランドイメージに合ったフォントを選ぶ
・可読性の高いフォントを使う
・フォントの種類を絞る

和文フォントか欧文フォントか、セリフ体かサンセリフ体か、明朝体かゴシック体か。ブランドイメージに適したフォントを吟味し、用途に応じて使い分けのルールを定めましょう。一般的に、serif体は伝統的で格式高い印象を与え、sans-serif体はモダンでスタイリッシュな雰囲気を醸し出すと言われています。読みやすさの観点からは、本文はゴシック体、見出しは明朝体を用いるのが王道です。あまり凝ったデザインのフォントは、かえって可読性を損なう恐れがあるので注意が必要です。

フォントの種類は、できるだけ絞り込むことをおすすめします。多すぎるフォントを使うと、統一感が失われてしまいます。サイト全体で2〜3種類のフォントに抑えるのが良いでしょう。

文字の大きさ、行間、字間なども、一定のルールを設けておくと良いでしょう。例えば、本文のフォントサイズは16px以上、行間は1.5em程度が読みやすいと言われています。こうした細かなルール作りが、サイトの洗練度を高めることにつながります。

レイアウトと余白

レイアウトと余白の使い方も、サイトの印象を大きく左右します。見やすく美しいレイアウトを心がけることが大切です。レイアウト設計のポイントは、以下の3つが挙げられます。

・情報の優先順位を考える
・ユーザーの視線の流れを意識する
・余白を効果的に使う

サイトに掲載する情報には優先順位があります。重要な情報から順に、目立つ位置に配置していきましょう。

ユーザーの視線の流れを意識し、「上から下」「左から右」という自然な目線の動きを考慮するのも大切です。

また、余白を効果的に使うことで、高級感や洗練された印象を与えることができます。詰め込みすぎたレイアウトは窮屈な印象を与えてしまうので、適度な余白を確保しましょう。

高級な和食の飲食店のホームページであれば、シンプルな余白の使い方が良いでしょう。メニューや料理の写真をメインに据え、最小限のテキストで説明するなど、「引き算のデザイン」が、上品な和の雰囲気をより引き立ててくれるはずです。

一方、ファッションブランドのサイトであれば、大胆なグリッドレイアウトを用いるのも一案です。モデルの写真を大きく配置し、商品の魅力を最大限に伝える。カラフルなバナーやポップなアイコンを散りばめることで、トレンド感のあるデザインを演出できるでしょう。

写真とイメージ

写真やイメージは、サイトの雰囲気を作る上で欠かせない要素です。ブランドイメージに合った写真選びが求められます。写真選定の際は、以下の点に留意しましょう。

・ブランドイメージに合った写真を選ぶ
・統一感のある写真を使う
・品質の高い写真にこだわる

写真は「ブランドの世界観を視覚的に伝える」重要な役割を担っています。「この写真は自社のブランドを体現できているか？」を基準に、厳選することが大切です。また、明るさや色合い、構図などに統一感を持たせることも重要です。トーンの異なる写真を混在させると、サイトのイメージが崩れてしまう恐れがあります。

トーンカーブの調整など、写真の加工にもこだわりたいものです。

品質の低い写真は、サイトの信頼性を損ねる原因にもなります。可能な限り、高解像度でノイズの少ない写真を使うようにしましょう。スマートフォンでの表示も考慮し、最適な画像サイズに調整することも忘れてはいけません。

写真とイラストを併用する場合は、全体のバランスに気を配る必要があります。写真とイラストの割合を一定に保ち、混在させ過ぎないことが大切です。「写真は商品の説明に、イラストはコンセプトの説明に使う」など、使い分けのルールを決めておくと良いでしょう。

文章表記と文体

文章表記と文体は、ブランドの個性を言葉で表現する上で重要な役割を担っています。ユーザーに合ったトーンを用いることが求められます。文章作成の際は、以下の点に留意しましょう。

・ターゲットユーザーに合った文体を使う
・表記のゆれをなくす
・簡潔でわかりやすい文章を心がける

ターゲットユーザーの年齢層や職業、嗜好に合わせて、文体を使い分ける必要があります。例えば、10代の女性向けのファッションサイトであれば、やや砕けた口調で親しみやすく書くのが良いでしょう。一方、50代のビジネスマン向けのサイトであれば、丁寧で端正な言葉遣いが求められます。

表記のゆれにも注意が必要です。例えば「〜だ」「〜である」「〜です」など、文末表現は統一しておきましょう。カタカナ語の表記も、「コンピュータ」なのか「コンピューター」なのか、ルールを決めることが大切です。細かな部分までルール化し、どのライターが書いても同じトーンになるよう徹底しましょう。

また、簡潔でわかりやすい文章を心がけることも重要です。長すぎる文章は読みづらく、伝えたい情報が埋もれてしまう恐れがあります。一文は40〜50文字程度に抑え、なるべく専門用語は避ける。難解な言葉には注釈をつけるなど、読者に配慮した文章を心がけましょう。

禁止事項

最後に、トンマナの一環として「禁止事項」を設定しておくことも大切です。ブランドイメージを損なうような表現は、特例をのぞいてできる限り避ける必要があります。禁止事項の例としては、以下のようなものが挙げられます。

・差別的な表現
・誇大な表現や根拠のない数字の使用
・競合他社の中傷
・守秘義務に反する内容
・公序良俗に反する内容

当然のことながら「当社の商品は世界一です！」といった根拠のない表現は控えるべきです。他社の商品と比較して優れていると連想させる表現でも厳禁です。また、個人のプライバシーに関わる情報や、顧客が不快感を示す表現にも十分配慮しましょう。

禁止事項をガイドラインとしてまとめ、サイト制作に関わる全員で共有することが大切です。「ここまでがOKで、これ以上はNG」という線引きを明確にしておくことで、トラブルを未然に防ぐことができるはずです。

トンマナは、色やフォント、レイアウトなど、ホームページのあらゆる側面に関わっています。各要素について理解を深め、適切に設定していくことが求められます。その設定については、次の章でトンマナ設計のステップやポイントを詳しく見ていきます。

トンマナの設定方法

これまでトンマナを構成するさまざまな要素について解説しましたが、実際にトンマナを設定していくにはどうすれば良いのでしょう。ここではその具体的な手順やポイントについて説明します。

トンマナ設定のステップ

トンマナの設定は、以下の5つのステップで進めていくことをおすすめします。

・ブランドコンセプトの明確化
・ターゲットユーザーの理解
・競合サイトのリサーチ
・デザインとコンテンツの方向性決め
・ガイドラインのまとめ

まず、自社のブランドコンセプトを言語化することから始めましょう。「どんな価値を提供するのか」「他社にはない強みは何か」など、ブランドの本質を見つめ直します。明確になったブランドコンセプトが、トンマナ設定の指針となるはずです。

次に、ターゲットユーザーについて深く理解することが大切です。ユーザーのペルソナを作成し、年齢層や職業、ライフスタイル、悩みや欲求を明文化しましょう。「どんな人に何を伝えたいのか」という視点を持つことが、説得力のあるトンマナ設計につながります。

さらに、競合他社のホームページを分析することも重要なステップです。業界の中でどんなトーンが主流なのか、ユーザーがどんなサイトに惹かれているのかを知る必要があります。競合サイトの良い点は取り入れつつ、自社らしさをどう打ち出すか。差別化の方向性を探りましょう。

以上の情報を踏まえ、デザインとコンテンツの方向性を決めていきます。「シンプルでモダンなデザイン」「丁寧で親しみやすい文章」など、トンマナの具体像をイメージしていくのです。イメージに合ったサンプルを集め、カラーパレットやフォント、写真の選定などを進めましょう。

最後に、決定した内容をガイドラインという形でまとめます。サイト制作に携わる全員が、トンマナについて共通認識を持てるようにすることが大切です。ガイドラインは、サイトの制作が進む中で柔軟に改定していくことも必要でしょう。

以上の5つのステップを踏まえることで、自社のベストなトンマナを見出すことができるはずです。トンマナ設定は、いわば「ブランドの設計図」を描く作業。ブランドの世界観を言葉とビジュアルで表現する、創造的で奥深いプロセスだと言えるでしょう。

実際にトンマナを設定する際のポイント

ここからは、実際にトンマナを設定する際の注意点をいくつか紹介します。

まず、トンマナ設定はトップダウンで進めることが大切です。経営層の理解と協力があって初めて、サイト全体でトンマナを徹底できるからです。トンマナの重要性を社内で共有し、プロジェクトの優先度を上げることが求められます。

また、ターゲットユーザーの理解は、トンマナ設定の基本中の基本です。ユーザーの立場に立ち、共感することから始めましょう。例えば、ユーザーへのインタビューやアンケートを実施することで、生の声を集めることができます。ユーザーの感覚を理解することは、説得力のあるトンマナ作りに直結します。

競合サイトの分析も、ただ眺めるだけでは不十分です。「なぜこのサイトはこんなトーンなのか」という仮説を立て、理由を考察することが大切です。競合サイトの狙いを読み解き、自社との差別化ポイントを見出すことが求められます。

デザインとコンテンツの方向性を決める際は、社内の意見を集約することも重要です。トンマナはサイト制作者だけでなく、営業やカスタマーサポートなど、さまざまな部門に関わる問題だからです。ブランドに関わる全員の意見を吸い上げ、議論を重ねることで、納得感のある意思決定ができるはずです。

ガイドラインをまとめる際は、できるだけ具体的に記述することが大切です。抽象的な表現だと、解釈の違いが生じる恐れがあります。「明るい色を使う」ではなく「カラーパレットはこの6色を使う」など、客観的に判断できる基準を設けましょう。また、サンプルを豊富に盛り込むことで、イメージを共有しやすくなります。

最後に、トンマナ設定はゴールではなくスタートだということを肝に銘じましょう。大切なのは、設定したトンマナを実際のサイト制作に活かし、PDCAサイクルを回していくこと。運用の中で課題を発見し、改善を重ねることで、トンマナは磨かれていくのです。

トンマナ設定は、ブランドの根幹に関わる重要なプロセスです。ユーザーの共感を得られるサイトを目指し、時間をかけて丁寧に進めることが大切だと言えるでしょう。

トンマナのガイドライン作成

トンマナを設定したら、それをガイドラインという形でまとめることが重要です。本章では、トンマナのガイドライン作成について、その意義と手順を詳しく解説します。

【関連記事】世界観を統一するブランドガイドラインの作成と効果的な運用方法

ガイドラインの重要性

トンマナのガイドラインを作成する目的は、大きく以下の3つです。

・ブランドイメージの一貫性を保つ
・制作現場の効率化を図る
・ステークホルダー間の認識を揃える

まず、ガイドラインがあることで、サイトの隅々まで一貫したブランドイメージを保つことができます。サイトを訪れたユーザーが、ページごとに違和感を覚えることがないよう、トンマナの徹底が求められるのです。

また、ガイドラインは制作現場の効率化にも役立ちます。トンマナに関する細かな判断を、その都度ディレクターやデザイナーが下す必要がなくなるからです。ガイドラインに沿って制作を進めることで、人によるクオリティのばらつきを防ぐことができるでしょう。

さらに、ガイドラインはステークホルダー間の認識を揃える上でも重要な役割を果たします。例えば、経営層とサイト制作者、マーケティング部門と営業部門など、さまざまな立場の人がホームページに関わっています。

ガイドラインを共有することで、サイトの目指す方向性について、全社的な理解を促すことができるのです。

特に、大規模なサイトリニューアルや、複数の制作会社が関わるプロジェクトなどでは、ガイドラインの存在が不可欠です。メンバーが入れ替わっても、ブランドイメージを守り、質の高いサイトを維持し続けるために、ガイドラインは強力な武器となるはずです。

ガイドライン作成の手順

では、トンマナのガイドラインは具体的にどのように作成すれば良いのでしょうか。ここでは、ガイドライン作成の手順を5つのステップで解説します。

・基本方針の決定
・各要素のルール化
・実例の作成
・運用ルールの設定
・共有と浸透

まず、トンマナの基本方針を明文化します。「明るく前向きなイメージを伝える」「シンプルで洗練された印象を与える」など、大枠の方向性を決めるのです。この方針が、ガイドラインの根幹となる考え方になります。

次に、トンマナの各要素について、具体的なルールを定めていきます。例えば、配色であれば「メインカラーは〇〇、サブカラーは〇〇」といった具合です。フォントや文章のトーンなども、客観的に判断できる基準を設けましょう。この際、抽象的な表現は避け、できるだけ明確なルールにすることが大切です。

ルールを決めたら、実際の適用イメージを示すことも重要です。サイトのトップページのサンプルを作成したり、バナーや記事の文章例を用意したりするのです。抽象的なルールでは伝わりにくいことも、実例があれば一目瞭然。具体的なイメージを共有することで、ルールの理解が深まるはずです。

また、トンマナを運用していくためのルール作りも欠かせません。例えば、「ガイドラインの改定は〇〇の承認を得ること」「ガイドライン違反が見つかった場合は〇〇に報告すること」など。ガイドラインを形骸化させないための仕組みづくりが求められます。

最後に、完成したガイドラインを社内で共有・浸透させることが何より大切です。サイト制作に関わるメンバー全員に配布し、読み合わせの機会を設けるのも良いでしょう。定期的に勉強会を開催するなど、継続的な取り組みも必要です。ガイドラインはつくって終わりではなく、活用して初めて意味を持つのだということを忘れてはいけません。

以上の5つのステップを踏まえることで、実効性の高いトンマナのガイドラインを作成することができるはずです。ただし、ガイドラインはあくまで「型」であって、現場の創意工夫を縛るものであってはいけません。

時代の変化に応じて柔軟に改定していく姿勢も大切だと言えるでしょう。

トンマナのガイドラインは、ブランドの価値を高める重要なツールです。サイト制作に関わる人が一丸となってガイドラインを作成・活用し、ユーザーに良質な体験を提供し続けること。それこそが、ホームページの優位性を生み出す原動力になるはずです。

トンマナの活用例

ここからは、トンマナを上手く活用している企業の事例をご紹介します。他社の成功例を参考にすることで、自社のトンマナ設計に役立てていただければと思います。

【関連記事】【最新版】自社のサイトづくりに役立つWebサイトランキングと参考にするポイント

事例1:パナソニック

https://panasonic.jp

日本を代表する総合エレクトロニクスメーカー、パナソニック。そのホームページは、2022年に発表された「幸せの、チカラに。」という新たなブランドスローガンを体現した、同社が何者であるかを分かりやすく伝える構成が特徴的です。

パナソニックのサイトは、黒を基調とした、シックでモダンなデザインが印象的。トップページには、最新の製品や技術を紹介するビジュアルが大きく配置され、イノベーティブな企業イメージを強く打ち出しています。また、グローバルナビゲーションが整理され、あらゆるユーザーが使いやすいUI設計になっているのも特徴です。

サイトのコンテンツは、家電や住宅設備などの製品情報だけでなく、同社の環境への取り組みや、社会貢献活動なども詳しく紹介されています。くらしの豊かさの維持向上と、地球・社会課題の解決。どちらも両立させるベストパートナーであることを掲げる同社の取り組みを、具体的に示すことで企業の社会的責任への真摯な姿勢を表明しているのです。

また、各ページの文章は、グローバル企業らしい洗練された英語表現が用いられているのが特徴です。専門用語には平易な説明が付され、世界中のユーザーに配慮するグローバルコミュニケーションの姿勢が感じられます。

パナソニックのサイトは、テクノロジーを通じて世界中の人々の暮らしを豊かにするという同社のブランドビジョンを見事に具現化していると評価できるでしょう。革新とサステナビリティ、グローバルとローカル。そのバランスの取れたメッセージを、一貫したトンマナで発信し続けているのです。

事例2: ニトリ

インテリア用品や家具の大手販売チェーン、ニトリ。そのホームページは、同社の「お、ねだん以上。」のキャッチフレーズを体現した、バリューフォーマネーを感じさせるデザインが特徴的です。

ニトリのサイトは、シンプルで見やすいレイアウトが印象的。白を基調とした背景に、商品の写真が大きく配置され、価格の安さと品質の高さを同時に訴求しています。各商品のページでは、材質や機能、サイズなどが詳しく説明され、購入する側の不安を一つ一つ丁寧に払拭する姿勢が感じられます。

また、コーディネート提案のコンテンツも充実している点にも注目しましょう。リビングやダイニング、寝室など、部屋ごとのトータルコーディネートを提案。手頃な価格で、おしゃれな部屋が実現できるというメッセージを、ビジュアルと文章の両面から訴求しているのです。

価格と品質のベストバランスを標榜してきた同社は、その価値観をホームページの随所で表現することに成功していると言えるでしょう。手頃な価格でも、快適で上質な暮らしが実現できる。そんな同社のブランドアイデンティティを、トンマナで見事に体現しているのです。

事例3: カルビー

お菓子とスナック菓子のトップメーカー、カルビー。そのホームページは、同社の「私たちは、自然の恵みを大切に活かし、おいしさと楽しさを創造して、人々の健やかなくらしに貢献します。」という企業理念を体現した、フレンドリーで楽しげな雰囲気を醸し出すデザインが特徴的です。

カルビーのサイトは、白を貴重にブランドカラーの赤色とあとはグレー系に絞ったシンプルな配色で、写真に目が行くように設計されています。トップページには、自然の力やさまざまな層の人々をモチーフにした動画が大きく配置され、製品づくりへのこだわりと顧客志向を訴求しています。

サイト内には、商品の開発秘話や製造工程の紹介など、ものづくりへのこだわりを伝えるコンテンツが豊富に用意されています。原材料の産地や、品質管理の取り組みなどを丁寧に説明することで、安心・安全なお菓子づくりへの真摯な姿勢を印象づけているのです。

また、文章表現は、読んでいて楽しくなるような親しみやすいトーンが特徴的。硬い専門用語は避け、ユーザーに寄り添うような柔らかな言い回しが用いられています。「じゃがいも丸ごとプロフィール」や「じゃがいもDiary」など、ポテトへの愛情と自信を感じさせるコンテンツも充実しています。

カルビーのサイトは、自然の恵みを活かし、お客様に美味しさと楽しさをお届けするという同社のブランドアイデンティティを、生き生きと表現していると言えるでしょう。フレンドリーでポジティブ、そしてこだわりを感じさせるトンマナは、他のお菓子メーカーが参考にすべき好事例と評価できます。

業種や業態は違っても、いずれの企業もブランドの世界観をホームページで表現することに成功していました。「シンプル」「伝統」「革新」など、各社のアイデンティティをトンマナという形で昇華させているのです。

こうした事例を参考に、自社のコンセプトに合ったトンマナ設計を目指していただければと思います。「自社らしさ」とは何か、「ユーザーに伝えたい価値」とは何か。そんな本質的な問いに向き合うことから、トンマナ作りはスタートするのです。

トンマナ違反の事例とその影響

上記のような優良事例がある一方で、トンマナがうまく機能していないケースも見受けられます。ここでは、トンマナ違反の事例とその影響について考えてみましょう。トンマナ違反の代表的な例としては、以下のようなものが挙げられます。

・サイト内でデザインに統一感がない
・ページごとに文体が異なる
・会社概要や商品説明に不適切な表現がある
・ユーザーに不快感を与える広告が掲載されている

例えば、トップページはシンプルなデザインなのに、商品ページは過剰に装飾されている。あるいは、あるページでは硬い言い回しなのに、別のページではくだけた口調になっている。こうしたトンマナの不統一は、サイトの信頼性を大きく損ねる恐れがあります。

また、「トップクラス」「トップシェア」「グローバル」といった強みを訴求するフレーズの多用は、自信と自慢を取り違えられる可能性があり、「今すぐ買わないと損です！」といった煽るような文句も、ユーザーの不信感を招きかねません。もちろん、法的に問題のある表現や、公序良俗に反するような内容も論外です。

こうしたトンマナ違反は、以下のような悪影響を及ぼします。

・ブランドイメージの低下
・ユーザーの離脱率上昇
・売上やコンバージョン率の低下
・社会的信用の失墜

トンマナが守られていないサイトを見たユーザーは、「このブランドは信用できない」「二度とこのサイトは訪れない」と感じるかもしれません。その結果、せっかくの集客も台無しになってしまうのです。さらにトンマナ違反が著しい場合、炎上のリスクすらあります。ソーシャルメディア上で批判が殺到し、ブランドの社会的信用が地に落ちてしまう可能性も考えられるのです。

こうした悲惨な事態を避けるためにも、トンマナのルール順守は徹底したいものです。サイト内の隅々まで目を配り、ブランドにふさわしくない表現がないかチェックすることが大切だと言えるでしょう。

ただし、ルールを守ることが目的化してしまうのは本末転倒です。あくまで、ユーザーに良質な体験を提供するための手段として、トンマナ遵守を位置づけることが肝要です。ユーザー目線を忘れない柔軟な対応こそが、ブランドの価値を高める近道になるはずです。

トンマナ違反は、ブランドの毒にも薬にもなり得る諸刃の剣だと言えます。「守るべきことは守りつつ、時に型を破る勇気も持つ」という、メリハリの効いたトンマナ運用を、心がけたいものですね。

トンマナを実践するコツ

トンマナのガイドラインを設定したら、次はそれを確実に実践していくことが求められます。とはいえ、トンマナ運用を習慣化するのは容易なことではありません。ここでは、トンマナを組織に根付かせるための3つのコツをお伝えします。せっかく設定したルールを形骸化させないにも、ぜひ取り組んでみてください。

定期的なチェックと修正

まず、トンマナの定着には継続的なモニタリングが欠かせません。サイトの更新状況を定期的にチェックし、トンマナ逸脱がないかを確認する習慣をつけましょう。具体的には、以下のような項目をチェックすることをおすすめします。

・デザインに不統一がないか
・文章表現に乱れがないか
・画像の使い方はルールに則っているか
・新コンテンツはトンマナと整合しているか

これらのチェックは、月に1回程度の頻度で行うのが理想的でしょう。問題点が見つかった場合は、速やかに修正を施すことが大切です。

ただし、形式的なチェックに終始してしまうのは賢明ではありません。時代の移り変わりとともに、ユーザーのニーズや嗜好も変化するもの。「このルールは本当に今でも有効なのか？」を常に問い直し、必要に応じてガイドラインを改定することも重要です。

また、チェックする側の感覚が鈍らないよう、注意も必要です。「この表現は、ユーザー目線で見てどう感じるだろうか？」という生活者の感覚を忘れず、フレッシュな目線を持ち続けることが求められます。

社内で定期的にトンマナの勉強会を開催したり、外部の意見を取り入れたりするのも効果的でしょう。柔軟にアンテナを張り、トンマナのブラッシュアップを続けていく。そんな前向きな姿勢こそが、ブランドの成長力を左右すると言えるでしょう。

社内での共有と教育

次に、トンマナの社内浸透を図るための施策も欠かせません。経営層からコンテンツ制作者まで、組織の隅々にまでトンマナへの理解を広めることが重要なのです。そのためにまず必要なのが、トップのコミットメントです。経営者自らがトンマナの重要性を説き、率先して行動を見せることが求められます。トップの本気度が社員に伝われば、全社的な機運も高まるはずです。

また、トンマナに特化した部署を設置するのも一案です。専任の担当者を置くことで、トンマナ浸透の取り組みに持続性が生まれます。各部門と連携を取りながら、トンマナ教育やモニタリングを率先して行うのです。

とはいえ、「トンマナ推進部」だけが孤軍奮闘しても意味はありません。大切なのは、現場の隅々にまで「トンマナ意識」を行き渡らせること。日々コンテンツ制作に携わる社員こそ、トンマナ実践の主役だからです。例えば、以下のような施策が考えられます。

・入社時や昇格時の研修にトンマナ教育を組み込む
・制作の各工程でトンマナのチェック項目を設ける
・優れたトンマナ実践者を表彰する
・トンマナに関する提案制度を設ける

こうした地道な取り組みの積み重ねが、組織のトンマナ力を底上げしていくのです。ただし、トンマナはあくまで「手段」であって「目的」ではありません。ユーザー満足の追求こそが、私たちに課せられた本来のミッション。その先にある「大義」を見失わないためにも、トンマナへの過剰な執着は禁物だと心得ておきましょう。

ユーザーフィードバックの活用

最後に、ユーザーの声に耳を澄ませることも忘れてはなりません。サイトを利用する生活者の肌感覚こそ、トンマナ改善の原動力になるからです。例えば、以下のような施策でユーザーの声を集めることができるでしょう。

・サイト内にフィードバックフォームを設置する
・ユーザーアンケートを定期的に実施する
・SNSでの口コミをモニタリングする
・ユーザビリティテストを行う

集めた声を分析することで、トンマナ上の問題点や改善案が見えてくるはずです。もし「この文章はわかりづらい」「このデザインは古臭い」といった指摘があれば、ガイドラインの見直しを検討するべきサインかもしれません。もちろん、ユーザーの声をそのまま鵜呑みにするのは危険です。1人1人の感想は、あくまで「サンプル」でしかないからです。大切なのは、フィードバック全体から普遍的なインサイトを読み取ること。「このサイトに何が求められているのか」を考え抜くことが肝要だと言えます。

また、ユーザーの声に真摯に耳を傾けることで、「あなたの声を聞いています」というメッセージを伝えることもできます。顧客とのエンゲージメントを高めることは、ひいてはブランドへの愛着や忠誠心を育むことにつながるのです。ユーザーとの対話を重ね、信頼を積み上げていく。ブランドとファンとの固い絆こそが、トンマナ実践の究極の目的と言えるのかもしれません。

トンマナ実践の道のりは平坦ではありません。ときに失敗や挫折を味わうこともあるでしょう。それでも、ユーザーの心に響くコミュニケーションを求め続けること。トンマナという羅針盤を手に、歩みを止めない覚悟が問われているのです。ブランドの個性を言葉とデザインで表現し、ユーザーの共感を呼ぶ。その先に、御社のサイトの明るい未来が待っているはずです。

まとめ

ホームページ制作において、トンマナは欠かせない要素であることがおわかりいただけたと思います。適切なトーンとマナーを設定し、ブランドの世界観を言葉とビジュアルで表現すること。それこそが、ユーザーの共感と信頼を勝ち取る秘訣なのです。

最後にトンマナ設計のポイントとして、5つご紹介します。

・ブランドの価値観やビジョンを言語化する
・ターゲットユーザーのペルソナを明確にする
・競合サイトを分析し、自社の差別化ポイントを見出す
・デザインとコンテンツの要素を細かくルール化する
・ユーザー目線に立ち、使い勝手や読みやすさを優先する

そして、トンマナを組織の隅々まで浸透させるためには、以下の3つの実践が欠かせません。

・定期的なチェックと改善で、ブレないトンマナを維持する
・経営層主導の社内教育で、トンマナ意識を根付かせる
・ユーザーの声に耳を傾け、サイトの価値を磨き上げる

トンマナ設計は、企業の個性をどう表現するかという、クリエイティブな挑戦でもあります。ときに既成の枠を飛び越え、新たな表現を生み出す勇気も必要とされるでしょう。ユーザーの感性を揺さぶる斬新なアプローチを探求し続けること。それこそが、時代を切り拓くホームページ制作の真髄だと言えます。

お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

ギャラリーサイトもご活用ください。

メガホンではWEBデザインギャラリー・参考サイト集「me ki ki ki」を運営しております。
提案資料の参考に、参考イメージの共有にぜひお使いください。
サイトはこちら