![トンマナとは?デザインの世界観を統一しよう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/e11aebfceda843caba74fa405bb0f3e4/Group%20386.png?w=1200&fm=webp)
デザイン
更新日: 2023/11/30
トンマナとは?デザインの世界観を統一しよう!
![character_balloon](/media/character/pink_normal_left.png)
イエローちゃーん!
ピンクちゃんどうしたの?
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/pink_normal_left.png)
トンマナってなぁに?
あートンマナかーあんまり聞き慣れない言葉だよねー
![character_balloon](/media/character/yellow_normal_right.png)
じゃあ今日はトンマナについて説明するね!
![character_balloon](/media/character/yellow_normal_right.png)
トンマナとは?
![トンマナとは?デザインの世界観を統一しよう!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/450ba01212bd4ee2b108828b27394fcf/%E3%83%88%E3%83%B3%E3%83%9E%E3%83%8A_01%20(1).png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
トンマナとは、デザインのテイストや雰囲気を合わせて、サイトやサービスのデザインを統一することだよ!
![character_balloon](/media/character/yellow_normal_left.png)
tone&manner(トーン&マナー)を略してトンマナって呼ばれてるね
![character_balloon](/media/character/yellow_normal_left.png)
イメージカラーとかイラストの風合いとかがわかりやすいかなぁ
トンマナの重要性ってなに?
![character_balloon](/media/character/yellow_normal_left.png)
トンマナを決定することは、情報やサービスが溢れる現代でとても重要なんだよねー
![character_balloon](/media/character/yellow_normal_left.png)
トンマナがどんなメリットに繋がるか説明するね
トンマナを決定するメリット1.ブランディングに繋がる
![トンマナとは?デザインの世界観を統一しよう!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/cf65c0dfffdd462e8f0cbb05361eab41/%E3%83%88%E3%83%B3%E3%83%9E%E3%83%8A_02.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
トンマナを決定するということは、つまり世界観を統一するってことなんだよねー
![character_balloon](/media/character/yellow_normal_left.png)
ユーザーにサービスのイメージが定着するから、企業やコンテンツのブランディングも向上するよ
たしかに、見たことあるテイストだと安心感があるわよね
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
違和感なくサービスを利用できるから、UXの向上にも繋がるよねー
トンマナを決定するメリット2.チームワークに繋がる
![トンマナとは?デザインの世界観を統一しよう!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/e1b2d099a36c40d690d799f881905c42/%E3%83%88%E3%83%B3%E3%83%9E%E3%83%8A_03.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
トンマナが決定されていると、実現したいイメージを共有しやすいからチームでの作業もはかどるんだよねー
![character_balloon](/media/character/yellow_normal_left.png)
各人が思い描くゴールが違うと、すり合わせるための時間が必要だし、認識違いによる手戻りも増えちゃうよ
![character_balloon](/media/character/yellow_normal_left.png)
全体のテイストが把握できていると、フォントや配色の決定、制作するコンテンツひとつひとつのずれが少なくなるから、チームワークも向上するんだ!
トンマナで意識するべきポイントについて知ろう
![character_balloon](/media/character/yellow_normal_left.png)
トンマナを決めておいた方がいいのはイメージがついたと思うんだけど、実際どうやって考えたらいいか難しいよねー
![character_balloon](/media/character/yellow_normal_left.png)
意識するとトンマナを決定しやすいポイントがあるから紹介していくね!
ライティングのトンマナで意識するべきポイント4つをご紹介!
![character_balloon](/media/character/yellow_normal_left.png)
ライティングにおけるトンマナとして気を付けておくべき点は、
1.表記を統一する
2.語尾表現を統一する
3.文章量の目安を作る
4.単語を統一する
![character_balloon](/media/character/yellow_normal_left.png)
が挙げられるよ!
![character_balloon](/media/character/yellow_normal_left.png)
文章は、読みやすくわかりやすく、誤解が生じないことが重要だよね
![character_balloon](/media/character/yellow_normal_left.png)
同じものを指すのに違う単語を使ったり、ですます調と体言止めが混在したり、文章のテンポが突然変わったりすると、ユーザーは読みづらいと感じてしまうよ
![character_balloon](/media/character/yellow_normal_left.png)
逆に、表現や文体が統一されているとストレスなく読めちゃうんだよね
![character_balloon](/media/character/yellow_normal_left.png)
ユーザーのサイト離脱も減るし、検索エンジンが内容を判断しやすくなるからSEOにも効果があるんだよー
デザインのトンマナで意識するべきポイントを4つ考えてみよう
![character_balloon](/media/character/yellow_normal_left.png)
デザインにおけるトンマナとして気を付けておくべき点は、
1.配置や余白を統一する
2.フォントを合わせる
3.配色を合わせる
4.画像や写真のテイストを合わせる
![character_balloon](/media/character/yellow_normal_left.png)
が挙げられるかなー
![character_balloon](/media/character/yellow_normal_left.png)
デザインは一目で印象に残るし、感覚にも訴える部分だからトンマナの決定が大きく影響するんだよー
![character_balloon](/media/character/yellow_normal_left.png)
ページが変わるたびに見え方が違うと、どこにどんな要素があるか毎回わからなくなって、ユーザーはストレスを感じてしまうよね
![character_balloon](/media/character/yellow_normal_left.png)
シャープな字体や丸い字体、濃い色薄い色、見た目を整えることで高級志向にもカジュアルにイメージづけられるよ!
![character_balloon](/media/character/yellow_normal_left.png)
デザインのトンマナを意識すると、UXの向上も期待できるよー
![character_balloon](/media/character/yellow_normal_left.png)
Webサイトやサービスのイメージにも大きく繋がる部分だから、ちぐはぐにならないように気をつけようね!
トンマナの落とし穴ってなんだろう?
![トンマナとは?デザインの世界観を統一しよう!の画像_16枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/f77bfe4ecf4b4f3b9f33e884d79eeb7f/%E3%83%88%E3%83%B3%E3%83%9E%E3%83%8A_04.png?w=1200&fm=webp)
![character_balloon](/media/character/yellow_normal_left.png)
ただ、トンマナを統一することが目的になっちゃうのは危険だよ!
![character_balloon](/media/character/yellow_normal_left.png)
トンマナは、コンテンツの魅力を上げてユーザーに訴求するための手段だから、どんなコンセプトで誰にどう見せたいかの方が重要なんだよねー
![character_balloon](/media/character/yellow_normal_left.png)
トンマナの決定だけに夢中になっちゃうと、世界観は統一されていても届けたい人に届けたいものが届かなくなることもあるんだよー
![character_balloon](/media/character/yellow_normal_left.png)
企業理念やブランドイメージ、目指すものやターゲットを明確にした上でトンマナを決定していこうね
![character_balloon](/media/character/yellow_normal_left.png)
トンマナについて簡単におさらいしておくね!
まとめ
◆トンマナとはトーン&マナーの略で、コンテンツの世界観を統一すること
◆トンマナを決定することでブランディングの向上に繋がる
◆意識すべきポイントを抑えるとトンマナを決定しやすい
◆トンマナという手段が目的にならないよう気をつけよう
トンマナについて詳しくなった気がするわ!
![character_balloon](/media/character/pink_normal_right.png)
ありがとう、イエローちゃん
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
ピンクちゃんの役に立ててよかったよー
![character_balloon](/media/character/yellow_normal_left.png)
またなんでも聞いてね!
![character_balloon](/media/character/yellow_writer.png)
イエロー
インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。