デザイン
更新日: 2024/11/22
【イラスト付き】トンマナとは?デザインの世界観を統一しよう!
イエローちゃーん!
ピンクちゃんどうしたの?
トンマナってなぁに?
あートンマナかーあんまり聞き慣れない言葉だよねー
じゃあ今日はトンマナについて説明するね!
トンマナとは?
トンマナとは、デザインのテイストや雰囲気を合わせて、サイトやサービスのデザインを統一することだよ!
tone&manner(トーン&マナー)を略してトンマナって呼ばれてるね
イメージカラーとかイラストの風合いとかがわかりやすいかなぁ
トンマナの重要性ってなに?
トンマナを決定することは、情報やサービスが溢れる現代でとても重要なんだよねー
トンマナがどんなメリットに繋がるか説明するね
トンマナを決定するメリット1.ブランディングに繋がる
トンマナを決定するということは、つまり世界観を統一するってことなんだよねー
ユーザーにサービスのイメージが定着するから、企業やコンテンツのブランディングも向上するよ
たしかに、見たことあるテイストだと安心感があるわよね
違和感なくサービスを利用できるから、UXの向上にも繋がるよねー
トンマナを決定するメリット2.チームワークに繋がる
トンマナが決定されていると、実現したいイメージを共有しやすいからチームでの作業もはかどるんだよねー
各人が思い描くゴールが違うと、すり合わせるための時間が必要だし、認識違いによる手戻りも増えちゃうよ
全体のテイストが把握できていると、フォントや配色の決定、制作するコンテンツひとつひとつのずれが少なくなるから、チームワークも向上するんだ!
トンマナで意識するべきポイントについて知ろう
トンマナを決めておいた方がいいのはイメージがついたと思うんだけど、実際どうやって考えたらいいか難しいよねー
意識するとトンマナを決定しやすいポイントがあるから紹介していくね!
ライティングのトンマナで意識するべきポイント4つをご紹介!
ライティングにおけるトンマナとして気を付けておくべき点は、
1.表記を統一する
2.語尾表現を統一する
3.文章量の目安を作る
4.単語を統一する
が挙げられるよ!
文章は、読みやすくわかりやすく、誤解が生じないことが重要だよね
同じものを指すのに違う単語を使ったり、ですます調と体言止めが混在したり、文章のテンポが突然変わったりすると、ユーザーは読みづらいと感じてしまうよ
逆に、表現や文体が統一されているとストレスなく読めちゃうんだよね
ユーザーのサイト離脱も減るし、検索エンジンが内容を判断しやすくなるからSEOにも効果があるんだよー
デザインのトンマナで意識するべきポイントを4つ考えてみよう
デザインにおけるトンマナとして気を付けておくべき点は、
1.配置や余白を統一する
2.フォントを合わせる
3.配色を合わせる
4.画像や写真のテイストを合わせる
が挙げられるかなー
デザインは一目で印象に残るし、感覚にも訴える部分だからトンマナの決定が大きく影響するんだよー
ページが変わるたびに見え方が違うと、どこにどんな要素があるか毎回わからなくなって、ユーザーはストレスを感じてしまうよね
シャープな字体や丸い字体、濃い色薄い色、見た目を整えることで高級志向にもカジュアルにイメージづけられるよ!
デザインのトンマナを意識すると、UXの向上も期待できるよー
Webサイトやサービスのイメージにも大きく繋がる部分だから、ちぐはぐにならないように気をつけようね!
トンマナの落とし穴ってなんだろう?
ただ、トンマナを統一することが目的になっちゃうのは危険だよ!
トンマナは、コンテンツの魅力を上げてユーザーに訴求するための手段だから、どんなコンセプトで誰にどう見せたいかの方が重要なんだよねー
トンマナの決定だけに夢中になっちゃうと、世界観は統一されていても届けたい人に届けたいものが届かなくなることもあるんだよー
企業理念やブランドイメージ、目指すものやターゲットを明確にした上でトンマナを決定していこうね
まとめ
トンマナについて簡単におさらいしておくね!
まとめ
◆トンマナとはトーン&マナーの略で、コンテンツの世界観を統一すること
◆トンマナを決定することでブランディングの向上に繋がる
◆意識すべきポイントを抑えるとトンマナを決定しやすい
◆トンマナという手段が目的にならないよう気をつけよう
トンマナについて詳しくなった気がするわ!
ありがとう、イエローちゃん
ピンクちゃんの役に立ててよかったよー
またなんでも聞いてね!
最新の記事一覧
SEOと文字数の関係は?上位表示のためのポイントも紹介
SEO
ECサイトのSEO対策をしよう!売上アップに効果的な方法を紹介
SEO
SEOの歴史を知ろう!SEOの誕生から変化まで詳しく解説
SEO
リッチカードとは?重要性や設定方法を分かりやすく解説
SEO
ユーザーリテンションとは?気になる測定方法と重要性を徹底解説!
SEO
フレッシュネスアルゴリズムとは?適用範囲と上位表示の対策を紹介
SEO
divタグ完全ガイド!初心者向けにポイントと注意点を解説
SEO
BigQueryとは?特徴やビジネスを加速させる活用術を徹底解説
SEO
PPC広告とSEOの違いは?目的別に最適なWeb集客手法を解説
SEO
ChatGPTの活用でSEOを攻略!AIで質の高い記事を作る方法
SEO
リンクビルディングとは?SEO効果を上げる方法とコツを解説!
SEO
SEO監査でサイト診断をしよう!検索順位アップの秘訣を解説
SEO
SEOの勉強におすすめの本13選!書籍で学ぶメリットも紹介
SEO
【最新版】SEOの情報を確認できるおすすめサイト一覧!
SEO
コンバージョンパスとは?意味や分析するメリットを詳しく解説!
SEO
SEO対策が「意味ない」と言われる理由は?意味のある対策も紹介
SEO
文章作成アプリを使いこなそう!スマホで使えるおすすめのアプリ5選
SEO
Webサイト導線とは?効果的な導線の特徴と人気企業の事例を紹介
SEO
Google Discoverとは?表示せるための施策・戦略を解説
SEO
【初心者向け】HTMLのbrタグとは?基礎から使い方まで徹底解説
SEO
最新の記事一覧
SEOと文字数の関係は?上位表示のためのポイントも紹介
SEO
ECサイトのSEO対策をしよう!売上アップに効果的な方法を紹介
SEO
SEOの歴史を知ろう!SEOの誕生から変化まで詳しく解説
SEO
リッチカードとは?重要性や設定方法を分かりやすく解説
SEO
ユーザーリテンションとは?気になる測定方法と重要性を徹底解説!
SEO
フレッシュネスアルゴリズムとは?適用範囲と上位表示の対策を紹介
SEO
divタグ完全ガイド!初心者向けにポイントと注意点を解説
SEO
BigQueryとは?特徴やビジネスを加速させる活用術を徹底解説
SEO
PPC広告とSEOの違いは?目的別に最適なWeb集客手法を解説
SEO
ChatGPTの活用でSEOを攻略!AIで質の高い記事を作る方法
SEO
リンクビルディングとは?SEO効果を上げる方法とコツを解説!
SEO
SEO監査でサイト診断をしよう!検索順位アップの秘訣を解説
SEO
SEOの勉強におすすめの本13選!書籍で学ぶメリットも紹介
SEO
【最新版】SEOの情報を確認できるおすすめサイト一覧!
SEO
コンバージョンパスとは?意味や分析するメリットを詳しく解説!
SEO
SEO対策が「意味ない」と言われる理由は?意味のある対策も紹介
SEO
文章作成アプリを使いこなそう!スマホで使えるおすすめのアプリ5選
SEO
Webサイト導線とは?効果的な導線の特徴と人気企業の事例を紹介
SEO
Google Discoverとは?表示せるための施策・戦略を解説
SEO
【初心者向け】HTMLのbrタグとは?基礎から使い方まで徹底解説
SEO