UIのデザインがどれほど美しくても、ボタンのラベルが曖昧だったり、エラーメッセージが技術的すぎたりすると、ユーザーは迷い、不安になり、離脱します。UXライティングは、インターフェース上のすべての言葉を「ユーザーが次に何をすべきかを理解し、自信を持って行動できる」ように設計する技術です。
Googleの調査では、明確なCTA文言への変更だけでコンバージョン率が37%向上した事例があります。言葉はデザインの要素であり、UXライターはビジュアルデザイナーと同等の専門職として認識されています。
UXライティング — マイクロコピー・エラーメッセージ・CTA・トーン
マイクロコピーとは、UIの至るところに存在する短い言葉(コピー)の総称です。ボタンのラベル、フォームのプレースホルダー、ヘルパーテキスト、エラーメッセージ、空の状態メッセージ、確認ダイアログの文言、ツールチップなどが含まれます。
一つひとつは小さな文字ですが、合計するとユーザーがプロダクトを通じて読む文章の大半を占めます。
マイクロコピーが存在する主な場所:
| 場所 | 例 | 目的 |
|---|---|---|
| ボタン・CTA | 「無料で試す」「今すぐ始める」 | 行動を促す |
| プレースホルダー | 「例: tanaka@email.com」 | 入力を助ける |
| ヘルパーテキスト | 「8文字以上・大文字1文字以上を含む」 | 要件を事前に伝える |
| エラーメッセージ | 「パスワードが一致しません」 | 問題と解決策を伝える |
| 空の状態 | 「まだメッセージはありません。最初のメッセージを送りましょう」 | 次のアクションを導く |
| 完了・成功 | 「送信しました!24時間以内にご連絡します」 | 安心と期待を届ける |
| ツールチップ | 「この設定を変更すると即座に反映されます」 | 不安を事前に取り除く |
| 確認ダイアログ | 「このファイルを完全に削除しますか?元に戻せません」 | 意図しない操作を防ぐ |
💡 プレースホルダーテキスト(フォームの薄いグレーの文字)は「例: ○○」という形式が最善です。「名前を入力してください」という指示より「例: 田中 太郎」という具体例の方が、ユーザーの入力開始を助けることが研究で示されています。
エラーメッセージはユーザーが最もストレスを感じる瞬間に表示されます。この瞬間にユーザーを責めたり、技術的な専門用語で混乱させたりすることは、ユーザー体験の最大の失敗の一つです。
原則1: 何が問題かを明確に伝える
| NG | OK |
|---|---|
| 「エラーが発生しました」 | 「パスワードが間違っています」 |
| 「入力が無効です」 | 「電話番号は11桁で入力してください」 |
| 「500 Internal Server Error」 | 「ただいまサーバーが混み合っています」 |
| 「フォームに問題があります」 | 「メールアドレスの形式を確認してください」 |
原則2: 解決策を一緒に示す
問題を伝えるだけでなく、ユーザーが次に何をすればいいかを示します。
原則3: ユーザーを責めない・敬語は使わない
エラーはユーザーのせいではなく、UIの設計が不明確だった結果であることが多いです。「お客様の入力が間違えられました」のような受け身表現や敬語はかえって冷たく感じられます。フレンドリーで直接的な文体を使います。
⚠️ エラーメッセージに「!」を多用しないでください。「パスワードが間違っています!」の感嘆符は、ユーザーに責められているような感覚を与えます。エラーは穏やかに、しかし明確に伝えてください。
フォームのバリデーション(入力チェック)をいつ実行するかも、UXライティングと密接に関係します。
| タイミング | 名称 | 特徴 |
|---|---|---|
| 入力中 | リアルタイムバリデーション | 即時フィードバックだが、入力途中でエラーが出て煩わしくなりやすい |
| フォーカスアウト時 | Blur時バリデーション | 入力完了後に確認、自然なタイミング |
| 送信時 | Submit時バリデーション | 一括確認、複数エラーが同時に表示される |
最善の実践は「ブラー時バリデーション + 送信時にサマリー表示」の組み合わせです。
CTAはユーザーに特定の行動を促すボタン・リンク・テキストです。文言の違いがコンバージョン率に直接影響します。
原則1: 動詞で始める
CTAは必ず動詞(行動を示す言葉)で始めます。動詞がないCTAはユーザーに何をすべきか伝えられません。
原則2: ユーザーのメリットを伝える
「何をするボタンか」だけでなく、「それで何が得られるか」を含めると効果が高まります。
原則3: 不安を先回りして取り除く
ボタンの直下に小さなテキストで、ユーザーが感じるリスクを事前に打ち消します(マイクロコピーとの連携)。
原則4: 1画面に主要CTAは1つ
複数の同等なCTAボタンが並ぶと、ユーザーは選択肢に迷い、行動しなくなります(ヒックの法則)。主要アクションを1つに絞り、二次アクションはゴーストボタンやリンクテキストに格下げします。
| CTA種類 | 用途 | ビジュアル |
|---|---|---|
| プライマリCTA | 最も重要なアクション(1つのみ) | 塗りつぶしボタン、目立つ色 |
| セカンダリCTA | 補助的なアクション | ゴーストボタン(枠線のみ) |
| ターシャリCTA | 三次的なアクション | テキストリンク |
ボイス(Voice) はブランドの個性・性格であり、どんな場面でも変わりません。「私たちのブランドは人間的で、専門的だが堅苦しくない、前向きな存在」というのがボイスです。
トーン(Tone) は文脈・状況・ユーザーの感情状態に応じて変化するボイスの表れ方です。同じボイスを持ちながら、オンボーディング時は明るく励まし、エラー時は落ち着いて解決を助けます。
場面ごとのトーン:
| 場面 | トーンの特徴 | 例 |
|---|---|---|
| オンボーディング | 明るい・励ます・親しみやすい | 「いよいよスタートです!一緒に最初の設定をしましょう」 |
| 通常操作 | 明確・簡潔・邪魔にならない | 「保存しました」「更新しました」 |
| エラー発生 | 落ち着いた・解決志向・責めない | 「ファイルの読み込みに失敗しました。もう一度試してください」 |
| 危険な操作 | 明確・警告・一貫 | 「このデータは完全に削除されます。この操作は元に戻せません」 |
| 完了・成功 | 祝う・前向き・次の行動を促す | 「支払いが完了しました!注文の詳細をメールで送りました」 |
| 空の状態 | 親しみやすい・行動を促す | 「まだお気に入りはありません。探索して気に入ったものを保存しましょう」 |
チームや外部パートナーがブランドの言葉を一貫して使えるよう、ドキュメントとして整備します。
ガイドに含める要素:
💡 パーソナリティ形容詞を決めたら、「でも〜ではない」という対比を付けると明確になります。例: 「親しみやすい(でも馴れ馴れしくない)」「プロフェッショナル(でも堅苦しくない)」「シンプル(でも見下さない)」。
空の状態とは、ユーザーがまだコンテンツを持っていない・作成していない初期状態です。ここでの言葉は、ユーザーの最初のアクションを促す重要な機会です。
空の状態の構成要素:
NG例: 「データがありません」
OK例: 「まだプロジェクトはありません。最初のプロジェクトを作成して、チームと成果を共有しましょう。」+ 「プロジェクトを作成」ボタン
削除・購入・送信など、元に戻せない操作の前に表示する確認ダイアログは、ユーザーが正しく理解して意思決定できるよう書きます。
悪い確認ダイアログのパターン:
良い確認ダイアログのパターン:
⚠️ 確認ダイアログのボタンには「はい / いいえ」を使わないでください。「いいえ」は操作を否定しているのか、モーダルを閉じるのかが曖昧です。「削除する / キャンセル」のように、それぞれが何をするかを明示する動詞を使います。
新規ユーザーが最初にプロダクトを使う体験は、継続率に最も大きな影響を与えます。オンボーディング中の言葉は「歓迎・安心・達成感」を提供するよう設計します。
オンボーディングコピーの原則:
CTA文言・エラーメッセージ・空の状態のコピーは、A/Bテストで効果を定量検証できます。
測定できる指標:
A/Bテストの最小サンプルサイズ: 統計的有意性を確保するには、各バリアントに最低100〜1000コンバージョンが必要です(期待コンバージョン率に依存)。
最も効果的なUXライティングはデザインプロセスの初期段階から言葉を検討することで生まれます。
推奨する協働の形:
UXライティングは「言葉を美しく書く技術」ではなく「言葉でユーザーの行動と感情を設計する技術」です。マイクロコピーの一つひとつが、ユーザーの信頼・行動・感情体験を形成します。エラーメッセージは責めず解決策を示し、CTAは動詞で始めてメリットを伝え、トーン&ボイスガイドでブランドの言葉の一貫性を守る——この3つの軸を身につけることで、ビジュアルデザインと同等のUX価値を言葉で生み出せるようになります。UX/UIデザイン基礎コースはこれで完了です。学んだすべての知識を統合し、実際のプロジェクトで実践することで、さらに深い理解が生まれます。
コピーライティングは広告やLPで注目を集め、購買や申込へ動かすための文章です。UXライティングはプロダクトの中で、ユーザーが迷わず操作を完了できるように導く文章(ボタン・エラー・空の状態・確認画面など)です。目的が「売る」か「使えるようにする」かで、評価指標も変わります。
「何が問題か」と「どうすれば解決するか」を1つのメッセージで伝えることです。「エラーが発生しました」のような抽象的な文言や、エラーコードだけの表示は避け、「パスワードは8文字以上で英字と数字を含めてください」のように具体的に書きます。ユーザーを責める表現や感嘆符の多用も避けます。
動詞で始め(「無料で試す」「レポートをダウンロード」)、押した後に何が得られるかが分かる言葉にします。ボタン直下に「クレジットカード不要」「いつでも解約可能」など不安を先回りして打ち消す一文を添えると効果が上がります。1画面で目立たせる主要CTAは1つに絞ります。
A/Bテストで定量的に比較します。CTAはクリック率とコンバージョン率、エラーメッセージはエラー修正率とフォーム離脱率、オンボーディングは完了率と数日後の継続率が指標です。統計的に判断するには、各パターンで一定数のコンバージョンが必要なので、少数のサンプルで結論を急がないことが重要です。
全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。
Q1.パスワードの形式エラーを伝えるメッセージとして、本文の原則に最も沿うものはどれですか?
Q2.料金ページで「無料で試す」「資料請求」「相談する」の3つを同じ塗りボタンで並べています。本文に沿った改善はどれですか?
Q3.ボイスとトーンの関係について、本文の説明に合うものはどれですか?
完全無料・クレジットカード不要
LPOマスター
マイクロコピーとは、Webサイト・LPのボタン・フォームラベル・エラーメッセージ・ヒント文など、小さなUIテキストすべてを指す言葉です。
25分本文は無料で閲覧可
コンテンツSEO戦略講座
SEOライティングとは、検索エンジンに評価されながら、同時にユーザーにとっても読みやすく・役に立つコンテンツを執筆する技術です。
25分本文は無料で閲覧可
成果の出るLP制作完全講座
PASONA法則とは、コピーライターの神田昌典氏が体系化したセールスコピーライティングの6ステップフレームワークです。
25分本文は無料で閲覧可
実践Webデザイン - Figma完全マスター講座
Auto LayoutはFigmaが他のデザインツールと一線を画す最大の機能です。
30分本文は無料で閲覧可
実践Webデザイン - Figma完全マスター講座
デザイナーとエンジニアが初めてコラボレーションできるツールを作る——そんなビジョンのもと、Figmaは2016年にDylan FieldとE
30分無料公開
実践Webデザイン - Figma完全マスター講座
Figmaを開いた瞬間、無限に広がる白いキャンバスと見慣れないパネル群に戸惑う人は多いです。
30分無料公開