Webサイト制作に必要な、デザインのトンマナ設定の方法・メリットを詳しく解説

Webサイト制作にとどまらずデザインが関わる制作現場では、トンマナという言葉をよく使います。
具体的に説明できないまま、雰囲気で何となく使ってしまう事が無いよう、今回はトンマナの意味から具体的な設定の方法まで、詳しくまとめていきます。

トンマナとは?

トンマナとは、トーン&マナー(tone & manner)を略した言い方です。
トーン(tone)とは、日本語では調子のことで、一般的にデザインにおいて色の明度と彩度を基準とした色調のことを指します。
マナー(manner)とは、やり方や様式、作風などといった意味があります。
つまり、デザインにおけるトンマナとは、一貫性や統一性を担保するためのルールのことを指します。
トンマナに則ってデザインをすることで、デザインした以外の誰かが制作したコンテンツでも、製品やサービスらしさが一目で分かるということが可能です。

トンマナ設定の重要性とメリット

次に、トンマナ設定の重要性とメリットについて考えていきます。
取り扱う製品やサービスによって違いはありますが、トンマナ設定の効果として下記のようなことがあります。

■トンマナ設定の効果

  • ブランディング、世界観の印象付け
  • 製品、サービスの認知
  • 良質なコンテンツ制作、品質が安定
  • 共同作業の効率化
  • UI/UX向上
  • SEO対策の共有

 

①視覚的に、伝えたい事を伝えやすくする

製品やサービスをユーザーに知ってもらう視覚的なPRの中で、トンマナを揃えることで、瞬時に同じ製品やサービスだと認知することが可能になります。
自社やサービスの背景や世界を表現したトンマナにすることで安心感が生まれユーザー体験の向上に繋がります。
また、見やすい分かりやすいなど使いやすさを意識したトンマナ設定でUIの質を高めることが可能です。

②コンテンツの質を一定に保つ

製品やサービスを展開していく過程で、チームで共同作業をしたりする中で再現性の問題が起こることが多々あります。トンマナを設定することで、イメージの共有ができデザインの再現性が向上します。

また、クライアントワークにおいて制作の前段階で、初めにイメージを明確化することで、クライアントとのイメージの共有が図れ想定していたものと違うなどのトラブルを避けることが可能です。

また、EO対策としてライティングのトンマナを統一することも挙げられます。ライティングルールなどを設けることで品質が一定になり効率的なSEO対策が可能になります。

トンマナを設定し、統一感のあるWebサイトを作る方法

トンマナを決める際には、下記の様な流れになります。

  1. イメージの明確化
  2. ペルソナ・ターゲット設定
  3. 目的の設定 ・競合調査
  4. トンマナ設定・マニュアル作成

 

何を、誰に、何のために、どの様に伝えたいかを決める

1:イメージの明確化

まず初めに、製品やサービスについてユーザーに届けたいコンセプトイメージを明確化します。

【具体例🥤】
リサイクル素材を使用した製品を展開するために、ユーザーに向けて環境にやさしい、サスティナブルなイメージを打ち出したいなどコンセプトを考える。

 

2:ペルソナ・ターゲット設定

次に明確化したイメージを届ける相手を探します。
市場調査や営業などの現場からのデータなどを活用し、ターゲットを想定します。

【具体例🥤】
サスティナブルなイメージを発信する対象としてエシカル消費に関心の高い、年代や性別などの情報を調べる。2021年消費者庁のエシカル消費に関する意識調査では、リサイクルやリメイクしやすいかどうかを考慮する消費者の割合は低いが、10代・20代が相対的に高いという結果が出ている。*
*引用元:エシカル消費に関する意識調査 | 消費者庁

 

3:競合調査・目的の設定

ターゲットと発信したいコンセプトが決まったところで、競合調査を行います。
他社と比べることで、自社の強みや弱みを洗い出し、自社の立ち位置を確認します。コンセプト・ターゲット・自社の差別化ポイントを総合的に考えて、最後に目的を決めます。

【具体例🥤】
環境にやさしいサスティナブルな商品を10代〜20代の女性に向けて、自社の強みである安価で質の良い製品を提供できることをSNSで発信し製品の認知と企業イメージの向上を図るという目的を立てる。

 

競合調査の方法について以下の記事で詳しくまとめています。

4:トンマナ設定

何を、誰に、何のために、が決まったところで、どの様に伝えるのかの部分にあたる、トンマナの設定とマニュアル作成を行います。
どうしたらより良く伝えることができるのかを考えながら作成します。

【具体例🥤】
10代〜20代の若い女性に向けたWebサイトデザインのため、柔らかさやポップな明るいトーン、また環境にやさしいサスティナブルなイメージを発信したいので、自然や信頼感を感じるトーンにする。柔らかさ・ポップ・自然・信頼などのキーワードをフォントや配色といったデザインに落とし込みながらトンマナを設定していく。

 
先程の例えで考えると、キーワードを決めた段階でそれを膨らませるために、アーキテクトに落とし込んだりムードボードを作成することで、世界観の方向性を可視化し、自身だけでなく関係者との認識合わせに役立ちます。
デザインボードについては、以前まとめた記事の中で触れていますのでそちらをご覧ください。

トンマナ設定で具体的に決めること

製品やサービスによって違いはありますが、トンマナの設定で具体的に何を決めるのかを紹介します。

①配色

トンマナ設定①配色

  • メインカラー(コンテンツを印象付ける色)
  • ベースカラー(引き立たせるための色)
  • アクセントカラー(ポイントとして少量使う色)

 

②フォント

トンマナ設定②フォント

  • イメージに合ったフォント選び
  • フォントサイズ
  • 文字の太さ

 

③素材

トンマナ設定③素材

  • ロゴ
  • アイコン
  • ボタン

 

④余白

トンマナ設定④余白

  • 見やすさに配慮
  • 余白大きい=落ち着き、高級感
  • 余白小さい=活発に情報を発信する印象

 

⑤画像

トンマナ設定⑤画像

  • 写真の補正
  • イラストのテイスト

 

⑥インタラクション

トンマナ設定⑥インタラクション

  • コンテンツに合ったアニメーションの演出
  • 近年動画需要の高まりもあり重要視されている

 

⑦テキスト

トンマナ設定⑦テキスト

  • 表記の統一や使用禁止ワード
  • 差別や誇張などの表現
  • 固有名詞や商品名

 

トンマナ設定でコンテンツをより伝えやすく

商品やサービスの印象をより的確に伝えるために、トンマナの設定が重要になってくることが理解できたかと思います。
デザインの質の向上や安定性にも役立つので設計に時間をかけても、運用に使えるので効果は大きいものです。是非、今後のデザイン設計にお役立てください。

弊社では、トンマナ設計からWebサイト制作まで幅広くご相談を受けております。気になることがございましたらお気軽にご連絡ください。


参考:
トンマナの意味とは?トンマナを作成する方法や事例を分かりやすく解説 | 株式会社パンタグラフ | https://pantograph.co.jp/blog/uiux/tone-manner.html
ルールを決めてデザインする。Webサイト制作で取り入れたい「トンマナ」設計のコツとポイント | in-Pocket インポケット | https://www.i3design.jp/in-pocket/9341

デザインの鍵を握る【トンマナ】とは? ブランディングにおいても重要! – 熊本の印刷会社キャップ |CAP Co., Ltd. | https://capplus1.design/blog/tornmanner/

Webデザインで重要なトンマナの基本と5つのポイント – 共働き夫婦のウェブログ | https://soranoco.design/importance-of-tone-and-style-for-design/
トンマナとは?意味から設定方法まで徹底解説 | Infinity-Agent Lab | https://infinity-agent.co.jp/lab/tone-and-manner/
エシカル消費に関する意識調査 | 消費者庁 | https://www.caa.go.jp/policies/policy/consumer_education/public_awareness/ethical/investigation/

WORKS制作実績