Webデザイン制作においてトーン&マナーが重要な理由とトンマナの種類

クライアントが抱えている問題を理解し、Webサイトを制作することになったとします。

ゴール設定や、ターゲット設定も明確になったら、いよいよWebデザインの作成を開始しましょう。「開始」と言いましても、いきなりデザインツールを使用して色や形を作っていくということはしません。ここでも、手を動かす前にやらなければいけないことがあります。

Webデザインを作成するといっても、その方向性はいろいろあります。まずはWebサイトの雰囲気、色使い、メッセージなどを決めていきましょう。Webサイトの世界観を決めておかないと、どこに向かってデザインを作成しているのか分からなくなり、迷子になってしまいます。

デザインには「一つだけの正解」がありませんが、Webサイトとして世に出す成果物はたった一つです。 「おそらくこの方向であろう」という仮設を立て、そこに向かってデザインを組み立てていくしか方法はありませんから、最初に世界観を設定しておかないと、制作者も依頼者も寄りどころが無く、出来上がったデザインの良い悪いが判断できなくなってしまいます。

Webサイトの世界観、雰囲気、体裁などを表すために「トーン&マナー」という言葉をよく使います。「トンマナ」と 略して使用されることもあります。

Webサイトのコンテンツは、主に「文章」と「写真」です。それに「画面構成」を加えた3つの要素のトンマナをどう決めていくかで、Webデザインの方向性が決まります。

文章のトーン&マナー

文体や言葉遣い、選択するワードのことです。 例えば、同じ意味の文章でも「ROI / 費用対効果」どちらの言葉を選択するのかによって、文章の雰囲気が変わってきます。Webサイトの専門性やターゲット等によって、文章のテイストを調節する必要があります。

写真のトーン&マナー

写真の被写体や撮影方法、色合い等のことです。 人物の写真を使うとしても、笑顔なのかシリアスな表情なのかでは、Webサイトの雰囲気がガラっと変わってきます。写真から受け取る印象は大きいですから、特に気をつけたいポイントです。

クライアントから支給された写真が使用できるとは限りません。現実的には、あまり期待しない方が良いかと思います。 解像度の低い、ピンぼけしている等は分かりやすい例ですが、しっかり撮影されているのにも関わらず、魅力的でない写真という場合もありますので、しっかりと見定めましょう。

トンマナに合う写真が提供されない場合は、Webデザイナーが写真素材を用意する必要があります。選定や撮影のための予算を確保しておく必要がありますので注意が必要です。Webサイトのトーン&マナーに最適な写真を見つける方法は後述しようかと思います。

構成のトーン&マナー

レイアウトやWebサイトの構成です。 画面を大きく斜めに区切ると、ダイナミックでスポーティな感じが出ますし、左右対称にすると落ち着いた雰囲気が出ます。また、1ページに収まる情報量をコントロールすることで、異なる雰囲気を作り出すこともできます。 レイアウトパターンについても、後の記事で解説します。