
デザイン
更新日: 2024/11/22
【イラスト付き】トンマナとは?デザインの世界観を統一しよう!

イエローちゃーん!
ピンクちゃんどうしたの?


トンマナってなぁに?
あートンマナかーあんまり聞き慣れない言葉だよねー

じゃあ今日はトンマナについて説明するね!

トンマナとは?
.png?w=1200&fm=webp)

トンマナとは、デザインのテイストや雰囲気を合わせて、サイトやサービスのデザインを統一することだよ!

tone&manner(トーン&マナー)を略してトンマナって呼ばれてるね

イメージカラーとかイラストの風合いとかがわかりやすいかなぁ
トンマナの重要性ってなに?

トンマナを決定することは、情報やサービスが溢れる現代でとても重要なんだよねー

トンマナがどんなメリットに繋がるか説明するね
トンマナを決定するメリット1.ブランディングに繋がる


トンマナを決定するということは、つまり世界観を統一するってことなんだよねー

ユーザーにサービスのイメージが定着するから、企業やコンテンツのブランディングも向上するよ
たしかに、見たことあるテイストだと安心感があるわよね


違和感なくサービスを利用できるから、UXの向上にも繋がるよねー
トンマナを決定するメリット2.チームワークに繋がる


トンマナが決定されていると、実現したいイメージを共有しやすいからチームでの作業もはかどるんだよねー

各人が思い描くゴールが違うと、すり合わせるための時間が必要だし、認識違いによる手戻りも増えちゃうよ

全体のテイストが把握できていると、フォントや配色の決定、制作するコンテンツひとつひとつのずれが少なくなるから、チームワークも向上するんだ!
トンマナで意識するべきポイントについて知ろう

トンマナを決めておいた方がいいのはイメージがついたと思うんだけど、実際どうやって考えたらいいか難しいよねー

意識するとトンマナを決定しやすいポイントがあるから紹介していくね!
ライティングのトンマナで意識するべきポイント4つをご紹介!

ライティングにおけるトンマナとして気を付けておくべき点は、
1.表記を統一する
2.語尾表現を統一する
3.文章量の目安を作る
4.単語を統一する

が挙げられるよ!

文章は、読みやすくわかりやすく、誤解が生じないことが重要だよね

同じものを指すのに違う単語を使ったり、ですます調と体言止めが混在したり、文章のテンポが突然変わったりすると、ユーザーは読みづらいと感じてしまうよ

逆に、表現や文体が統一されているとストレスなく読めちゃうんだよね

ユーザーのサイト離脱も減るし、検索エンジンが内容を判断しやすくなるからSEOにも効果があるんだよー
デザインのトンマナで意識するべきポイントを4つ考えてみよう

デザインにおけるトンマナとして気を付けておくべき点は、
1.配置や余白を統一する
2.フォントを合わせる
3.配色を合わせる
4.画像や写真のテイストを合わせる

が挙げられるかなー

デザインは一目で印象に残るし、感覚にも訴える部分だからトンマナの決定が大きく影響するんだよー

ページが変わるたびに見え方が違うと、どこにどんな要素があるか毎回わからなくなって、ユーザーはストレスを感じてしまうよね

シャープな字体や丸い字体、濃い色薄い色、見た目を整えることで高級志向にもカジュアルにイメージづけられるよ!

デザインのトンマナを意識すると、UXの向上も期待できるよー

Webサイトやサービスのイメージにも大きく繋がる部分だから、ちぐはぐにならないように気をつけようね!
トンマナの落とし穴ってなんだろう?


ただ、トンマナを統一することが目的になっちゃうのは危険だよ!

トンマナは、コンテンツの魅力を上げてユーザーに訴求するための手段だから、どんなコンセプトで誰にどう見せたいかの方が重要なんだよねー

トンマナの決定だけに夢中になっちゃうと、世界観は統一されていても届けたい人に届けたいものが届かなくなることもあるんだよー

企業理念やブランドイメージ、目指すものやターゲットを明確にした上でトンマナを決定していこうね
まとめ

トンマナについて簡単におさらいしておくね!
まとめ
◆トンマナとはトーン&マナーの略で、コンテンツの世界観を統一すること
◆トンマナを決定することでブランディングの向上に繋がる
◆意識すべきポイントを抑えるとトンマナを決定しやすい
◆トンマナという手段が目的にならないよう気をつけよう
トンマナについて詳しくなった気がするわ!

ありがとう、イエローちゃん


ピンクちゃんの役に立ててよかったよー

またなんでも聞いてね!
最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO



最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO