『トンマナ の基本 一貫性と時短のデザインルール』を読みました。

以下の書籍を読みました。
書籍の感想を書こうと思います。

書籍「トンマナの基本」のおはなし。｜ingectar-e

みなさん、こんにちは！ ingectar-eのスタッフRIONです➰ 今回は12月26日に発売した書籍『トンマナの基本』の裏話と見どころを大ボリュームで紹介しちゃいます！🐷✨ トンマナの基本　一貫性と時短のデザインルール amzn.asia 2,200円 (2025年11月28日 17:13時点 詳しくはこちら) Amazon.co.jpで購入する 💡この本はどんな人に向いてる？ ◾️デザインの雰囲気が揃わず悩むデザイン初学者 ◾️新人にデザインを任せたいが方向性の説明に困っている先輩デザイナー

note.com

トンマナ

TONEは雰囲気や印象の調子。
MANNERはそれを形づくり形式やルール。

この2つを、全体的に一貫性を持たせる「表現の方向性・ルール」をトンマナと呼ぶそうです。
トンマナが守られていると、以下のメリットがあると言えます。

• ユーザー目線
  • デザインを見て、そのブランドを思い出す
  • ブランドの世界観に、没入できる
  • 統一された体験に、迷わない
• 製作者目線
  • 人によって、制作物がブレない
  • 制作において、迷いが減る
  • ルールに従うため、効率が良い

他には、長期的な目線だとブランド・デザインという資産が形成されます。
あのブランドだから、安心できる・信頼できるようになります。
私の場合は無印良品の世界観が好きで、落ち着いた自然な印象が好きです。
どの商品も一貫したデザインなので、無印っぽい と思えるようになりました。

トンマナを支える5つの要素

トンマナには、以下の5つの要素について紹介されていました。

• ロゴマーク
• 配色
• 文字と言葉
• 装飾
• 写真

ロゴマークと写真

ロゴマークや写真は、制作や使用方法についてのルールが紹介されていました。
私の職業的には、あまり得られることは少なかったです。

配色

配色については、知っている知識が多かったのでササッと読み進めました。
色の3属性や色から与える印象、カラーバランスなどです。

1つ良かったなと思うのは、"なぜその色を選んだのか説明できること" という話は良かったです。
色が与える印象というのは一般的なイメージです。
青は誠実さを表し、赤は情熱を表すなどです。

Web上でメインカラーを緑色、サブカラーを肌色とした場合に、

• 緑色は植物由来のナチュラルさを表す
• 肌色は自然素材の安心感を表す

のように ブランドコンセプトに沿う色の説明ができるというのは良いなと思いました。

文字と言葉

文字については、以下の要素の話がありました。

• フォント
• 文字サイズ
• 行間
• 字間

フォント文字サイズについては理解があったのですが、行間や字間というのは意識していなかったので良かったです。
間を広くゆったりすると、落ち着いた印象となり、狭めると引き締まった印象になります。
CSS だと、行間は line-height、字間は letter-spacing プロパティが該当します。
あまり拘ったことがなかったので、自分の個人サイトで調整してみようかと思いました。

言葉については、トーンオブボイス という考え方を知れたのが一番の学びでした。

トーンオブボイス

話し方によって、与える印象が変わります。
"！" があると元気な印象ですし、"ございます" があると丁寧な印象です。
Webで表示する言葉や文章を考える際、誰が話しているか？という視点は新鮮でした。
ここの話し方がずれていると、確かに違和感がありそうです。

Apple のヒューマンインターフェースガイドラインに、表現というページでトーンオブボイスに近いことが書かれていました。

上記のページには、以下について書かれていました。

• アプリに適したボイスを決める
• コンテキストに合ったトーンを使う
• 明確にする
• 誰に対してもわかりやすい表現にする

"アプリに適したボイスを決める" は、アプリによって表現するトーンを変えましょうとのことです。
ゲームだと楽しい雰囲気を表現したいですし、銀行だと安心感のある雰囲気を表現したいです。

"コンテキストに合ったトーンを使う" は、状況を踏まえて文章のトーンを変えましょうとのことです。
転倒時のSOSでのメッセージと、ランニングの目標達成でのメッセージでは状況が違います。
前者は簡潔かつ単刀直入のトーン、後者は祝福するトーンです。

"明確にする" は、理解しやすく正しい情報が伝わる言葉を選びましょうとのことです。
当たり前ですが、言うは易く行うは難しです。
『迷った場合はその言葉を読み上げましょう』 は良いアイデアと思いました。

"誰に対してもわかりやすい表現にする" は、スキップします。

トーンオブボイスという考え方は、知れて良かったです。

終わりに

デザイナーが制作されるものって、かなり幅広くて大変ですね...。
Webでのデザイン制作物は、LPデザインやキービジュアル、ロゴなどが思い付きます。（他にもあると思いますが...）
物理的な制作物だと、一例として以下のものがあります。

• パンフレット・チラシ
• ステッカー
• 広告看板
• ...etc

他にも、業界によってはまだまだありそうです。
Webの場合はソフトウェアなので変更が効きやすいですが、物理的な制作はやり直しが難しそうですね...。
デザイナーさんには感謝を...。

記事をシェアする

Xで記事をシェアするBlueskyで記事をシェアするはてなブックマークで記事をシェアするデバイスで記事をシェアする記事のリンクをコピー

筆者をフォローする

Xで筆者をフォローするBlueskyで筆者をフォローするGitHubで筆者をフォローする

ブログの読者になる

RSSでブログの更新を受け取るメールでブログの更新を受け取る

ブログを応援する

OFUSEで応援を送る