マイクロコピーの書き方|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 文字フォーム項目やセクション名

上記の文字数はあくまで目安です。実際のプロダクトでは、デザインシステムやコンポーネントの表示幅に合わせて調整しましょう。マイクロコピーの文字数を確認する際は、文字数カウントスが便利です。

効果的なエラーメッセージ

エラーメッセージは、ユーザーが問題を解決するための手がかりです。「エラーが発生しました」のような曖昧なメッセージではなく、何が問題で、どうすれば解決できるかを具体的に伝えましょう。

良いエラーメッセージの構成は「原因 + 対処法」です。

エラーメッセージのトーンは、責めるような表現を避け、ユーザーに寄り添う姿勢を示します。「間違っています」ではなく「確認してください」のように、前向きな表現を選びましょう。

ボタンラベルの設計

ボタンラベルは、ユーザーの行動を促す最も重要なマイクロコピーです。「送信」「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 文字を超えるとフォームフィールドの近くに表示した際にレイアウトを崩す原因になります。

よくある失敗パターン

プロが実践するマイクロコピーテクニック

まとめ

マイクロコピーは短いテキストですが、ユーザー体験に大きな影響を与えます。ボタンラベルは 2〜8 文字、エラーメッセージは 15〜40 文字を目安に、具体的で前向きな表現を心がけましょう。UI テキストの文字数を確認する際は、文字数カウントスをご活用ください。