文言がダサい——マイクロコピーの質

結論

「文言がダサい」の正体は、装飾でもフォントでもなく抽象語だ。プロは Submit / OK / Click here / 失敗しました といった機能語を捨て、Carbon の {動詞}+{目的語} 公式で「押すと何が起きるか」を名指しする。さらに Voice（製品の人格）は固定したまま Tone だけ文脈で動かし、エラーでは絶対にユーザーを責めず「何が起きた＋なぜ＋次の一手」を肯定形で渡す——この3点に収束する。

01 — 動詞+目的語で「結果」を名指しする

ボタンの役目は装飾ではなく「押すと何が起きるか」を伝えることだ（NN/g）。Submit は「何を Submit？」と読み手に確認させる空っぽの機能語で、Carbon の {verb}+{noun} 公式に従って Publish review Send invoice のように目的語まで言い切る。Parallel の実測では Submit→Send invoice で +18% CTR。例外は Done Close Cancel Add Delete など慣用1語のみ。

primaryButton – Carbon Design System

primaryThe 3 I's of Microcopy — Nielsen Norman Group

blog10 UX Writing Best Practices — Parallel

02 — 「こちら」を消し、リンクで結果を語る

Click here こちら Click to read は、ユーザーが既に知っている「押し方」を説明しているだけで、肝心のリンク先・結果を一切語らない。だからスキャンしても何のリンクか分からず、古臭く見える（UX Movement / UXgem）。リンクテキストには遷移先の中身そのものを入れ、Connect your account のように具体化する。

blog5 Rules for Choosing the Right Words on Button Labels — UX Movement

blogButton text copywriting tips — UXgem

03 — エラーは責めない。「何が起きた+なぜ+次の一手」

NN/g は invalid illegal incorrect、そして「あなたは〜を間違えました」を明示的に禁止する。正しい使い方の責任はシステム側にあるからだ。You failed to enter a valid credit card number!! は加害的で、!! のシャウトと全大文字が安っぽさを倍増させる。UX Content Collective の3部構成——「何が起きた＋なぜ＋次の一手」——で、否定を肯定の指示に言い換える。

primaryError-Message Guidelines — Nielsen Norman Group

blogHow to write error messages — UX Content Collective

04 — 空状態は「空っぽ」ではなく「誘い」に反転する

空のリスト画面で データがありません とだけ出すのは、行き止まりを通知しているだけだ。空状態は次の一手への入口であり、1〜2文・能動態・明確な単一CTA（Add New Item）で前に進ませる（Atlassian / UI Content）。装飾絵文字は最大1個、頻出する状態ほど簡潔・控えめに。ジョークやお茶目語は日本語UIで特に陳腐に見えるので避ける。

primaryWriting guidelines — Empty state — Atlassian Design System

blogBest Practices for Writing Empty State Messages — UI Content

05 — 主要CTAは一人称+ベネフィットで具体化する

コンバージョン主導のCTAでは、Start your free trial を Start my free trial（your→my）に変えるだけで Aagaard のテストでクリック +90%。語り手をユーザー本人の声に寄せ、得られる価値を名指しする。start / get / save / claim / book の強い動詞で始めるのが定石。ただし削除確認のような機能ボタンには持ち込まないこと（後述の限界も参照）。

blogHow to Design Call to Action Buttons that Convert — Unbounce

blog20 Highly Converting A/B Test Ideas — Zoho

06 — センテンスケース・1行表示・動詞は実挙動に合わせる

仕上げの3点。①全大文字は怒鳴り、Title Case は形式ばって冷たい——センテンスケース（日本語では約物詰め palt と敬体の統一）を守る。②文言は折り返さず1行で全表示、処理開始ボタンの ... は削る（Material）。③delete は永久消去、remove はグループからの切り離し。プレイリストから曲を外すなら Remove——含意と実挙動を一致させ誤操作を防ぐ（UX Movement）。Carbon は幅広ボタンでもラベルを左揃えにする。

primaryButtons – Material Design 3

primaryWriting – Style – Material Design

blog5 Rules for Choosing the Right Words on Button Labels — UX Movement

実装スニペット

ボタン文言を切り詰めず1行で全表示し、ALL CAPS を封じる（Material 準拠）。text-transform は使わず、HTML側に 請求書を送信 とセンテンスケースで直書きするのが肝。

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;       /* 折り返し禁止 */
  overflow: visible;         /* 切り詰め禁止 */
  text-overflow: clip;
  min-height: 44px;          /* タップターゲット下限 */
  padding: 0 1.25rem;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: none;      /* ALL CAPS禁止 */
  letter-spacing: 0;
  font-feature-settings: "palt";  /* 日本語の約物詰め */
}

Carbon 式に、幅広ボタンでもラベルは左揃え。動詞を左、矢印アイコンを右端に寄せる。

.btn--block {
  display: flex;
  width: 100%;
  justify-content: flex-start; /* 中央でなく左揃え */
  text-align: left;
  padding-inline: 1rem;
}
.btn--block .btn__icon {
  margin-left: auto;           /* アイコンは右端へ */
}

エラーメッセージの視覚規約（NN/g：太字・高コントラスト・赤）。色だけに頼らずアイコンを併用し、コントラスト比4.5:1以上を確保する。文言は カード番号は16桁で入力してください。 のように肯定＋具体で。

.field-error {
  display: flex;
  gap: 0.375rem;
  color: #b3261e;            /* Material error相当の赤 */
  font-weight: 600;          /* 太字で気づける */
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-top: 0.25rem;
}
.input--invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.18);
}

空状態ブロック（誘い＋単一CTA）。max-width:32ch で本文を1〜2文の読みやすい行長に制限する。

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 32ch;           /* 1-2文に収まる行長 */
  margin-inline: auto;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #5f6368;
}
.empty-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #202124;
}
.empty-state__cta { margin-top: 0.5rem; } /* 次の一手は1つだけ */

チェックリスト

• すべての操作ボタンが「動詞+目的語」で結果を名指ししている（例外は Done/Close/Cancel/Add/Delete など慣用1語のみ）
• Submit / OK / Go / Yes-No / Click here / こちら / 送信する を一掃した
• 文言は1〜3語・5語以内、折り返さず1行で全表示、処理開始ボタンの `...` を削った
• 全大文字・Title Case・多重感嘆符（!!）を排し、センテンスケース／約物詰め・敬体の統一にした
• エラーから invalid / illegal / incorrect /「あなたが間違えました」を消し、「何が起きた＋なぜ＋次の一手」を肯定形で書いた
• エラーは赤・太字・コントラスト比4.5:1以上で、色だけでなくアイコンも併用
• 困っている瞬間にジョーク・過剰な「ごめんなさい」・お茶目語を挟んでいない
• delete（永久消去）と remove（切り離し）を実挙動どおりに使い分けた
• 空状態は「空っぽ」を次の一手への誘いに反転させ、CTAは1つ・絵文字は最大1個
• Voice は製品全体で一貫させ、Tone だけ文脈で変えている
• 一人称CTA（my）など売上数値の主張は、機能ボタンに持ち込まず自前A/Bで検証する

限界 / 出典

primaryThe 3 I's of Microcopy: Inform, Influence, and Interact — Nielsen Norman Group

blog5 Rules for Choosing the Right Words on Button Labels — UX Movement

primaryButtons – Material Design 3

primaryWriting – Style – Material Design

primaryButton – Carbon Design System

primaryMaterial's Communication Principles: Intro to UX Writing — Google Codelabs

primaryError-Message Guidelines — Nielsen Norman Group

blogHow to write error messages — UX Content Collective

primaryWriting guidelines — Empty state — Atlassian Design System

blogBest Practices for Writing Empty State Messages — UI Content

blogHow to Design Call to Action Buttons that Convert — Unbounce

blog10 UX Writing Best Practices for Clear & Concise UI Copy — Parallel

blogButton text copywriting tips — UXgem

blog20 Highly Converting A/B Test Ideas — Zoho