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

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

トンマナとは？

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

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

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

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

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

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

製品やサービスを展開していく過程で、チームで共同作業をしたりする中で再現性の問題が起こることが多々あります。トンマナを設定することで、イメージの共有ができデザインの再現性が向上します。 また、クライアントワークにおいて制作の前段階で、初めにイメージを明確化することで、クライアントとのイメージの共有が図れ想定していたものと違うなどのトラブルを避けることが可能です。 また、EO対策としてライティングのトンマナを統一することも挙げられます。ライティングルールなどを設けることで品質が一定になり効率的なSEO対策が可能になります。

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

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

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

1：イメージの明確化

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

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

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

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

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

4：トンマナ設定

何を、誰に、何のために、が決まったところで、どの様に伝えるのかの部分にあたる、トンマナの設定とマニュアル作成を行います。 どうしたらより良く伝えることができるのかを考えながら作成します。   先程の例えで考えると、キーワードを決めた段階でそれを膨らませるために、アーキテクトに落とし込んだりムードボードを作成することで、世界観の方向性を可視化し、自身だけでなく関係者との認識合わせに役立ちます。 デザインボードについては、以前まとめた記事の中で触れていますのでそちらをご覧ください。

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

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

①配色

 

②フォント

 

③素材

 

④余白

 

⑤画像

 

⑥インタラクション

 

⑦テキスト

 

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

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