はじめに
本記事では、UI・UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。
わたし「トンマナって言葉、何かデザインについて調べてるとよく見るけど、何なんだろ？」
わたし「(たぶん常識なんだろうなあ……)」
トンマナとは
トーンアンドマナー、略して「トンマナ」です。
デザインの色やスタイル、文言などの一貫性を保つルールのことを指します。
トーン(tone)が「調子」、デザインの色や雰囲気などのことです。
マナー(manner)が「様式」、デザインの表現方法やスタイルのことです。
トンマナを合わせるメリット
まずは、そのアプリやサービスのイメージをユーザーに強く印象付けられることです。
アプリやサービスのデザインを作るとき、そのアプリやサービスがユーザーに与えたいイメージ・印象が存在すると思います。それはテーマカラーであったり、「モダン」「クラシック」などのテイストであったりするのかもしれません。
身近なサービス(例えば、今まさにあなたが読んでいるQiitaとか)を思い浮かべてみても、色やフォント、サイトの雰囲気などは統一されています。
トンマナがそろっている場合はユーザーがそのアプリやサービスのUI/UXに触れるとき、統一されたデザインであればそのデザインを何度も目にすることになります。人間の特性として何度も見るものは記憶に残りやすいため、ユーザーにアプリやサービスの世界観を強く印象付けることができます。
そして、そもそも統一されたデザインは美しいです。美しいデザインは、それだけでユーザーは対象のUI/UXを良いものと感じる傾向にあります(美的ユーザビリティ効果)。
逆にトンマナがそろっていないてんでばらばらなデザインでは、ユーザーにイメージを印象付けることはできません。そしてそれはユーザーの離反にもつながりかねないのです。
だって印象がないのですから。
また、事前に決めておいたトンマナに合わせてデザインをすることで、デザインのクオリティを担保することもできます。
色はこの色、フォントはこれ、ここの余白は何px、と決まっていれば、そのルールを守ってデザインを作成することでデザインの一貫性が保たれます。
これはデザインに携わるメンバーが複数いる場合にも有効です。メンバー間でトンマナの認識を合わせておくことで一貫されたデザインを効率よく制作することができます。
さいごに
トンマナを合わせる、個人的には今まさに苦労しているところです。
デザインを依頼されたとき、ただ良い感じのデザインをすればよいのではなく、デザインをする対象や依頼元のイメージをきちんと掴んでそれに合ったデザインをしなければ、製品のイメージに合わなかったり、ひどい場合にはイメージを損ねてしまうことがあります。
しかし、デザインをする対象や依頼元のイメージを掴むには、デザインをする側の対象への調査やベンチマーク、関係者へのヒアリングを通してきちんと理解しなければなりません。
難しいことですが、UI/UXデザインを志すうえでは避けて通れないと常々思います。