「商品を売る、認知度を上げる、問題を解決する...」など、Webサイトは様々な目的で作成されますが、その全てにおいて「情報の伝わりやすさ」はとても大切です。
情報が伝わりやすいwebサイトを作成する方法の一つとして「トンマナ」を揃えることが挙げられます。

「ユーザーに覚えられるWebサイトを作りたい...!」
「サイトで売上や成果をあげたい...!」

そうお考えの方に、この記事ではWebサイト制作におけるトンマナの要素や、設計のコツについて解説します。弊社では「ただデザイン成果物を作る」ということではなく「戦略作りやマーケティング」といった観点を取り込み、クライアント様に寄り添ったECサイトやWebサイト制作を承っております。ぜひこの記事を読んで、自社を一目で認識させる色使いの組み合わせを考えてみてください。

トンマナとは？

「トンマナ」とは、Webサイトやアプリの設計において重要な要素として注目されているデザインの概念です。この言葉は「トーン」（色調）と「マナー」（様式）を略した言葉で、デザインに統一感を出すために一貫して使うルールのことを指します。

トンマナ設計における2つの大きなメリット

ブランドアイデンティティが一目で伝わるようになる！

統一したデザインはブランドアイデンティティを強調し、企業や製品を差別化させます。
ユーザーがサイトやアプリに訪れた瞬間に「あの会社か！」と、色使いやフォントを見てブランド名が思い浮かぶ状態にすることで、ブランドに対する親近感や信頼感を構築します。

制作の効率が上がる！

トンマナ設計には、制作の効率が上がるというメリットもあります。制作の方向性を揃え、プロジェクトに関わるメンバー同士の共通認識をとることで、イメージの「ズレ」を防ぎ、制作をスムーズに進めることができます。
トンマナ設計には手間や時間がかかりますが、特に複数人が関わる場合は、トンマナを設計することがとても大切です。

自社を一目で伝える！トンマナを設計するコツ

カラー選びは1番大切！

コカコーラは赤、ポカリスエットは青など、商品名や企業名を思い浮かべたときに色を連想する方も多いのではないでしょうか。
ユーザーに自社や製品を覚えてもらう際、色の役割は最も効果的かつ重要です。

サイトに使用するカラーを選ぶ際は、ユーザーにごちゃごちゃした印象を与えないようベースカラー70％、メインカラー25％、アクセントカラー5％の3色に抑えることがオススメです。

ベースカラーは、主に背景や余白などに使用されます。ベースカラーを選ぶ際は、与えたいイメージに合わせて、メインカラーとのコントラストや調和を意識しましょう。
メインカラーは、主要なコンテンツやテキストに活用され、ブランドのアイデンティティを強調します。主にロゴやブランドカラーがそのまま使用されます。
アクセントカラーは、ボタンや強調すべきポイントに使われます。目を引く役割を果たすため、アクセントカラーは多用しすぎないことが大切です。

フォントは読みやすさ重視！

前述した通り、売上や成果につながるサイト制作には情報の伝わりやすさがとても大切です。使用するフォントを選ぶ際は「選びすぎない」「デザインより読みやすさ」を意識しましょう。読みやすく、さらにサイトの雰囲気と合うフォントを選ぶことで、よりブランドに対する親近感を沸かせることができます。

定番フォントに関する記事はコチラ！

インタラクションもイメージにつながる！

マイクロインタラクションは、ユーザーがアプリケーションやウェブサイトで行う小さなアクションに対するフィードバックのことを指します。
例えば、ボタンをクリックした際、ボタンがふわっと膨らむようなエフェクトだと柔らかい印象を与えることができますが、ボタンが急速に拡大縮小するアニメーションを使用すると、疾走感を感じさせることができます。

トンマナ設計で認知力の高いブランド3選

ニトリ

https://www.nitori-net.jp/ec/

「お、ねだん以上」で知られるニトリは、コーポレートカラーであるエメラルドグリーンが印象的です。
「安心感」や「落ち着き」を象徴するコーポレートカラーを強調するため、背景はグレーや白で控えめに設定されています。

チキンラーメン

https://www.chickenramen.jp/

「チキンラーメン」と聞くとパッケージのオレンジと茶色が頭に思い浮かぶ方も多いと思います。このサイトは、ベースカラー、メインカラー、アクセントカラー全てが商品パッケージに使用されており、配色からチキンラーメンらしさを感じさせられます。

マクドナルド

https://www.mcdonalds.co.jp/family/

以前のマクドナルドは「赤色」のイメージが特徴的でしたが、近年では、洗練された心地よいデザインの店舗が増加しました。
公式サイトでは、あえてアクセントカラーを赤色、背景を白色にすることで近年の洗練されたシンプルなイメージを表現しています。


このように、トンマナを徹底的に統一している企業は、会社・製品・広告・店舗すべてに一貫性があり、消費者としてもその会社のものだと認知しやすくなります。
しかし、ロゴのフォントが特徴的な企業でも、サイトの文章では読みやすくシンプルなフォントを使用していることが多く、デザイン性よりも読みやすさを重視する方が大切だといえるでしょう。
また、色は最も記憶しやすい要素なので、メインカラーにはコーポレートカラーを使用するなど、サイトの配色は慎重に考えましょう。

まとめ

この記事では、トンマナ設計のメリットやコツ、トンマナ設計により認知度の高い企業について紹介しました。
トンマナを設計するには手間や時間がかかりますが、一度方向性を定めることで、一目でブランドを認知してもらうことや、よりサイト制作の効率を上げることができます。

売上や成果など、数字につながるサイトには前提として「情報の伝わりやすさ」が不可欠です。たとえロゴのフォントが特徴的でも、Webサイトではデザイン性よりも識字性の方が大切です。また、色は最も消費者の記憶に残りやすい要素なので、ベースカラー、メインカラー、アクセントカラーなどの色選びは慎重に行いましょう。

弊社クオーツでは「ただデザイン成果物を作る」ということではなく「戦略作りやマーケティング」といった観点を取り込み、クライアント様に寄り添ったECサイト制作を承っております。トンマナ設計は、ブランディングに大きく影響するので、数字につながるWebサイトを制作したい方はぜひ一度無料相談をご活用ください。