デザイン

Webサイトの「らしさ」を決定するトンマナの役割とは?

Maki Aman 著者名:Maki Aman
Webサイトの「らしさ」を決定するトンマナの役割とは?

Webサイト制作において、Webサイトの印象を決めるデザイン決定に頭をかかえているWeb制作担当者も多いことでしょう。

Web制作の初期段階でぶつかる壁なだけに、「よく考えないまま焦ってデザインを決めてスタートさせてしまった」というWeb制作担当者がいることも事実です。

しかし、「それっぽい」といった感覚でデザインを制作してしまうと、記事コンテンツを追加していくごとにまとまりのないWebサイトになってしまい、Webサイトに訪問したユーザーの離脱率を上げてしまう可能性があります。

その原因には、記事コンテンツに含まれる文章やデザインが「書き手の自由なイメージ」によって制作されてしまうことにあるのです。

そうしたリスクを排除するためには「トンマナ」の作成が必須です。

後々大規模なサイトリニューアルを行わないためにも、Web制作初期の段階で作成手順を覚えておきましょう。

トンマナとは

Web制作やWebデザインの現場でよく耳にする「トンマナ」とは「トーン&マナー」の略称であり、デザイン制作や文章作成の際に基準となる「ルール」のことを意味します。

GoogleやYahoo!といった大手検索エンジンでキーワードを入れ、上位検索されるサイトをクリックしてみると、「統一感のあるサイト」や「やわらかい印象を受けるサイト」などが表示されます。

こうしたWebサイトを運営している個人やチームは、そのWebサイトにおけるトンマナを予め作成している可能性が高く、特にオウンドメディア運営では必ず存在しているといっても過言ではないでしょう。

では、Webサイトの統一感や「らしさ」を決定づけるトンマナが、Webデザインにおいてどのような役割を持つのかを見ていきましょう。

Webデザインにおけるトンマナの役割

Webデザインにおけるトンマナの役割には大きく分けて2つの効果があります。

まずはWebサイトを利用するユーザー向けのメリットを知っておきましょう。

ユーザーへの印象づけ

Webサイトにおけるデザインをルールにしたがって作成することができれば、Webサイトには統一感が生まれます。

この統一感が、Webサイトに訪問するユーザーの「Webサイトに対する印象」を決定づけることになるのです。

例えばWebサイト内の記事コンテンツが20記事あったとして、その1つ1つのアイキャッチ画像のテイストが異なり、記事内の文体がバラバラだった場合を想像してみて下さい。

とても統一感のあるサイトとは思えません。

ほかにも同じ意味の言葉が漢字と平仮名の両方で記述されていたり、誤字・脱字があったりすれば、サイトに訪れたユーザーは「このサイトの情報を信用して大丈夫だろうか」という不信感に駆られるでしょう。

つまりWebサイトに使用するデザインに一定のルールを設けることができれば、Webサイトに統一感といった演出を生むだけでなく、訪問するユーザーに「信頼できるサイト」として認識してもらうことができるのです。

ユーザーはWebサイトのコンテンツを閲覧しますが、その先で運営をしている人間が誰なのかを気にしていることも忘れないようにしましょう。

一定の品質を維持できる

トンマナを作成するメリットは運営側にもあります。

それは制作するコンテンツごとで品質に差が生まれないようにすることです。

トンマナにはデザインに使用する「色」や「フォント」、Webサイトの雰囲気に合わせた「キャラクター設計」、文章作成の基本構成など、様々なルールが盛り込まれます。

コンテンツの制作者が自分のイメージのまま作り上げるのではなく、基準となるトンマナ(ルール)を意識しながら制作することで、成果物の品質に差が生まれにくくなります。

テーマや制作するコンテンツによってどうしても差が生まれてしまう場合はありますが、納品物の修正工数や記事品質の担保を考えると、トンマナが及ぼす影響は計り知れません。

トンマナの作成手順

デザインや文章作成のルールとして作成されるトンマナですが、どのように作成すれば良いか分からないWeb制作担当者もいることでしょう。

ここからはトンマナ作成の1つの手順を紹介していきます。

商品・サービスの価値を再確認する

トンマナの作成にはいくつかの段階が必要といわれます。

まずはWebサイト運営でゴール(コンバージョン)となる商品や提供サービスの価値について再確認しましょう。

「自社が売りにするサービスとは何か」「Webサイトに訪問するユーザーにどのようなゴールを期待するか」について考えてみると良いかもしれません。

そうすれば大まかではありますが、制作するWebサイトのイメージが湧くはずです。

よりイメージを具体的なものにしたい場合には、同じジャンルの競合サイトや検索上位サイトを参考にしてみましょう。

同じジャンルのWebサイトがどういった雰囲気を持っているのかを確認することで、制作するWebサイトのアイデアが湧く可能性があります。

ターゲットユーザーを定める

トンマナ作成時に、商品・サービスの価値を再確認するのと同等に重要なのが「ターゲットユーザーを定めること」になります。

既に「ペルソナ」や「カスタマージャーニー」を設定している場合には、そのまま応用するのがおすすめです。

Webサイトに訪れてほしいユーザーがどのような人物なのかで、同じジャンルでも制作するべきトンマナは変化します。

「らしさ」に沿ったデザイン・フォントを決める

商品・サービスの価値を再確認し、ターゲットユーザーが決まった後は、制作するWebサイトの「らしさ」がある程度見えているはずです。

そこから「らしさ」に沿ったデザイン・フォントを考えていきます。

Webサイトを印象づける「色」や「フォント」を他サイトと差別化しながら、機能性にも考慮するなどして決定しましょう。

表記を統一する

Webサイトに統一感を持たせるためにはデザインにおけるルール設定はもちろんのこと、文章作成の記述ルールも決めておかなくてはなりません。

記述ルールとして代表的なのが文末表現である「です・ます」や「だ・である」の使い分けです。

書き方1つで「やわらかさ」や「誠実さ」といった印象を決定づけます。

また「使用頻度の高い語彙」の書き方を統一することも重要です。

送り仮名の使い方や接続語(「しかし」と「しかしながら」)などの使用なども統一すると良いでしょう。

Web制作過程において「表記統一ガイドライン作成」というものがありますが、作成していないWeb担当者は「トンマナ作成時」に項目として盛り込んでおきましょう。

表記統一についてルールを決めておくと「記事コンテンツ作成の外注」といった際に、ライターへそのまま「記事作成ガイド」として提供することができます。

SEO対策としてのトンマナ作成

上記に挙げた項目のほかにも、記事の構成方法や文字数制限、使用必須キーワードといった項目も盛り込まれるトンマナにはSEO対策としての効果もあります。

ルールや決まり事として認識されるトンマナですが、SEO対策としても重要であることを認識しておきましょう。

(画像はPixabayより)

Maki Aman

この記事を書いた人

著者名 Maki Aman

デザイナー、エンジニア、マーケターの経験を活かし、経営戦略からWEB企画(制作・開発・広告) までを幅広く担当。企業コーポレートサイト、ロゴデザイン、ブランディング、開発ディレクション、アニメーションなど現場でのデザインと実装など対応領域は多岐にわたる。新規事業立ち上げやコンサルティングの経験も豊富。3児の母。 15 年間、さまざまな企業のサービス起ち上げ、ブランディング活動に携わってきました。さまざまな立場や環境によって人の目線は変わるものですが、どのような角度から見たときにも、企業の明るいビジョンが描ける立体的な活動がしたいと思っています。 透きとおった心で、明るい未来を描き、美しい世の中をデザインするために活動中。 ・オルタナグリーンオーシャン大賞受賞 ・DXからXRの世界へMinimumVariableProduct(著書)

おすすめの記事

未来をつくる経営者を支援します