WEBサイト制作を円滑に進める為に必要な”トンマナ”とは？
2018.04.28
こんにちわ！4月もあっという間に終わりますね。
この春社会人になったばかりの新人デザイナーや新人ディレクター、社内のWEB担当の方は研修も一通り終わり、いよいよ実務に入っている頃でしょうか。
今回はそんな新社会人の方に向け”トンマナ”についてまとめていきたいと思います。
トンマナとは？
ホルモンの名前のような呪文のような…そんな響きのトンマナですが、
正式名称は「トーン&マナー」です。
デザインに一貫性、統一感を持たせましょうという意味になります。
広告やブランド戦略において使われる言葉ですが、今回はWEBデザインというフィールドで、このトーン&マナーがどうして必要なのか、その重要性も含め説明していきます。
トンマナ設定の重要性とは？
トンマナの重要性は主には2つあります。
1つ目は、エンドユーザーに対して、こちらが意図したメッセージをより明確で印象的なビジュアルで伝える事が出来る点です。
裏を返せば制作するデザイナー側としても、意図から外れる事のないデザインを提案出来るというわけです。
また、WEBサイト内でバナーを量産したり、広告バナーなどいくつかの媒体へ展開があった際にもトンマナさえ守れば、一貫性を保つ事が出来る為、結果、エンドユーザーにひとつのブランドとして、より印象付ける事が可能となります。
2つ目は、ディレクターやデザイナーはもちろんクライアントも含めたチーム全員で同じゴールをイメージできる点です。
言葉からのイメージは人それぞれ千差万別です。
トンマナを設定し、人それぞれの”イメージ=ゴール”を共有する事で、クライアントから「あれもこれも」などと言った無茶な要望などが少なくなり、デザインFIXまで驚く程円滑進める事ができます。
トンマナの決め方
ではこのトンマナ、実際のように決めていけば良いのでしょうか。
まず必要なのは、商品やサービスの価値を洗い出す事です。
この時、シンプルで簡潔なキーワードを抽出していきましょう。
あまり複雑なワードはトンマナには向きません。ざっくりが良いです。
そして導き出した価値を表すキーワードを基に、色、フォント、形状のルール等を決めていきます。
言うならば、導き出したキーワードがトーンであり、色、フォントなどの決め事がマナーとも言えます。
ではそれぞれの決め方のポイントを見ていきましょう。
Webサイトの配色については下記の記事でも解説しています。
1.キーワードの選び方
ポイント：デザインを擬人化してみる
キーワードの選出方法として、擬人化するというのがとても良い方法なのでオススメです。
商材やサービスにもよりますが、設定しているターゲットに対し、
- 共感を得るようなターゲトと同じ立場のキャラクター
- ターゲットが聞く耳を持ちそうな先生的立場のキャラクター
- ターゲットの憧れるようなキャラクター
など、このような立場のキャラクターを設定し、そのキャラクターからキーワードを選出していきます。
例えば、コムデギャルソンを着るモードな20代女子をキャラクターとして設定した時に、そのキャラクターがLOUIS VUITTONのバッグを持っていたらどう思いますか？なんだか違和感を感じないでしょうか。
この違和感を持たせないように必要なのがトンマナなのです。
キーワードの選び方については下記の記事でも解説しています。
2.フォントの決め方
フォントにはある程度の共通したイメージがあります。
ポイント：擬人化されたキャラクターに合うフォントを選んでいく
ゴシック体・・・POP、力強い、安定感、カジュアル、親しみやすい
明朝・・・高級感、落ち着いている、誠実、信頼性
細い・・・スタイリッシュ、女性的
太い・・・力強い、堅い、男性的
同じゴシック体でも例えば、太めのゴシック体だと安定感や元気といった印象を与え、
細めのゴシック体は洗練された女性的な印象になります。
さらにここに色やジャンプ率の要素も加えていく事で、より明確なイメージを作り出せます。
▼関連記事
3.色の決め方
次に色の決め方です。
まずWEBサイトにおいて決めるべきカラースキームは主に5色です。
- メインカラー
- サブカラー
- 背景カラー
- リンクカラー
- テキストカラー
ポイント：ロゴマークがあればメインカラーに。リンク色にも注意
コーポレートサイトなどでは特にロゴマークの色を中心にスキームを作成するとまとまってきます。
またWEBデザイン特有ですが、リンクカラーは他の色とはっきりと区別出来る色を選びましょう。
スキーム作成に便利な配色ツールをこちらの記事で紹介しているので参考にしてみてください。
▼関連記事
4.その他
その他の要素としては、”四角形の角をどれぐらい角丸にするか”や”ホワイトスペースの取り方”など、デザインしていく上で意識する点を決める事も良いでしょう。
まとめ
トンマナはデザインに一貫性を持たせ、より明確にメッセージをターゲットに伝える為のビジュアを作る非常に重要なものです。デザイナーは基本的にこのトンマナに沿ってデザインを行うことで、効率的かつ効果的なデザインを作る事が出来るのです。
以上、WEBサイト制作を円滑に進める為のトンマナについてまとめました。
企業のWEB担当者、ディレクター、デザイナーの方の参考になれば幸いです。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
