Web担だからこそ知りたい！Web業界用語
～トンマナ編～

Webサイトのデザインで感じる印象・雰囲気のモト：トンマナとは？

Webサイトのデザインを見て受ける印象・雰囲気と言っても、「これとこれ似ているな～」と共通点を感じたり、「すごいシンプルだなぁ」と思ったり、時には「暑苦しいなぁ」といった様に色々感じ取るものがあります。
そんな印象は、主にWebサイトにおける「トーン&マナー」と呼ばれるものによって醸し出されています。

言い換えると、
“ターゲットユーザーやWebサイトの役割に合わせた色やフォントなどのデザイン”で印象や雰囲気を操作するという事です。

トンマナは「トーン＆マナー」の略で、Web業界専門用語というより、デザインの世界からやってきた言葉のようです。

Webサイトが作られる時にもアートディレクターがこのトンマナを決定することが多く、以下のような工程で作り出されています。

ブランドイメージや製品・商品情報とターゲット像をもとに伝えたいイメージを決め、それをもとにデザインに落とし込まれることで、私たちが普段Webサイトから感じる印象・雰囲気は構成されています。この結果出来上がったデザインを定義したものがトンマナと呼ばれます。

トンマナって結局何のため？どうやって使われてるの？

トンマナには大きくわけて２つの役割があります。

1．デザインが個人の主観で作られるのを防ぎ、目的やゴールに沿った形にする

2．関係者間での認識を共通化する

前章での画像からもわかるようにトンマナはWebサイトのデザインを定義したものですが、これがしっかり守られないと、個人の感情やセンス・意見がザクザクと入ってきてしまい、完成形へのイメージがばらばらになってしまうことがあります。

そこで、トンマナを定義して守ることで、Web担、制作者などの関係者が一丸となり制作を進めることができ、Webサイトは本来の目的を果たすことができるのです。

また、実際にこの言葉がよく使われるのは、Webサイトにおいてページを追加したい時。

「ここのトンマナに合わせて、新規ページも作りましょう」

なんて使われ方をされたりしますが、この文をトンマナが何か少しわかった上で解釈すると、

「ターゲットユーザーやWebサイトの役割から導かれたデザインのモトとなる色やフォントに合わせて新規ページを作りましょう」

ということになります。

まとめ

最後になりますが、この記事を通して以下２点、少しでも感じ取っていただけたでしょうか？

• トンマナがブランドイメージや製品情報などの伝えたい内容をもとにターゲットを意識して作られてることで、Webサイトそのものがコンセプトやデザインにおいて一貫性のあるものになるということ

• トンマナはWebサイトを制作していくうえで、関係者が完成形に対し持つ頭の中の「見えないイメージ」を共通にすることができるということ

少し話はそれますが、トンマナを何かWebサイト以外のものに例えたりすると、Webサイトのイメージを人に伝えるときにかなり役立つとデザイナーはよく言われるそうです。

前回の記事でこちらのアニュアルレポートを「ライムが添えられたモヒート」と例えましたが、「そういった表現が分かりやすい」とデザイナーさんに褒められちゃいました！

デザイナーに限らす、このトンマナを他のものに例えてみる！というのは他人に自分が描いているイメージを伝えるときにすごく伝えやすくなる方法でもあります。

伝えたいイメージを人に伝えれずモゾモゾすることが多い！という人はぜひ、活用してみてください。

この記事を通して、伝えたいイメージを伝えやすくなったり、実際に制作の人がどのようにWebサイトを作ってゆくのか少しでもわかった！と感じていただければ幸いです。