WEBサイト制作を円滑に進める為に必要な”トンマナ”とは?

Webサイト制作
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やWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。