D
DigiSchool
コース一覧カテゴリブログ
ログイン無料で始める
D
DigiSchool

デジタルマーケティングとWeb制作のスキルを身につけて、キャリアを加速させましょう。

カテゴリ

AIWebデザイン広告運用SEOMEOLP制作HP制作SaaSECデザイン

サービス

  • コース一覧
  • カテゴリ一覧
  • ブログ
  • 無料会員登録

サポート

  • 利用規約
  • プライバシーポリシー

© 2026 DigiSchool. All rights reserved.

コース/UI/UXデザイン実践講座/UXライティングとマイクロコピー
10 / 10
レッスン 10
30分

UXライティングとマイクロコピー

📝 最後に理解度チェック(3問)があります
▶

解説動画は無料登録で視聴できます

全26コース・260レッスンが完全無料。登録は1分、クレジットカードは不要です

無料登録して動画を見るアカウントをお持ちの方はログイン

UXライティング — 言葉がユーザー体験を決める

UIのデザインがどれほど美しくても、ボタンのラベルが曖昧だったり、エラーメッセージが技術的すぎたりすると、ユーザーは迷い、不安になり、離脱します。UXライティングは、インターフェース上のすべての言葉を「ユーザーが次に何をすべきかを理解し、自信を持って行動できる」ように設計する技術です。

Googleの調査では、明確なCTA文言への変更だけでコンバージョン率が37%向上した事例があります。言葉はデザインの要素であり、UXライターはビジュアルデザイナーと同等の専門職として認識されています。

UXライティング — マイクロコピー・エラーメッセージ・CTA・トーンUXライティング — マイクロコピー・エラーメッセージ・CTA・トーン


マイクロコピーの基本

マイクロコピーとは

マイクロコピーとは、UIの至るところに存在する短い言葉(コピー)の総称です。ボタンのラベル、フォームのプレースホルダー、ヘルパーテキスト、エラーメッセージ、空の状態メッセージ、確認ダイアログの文言、ツールチップなどが含まれます。

一つひとつは小さな文字ですが、合計するとユーザーがプロダクトを通じて読む文章の大半を占めます。

マイクロコピーが存在する主な場所:

場所例目的
ボタン・CTA「無料で試す」「今すぐ始める」行動を促す
プレースホルダー「例: tanaka@email.com」入力を助ける
ヘルパーテキスト「8文字以上・大文字1文字以上を含む」要件を事前に伝える
エラーメッセージ「パスワードが一致しません」問題と解決策を伝える
空の状態「まだメッセージはありません。最初のメッセージを送りましょう」次のアクションを導く
完了・成功「送信しました!24時間以内にご連絡します」安心と期待を届ける
ツールチップ「この設定を変更すると即座に反映されます」不安を事前に取り除く
確認ダイアログ「このファイルを完全に削除しますか?元に戻せません」意図しない操作を防ぐ

💡 プレースホルダーテキスト(フォームの薄いグレーの文字)は「例: ○○」という形式が最善です。「名前を入力してください」という指示より「例: 田中 太郎」という具体例の方が、ユーザーの入力開始を助けることが研究で示されています。


エラーメッセージの設計

エラーメッセージの3原則

エラーメッセージはユーザーが最もストレスを感じる瞬間に表示されます。この瞬間にユーザーを責めたり、技術的な専門用語で混乱させたりすることは、ユーザー体験の最大の失敗の一つです。

原則1: 何が問題かを明確に伝える

NGOK
「エラーが発生しました」「パスワードが間違っています」
「入力が無効です」「電話番号は11桁で入力してください」
「500 Internal Server Error」「ただいまサーバーが混み合っています」
「フォームに問題があります」「メールアドレスの形式を確認してください」

原則2: 解決策を一緒に示す

問題を伝えるだけでなく、ユーザーが次に何をすればいいかを示します。

  • ◆NG: 「パスワードが無効です」
  • ◆OK: 「パスワードは8文字以上で、英字・数字・記号を各1文字以上含めてください」

原則3: ユーザーを責めない・敬語は使わない

エラーはユーザーのせいではなく、UIの設計が不明確だった結果であることが多いです。「お客様の入力が間違えられました」のような受け身表現や敬語はかえって冷たく感じられます。フレンドリーで直接的な文体を使います。

⚠️ エラーメッセージに「!」を多用しないでください。「パスワードが間違っています!」の感嘆符は、ユーザーに責められているような感覚を与えます。エラーは穏やかに、しかし明確に伝えてください。

バリデーションのタイミング

フォームのバリデーション(入力チェック)をいつ実行するかも、UXライティングと密接に関係します。

タイミング名称特徴
入力中リアルタイムバリデーション即時フィードバックだが、入力途中でエラーが出て煩わしくなりやすい
フォーカスアウト時Blur時バリデーション入力完了後に確認、自然なタイミング
送信時Submit時バリデーション一括確認、複数エラーが同時に表示される

最善の実践は「ブラー時バリデーション + 送信時にサマリー表示」の組み合わせです。


CTA(Call to Action)文言の設計

CTA文言の4つの原則

CTAはユーザーに特定の行動を促すボタン・リンク・テキストです。文言の違いがコンバージョン率に直接影響します。

原則1: 動詞で始める

CTAは必ず動詞(行動を示す言葉)で始めます。動詞がないCTAはユーザーに何をすべきか伝えられません。

  • ◆NG: 「詳細はこちら」「送信」「OK」
  • ◆OK: 「無料で7日間試す」「レポートをダウンロード」「アカウントを作成」

原則2: ユーザーのメリットを伝える

「何をするボタンか」だけでなく、「それで何が得られるか」を含めると効果が高まります。

  • ◆NG: 「登録する」
  • ◆OK: 「無料で始める(クレジットカード不要)」

原則3: 不安を先回りして取り除く

ボタンの直下に小さなテキストで、ユーザーが感じるリスクを事前に打ち消します(マイクロコピーとの連携)。

  • ◆「いつでもキャンセル可能」
  • ◆「スパムは送りません。登録解除も1クリック」
  • ◆「30秒で完了・クレジットカード不要」

原則4: 1画面に主要CTAは1つ

複数の同等なCTAボタンが並ぶと、ユーザーは選択肢に迷い、行動しなくなります(ヒックの法則)。主要アクションを1つに絞り、二次アクションはゴーストボタンやリンクテキストに格下げします。

CTA種類用途ビジュアル
プライマリCTA最も重要なアクション(1つのみ)塗りつぶしボタン、目立つ色
セカンダリCTA補助的なアクションゴーストボタン(枠線のみ)
ターシャリCTA三次的なアクションテキストリンク

トーン&ボイスガイド

ボイスとトーンの違い

ボイス(Voice) はブランドの個性・性格であり、どんな場面でも変わりません。「私たちのブランドは人間的で、専門的だが堅苦しくない、前向きな存在」というのがボイスです。

トーン(Tone) は文脈・状況・ユーザーの感情状態に応じて変化するボイスの表れ方です。同じボイスを持ちながら、オンボーディング時は明るく励まし、エラー時は落ち着いて解決を助けます。

場面ごとのトーン:

場面トーンの特徴例
オンボーディング明るい・励ます・親しみやすい「いよいよスタートです!一緒に最初の設定をしましょう」
通常操作明確・簡潔・邪魔にならない「保存しました」「更新しました」
エラー発生落ち着いた・解決志向・責めない「ファイルの読み込みに失敗しました。もう一度試してください」
危険な操作明確・警告・一貫「このデータは完全に削除されます。この操作は元に戻せません」
完了・成功祝う・前向き・次の行動を促す「支払いが完了しました!注文の詳細をメールで送りました」
空の状態親しみやすい・行動を促す「まだお気に入りはありません。探索して気に入ったものを保存しましょう」

トーン&ボイスガイドの作り方

チームや外部パートナーがブランドの言葉を一貫して使えるよう、ドキュメントとして整備します。

ガイドに含める要素:

  1. ◆ブランドのパーソナリティ形容詞(3〜5語): 例「親しみやすい・誠実・プロフェッショナル・前向き」
  2. ◆使う言葉・使わない言葉のリスト
  3. ◆場面ごとのトーン定義(5〜8場面)
  4. ◆NG/OK例(実際の文章の対比)
  5. ◆よく使うフレーズのテンプレート集

💡 パーソナリティ形容詞を決めたら、「でも〜ではない」という対比を付けると明確になります。例: 「親しみやすい(でも馴れ馴れしくない)」「プロフェッショナル(でも堅苦しくない)」「シンプル(でも見下さない)」。


具体的なUXライティングの実践

空の状態(Empty State)のデザイン

空の状態とは、ユーザーがまだコンテンツを持っていない・作成していない初期状態です。ここでの言葉は、ユーザーの最初のアクションを促す重要な機会です。

空の状態の構成要素:

  1. ◆イラスト・アイコン(感情的なつながりを作る)
  2. ◆見出し(状態を端的に説明: 「まだ投稿はありません」)
  3. ◆サブテキスト(このことが何を意味するかを説明)
  4. ◆CTA(最初のアクションへの誘導)

NG例: 「データがありません」

OK例: 「まだプロジェクトはありません。最初のプロジェクトを作成して、チームと成果を共有しましょう。」+ 「プロジェクトを作成」ボタン

確認ダイアログのライティング

削除・購入・送信など、元に戻せない操作の前に表示する確認ダイアログは、ユーザーが正しく理解して意思決定できるよう書きます。

悪い確認ダイアログのパターン:

  • ◆タイトル: 「確認」、本文: 「よろしいですか?」、ボタン: 「はい / いいえ」 → 何を確認しているのか、何が起きるのかが不明

良い確認ダイアログのパターン:

  • ◆タイトル: 「プロジェクト「春の企画」を削除しますか?」
  • ◆本文: 「このプロジェクトとすべての関連ファイルが完全に削除されます。この操作は元に戻せません。」
  • ◆ボタン: 「削除する(赤)/ キャンセル(グレー)」

⚠️ 確認ダイアログのボタンには「はい / いいえ」を使わないでください。「いいえ」は操作を否定しているのか、モーダルを閉じるのかが曖昧です。「削除する / キャンセル」のように、それぞれが何をするかを明示する動詞を使います。

オンボーディングのUXライティング

新規ユーザーが最初にプロダクトを使う体験は、継続率に最も大きな影響を与えます。オンボーディング中の言葉は「歓迎・安心・達成感」を提供するよう設計します。

オンボーディングコピーの原則:

  • ◆「あなた」と直接語りかける(二人称で書く)
  • ◆設定手順より得られる価値を先に伝える
  • ◆進捗を可視化して達成感を演出する(「3つのうち1つ完了!」)
  • ◆スキップの選択肢を提供する(強制感をなくす)

UXライティングの改善プロセス

A/Bテストによる検証

CTA文言・エラーメッセージ・空の状態のコピーは、A/Bテストで効果を定量検証できます。

測定できる指標:

  • ◆CTA: クリック率(CTR)・コンバージョン率
  • ◆エラーメッセージ: エラー修正率・フォーム離脱率
  • ◆オンボーディング: 完了率・7日間継続率

A/Bテストの最小サンプルサイズ: 統計的有意性を確保するには、各バリアントに最低100〜1000コンバージョンが必要です(期待コンバージョン率に依存)。

UXライターとデザイナーの協働

最も効果的なUXライティングはデザインプロセスの初期段階から言葉を検討することで生まれます。

推奨する協働の形:

  • ◆ワイヤーフレーム段階からコピーを仮置きする(Lorem Ipsumを避ける)
  • ◆コンテンツファーストのデザイン(言葉が決まってからビジュアルを設計)
  • ◆デザインレビューにUXライターを参加させる
  • ◆トーン&ボイスガイドをFigmaのライブラリ内に共有する

🏋️実践ワーク

  1. ◆以下の「NG」コピーを、このレッスンで学んだ原則を使って「OK」コピーに書き直してください(各コピーについて修正理由も記述すること)。
    • ◆ボタン: 「送信」→ 改善案
    • ◆エラーメッセージ: 「エラーが発生しました。再試行してください」→ 改善案
    • ◆空の状態: 「データがありません」→ 改善案
    • ◆確認ダイアログ: 「削除しますか? はい / いいえ」→ 改善案
    • ◆オンボーディング見出し: 「プロフィールを設定してください」→ 改善案
  2. ◆あなたが使っているサービス(アプリ・Webサイト)のトーン&ボイスを分析してください。
    • ◆ブランドのボイスを形容詞3つで表現する
    • ◆良いUXライティングの例を3つ見つけてスクリーンショットを撮る
    • ◆改善が必要と思うコピーを2つ見つけ、改善案を書く
  3. ◆仮想プロダクト(料理レシピアプリ)のマイクロコピーセットを作成してください。
    • ◆検索フォームのプレースホルダーテキスト
    • ◆検索結果0件の空の状態メッセージ(見出し + サブテキスト + CTA)
    • ◆保存完了トースト通知(1〜2文)
    • ◆レシピ削除確認ダイアログ(タイトル + 本文 + ボタン2つ)

📝まとめ

UXライティングは「言葉を美しく書く技術」ではなく「言葉でユーザーの行動と感情を設計する技術」です。マイクロコピーの一つひとつが、ユーザーの信頼・行動・感情体験を形成します。エラーメッセージは責めず解決策を示し、CTAは動詞で始めてメリットを伝え、トーン&ボイスガイドでブランドの言葉の一貫性を守る——この3つの軸を身につけることで、ビジュアルデザインと同等のUX価値を言葉で生み出せるようになります。UX/UIデザイン基礎コースはこれで完了です。学んだすべての知識を統合し、実際のプロジェクトで実践することで、さらに深い理解が生まれます。


よくある質問

UXライティングとコピーライティングは何が違いますか?

コピーライティングは広告やLPで注目を集め、購買や申込へ動かすための文章です。UXライティングはプロダクトの中で、ユーザーが迷わず操作を完了できるように導く文章(ボタン・エラー・空の状態・確認画面など)です。目的が「売る」か「使えるようにする」かで、評価指標も変わります。

エラーメッセージの書き方の基本は何ですか?

「何が問題か」と「どうすれば解決するか」を1つのメッセージで伝えることです。「エラーが発生しました」のような抽象的な文言や、エラーコードだけの表示は避け、「パスワードは8文字以上で英字と数字を含めてください」のように具体的に書きます。ユーザーを責める表現や感嘆符の多用も避けます。

CTAボタンの文言はどう決めればよいですか?

動詞で始め(「無料で試す」「レポートをダウンロード」)、押した後に何が得られるかが分かる言葉にします。ボタン直下に「クレジットカード不要」「いつでも解約可能」など不安を先回りして打ち消す一文を添えると効果が上がります。1画面で目立たせる主要CTAは1つに絞ります。

マイクロコピーの効果はどうやって測りますか?

A/Bテストで定量的に比較します。CTAはクリック率とコンバージョン率、エラーメッセージはエラー修正率とフォーム離脱率、オンボーディングは完了率と数日後の継続率が指標です。統計的に判断するには、各パターンで一定数のコンバージョンが必要なので、少数のサンプルで結論を急がないことが重要です。

理解度チェック

3問

全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。

  1. Q1.パスワードの形式エラーを伝えるメッセージとして、本文の原則に最も沿うものはどれですか?

  2. Q2.料金ページで「無料で試す」「資料請求」「相談する」の3つを同じ塗りボタンで並べています。本文に沿った改善はどれですか?

  3. Q3.ボイスとトーンの関係について、本文の説明に合うものはどれですか?

すべての問題に答えると押せます

「UI/UXデザイン実践講座」全10レッスンを無料で修了しよう

  • ✓ 理解度チェックの採点と、合格レッスンの記録
  • ✓ 全レッスン合格で修了証を発行(URLでシェア・LinkedInに追加できます)
  • ✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード
無料で受講をはじめる(1分)

完全無料・クレジットカード不要

関連するブログ記事

UI/UXデザインの教科書|Amazonの「1-Click」が年間2,400億円を生んだ理由から学ぶ設計原則

UI/UXデザインの教科書|Amazonの「1-Click」が年間2,400億円を生んだ理由から学ぶ設計原則

UI/UXデザインの進め方|ユーザー中心設計の5ステップ完全ガイド

UI/UXデザインの進め方|ユーザー中心設計の5ステップ完全ガイド

Figmaコンポーネント設計のコツ|効率的なデザインシステムの作り方

Figmaコンポーネント設計のコツ|効率的なデザインシステムの作り方

関連レッスン(他のコースから)

LPOマスター

マイクロコピーとUXライティング

マイクロコピーとは、Webサイト・LPのボタン・フォームラベル・エラーメッセージ・ヒント文など、小さなUIテキストすべてを指す言葉です。

25分本文は無料で閲覧可

コンテンツSEO戦略講座

SEOライティングの実践テクニック

SEOライティングとは、検索エンジンに評価されながら、同時にユーザーにとっても読みやすく・役に立つコンテンツを執筆する技術です。

25分本文は無料で閲覧可

成果の出るLP制作完全講座

コピーライティング - PASONAの法則

PASONA法則とは、コピーライターの神田昌典氏が体系化したセールスコピーライティングの6ステップフレームワークです。

25分本文は無料で閲覧可

実践Webデザイン - Figma完全マスター講座

Auto Layoutで効率的なレイアウト

Auto LayoutはFigmaが他のデザインツールと一線を画す最大の機能です。

30分本文は無料で閲覧可

実践Webデザイン - Figma完全マスター講座

Figmaとは?Webデザインツールの選び方

デザイナーとエンジニアが初めてコラボレーションできるツールを作る——そんなビジョンのもと、Figmaは2016年にDylan FieldとE

30分無料公開

実践Webデザイン - Figma完全マスター講座

Figmaの基本操作 - フレーム・シェイプ・テキスト

Figmaを開いた瞬間、無限に広がる白いキャンバスと見慣れないパネル群に戸惑う人は多いです。

30分無料公開

← 前のレッスン

レッスン一覧

各レッスンの理解度チェックに合格すると ✓ がつきます

1UI/UXデザインの基本概念と違い2ユーザーリサーチの方法論3ペルソナとカスタマージャーニーマップ4情報設計(IA)とワイヤーフレーム5UIデザインパターンとベストプラクティス6モバイルファーストデザイン7アクセシビリティとインクルーシブデザイン8ユーザビリティテストの実践9デザイン思考とデザインスプリント10UXライティングとマイクロコピー