デザイン会社が発信するLP制作情報メディア

トンマナとは?デザインに一貫性を出すために必要なこと

LPのデザインに関して
2022.6.6
トンマナとは?デザインに一貫性を出すために必要なこと
Webデザイン用語でよく耳にする「トンマナ」という単語。
これは「トーン&マナー」という言葉を省略して、使用されています。Web関連だけでなく、ブランド戦略などさまざまな場面で重要視されている要素です。本記事ではWebデザインやコンテンツ制作で重要なトンマナについて、解説したいと思います。

目次

トンマナの重要性とは?

トンマナの重要性とは?
トーン(tone)は「調子」、マナー(manner)は「やり方」という意味を持ちます。
その言葉の意味合い通り、デザインやコンテンツの雰囲気や世界観などを統一させようと使用されている言葉です。企業ブランディングにおいても重要な要素と捉えられ、トンマナを意識した制作が求められています。
では、なぜさまざまな場面でトンマナが重要視されているのでしょうか。

明確に意図を伝えられる

トンマナを揃えることで、企業や制作側がターゲットに与えたいメッセージや印象をデザインで伝えることができます。
企業ブランドのイメージや、商品の魅力などを一貫した表現やデザインで制作することでユーザーたちも理解しやすく、視認しやすい傾向にあります。
文体やデザインがページを替えるごとに異なっていると、理解してもらえなかったり、サイトやページから離脱してしまったりと、購買機械の損失を生み出してしまいます。ターゲットに明確に訴求するためにも、トンマナを揃えたデザイン制作が必要です。

制作側のイメージが揃う

ユーザーにとってだけでなく、制作するチームや担当者にとってもトンマナを揃えることは重要です。ページを制作することを企画した担当者と制作者側での認識のズレがあれば、コンセプトと異なるデザインやビジュアルが採用されてしまうこともあります。
チーム全体でトンマナを統一することで無駄なく、一貫性のあるデザイン制作や運営が行えます。

トンマナの設定方法

トンマナの設定方法
ターゲット層やカラー、キャッチコピーなどからトンマナは設定されていきます。関係する担当者たちからユーザーまでが、同じ認識を持って商品の購入や問い合わせなどに進めるように設定しなくてはいけません。

商品価値やブランドのイメージを明確化

商品価値やブランドのイメージを明確化
まずは自社製品や売り出したい製品の価値、魅力を明確な表現で認識しましょう。幾つかのポイントを提示し、最も推奨したい内容を共有します。同じくブランドとして、消費者やユーザーに抱いてほしいイメージも共有しましょう。イメージや製品価値は、曖昧なニュアンスで理解してしまっていると、トンマナが揃わずに不自然な印象を与えてしまいます。

キーワードを選定

上記で判明した価値やイメージを、明確な言葉や表現にしましょう。例えば「自然素材」の製品を販売するのに「自然」の素材なのか「天然」の素材なのか。言葉のニュアンスだけでもユーザーがイメージする製品が異なってきます。「上質」と「高級感」や、「定番」と「鉄板」など類似した単語が並んでいると、価値や魅力が伝わり辛くなってしまいます。製品やイメージに明確に合った単語を選定し、一貫して選んだ単語を使用するようにしましょう。

ターゲットやキーワードに合ったデザイン要素を設定

選定したキーワードに合ったビジュアルやフォントを使用しましょう。コンテンツ内容とイメージの合わないデザインは、購買意欲を低下させてしまったり、商品理解につながりません。またターゲットにそぐわないデザインも購買機会の損失を発生させてしまいます。選定したキーワードを意識しながら、レイアウトやカラーを設定していきましょう。

Webデザインで必要なこと

Webデザインで必要なこと
トンマナを揃える重要性を解説してきましたが、Webデザインでは一貫性を持った制作が重要です。
一貫性を保つために、トンマナと合わせて次の3つのポイントを意識して制作しましょう。

配置

視線は左から右へ、上から下へと移動することが一般的です。この移動法則に則ってコンテンツを配置するようにしましょう。さらに左揃え・中央揃え・右揃えとコンテンツやテキストの配置始めは揃えることも大切です。ユーザーの視線がバラバラと動く配置はトンマナが揃わず、一貫性のないサイトとなってしまいます。

配色

赤や青、緑といった原色は認識しやすい色なため積極的に使用したい色ですが、その反面で目立ちすぎるという問題もあります。乱用しすぎてしまうと、重要視させたいコンテンツがどこか分からずに、他のコンテンツとの差別化ができないことがあります。配色は多くても3色ほどに抑えて、読みやすいページ制作を行いましょう。

余白

コンテンツやビジュアルを詰め込むと重厚感があり、内容の厚みも増やせます。関連したコンテンツはなるべく同じグループとしてまとめ、違うコンテンツを紹介する際はしっかりと余白を取って配置しましょう。余白が多すぎてしまうと内容の薄いページに見えますが、有効的にスペースを取ることで見やすく、分かりやすいデザインになります。

まとめ

さまざまな場面で用いられるトンマナは、揃えることでデザインの一貫性を演出してくれます。その他にもコンテンツの配置場所や配色展開、余白の有効活用など良質なデザインにするためには多くの要素を取り込んでいます。
まずはトンマナを揃えられるようにイメージを明確にしてからキーワードを選定しましょう。
この記事を書いたライター
LPの制作に特化したデザイン会社(LP制作実績)。累計では数千LPデザインを手掛けております。すべて内製化しており、構成からデザイン、コーディングまですべてご対応可能です。各種サーバーのご対応はもちろん、楽天市場、ヤフーショッピングなどのモール系などへの反映もご対応可能です。
この記事の画像を作成したデザイナー
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ
    mitekaku