マイクロコピーの書き方|UI テキストの文字数設計
マイクロコピーとは、ボタンラベル、エラーメッセージ、プレースホルダー、ツールチップなど、UI 上に表示される短いテキストの総称です。わずか数文字の違いがコンバージョン率やユーザー満足度に大きく影響します。適切な文字数と表現を選ぶことで、ユーザー体験を大幅に向上させましょう。
マイクロコピーとは
マイクロコピーは、ユーザーが操作に迷ったときや不安を感じたときに、適切な案内を提供する短いテキストです。「送信」「キャンセル」といったボタンラベルから、「メールアドレスを入力してください」というプレースホルダーまで、UI のあらゆる場所に存在します。
優れたマイクロコピーは、ユーザーが意識しないほど自然に機能します。逆に、不適切なマイクロコピーはユーザーを混乱させ、離脱の原因となります。文字数が多すぎると読み飛ばされ、少なすぎると情報が不足します。
UI 要素別の文字数目安
| UI 要素 | 推奨文字数 | ポイント |
|---|---|---|
| ボタンラベル | 2〜8 文字 | 動詞で始める (「購入する」「送信」) |
| プレースホルダー | 10〜25 文字 | 入力例を示す (「例: taro@example.com」) |
| エラーメッセージ | 15〜40 文字 | 原因と対処法を簡潔に伝える |
| ツールチップ | 20〜50 文字 | 補足説明を 1〜2 文で |
| トースト通知 | 15〜30 文字 | 操作結果を即座にフィードバック |
| 空状態メッセージ | 30〜60 文字 | 次のアクションを提案する |
| 確認ダイアログ | 30〜80 文字 | 操作の結果を明確に伝える |
| ラベル・見出し | 5〜15 文字 | フォーム項目やセクション名 |
上記の文字数はあくまで目安です。実際のプロダクトでは、デザインシステムやコンポーネントの表示幅に合わせて調整しましょう。マイクロコピーの文字数を確認する際は、文字数カウントスが便利です。
効果的なエラーメッセージ
エラーメッセージは、ユーザーが問題を解決するための手がかりです。「エラーが発生しました」のような曖昧なメッセージではなく、何が問題で、どうすれば解決できるかを具体的に伝えましょう。
良いエラーメッセージの構成は「原因 + 対処法」です。
- ❌「入力エラー」(7 文字) → 何が間違っているかわからない
- ✅「パスワードは 8 文字以上で入力してください」(20 文字) → 原因と対処法が明確
- ❌「無効な値です」(7 文字) → 何が無効かわからない
- ✅「メールアドレスの形式が正しくありません」(19 文字) → 具体的な指摘
エラーメッセージのトーンは、責めるような表現を避け、ユーザーに寄り添う姿勢を示します。「間違っています」ではなく「確認してください」のように、前向きな表現を選びましょう。
ボタンラベルの設計
ボタンラベルは、ユーザーの行動を促す最も重要なマイクロコピーです。「送信」「OK」のような汎用的なラベルよりも、具体的なアクションを示すラベルの方がクリック率が高くなります。
効果的なボタンラベルの原則は以下の通りです。動詞で始めること (「購入する」「ダウンロード」)、結果を予測できること (「無料で始める」)、緊急性を持たせること (「今すぐ登録」) の 3 点を意識しましょう。
破壊的なアクション (削除、キャンセルなど) のボタンは、確認ダイアログと組み合わせて使います。「削除」ボタンの確認ダイアログでは、「本当に削除しますか?この操作は取り消せません」のように、操作の結果を明確に伝えましょう。
意外と知らないマイクロコピーのトリビア
マイクロコピーの改善だけでコンバージョン率が劇的に変わった事例は数多く報告されています。ある EC サイトでは、購入ボタンのラベルを「送信」から「注文を確定する」に変更しただけで、コンバージョン率が推定 30% 以上向上したとされています。わずか数文字の違いが、ユーザーの不安を解消し、行動を後押しした好例です。
もう一つ興味深いのは、Google のマテリアルデザインガイドラインでは、ボタンラベルに「OK」を使うことを非推奨としている点です。「OK」は何が起こるかを予測できないため、「保存」「削除」「送信」のように具体的なアクションを示すラベルが推奨されています。
なぜ UI 要素ごとに最適な文字数が異なるのか
ボタンラベルが 2〜8 文字なのは、ボタンの物理的なサイズ (タップ領域) と視認性のバランスに基づいています。Apple の Human Interface Guidelines では、タップ可能な領域を最低 44×44 ポイントと定めており、この領域に収まる文字数が 2〜8 文字です。
エラーメッセージが 15〜40 文字なのは、「原因 + 対処法」の 2 要素を 1〜2 文で伝えるために必要な最小限の文字数です。15 文字未満では対処法を含められず、40 文字を超えるとフォームフィールドの近くに表示した際にレイアウトを崩す原因になります。
よくある失敗パターン
- プレースホルダーをラベルの代わりに使う: 入力フィールドのプレースホルダーにラベル情報 (「お名前」「メールアドレス」) を入れると、入力開始時にラベルが消えてしまい、ユーザーが何を入力すべきか忘れてしまいます。ラベルは常に表示し、プレースホルダーは入力例に限定しましょう
- 二重否定の確認ダイアログで混乱を招く: 「キャンセルしますか?」に対して「キャンセル」ボタンを押すと、キャンセルのキャンセルなのか、操作のキャンセルなのか分かりません。「変更を破棄する」「編集を続ける」のように、結果を明示するラベルにしましょう
- 専門用語をそのまま UI に表示する: 「認証トークンが無効です」「セッションがタイムアウトしました」のような技術用語は、一般ユーザーには意味不明です。「ログインの有効期限が切れました。再度ログインしてください」のように平易な言葉に置き換えましょう
プロが実践するマイクロコピーテクニック
- 「不安解消コピー」をフォームの近くに配置する: 「クレジットカード情報は暗号化して安全に送信されます」「いつでも解約できます」のような一文を、入力フォームや CTA ボタンの近くに添えるだけで、コンバージョン率が推定 5〜15% 向上するとされています
- A/B テストでマイクロコピーの効果を定量的に検証する: 「無料で始める」vs「今すぐ登録」、「購入する」vs「カートに入れる」のように、ボタンラベルの A/B テストを実施します。Google Optimize や Optimizely などのツールで統計的有意差を確認しましょう
- Voice & Tone ガイドラインを策定する: サービス全体で一貫したトーン (丁寧さの度合い、ユーモアの有無、敬語の使い方) を定義し、マイクロコピーの品質を均一に保ちます。Mailchimp の「Content Style Guide」は、この分野の模範的な事例として広く参照されています
まとめ
マイクロコピーは短いテキストですが、ユーザー体験に大きな影響を与えます。ボタンラベルは 2〜8 文字、エラーメッセージは 15〜40 文字を目安に、具体的で前向きな表現を心がけましょう。UI テキストの文字数を確認する際は、文字数カウントスをご活用ください。