10秒でわかる！要点まとめ

  • 「かっこいい」「かわいい」の定義は人によって違う。そのズレを埋める共通言語
  • ここが決まっていないと、デザインチェックが「クライアントの好き嫌い」大会になる
  • 色やフォントだけでなく、文章の語尾（です・ます）や写真の空気感まで規定する

1. 概要：Webサイトの「人格」と「世界観」を決める

トーン＆マナー定義（トンマナ）とは、Webサイトやコンテンツが醸し出す「雰囲気」「口調」「世界観」のルールを策定する業務です。

具体的には、デザイン面での「メインカラー（配色）」「フォント（書体）」「余白の取り方」「写真のテイスト」といった視覚的ルールと、ライティング面での「文体（硬めか、親しみやすいか）」「表記揺れの統一（子供 or 子ども）」といった言語的ルールの両方を指します。サイト全体を通して、ユーザーにどのような印象（ブランドイメージ）を与えたいかを言語化・視覚化し、制作チーム全員が遵守すべき「憲法」を作ります。

2. なぜ重要なのか：バラバラなデザインは信頼を損なう

ページごとに色が違ったり、トップページは高級感があるのに下層ページはポップだったりすると、ユーザーは違和感を覚え、そのブランドに対して不信感を抱きます。トンマナの統一は、ブランドへの信頼（トラスト）を醸成するための最低条件です。

また、制作進行上も極めて重要です。トンマナの合意がないままデザイン提出をすると、クライアントから「なんか違う」「もっとシュッとさせて」といった感覚的な修正指示が無限に続き、プロジェクトが迷走します。事前に「今回は“信頼感”を重視して“青”を基調にする」と握っておくことで、デザインの判断基準が明確になります。

3. 実務のポイント：形容詞を「ムードボード」で可視化する

実務では、言葉の認識ズレを防ぐために、視覚的な資料を用います。

  • キーワードの言語化：「誠実な」「先進的な」「親しみやすい」など、目指すイメージを表す形容詞を抽出します。
  • ポジショニングマップ：「Warm ⇔ Cool」「Casual ⇔ Formal」といった軸の上に、競合他社と自社の立ち位置をマッピングし、差別化ポイントを探ります。
  • ムードボード作成：具体的なデザインに入る前に、イメージに近い写真や他社サイトのキャプチャを集めたコラージュ（ムードボード）を作成します。「“スタイリッシュ”とはこういうことです」とビジュアルで見せることで、クライアントとの認識を初期段階ですり合わせます。

4. スキルアップのヒント：Pinterestで「引き出し」を増やす

トンマナの提案力を高めるには、Pinterestなどの画像収集ツールが最強の味方です。「高級感　Webデザイン」「オーガニック　Webデザイン」などで検索し、それぞれのキーワードがどのような色使いやフォントで表現されているか、共通項（パターン）を分析してください。

また、非デザイナーであっても「色彩心理（青は信頼、オレンジは元気など）」や「フォントの性格（明朝体は繊細、ゴシック体は力強い）」の基礎知識を学ぶことで、説得力のあるデザイン説明ができるようになります。