ルールを決めてデザインする。Webサイト制作で取り入れたい「トンマナ」設計のコツとポイント

トンマナとは？

こんにちは。i3DESIGNのデザイナー藤木です。

今回はWebサイト制作において重要な要素であるトンマナについてお話します。

トンマナとはトーン＆マナーを略した言葉で、「デザインの一貫性・統一性を保つためのルール」のことを指します。

印象に残るWebサイトには意図的にトンマナの設計がされています。

デザイナーは依頼を受けてからなんとなくデザインを考えていくわけではありません。より魅力的なデザインを作るためには、現状の課題やプロジェクトのコンセプトなどを明確にしてデザイン全体のルールを作り、世界観を固めていくステップが必要になります。このデザインのルール作りがトンマナの設計になります。

トンマナを設計する

まず初めにトンマナの設計の仕方を説明していきます。以下の手順を踏むと作りやすいので参考にしてみてください。

1.ターゲットを描く

例えば、カフェのWebサイトを作りたいとき、「筋トレが趣味で健康志向な女性がターゲットの渋谷にあるカフェ」と「かわいいもの好きでインスタをよく利用する10代学生がターゲットの原宿にあるカフェ」では、同じカフェでもターゲットの年齢・性別・ライフスタイルによって、デザインの方向性が変わっていきます。ターゲットに響くデザインを考えるために、この工程でターゲットをしっかり絞り込みましょう。

2.サービスの価値を考える

次にトンマナを設計する上で軸となる、ブランドや商品の「サービス価値」を導きだします。サービス価値を考えるためにプロジェクトのコンセプトや、サービスの目的は何なのかを具体的に整理し言語化していきます。

3.キーワードを導き出す

サービスのターゲットやサービス価値をもとに、デザインで重視したいキーワードを抽出します。キーワードは「ナチュラル」「優しい」「柔らかい」「力強い」「クール」などシンプルで簡潔な言葉がおすすめです。ある程度キーワードが出たら、よりイメージに近いキーワードをいくつかピックアップします。

4.ムードボードを作成する

ピックアップしたキーワードからイメージを膨らませ、ムードボードを作成していきます。（ムードボード：ビジュアルの世界観が伝わるように、写真やイラストを集めてコラージュしたもの）

ムードボードを作ることでより詳細にビジュアルの方向性を詰めていくことができます。また、関係者間で認識を合わせる際にムードボードを使うことで方向性のズレが生じにくくなるというメリットもあります。ムードボードは3枚程度を目安に作成し、どのムードボードがイメージに合っているのかを較検討していくのが良いです。

ムードボードの作成を複数人で行う場合は共同で編集できるFigmaやInVisionのboard機能を使うことをおすすめします。

トンマナの大枠が決定したら具体的なデザインを詰めていきます。