あるアプリに対してはポップで明るいイメージを、別のアプリに対しては落ち着いたクールなイメージを持っていることはよくあります。 たとえば、同じSNSアプリでもX（旧Twitter）とInstagramでは印象が大きく異なるでしょう。この違いを生み出す要因の一つとなっているのが、UIデザインのトンマナ（トーン＆マナー）です。
この記事では、アプリのUIにおけるトンマナの重要性や設計時のポイントについて解説します。
トンマナとは
トンマナとは、「トーン（音や色などの調子）＆マナー（振る舞いや姿勢）」を略した言葉で、表現の一貫性を保つための方針やルールを指します。広告やWeb、印刷物、プロダクトなど幅広い対象に使われ、ブランドやサービスがユーザーに与える印象や信頼感を統一する手段となります。
たとえば、ある企業が「信頼感・誠実さ」を重視している場合、「落ち着いた色合いや丁重な言葉遣い」をトンマナとして定義することで、ユーザーとのすべての接点でそのイメージを実現できます。
つまり、トンマナとはビジュアルや言葉、動きのルールであり、「らしさ」「一貫した世界観」を作り出すためのガイドラインなのです。
Webデザインのトンマナについては、こちらの記事で詳しく解説しています。
＞ トンマナとは？ Webサイト制作で取り入れたい設計のコツとポイント
UIデザインにおけるトンマナは、Webデザインの場合よりもさらにインタラクションやユーザビリティまで踏み込んで考える必要があります。
UIデザインにおけるトンマナの重要性
UIデザインにおけるトンマナは、見た目を整えるだけではなく、プロダクト自体の価値を補強する効果を持ちます。一貫したブランドの世界観をユーザーに伝え、期待される体験とのズレをなくし、チーム全体で品質を担保していくための重要な基盤となります。
ここでは、UIデザインにおいてトンマナを統一することで得られる代表的なメリットを3つ紹介します。
1. ブランドイメージの一貫性
トンマナが統一されているUIだと、プロダクトやブランドの世界観がより明確にユーザーへ伝わります。たとえば、Notionのようなミニマルで静かなインターフェースは、「シンプルで洗練されている」というブランドイメージに直結しています。
一方、CRISP SALAD WORKSのように鮮やかな色や軽やかな動き、遊び心のあるライティングを取り入れたUIは、「明るくフレッシュ」というブランドのイメージを印象付けます。
こうした印象の統一がされていないと、ユーザーはそのプロダクトに対するイメージを持ちづらくなり、結果的にブランドへの愛着や親近感が薄れてしまいます。
2. 期待されるユーザー体験との一致
サービスの目的や領域によって、ユーザーが求める体験には違いがあります。たとえば、金融サービスのように「信頼性」や「堅実さ」が価値となる領域では、落ち着いた配色や緩やかなアニメーション、丁寧な表現が期待されます。一方、SNSやエンタメ系のサービスでは、親しみやすさや楽しさが求められるため、軽快な動きやフレンドリーな言葉遣いが適しています。
もしこのトンマナが逆だったらどうでしょうか。金融サービスのプロダクトでカジュアルな言葉が使われていたら不安になるかもしれません。また、SNSやエンタメ系のサービスのプロダクトがあまりにも落ち着いた配色だと、地味でつまらなそうといった印象を与えてしまう可能性があります。
トンマナは、サービスを通じてユーザーが得られる体験や価値を補強する役割も持っているのです。
3. デザインプロセスの効率化と品質担保
ユーザーに伝わる印象だけでなく、制作側の観点でもトンマナを定義することには大きなメリットがあります。
トンマナが明確に定義されていると、チーム内での共通認識が生まれ、新しい画面やコンポーネントを追加する際にも判断がブレにくくなります。ガイドラインやコンポーネントライブラリが整備されていれば、属人性を減らしつつ一定の品質を保ったままスピーディに制作を進めることができます。
また、レビュー時の指摘や修正の工数も減らせるため、結果的に開発全体の効率も向上します。トンマナは、ブランド表現だけでなく、チームで作るプロダクトにおける「設計の土台」としても機能するのです。
UIにおけるトンマナの構成要素
ここからは、具体的にUIにおいてトンマナを構成する要素とそのあり方について紹介します。
ビジュアル要素【色・フォント・レイアウト・シェイプ（形）】
一般的に、トンマナを視覚的に表現するうえで、色やフォント、レイアウト、そしてシェイプ（形）といったデザインの基本要素が最も重要です。これらの要素を統一することで、ブランドの一貫した世界観を明確に伝えることができます。
UIの場合は、こうしたビジュアル要素とユーザビリティを両立させる必要があります。
たとえば、ブランドカラーが黄色やオレンジの企業・サービスについて考えてみましょう。
ボタンやリンクの色にはブランドカラーを取り入れたいところですが、黄色やオレンジの要素（特に文字）は他の色と比べて視認性が低いという特性があります。
視認性を保ちながら一貫したカラーのイメージを伝えるために、ボタンの優先度をどのように表現するかに注意して設計できると良いでしょう。
アニメーション・トランジション
動きもトンマナを構成する重要な要素です。単なる演出ではなく、ブランドの性格や空気感を表現する手段として活用されます。
たとえば、処理中などの場面でローディングアニメーションを表示する場合、ポップで親しみやすいブランドであれば、弾むような動きや変則的な表示（イラストをインジケーターとして使うなど）を取り入れることで、サービス全体を印象的なものにすることができます。
逆に、信頼感を大切にするサービスでは、直線的なインジケーターで動きもシンプルにすることで、落ち着いた世界観を演出できます。
ライティング
トンマナにおいて、ライティング（言葉遣い）もブランドの印象を大きく左右する要素です。
たとえば、同じ操作完了のフィードバックでも、「やったね！」という表現と「お取引が完了しました」という表現では、受け取る印象が全く異なります。UIに登場する文言はブランドの語り口であり、そのトーンを統一することでプロダクトのキャラクターが際立ち、信頼や愛着に繋がる体験が生まれます。
UIデザインのトンマナを設計する方法
Webデザインなど、一般的なトンマナ設計の方法をUIデザインの場合にも活用できます。ぜひ以下の記事を参考にしてみてください。
＞ トンマナとは？ Webサイト制作で取り入れたい設計のコツとポイント
また、「ブランドアーキタイプ※」と呼ばれる手法を使ってUIデザインのトンマナを策定する手順についても当社のnote記事でまとめています。
※ブランドアーキタイプとは、ユング心理学に基づく12の人格モデルをブランドに当てはめることで、個性や方向性を明確にし、ユーザーとのつながりや競争力を高める手法です。
＞ プロダクトの世界観を統一する！「ブランドアーキタイプ」をUIデザインに活用する方法
補足：トンマナとUIデザインのトレンド
UIデザインにおけるトンマナのあり方は、技術の進化とともに変化し続けるものです。近年では、ダークモードの普及やHaptics（触覚フィードバック）、すりガラス効果の導入など、トンマナの表現方法が拡張されてきています。今後、新たな技術が登場することにより、トンマナの構成要素やバリエーションはさらに多様化していくでしょう。
トレンドに合わせてモダンなデザイン表現を取り入れることで先進的な印象を与えられますが、それに伴うアップデートも必要になります。特に、コンポーネント単位のデザインは、フレームワークやデバイスの進化に合わせて変化するため、個々の要素に固執するのではなく、ブランド全体の世界観やイメージを確立することが重要になります。
そのためには、トンマナの設計を超えた上位概念としてデザイン原則を策定するのも一つの方法です。トンマナが主にビジュアルや言葉のトーンを定義するのに対し、デザイン原則は「なぜそのデザインを採用するのか」という根本的な思想を明文化するものです。トンマナが変化しても、デザイン原則が確立されていれば、一貫した体験を提供し続けることができます。
デザイン原則に関してはこちらの記事で詳しく解説しています。
＞ デザインシステムにおけるデザイン原則とは？意味と役割、策定プロセスを解説 |
まとめ
UIデザインにおける「トンマナ（トーン＆マナー）」は、ブランドの印象を一貫して伝えるための重要なガイドラインです。色やフォント、アニメーション、言葉遣いを統一することで、ユーザーに提供する価値を補強できるほか、デザインの品質も向上します。
ぜひ、「このプロダクトはどんなトンマナに基づいているか？」を考えながら身の回りのUIを触ってみてください。
アイスリーデザインではロジカルで納得感のある設計を意識し、モバイルアプリ、SaaSプロダクト、業務システムやECサイトなど幅広いプロダクトのUI/UXデザインを提供しています。
【PR】i3DESIGNから書籍が出版されました！
業務システムのUIデザインにおける実践知が詰まった本です。
