「トンマナ」とは「世界観や雰囲気」のことで、
Web制作の現場でも重要なものとしてトンマナは一般的に認識されています。
ただWeb制作で世界観や雰囲気と言われても何のことかピンと来ないですし、
具体的にWeb制作におけるトンマナとはどんなものなのでしょうか？
元々は広告業界の専門用語
「トンマナ」とは「トーン&マナー」の略で、元々は広告業界で使われていた専門用語です。
トーンは色調や調子、マナーは様式や作風のことで、
それらに統一性を持たせることを「トンマナを合わせる」などと表現します。
トンマナを合わせることで制作物の世界観や雰囲気が確率されて、
利用者に伝わりやすくなるのです。
例えば本記事は文末が全て「です・ます調」になっていますが、
これもトンマナを合わせることの1つと言えます。
文章以外にも画像や色などのトンマナを合わせることで、
Webサイトの世界観・雰囲気が閲覧者に伝わりやすくなるわけです。
トンマナを合わせるメリット
Web制作においては、「ブランディング効果」が生まれるのでトンマナを合わせることが
重要とされています。
簡単に言うと、閲覧者が一目見ただけで「○○のサイト」とか「ＸＸというもの」と分かる
そのもの「らしさ」を演出できるということです。
トンマナが一般的に浸透すると、それに似た色や形、文体のものを見ると同時に
企業や商品の名前やパッケージなどが思い浮かぶようになります。
似たものを見ただけで思い出してくれるようになるわけですから、
トンマナを合わせて浸透させることには大きな宣伝効果があるのです。
情報が伝わりやすくなる
Web制作ではトンマナを合わせることを意識すると、
Webサイトに掲載されている情報が閲覧者に伝わりやすくなります。
例えば本記事の文章は基本的にです・ます調ですが、
これがところどころ「だ・である調」になっているとどうでしょう？
「あれ？急に文体が変わった」と言葉使いに気を取られて
情報が入ってこなくなってしまいます。
Webデザインのトンマナを合わせることで、
閲覧者が余計な部分に気が取られなくなって情報が伝わりやすくなるのです。
対面のコミュニケーションだと、
相手の反応を見ながら補足を加えることで伝えたいことが伝わるまで説明できます。
Webサイトは一方的な情報発信ですから、
閲覧者に「何を伝えたいのかよく分からない」と思われるとそれで終わりです。
伝えたいことが確実に伝わることがWebサイトでは重要で、
そのためにはトンマナを合わせることが必要なのです。
Web制作の手間が省ける
あらかじめトンマナを設定しておくことでWeb制作の手間を少し省くこともできます。
トンマナが決まっていないと、背景色やボタンの色、テキストの書き方など
細かいところまで1つ1つ相談して決めないといけません。
あらかじめトンマナが設定されていれば、細かい部分は相談しなくても
「ここはこの色」「テキストはこういう文体」と自然に決まります。
Web制作に必要な資料や素材もトンマナに合ったものを用意できるので、
欲しいものが無いので探し直すといったことをせずに済むのです。
細かい手間がトンマナをあらかじめ設定しておくことで省けますから、
Web制作をスムーズに進められます。
特に期限が決まっているWeb制作では、細かい手間を省くことで
時間的余裕が生まれるので質の高いWebサイト作りにも繋がります。
トンマナはどうやって設定する？
トンマナを合わせることにメリットがあるのは良いとして、
ではどうやってトンマナを設定すれば良いのでしょうか？
基本的なトンマナの設定手順として、まず「ターゲットを設定する」ところから始めます。
Webサイトの目的は「多くの人に見てもらうこと」ですが、
特にどういった「年齢層」「性別」「職業」の人に見てもらいたいかがあるはずです。
例えば化粧品メーカーのサイトであれば、
・10代後半から20代半ばまでの若い男女
・30代以上の働く女性
・30～40代の男性
などがターゲットとなります。
ただ10代後半から20代半ばの男女では漠然としすぎなので、
・21歳の大学生
・商社を中心に就活中
・親元を離れて東京で一人暮らし
・最近恋人と別れた
・K-POPアイドルのファン
・現在肌トラブルは無し
・将来のことを考えてスキンケアに興味がある
などより具体的にターゲットとなる人物像を描くのです。
ターゲットをより具体的な人物像にすると必要とするものや興味を持ちそうなことなどが
見えてくるので、それがトンマナを決める「種」となります。
Web制作の目的を明確にする
具体的なターゲットが決まったら、次は「Web制作の目的」を明確にします。
企業であれば
・知名度アップ
・顧客を増やす
・ブランドイメージの向上
・売上アップ
・人材採用
などがWebサイトを作る目的です。
知名度を上げるにはとにかく自社のことを閲覧者に知ってもらう必要があるので、
「自社の情報を伝えること」がトンマナの柱となります。
ブランドイメージの向上や人材採用では好感度を上げることが重要ですから、
社内の雰囲気や社長・従業員の人となりが分かるように意識します。
またWebサイト自体の使いやすさも閲覧者の好感度に繋がるので、
とにかく使いやすいWebサイト作りが求められるのです。
ターゲットと目的に合ったトンマナを設定する
ターゲットと目的が決まったら、
最後にターゲットと目的のどちらにも合致したトンマナを設定していきます。
例えば先の21歳の就活中大学生をターゲットに
化粧品メーカーが販売目的のWebサイトを作るとします。
大学生で一人暮らしのため経済的にそれほど余裕がないでしょうから、
「リーズナブルさ」が重要な要素です。
就活中なのでスキンケアに時間があまり取れないので「手軽さ」、
現在肌トラブルは無いので「肌荒れ予防」の情報も欠かせません。
K-POPアイドルファンですから、
モデルとしてK-POPアイドルを起用できればよりベターです。
21歳と若いので全体の色合いや文体はポップで親しみやすいものにする、
などといったようにトンマナを設定していくことになります。
Web制作で設定すべきトンマナの項目
Web制作のトンマナで設定すべき項目として「色」が挙げられます。
配色はトンマナの重要な要素の1つで、
配色によってWebサイトの方向性や世界観が決まると言っても良いぐらいです。
Webサイトのメインとなるカラー、背景などに使うベースカラー、
ボタンなどに使うアクセントカラーの3色が基本です。
テキストを表示するのであればテキストに使う色も含めて4色となります。
色には
・赤 情熱、危険
・青 冷静、堅実
・黒 厳格、洗練
などそれぞれが持つイメージがあります。
例えば先の21歳就活中の大学生がターゲットの場合は、
若さや元気を表すオレンジ・黄色といった暖色系が好まれるでしょう。
就活中なので堅実さや落ち着きを示す青を使うのも良いかもしれません。
ターゲットの年齢層が高い場合は、
健康や誠実さを示す茶色、高貴な色である紫なども効果的です。
テキストのフォント
トンマナを設定する上では、Webサイトで使うテキストのフォントも重要な要素となります。
単純にテキストの文字が太いか細いかだけでも印象が大きく変わりますし、
大きさによっても受け手の印象が変わるのです。
ゴシック体であれば親しみやすさ、明朝体だとフォーマルで格調高い雰囲気、
ポップ体や手書き体だと個性が感じられます。
読みやすくかつターゲットやWebサイトの雰囲気に合ったフォントや
文字の太さ・大きさを選びましょう。
テキストのルール
Webサイトにテキストを使用する場合は、表記の仕方や文体、文字数などにも
細かくルールを設けるとより統一感が出ます。
例えばWebサイト内で使う社名やブランド名は統一する、
数字は漢数字・算用数字のどちらを使うか、英数字は半角か全角か。
文末は「です・ます調」か「だ・である調」か、語尾に「～ですよね」といった口語表現を
使うか否かなどもトンマナの設定では重要となります。
タイトルや見出しは何文字、文章は何文字以内で構成、一定の文字数ごとに
改行を入れるなど文字数に関するルールも決めておくことが必要です。
また「最安」や「日本一」など断定的な誇張表現やネガティブな表現、一般的にあまり
好まれない単語・表現は使わないといったことも決めておいた方が良いでしょう。
画像
画像もWebサイトの印象を大きく左右する要素です。
同じ対象物の画像でも、単純に正面から切り取ったものと
1つの場面内に対象物が溶け込んでいるものでは受ける印象が大きく違います。
対象物の背景が明るいか暗いか、画像自体や写っている対象物が大きいか小さいか、
画像をサイト内のどこに配置するかでもWebサイト全体の雰囲気が変わります。
画像の作り方は配置には正解はありませんから、
色々と試してみてWebサイト全体の雰囲気に合った画像を探してみてください。
「トンマナを合わせる」の意味が分かる実例
トンマナを合わせることについて説明していますが、
「トンマナを合わせる」の意味がよく分かる実例をいくつか紹介しておきましょう。
まず1つ目はコカ・コーラ社の公式サイト（https://www.cocacola.jp/）です。
メインカラーが赤、ベースカラーが白、アクセントカラーが黒という
コカ・コーラを連想させる3色を上手く組み合わせています。
2つ目はヤマト運輸社のサービスサイト（https://www.kuronekoyamato.co.jp/）です。
コーポレートカラーである黄色と黒をメイン・ベースとして、アクセントカラーとして
白とグレーを使っています。
どちらもインパクトの強さに使いやすさも備わっていて、
一目見れば「その企業であること」が分かります。
まとめ
トンマナとは世界観や雰囲気のことで、
Web制作においてはサイトの方向性を左右する重要なものです。
トンマナの設定自体には多少手間を要しますが、
トンマナを設定してしまえばWeb制作は非常にスムーズに進みます。
結果的にはコストカットにも繋がりますので、
Web制作の際はまずトンマナを丁寧に設定しましょう。