こんにちは！フリーランス1年目の香里です。
WEBデザイナーになって、初めて聞いた言葉ってありませんか？
仕事をしている中でその意味を知ることも多いのですが、初めての菊言葉の意味を
ちゃんと分かっていることは結構重要なことです。
今回はそんなWEBデザインでよく使われる言葉の1つ「トンマナ」について
詳しく説明をしていきます！
トンマナとはWEBデザインの方向性を決めるときにとても重要な要素の1つ
トンマナというとかなり聞き慣れない言葉になりますが、元々は2つの言葉を合わせて
短くしている言葉です。
トーン＆マナーを略して「トンマナ」と言っているのです。
ではトーンとマナーとはどんな意味なのでしょうか。
普通の英語だとToneは音階などでも使われますが、「段階」とか「調子」といった意味で
使われている言葉です。
WEBデザインの現場ではトーンといえば、全体の調子や色調と言った意味で使われる
言葉になります。
そしてMannerといえば一般的には決まりごとや格式という意味で使われる言葉です。
これはWEBデザインでもそれほど変わっていません。
WEBデザインでは様式や格調、作風という意味で使われています。
この2つを合わせて「トンマナ」と言っているのです。
ではトンマナを使うことで、WEBデザインの現場ではどんなことが起きるのか。
そちらも説明をしていきましょう。
WEBデザインを統一することで受け取る人がわかりやすくなる
トンマナを考えることがWEBデザインではかなり重要と言われるようになりました。
その理由はいくつかあるのですが、まずは利用するユーザーがわかりやすくなります。
トンマナを考えてWEBデザインをすることで、WEBデザインとしての統一感がでます。
これが受け取る側にとってはとてもわかり易くなるのです！
特にターゲット層がかなり決められているWEBサイトを作る場合に、その年齢層などに
好まれるような色を使うことで見てもらいやすくなります。
更に文字のかたち、フォントなどにも気を使うことで書いてあることを読んでもらえるし
内容を伝えやすくなるというメリットもでてきます。
子供向けにポップな印象にするのか、大人向けにシックな感じにするのかを決めれば
その後のデザインも方向性がはっきりとしてきます。
多くの人に見てもらうWEBデザインを作るためにもトンマナに気をつけることは
とても重要と考えられているのです。
制作チームが同じ方向性で作ることが出来る
もう1つトンマナを決めることのメリットがあります。
それはWEB制作チームが同じ意識を持って作ることができる様になることです。
しっかりとトンマナを決めておくことで、WEBサイトの制作チーム全員が同じ意識で
同じテーマを持って作りやすくなるのです！
先ほどの説明と同じように、大人向けなのか子供向けなのか。
男性向けなのか女性向けなのかをしっかりと決定しておくことはとても重要です。
トンマナの設定をしておけば、WEBデザイナーだけではなく他の作業をする人たちも
同じ意識で、同じターゲット層を考えることが出来るようになります。
使われるインターフェースのデザイン、画面移動のときのエフェクトなど
WEBデザイン以外のところの作業をする人たちと同じ意識を共有できます。
WEBサイトを全て1人で作り上げる、という場合にはこちらのメリットはありませんが
その状況はかなり少ないのでやはりトンマナを決めることは重要と感じます。
WEBデザインのバランスを保つためにもトンマナは重要
元々は印刷用語として使われていたのが「トンマナ」という言葉です。
でも今ではWEBデザインの現場でもかなり重要視されていることになっています。
印刷も同じですが、WEBサイト制作でも多くの方が1つの商品に関わってきます。
その人たちが同じ意志を持って作ることが出来る、というのはとても重要なことです。
そして出来上がったものが、正しく消費者に思いを伝えることが出来るのか。
使う人がちぐはぐな印象を受けることがない、という気持ちよさも重要になります。
もし子供向けのサイトに大人が好むような広告バナーが貼り付けてあったら、使う人は
あまりいい気持ちはしません。
こんなことが起きないようにトンマナをきちんと決めておくことが必要になります！
全員が同じゴールを向いて進んでいくことが出来る、それがトンマナのメリットです。
トンマナの決め方を考えてみる
WEBデザインではトンマナを決めることが大切、と説明してきました。
では実際にどうやってトンマナを決めるのでしょうか？
クライアントからある程度の説明をされるはずですが、そのままではかなり大雑把で
チームの意識をまとめるというところまでは難しいことも多いです。
そこでWEBデザインでのトンマナの決め方についても、ちょっと説明しておきます！
こんなやり方もある、という参考にしてもらえれば幸いです。
当然状況によってこのやり方が出来ないこともでてきます。
それに私のやり方が全て正しい、というわけでもありません。
でも「こんなやり方もあるんだ」という程度に考えてもらえれば嬉しいです。
WEBデザインの中心になるものを決める
WEBデザインの場合、広告を作るのか、サイトを作るのかによっても多少違いますが
まずはそのWEBデザインの中心になるものを決めてしまいましょう。
商品広告の場合には、その商品の購入層はどれくらいの年齢なのか、男性女性の違い
商品自体の印象なども関係してきます。
それらの全てを考慮するのではなく、ある程度ざっくりと大雑把に決めてしまう
という方がおすすめです。
「まずは」どんなデザインにするのか、というところなので細部まできっちりと
決める必要はありません。
単純にキーワードとして何かを設定するだけでもかまいません。
購買層を想像してみる、似たような人をイメージするという方法もあります。
ここで想像した人に使ってもらうためにはどんな色や文字を選んだらいいのか。
それを後から決めていけばいいだけです。
サイトで使うフォントを決める
大雑把でもいいのでWEBデザインの方向性が決まったら、それに合わせた色々な
パーツを組み合わせていくことになります。
その1つに、サイトで使うフォントがあります。
どんな文字のデザインにするのかでサイトの印象が変わってくるのです！
例えば硬い印象の文字、ゴシック体などを使うことでどっしりとした印象を
サイト全体に加えることが出来るようになります。
力強い印象は男性的と言われることも多いので、男性向けのサイトを作る時には
よく使われることも多いです。
女性の印象というか、女性が好むデザインとしては細い文字を使う事が多く
英語の筆記体など流れるような文字も女性的と言われることが多いです。
そして四角い文字、ゴシック体はPOPな印象が強いのですが明朝体などの
文字に高級感があると考える意見も多くなります。
こんな感じで「フォントを変えることでイメージしたターゲット層」により強く
働きかけることができる様になるのです。
トンマナを決めておけば、方向性の統一がチームでされているためにこの選択が
スムーズに出来るようになります。
文字の文末、全体的な口調を決めるのにもトンマナは重要
WEBデザインには説明文が多く利用されています。
この文章の方向性を決めるためにもトンマナを決めることは重要なのです。
例えば紹介文の語尾をどうするのか。
「です・ます調」か「だ・である調」にするのかで印象は大きく変わります。
それに男性の口調にするのか、女性のような印象にするのかという問題もあります。
これもトンマナを決めておけば、意外にスムーズに決まっていきます。
女性向けの宣伝サイトで、女性の共感を求めるなら女性的な口調にするほうが
共感を呼びやすくなります。
男性向けのサイトでも、場合によっては優しい感じのほうが好印象になるので
あえて女性口調での説明にしたほうがいい場合も多いです。
ターゲット層を決めて、それに合わせたWEBデザインの統一性を決めておくことは
全体のバランスを取るためにもかなり有効な方法です。
それを実感しやすい説明文の口調はよく考えて決めるようにしましょう。
WEBデザインでは文字の選び方にも注意が必要
ちょっと細かいことになるのですが、私がWEBデザインをしている中で気になった
文字の選び方についても説明をしておきます。
トンマナで決まったターゲット層に合わせた口調にするのは当然なのですが
もう1つ、統一感を出すことにも注意が必要になります。
特に日本語の場合には「ひとり」を表現するだけでもかなりの種類があるのです。
1人、一人、ひとり、という感じでそれぞれに印象が変わってくるのです。
同じ文字を使うときに、数字と漢数字を混ぜてしまうだけでも統一感がなくなり
見ている人はチグハグとした印象を受けることになります。
それに英語表記と日本語表記も統一させることが必要です。
「チェック」と「確認」が混在するとやはり統一感はありません。
漢字を使うのか、ひらがなで書くのかという問題もあります。
「繋がる」と「つながる」など、いわゆる漢字を開くのかという問題です。
ターゲット層によっては漢字を使わないほうがいい場合もありますし、使わないことで
全体的な統一感がなくなってしまう場合もあるのです！
文章の書き方にはこれらの「文字の使い方」も含まれることを覚えておきましょう。
企業などのロゴがあればそれをメインに色を決める
WEBデザインでもどんな色を使ってサイトを作るのか、というのはかなり大きな
問題になる場合も多いです。
でもこれに関しては大前提として「ロゴがあればそれをメインに色を決める」のが
おすすめの方法です。
企業ロゴがあればその配色を元にして、サイト全体の配色も同系色でまとめる。
商品の宣伝なら、商品ロゴをメインに考えることである程度の方向性を決めます。
トンマナには「方向性の統一」という考えもあるので、まずはクライアントを中心に
カラーバリエーションを考えるということがおすすめなのです！
色の方向性が決まれば、そこからまた「男性が好む色」や「子供が好きなポップな色」と
決まったトンマナに合わせた色を選択していくことで決められます。
それに同系色でもコントラストを付けることで、より統一感が出ることもあります。
WEBサイトで使える色数はかなり多いので、まずはメインの配色を決めてしまいましょう。
使用必須ワードとNGワードの確認もしておく
WEBサイトを頼んでくるクライアントによっては「必ずこの言葉を使って欲しい」と
言われる「使用必須ワード」を指定してくることもあります。
広告サイトなら宣伝する商品コンセプトや売りになる特徴、商品そのものの名前などが
使用必須ワードとして指定されることが多いです。
これら「クライアントが指定した言葉をちゃんと入れる」のもトンマナで決めておけば
間違えることはありません。
それにクライアントが使ってほしくない、いわゆる「NGワード」を使っていないかも
確認することが必要です。
日本では特に比較広告を好まないクライアントも多いので、～の商品と比べてという
他社の商品との比較がNGということもあります。
そもそも宣伝サイトで他社の商品を紹介すること自体を好まない、という企業は多く
こちらも気をつけることが必要です。
基本的にはわざわざ言うことの程でもない、と考える人も多いのですがチームとして
意識を統一するためにもトンマナで決めることをおすすめします。
ボタンの形状、枠線の影などもターゲットによって変える
最後に細かいところも決めていきます。
例えば別ページに移動するためのボタンの形状などにも統一感を考えましょう。
ボタンの形を四角く、尖ったタイプにすることで全体的にきっちりとした印象になります。
こちらは男性が好むと言われている、整頓された感じのするタイプです。
逆に角を丸くすることで全体的にポップな印象になります。
女性的と言われることも多く、子供も好むのがこちらのタイプになります。
更に細かいところになると、フォントなどを囲む「枠線の影」にも印象があります。
カラーバリエーションのコントラストにも関係してくることなのですが。
影が濃い場合にはとてもシャープな印象になります。
メリハリの聞いた色味になるので、男性が好むことの多い配色です。
影が薄い場合は淡い、というイメージを持つことが多くなります。
あまり強めの色味を使っていない場合にはこちらのほうが全体的な統一感が出来ます。
他には写真の色味もトンマナで決まった統一感を大事にすること。
後は文字も写真もない、いわゆる「余白の使い方」にもトンマナを参考にしましょう。
トンマナを決めることの有効性
最初にかなり簡単に説明した「トンマナを決めることの有効性」についても詳しく
説明していきます。
最初の説明どおりに「ユーザーに印象をつけやすくなる」ことに「サイトの統一性」
これが大きな有効性と考えられます。
ではそれぞれにちょっと詳しく説明していきましょう。
WEBデザインをする上でトンマナを決めることが重要と感じることが出来るはずです。
企業やサイトの印象をユーザーがわかりやすく感じることが出来る
例えば「リラクゼーションスパ」のサイトを作るときに、どんな文字を使って
どんなカラーパターンで表示すればいいのか。
ユーザーの印象としては「ゆったりと安らげる空間」を想像しているはずです。
ここで使う文字が四角くて堅苦しいとリラックスという印象にはなりません。
細く緩やかに流れるような文字を使うことで、サイトを見たユーザーが想像しやすい
わかりやすいリラックス空間の店舗という印象をつけることが出来ます。
カラーパターンでも同じで、原色を多く使った派手なサイトでリラックス出来る
という人は少ないです。
淡くパステルトーンの柔らかい印象は、そのまま店舗の印象につながりやすく
リラックスできそうと感じてくれる人が多くなります。
この「多くの人がわかりやすく感じることが出来る」サイトを作るためには
多くの方が持っている印象を素直に使うことが重要です！
トンマナを決めて、ターゲット層や商品価値をわかりやすくすることがWEBサイトの
わかりやすさになってくるのです。
コンテンツを追加する時にもWEBデザインに統一感が出る
企業サイトのWEBデザインをする時には、後からコンテンツが追加されることも
考える必要があります。
そのときにトンマナを決めておくことで、追加されたコンテンツにも前に作ったときと
同じルールで作ることが出来るようになります。
サイトの方向性を決めているので、WEBデザインの統一性が取れるのです！
文章の口調、色味、フォントなどトンマナに合わせて作ればいいのですから。
他にもサイトのバナーを変更するときにも、カラーパターンを合わせることで
バナーが変わっても違和感がないようにデザインを変更させられます。
作られるWEBデザインの統一性と、同じクオリティの商品納入がやりやすいというのは
かなり大きなメリットになります。
WEBデザイナーとしては、クライアントと相談してトンマナを決めておけば
クライアントからの無茶な追加注文や変更がなくなるというメリットもあります。
クライアントと決めた「サイトのルール」を大きく変更させる、そんな注文を
クライアント自体がしにくくなるというのもかなり助かります。
WEBデザインにおいてトンマナを決めることがとても重要なことになっている。
デザイナー志望の人はぜひ忘れないでください。
コメント