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

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

トンマナ

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

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

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

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

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

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

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

ロゴマークと写真

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

配色

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

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

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

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

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

文字と言葉

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

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

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

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

トーンオブボイス

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

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

表現 | Apple Developer Documentation - developer.apple.com

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

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

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

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

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

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

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

終わりに

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

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

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

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

関連する記事

タグ「書籍レビュー」の記事

ブローガスト15日目: 『ウェブ配色 決める! チカラ』を読みました。

前回同様、昔読んだけど感想が残せていない以下の本『ウェブ配色 決める! 』について、 簡単に感想をまとめておこうと思います。 https://www.color-fortuna.com/writing/deciding-power-for-

2026年08月15日

書籍レビュー

ブローガスト14日目: 『カラー・アクセシビリティ』を読みました。

前回同様、今回は『カラー・アクセシビリティ』の本の書籍レビューを書きます。 https://book.mynavi.jp/ec/products/detail/id=138894 色盲 色盲の人は、日本では男性の約5％（20人に1人）、女性

2026年08月14日

書籍レビュー

ブローガスト13日目: 『いろいろな、いろ』を読みました。

前回同様、過去読んだ本の書籍レビューを残したいため、 今回は『いろいろな、いろ』 について書き残そうと思います。 https://ingectar-e.com/books/iroironairo あまり書けることがありませんでした...。

2026年08月13日

書籍レビュー

← ブログ一覧へ