「このデザイン、ちょっとトーンが違うんだよね」
そう言われて、困ったことはありませんか。
“トーン＆マナー”という言葉は、現場でよく使われます。
でも、その意味を具体的に説明しようとすると、意外と難しい。
デザインガイドラインやブランドブックに書かれていても、
実際の画面に落とし込むと「これで合ってる？」と迷う瞬間があるはずです。
今回は、僕がディレクションの中で感じてきた
「トーン＆マナーを“伝わる形”にするための考え方」を、
デザインの視点から整理してみたいと思います。
目次
トーン＆マナーは「温度」と「距離感」
まず、僕が定義しているトーン＆マナーは、
“温度”と“距離感”のデザインです。
たとえば、同じ「お問い合わせフォーム」でも、
あるブランドは「お気軽にどうぞ」と言い、
別のブランドは「ご不明点は下記よりご連絡ください」と書く。
どちらも正しい。でも、温度が違う。
“温度”とは、言葉ににじむ感情の強さ。
“距離感”とは、ブランドとユーザーの間にある“心の距離”。
その2つをどう設計するかが、トーン＆マナーの核だと思っています。
そして、それは文字だけでなく、色・余白・フォント・写真など、
デザインの要素すべてに宿ります。
「言葉で表す」より「目で感じる」を優先する
トーン＆マナーを共有するとき、
よく「言葉で定義しましょう」と言われます。
もちろん大切ですが、僕はまず“ビジュアルで感じてもらう”ようにしています。
たとえば、
- “温かい”ブランド → 柔らかい余白＋丸みのあるフォント＋自然光の写真
- “誠実”なブランド → 均一なグリッド＋落ち着いた配色＋整理されたUI
- “挑戦的”なブランド → 強めのコントラスト＋斜め構成＋動的なアニメーション
どれも一言で言えば「印象」ですが、
人は印象を“見る”ことで理解します。
僕がよくチームでやるのは、
トーン＆マナーを「言葉→写真→色→フォント」で翻訳してみるワーク。
つまり、“言葉のデザイン辞書”をつくるようなものです。
これをやると、抽象的な言葉がチーム共通の感覚に変わります。
「ルール」ではなく「方向性」を共有する
トーン＆マナーをガチガチのルールにしてしまうと、
現場ではむしろ動けなくなります。
大事なのは、「守るべきこと」と「遊べる余白」の境界を描くこと」。
たとえば、
●守るべき：配色比率、ロゴサイズ、文体ルール
●余白にしていい：写真トーンの幅、ボタン角丸、装飾の有無
トーン＆マナーは“言葉の調子”と同じで、
少し変化しても大きく印象を崩さなければOKなんです。
“温度が近ければOK”という考え方。
僕はいつも、「ぶれていい範囲を決める」ことを意識しています。
その方が、現場のクリエイターがのびのび動ける。
トーン＆マナーを“縛る”のではなく、“導く”ものにする。
これが、文化として根付くデザインルールのつくり方です。
「揃える」だけでは伝わらない
トーン＆マナーというと、
「フォントを揃える」「写真の明るさを統一する」など、
“均一性”にフォーカスされがちです。
でも、本当に伝わるトーンは、“揃える”だけでは生まれません。
たとえば、ブランドが「やさしさ」を軸にしているなら、
すべてをフラットにするよりも、
「人の気配があるゆらぎ」を残したほうが響くことがあります。
白の余白をほんの少し広くとる。
写真の明るさを100%ではなく、90%で止める。
ボタンの角を3pxではなく、4pxにする。
たったそれだけでも、空気が変わる。
トーン＆マナーとは、“誤差に込められた意思”なんです。
揃えることは前提。
でも、「どんな誤差を許容するか」もまた、トーン設計の一部だと思っています。
“文体”と“デザイン”をペアで考える
トーン＆マナーを整えるときに忘れがちなのが、
「言葉」と「デザイン」を別々に考えてしまうこと」です。
たとえば、UI文言がやさしい口調なのに、
デザインが硬いグレー基調だと、違和感が生まれます。
逆に、シンプルな文章でも、
フォントを少し丸くしただけで印象が変わる。
言葉とデザインは、同じ“声”を発しているんです。
だから僕は、トーンを決めるときに「声で読む」ようにしています。
画面を見ながら、実際に文言を声に出す。
その音の響きに、デザインのトーンが合っているかを確かめる。
トーン＆マナーとは、「ブランドの声の温度をデザインで可視化すること」。
その意識を持つだけで、UIはぐっと生きたものになります。
“トーンの揺れ”をチームで共有する
どんなに丁寧に設計しても、実際の制作現場ではトーンが揺れます。
特に複数のデザイナーやライターが関わる場合、
「なんとなく違う」と感じる違和感が生まれやすい。
そのときに大切なのは、揺れを正すことよりも、揺れを共有することです。
僕のチームでは、「トーンレビュー」をよく行います。
具体的には、画面キャプチャを並べて見比べながら、
「どっちがブランドらしいと思う？」
「この写真、ちょっとトーンが強すぎるかもね」
といった対話をします。
正解を決めるのではなく、“らしさ”の範囲を探る時間。
その会話が積み重なることで、チーム全体に共通の“感覚の辞書”が育ちます。
トーン＆マナーは「雰囲気」ではなく「信頼」
最後に。
トーン＆マナーというと、“雰囲気”のように捉えられがちですが、
実はそれはブランドへの信頼の設計でもあります。
ユーザーは、言葉やデザインの一貫性から
「このブランドは信頼できる」と感じる。
逆に、小さなトーンのズレが積み重なると、
「この会社、大丈夫かな」と不安になる。
トーン＆マナーは、目立たないけれど、
ブランドを支える“静かな骨格”のようなものです。
言葉とデザイン、その両方が同じ温度で息をしている。
その状態こそが、“伝わるブランド”の条件だと思います。
トーン＆マナーをデザインで伝えるというのは、
「正解をつくる」ことではありません。
それは、「らしさの余白を育てる」仕事です。
ブランドの声を聴き、温度を感じ、
それを視覚に翻訳していく。
その過程の中に、ディレクターやデザイナーが介在する意味があります。
トーンは、ルールで決まるものではなく、
人の感覚によって紡がれるもの。
だから僕は、今日もチームの中で問い続けます。
「この“らしさ”、ちゃんと伝わってる？」
