デザイン用語としてよく耳にする「トンマナ」という言葉。
元々は広告や出版業界の用語でしたが、今ではWebサイトやWebシステム等のデザインでも一般的になりました。Web系のデザインを依頼する際には必ずと言っていいほど出てくる言葉なので覚えておくと便利でしょう。今回はトンマナの意味やメリット、トンマナで設定すべき項目についてご紹介します。
トンマナは「トーン＆マナー」を略した言葉で、トーンは「調子」、マナーは「様式」という意味を持ちます。デザインやスタイルに一貫性を持たせるルールのようなものです。実際、印象に残るWebサイトには意図的にトンマナの設計がされています。
デザイナーはルールなしにデザインをしているわけではありません。事前にデザイン全体のルールを作ることで一貫性のある、より洗練されたコンテンツを作りだしているのです。
また、昨今ではデザインの一貫性のみならず、企業ブランディングにおいても重要視されているように様々な場面でトンマナ意識した制作が求められています。 まずはトンマナを適用するメリットについて見ていきましょう。
一見トンマナを作ることでその分の時間がかかるようですが、一度トンマナを確立してしまえば、その後はルールに則ってデザインをすればよくなるので、時間も負担も大幅にカットできるというメリットがあります。また、トンマナを作成しお客様にも雰囲気を事前に確認してもらうことで、やり直しや修正の手間を省くことができるためコスト削減にもつながります。
先ほどお話ししたように、トンマナは企業ブランディングにも大きく役立ちます。例えば「マクドナルド」や「無印良品」などの有名ブランドは名前を聞いただけで色やフォント、雰囲気を思い浮かべることができるでしょう。無印良品ではロゴ、店舗の内装、商品のタグやパッケージ、Webサイト、アプリ等、関連するものにはトンマナが適用されています。それらしいパッケージを見たときに「無印良品っぽい」なんて思ったことはありませんか？これこそがトンマナの効果といえます。
トンマナを整えることでUIUXの向上が期待できます。UI面ではフォントサイズ、レイアウト、配色などを統一させることでユーザーの理解を助け、操作性の向上に役立ちます。また、UX面では、例えばサイト全体の雰囲気と画像の彩度を合わせれば「センスが良い」と感じてもらえるほか、ECサイトにおいて使いやすい印象を与えれば「使い勝手が良かったからまたここで買い物しよう！」という風に、ユーザーに対してより良い体験を与えることができます。
色はトンマナにおいて最も重要といっても過言ではありません。色は沢山使えばよいというものではなく、バランスの取れたデザインにするには基本の3色を決めておくべきです。1色目はベースカラーというものでデザイン全体の約7割を占める色になります。そのため、主張の強い色味よりも白や明るいグレーなどを使うと良いでしょう。2色目はメインカラーです。デザインのテーマとなる色を選びましょう。3色目はアクセントカラーです。アクセントを加えたい箇所に少しだけ使う色になるため、メインカラーの反対色、いわゆる補色と呼ばれる色を使うのがおすすめです。
フォントも全体の印象を左右する要素の一つです。基本的なフォントには邦文だとゴシック体や明朝体、欧文になるとセリフ体やサンセリフ体などがあります。それぞれ一目で違いが明らかで、全体の印象も変わってきます。さらに、大きさや太さなどもあらかじめ設定しておくことで、可読性のあるコンテンツに仕上げることが可能です。
余白にルールを決めておくことで見やすさやまとまりが生まれ、より洗練された印象になります。余白がバラバラだとまとまりが意識しづらく、操作性を損ねてしまう恐れがあります。ユーザーの理解を助けるためにもルールに則って余白を設定することを意識しましょう。ちなみに、余白が小さければインパクトが出て元気な印象になり、余白が大きいと落ち着いた印象を与えることができます。
せっかくページ全体の雰囲気を合わせても画像だけ雰囲気が異なっていたら違和感があります。補正次第でイメージを変えることは可能なのでトンマナに合わせて調整しましょう。例えば、コントラストや彩度を上げれば鮮やかでパキッとした印象になり、コントラスと彩度を下げれば柔らかくふんわりした印象を与えることができます。また、画像だけでなくイラストなどもトンマナにあった色味や雰囲気を意識すると良いでしょう。
トンマナがあることで操作の迷いをなくし、スムーズな目標達成につながります。特にWebシステムのデザインであれば、UIUXの向上が期待でき、最終的には効率化や生産性の向上も望めます。
エイ・エヌ・エスでは、UIUXの観点から人間中心設計にてわかりやすく操作性の良い業務システムの構築を行っています。システムやデザインのお悩みはぜひお気軽にご相談ください。
☆YouTubeはじめました☆
基幹システムをはじめとするIT関連情報を発信するチャンネルです。
チャンネル登録はこちらから⇓
https://www.youtube.com/channel/UC41Fu8lCawwGuNDXWy3PhSQ?sub_confirmation=1
・あわせて読みたい
ターゲットを意識したデザインを！
ユーザーをだます？UXのダークパターンとは
・IT-Trustコラム（オーダーメイドのシステム導入で企業のDX推進を支援）
https://www.ans-net.co.jp/column/
・勤怠trustコラム（カスタマイズ可能な勤怠管理システムを構築）
https://www.kintai-trust.com/column/
