執筆者
國嶋利幸 ｜ 代表取締役・株式会社ORENCH
Webデザイン・LP制作600件超の実績を持ち、D2C・食品・美容・健康領域を中心にランディングページと自社サイトの設計を手がける。市場分析からコンセプト設計、コピー、デザイン、公開後の改善までを一貫して担当。自社でもD2Cブランドを運営し、「作って終わり」ではなく数字が動くまで伴走する制作を行っている。
主な実績
本記事は株式会社ORENCH（福岡・Webデザイン／LP制作）が制作しています。
この記事の要点
トーン&マナーは、印象語（「信頼感」「やさしい」など）を決めた時点ではなく、それを「照合項目」——制作物と見比べたときに第三者が判定できる形の決めごと——に書き直した時点で初めて決まる。印象語は解釈の幅が広く、制作者が替わるたびに見た目がばらつく。公的な基準（WCAG 2.2など）を照合項目に活用することで、その判定を属人的な感覚から切り離せる。
「なんとなく雰囲気で伝えたら、また違うものが上がってきた」
制作を発注してきた人が、打ち合わせでぽつりと言う言葉がある。悪いデザインではない。でも、前回のバナーとも、LPとも、どこかがズレている。その「ズレ」の正体に気づかないまま、修正を重ねていく——そんな状況が、Web集客に力を入れているほど長引きやすい。
この記事では、「トーン&マナーが決まった」と言える状態とは何か、なぜ印象語だけでは制作物がばらつくのか、そしてどう書き直せば複数の制作物を統一できるのかを、現場の観察をもとに整理する。
目次
トーン&マナーが「決まった」と言えるのは、印象語ではなく照合項目が書かれたとき
印象語と照合項目の違い
「信頼感のあるデザインで」「やさしい印象で」「読みやすく」——これらはすべて印象語だ。ブランドとして目指す雰囲気や方向性を言葉にしたもので、トーン&マナーを決める出発点として欠かせない。
だが、印象語を決めただけでは、制作者に「判定できる基準」が渡っていない。
照合項目は、印象語を「見比べて判定できる形」に書き直したものだ。たとえば「読みやすい」であれば、「本文と背景のコントラスト比が4.5:1以上である」という形になる。制作物を手に取り、この項目と照らし合わせれば、守られているかどうかを第三者が判定できる。印象語と照合項目は、目的も役割も別のものだ。印象語は方向を決め、照合項目はその方向が守られているかを判定する。
なぜ「決まった」と言える基準が必要なのか
多くのLP・Webサイト制作の現場を見てきて、気づいたことがある。同じ「信頼感」という印象語を共有しているはずなのに、制作者が替わったり、担当が変更されたりするたびに、制作物の見た目が少しずつ揺れていく。
発注側と制作側の両方の現場を経験してみると、その理由がよくわかる。「信頼感」という言葉が、発注側と制作側の頭の中で、別々の映像を呼び起こしているのだ。どちらも悪意はない。ただ、判定できる共通基準がないと、解釈は人の数だけ分岐する。
「決まった」と言えるのは、照合項目が書かれたときだ。
印象語だけでは、発注側と制作側で思い浮かべるものが違う
「信頼感」という言葉が、人によって別の色を指す
「信頼感」と言ったとき、頭に浮かぶ色は何だろう。ネイビーブルーを思い浮かべる人もいれば、グレーを選ぶ人もいる。白を基調とした清潔感を「信頼感」と結びつける人もいる。
フォントはどうか。明朝体を選ぶ人と、ゴシック体を選ぶ人が同じ「信頼感」という言葉を共有していることは、珍しくない。レイアウトの密度——情報を詰め込むことで信頼性を示したいと考える人と、余白を多く取ることで誠実さを表現したいと考える人も、両方いる。
印象語は、伝える側と受け取る側の間で、解釈の幅が広がりやすい。発注側がイメージしているものと、制作側が作り上げるものがズレるのは、どちらかの感覚が間違っているのではなく、判定できる基準が共有されていないからだ。
制作者が替わると、同じ「やさしい」が別の見た目になる
「やさしい」という印象語に対して、ある制作者はパステルカラーと丸みのあるフォントを選ぶ。別の制作者は、人物写真を多用し、手書き風の要素を取り入れる。どちらも「やさしい」という言葉を忠実に解釈した結果だ。
複数の制作物を異なる人が担当するとき——LP、バナー、SNSのビジュアル——それぞれの担当者が自分なりの解釈で制作すると、並べたときに別々のブランドに見える。これはデザインの技術の問題ではない。共有されているのが印象語だけで、照合項目がないことの問題だ。
照合項目への書き直し方：「何を・どの範囲で・何と比べて」を明記する
「読みやすい」を照合項目に書き直す
「読みやすい」という印象語を、判定できる形に書き直すとき、問うべきは「何を見れば守れていると判定できるか」だ。
たとえば次のような照合項目が考えられる。
- 本文と背景のコントラスト比（見比べて数値で確認できる）
- 文字サイズ（本文テキストのサイズが指定の範囲内か）
- 行間（詰まりすぎていないか）
公的な基準が存在するものについては、その基準をそのまま照合項目にできる。コントラスト比については、W3Cが策定した「Web Content Accessibility Guidelines（WCAG）2.2」に具体的な達成基準が定められており、これを照合項目として採用することで、主観に頼らない判定が可能になる（WCAG 2.2については後の章で詳述する）。
「親しみやすい」を照合項目に書き直す
「親しみやすい」のように、公的な基準が存在しない印象語については、自社で判定基準を決める必要がある。
たとえば：
- 使う角丸の大きさ（ボタンや画像の角丸をどの程度まで許容するか）
- 写真の種類（人物写真を使うか、風景か、イラストか）
- 語尾の統一（ですます調かどうか、話しかける言葉遣いをするかどうか）
「自社で決める」と明記することも、照合項目の一部だ。根拠のない数値を設定するより、「この項目は自社の判断で決める」と示したほうが、制作者にとって正直な指針になる。
印象語を照合項目に書き直す例
| 印象語 | 照合項目に書き直した例 | 判定の根拠 |
|---|---|---|
| 読みやすい | 本文と背景のコントラスト比 4.5:1 以上 | WCAG 2.2 達成基準1.4.3 |
| 読みやすい | サイズの大きなテキストと背景のコントラスト比 3:1 以上 | WCAG 2.2 達成基準1.4.3 |
| 押せると分かる | ボタンと周囲の色のコントラスト比 3:1 以上 | WCAG 2.2 達成基準1.4.11 |
| 迷わせない | 必須項目やエラーを色だけで示さず、文字でも示す | WCAG 2.2 達成基準1.4.1 |
| やさしい印象 | 使う角丸・写真の種類・語尾を、見比べて判定できる形で書く | 自社で決める |
色は、雰囲気より先に「読めるかどうか」で判定する
コントラスト比が照合項目になる理由
ブランドカラーを決めるとき、「この色がブランドのイメージに合う」という判断は自然だ。しかし、色を選ぶ前に確認すべき問いがある。「その色で書かれたテキストは、読めるか」——これだ。
W3Cが策定した「Web Content Accessibility Guidelines（WCAG）2.2」の達成基準1.4.3には、テキストと背景のコントラスト比について以下が定められている。
- 通常のテキストと背景のコントラスト比は、少なくとも 4.5:1
- サイズの大きなテキスト（WCAG 2.2の定義では少なくとも18ポイント、または14ポイントの太字）と背景のコントラスト比は、少なくとも 3:1
また、達成基準1.4.11では、ボタンなどのユーザインタフェース部品や、理解に必要な図の部分について、隣接する色との間で少なくとも 3:1 のコントラスト比を確保することが定められている。
（出典：W3C「Web Content Accessibility Guidelines (WCAG) 2.2」、ウェブアクセシビリティ基盤委員会「WCAG 2.2 日本語訳」）
色の雰囲気を語る前に、まずこの基準を照合項目に書き込む。それが、「読めるかどうか」を客観的に判定できる状態だ。
ロゴやブランド名の文字には、コントラストの要件がない
WCAG 2.2 達成基準1.4.3は、ロゴまたはブランド名の一部である文字には、コントラストの要件がないと定めている。
これは、ブランドアイデンティティとしてのロゴデザインの自由度を認めたものだ。ただし、本文・ボタン・フォームラベルなど、情報を伝えるためのテキストには基準が適用される。ブランドカラーをそのままテキストに使用する場面と、ロゴ以外で使用しない場面を整理しておくことが、照合項目を書く際の判断基準になる。
（出典：W3C「Web Content Accessibility Guidelines (WCAG) 2.2」、ウェブアクセシビリティ基盤委員会「WCAG 2.2 日本語訳」）
色だけで意味を伝えない：必須項目やエラーは文字でも示す
色を、情報を伝える唯一の手段にしない
フォームの必須項目をラベルの赤色だけで示している——こうした設計は、Webフォームでよく見かける。しかし、色を情報を伝える唯一の手段として使うことには、見落としやすいリスクがある。
WCAG 2.2 達成基準1.4.1には、「色を、情報を伝える・動作を示す・反応を促す・要素を見分けるための唯一の視覚的手段として使わない」と定められている。
実務上の意味は明快だ。たとえば：
- 必須項目であることを赤色だけで示すのではなく、「必須」という文字も添える
- エラーメッセージを赤枠だけで表示するのではなく、エラーの内容を文字で書く
これはアクセシビリティの話であると同時に、デザインの明確さの話でもある。色が見えにくい環境でも、文字があれば意味が伝わる。情報の伝達が色に依存していると、環境や状況が変わったときに意味が消える。
（出典：W3C「Web Content Accessibility Guidelines (WCAG) 2.2」、ウェブアクセシビリティ基盤委員会「WCAG 2.2 日本語訳」）
照合項目として「色だけで示さない」を書く
この決めごとを、トーン&マナーの照合項目として書くとすれば、次のような形になる。
「必須項目・エラー・警告を色だけで示さず、文字でも示す」
制作物を見比べるとき、フォームの必須ラベル、エラー表示、ボタンの状態変化を確認し、文字での表示が添えられているかを判定する。照合項目としてこれが書かれていれば、制作者が異なっても、同じ基準で確認できる。
制作物が増えるほど、照合項目の効果が高まる理由
LP・広告・SNS…複数の制作物で統一が必要になる
多くのLP・Web制作の現場を見てきて、ある傾向が見えてきた。制作物が1つだけのうちは、印象語だけでもなんとかなることが多い。発注側と制作側が同じ人間同士で、頭の中のイメージが近ければ、1回の制作はまとまる。
しかし制作物が増えると、状況は変わる。LPを作り、バナーを作り、SNS投稿のビジュアルを作り、さらにメールのヘッダーを作る——それぞれを別のタイミングで、場合によっては別の制作者が担当すると、印象語だけを共有した状態では見た目がばらつきやすくなる。「なんとなく揃っていない感じ」の正体は、ほとんどの場合ここにある。
照合項目があれば、制作者が替わっても統一できる
照合項目が書かれていると、何が変わるか。制作者に「判定できる基準」が渡るので、制作者が替わっても、その基準に照らし合わせれば同じ方向を向いた制作物が生まれやすくなる。
制作物が増えるほど、この効果は積み上がる。1つの制作物のためだけに照合項目を書くコストは確かにかかる。しかし、その照合項目が2本目のLP、3本目のバナー、4本目のSNSビジュアルに使われ続けるとしたら、初期に書いた分が何度も機能する。
「デザインの一貫性」は感覚の問題ではなく、照合項目という仕組みの問題だと私は考えている。
デザインシステムの考え方から学べること
公開されているデザインシステムの目的
「照合項目を作る」という発想は、実は大きな組織がすでに実践していることでもある。
デジタル庁は、ガイドラインやデザインデータ等をまとめた「デザインシステム」を、官民を問わず誰でも参照できる形で公開している。その目的として、使い勝手・情報の探しやすさ・アクセシビリティの向上を掲げている。（出典：デジタル庁「デザインシステム」）
複数の担当者・複数の制作物にわたって一貫した品質を保つために、判定できる基準を文書化して共有する——これがデザインシステムの考え方の核心だ。
トーン&マナーとデザインシステムの関係
トーン&マナーを照合項目に書き直すことと、デザインシステムの考え方は共通している。自社でゼロから体系的なデザインシステムを構築しなくても、「照合項目を書く」という発想だけ借りることはできる。
参考にするのは、方向性までだ。デジタル庁のデザインシステムであれ、他の公開されたガイドラインであれ、配色・レイアウト・画像をそのままコピーすることは避ける。自社のブランドのトーン&マナーと照合項目に落とし込み、自社の制作物に反映させることが重要だ。考え方を参考にして、中身は自社で育てる——これが実務での姿勢になる。
読者からよく聞かれるトーン&マナーのFAQ
Q. トーン&マナーとデザインガイドラインは、何が違うのですか？
トーン&マナーは、ブランドの印象や雰囲気を決めるもので、印象語（信頼感、やさしい、など）から始まります。一方、デザインガイドラインは、その印象語を実現するために、色・フォント・レイアウトなどの具体的な決めごとを書いたものです。この記事で説明している「照合項目」は、デザインガイドラインの一部であり、制作物と見比べたときに判定できる形で書かれた決めごとです。
Q. 印象語は、いくつ決めればよいのですか？
印象語の個数に決まりはありません。重要なのは、決めた印象語ごとに「何を見れば守れていると判定できるか」を照合項目に書き直すことです。印象語が3つでも5つでも、照合項目に書き直されていれば、制作物の統一性を保ちやすくなります。
Q. ブランドカラーがコントラストの基準に届かないときは、どうすればよいですか？
WCAG 2.2 達成基準1.4.3では、ロゴまたはブランド名の一部である文字には、コントラストの要件がないと定められています。ただし、本文やボタンなどのユーザインタフェース部品には、コントラスト比の基準が適用されます。ブランドカラーを使う場面を限定し、本文やボタンなどの読みやすさが必要な部分では、コントラスト比の基準を満たす色を使うことが重要です。
Q. 参考サイトのデザインは、どこまで参考にしてよいのですか？
参考サイトを見るときは、方向性（雰囲気や色の使い方の傾向）までを参考にしてください。配色・レイアウト・画像をそのまま使うことは避けましょう。参考サイトから学んだ方向性を、自社のトーン&マナーと照合項目に落とし込み、自社独自の制作物に反映させることが重要です。
Q. トーン&マナーは、誰が決めるべきですか？
トーン&マナーは、事業者側（発注側）と制作側が一緒に決めることが理想的です。発注側は「どんな印象を持ってほしいか」という方向性を示し、制作側はそれを「照合項目」という判定できる形に書き直します。発注側と制作側の両方の視点があることで、より実用的で統一しやすいトーン&マナーが完成します。
最後にひとつ、問いを置いておきたい。
自社のブランドについて、「どんな印象を持ってほしいか」という言葉は出てくるか。そして、「その印象が守られているかを、誰でも判定できるか」——これが出てこないなら、今夜の打ち合わせが終わった後の10分で、1つだけ照合項目を書いてみてほしい。印象語1つを選んで、「何を見れば判定できるか」を一行だけ書く。それが、トーン&マナーが「決まる」最初の一歩になる。
参考資料
- W3C「Web Content Accessibility Guidelines (WCAG) 2.2」
- ウェブアクセシビリティ基盤委員会「WCAG 2.2 日本語訳」
- デジタル庁「デザインシステム」
LPの成果について、相談先をお探しなら
私は、LP制作に加えて、公開後の数字が動くまで伴走しています。
- 600件を超えるLP制作
- D2C・単品リピート通販に特化
- CVRが落ちている箇所の特定から着手
「作り直すべきか、直すべきか」の判断からご相談を承っています。
今のLPが「どこで・なぜ」成果を落としているのか。その一点を一緒に見るところから始めます。
