Wensity UI コピーライティング は何をしますか？
言葉はデザインの一部です。曖昧で誇張されたコピーは、洗練されたインターフェースでさえも凡庸に見せます。平易で具体的なコピーは、平凡なインターフェースでさえも信頼できるものにします。すべての文字列に対するテスト基準は「これによってユーザーが理解し、行動できるようになるか？」です。
1. 文体
- 平易な言葉。 親切な人が実際に口に出して言うような書き方をします。「変更を保存」であって「修正を永続化」ではありません。「クレジットが不足しています」であって「クレジット残高が枯渇しました」ではありません。
- システム目線ではなく、ユーザー目線の言葉。 「Webhook 配送設定」ではなく「通知」にします。人々が何に使うかで名前を付けます。
- 短く。 意味を変えずに削除できる単語はすべて削除します。そして、もう一度削除します。
- すべての場所で文の先頭だけを大文字に： 見出し、ボタン、メニュー項目、タブ、ラベル。「新しいプロジェクトを作成」であって「新規プロジェクト作成」ではありません。
- 能動態で、ユーザーに向けて。 「このプロジェクトへのアクセス権がありません」であって「このプロジェクトへのアクセスは許可されていません」ではありません。システムが失敗した場合は、「ファイルを保存できませんでした」のように率直に伝えます（「ファイルを保存できませんでした」であって「ファイルは保存できませんでした」ではありません）。
- 落ち着いて。 心からの祝福以外で感嘆符は使いません。エラーで謝罪したり、エラー状態で冗談を言ったりしません。
2. コピーが生成されたように見える言葉
これらは避けてください。読者が確認できることを何も伝えません。
- 動詞: アンロックする、解き放つ、高める、力を与える、パワーアップする、革命を起こす、変革する、効率化する、活用する、利用する、再考する、急上昇する。
- 形容詞: シームレスな、楽な、最先端の、次世代の、ワールドクラスの、堅牢な、パワフルな、直感的な、革新的な、オールインワンの。
- フレーズ: 「今日のめまぐるしく変化する世界では」「あなたのXを次のレベルへ」「あなたがXであろうとYであろうと」「さようなら」「これ以上探す必要はありません」。
- 形式: 形容詞を3つ並べる（「速い。安全。シンプル。」）、中点を使ったリスト（
デザイン · ビルド · 出荷）、および製品のテキスト内のどこでも、ページ<title>、メタディスクリプション、alt テキストを含む em ダッシュ。代わりにコロン、カンマ、または2つの文を使用します：「Ledgerline: あらゆる通貨での請求書」。
それぞれを具体的な事実に置き換えます：何をするのか、どれだけ速いのか、誰のためのものか、どのような結果が得られるのか。「ワークフローをパワーアップ」ではなく「40分のレポートを2分に短縮」の方が優れています。
3. 見出し
- 見出しは要点を述べるものであり、トピックではありません。 「機能」ではなく「請求書の支払いが9日早くなります」。「ワークスペース」ではなく「ワークスペースは空です」。
- アイブローは使いません。 見出しの上に小さな大文字のラベル（「機能」「料金」「仕組み」）を置かないでください。単独で成立する見出しを書きましょう。
- ページタイトルは、ユーザーが今どこにいるかを示すように名前を付けます：「請求」、「チームメンバー」。
4. ボタンとリンク
- 動詞で始めて、結果を明示します： 「請求書を作成」「招待を送信」「CSV をエクスポート」。「送信」「OK」「はい」「ここをクリック」「もっと詳しく」だけでは不十分です。
- ボタンを、次に起こることと一致させます。 ボタンが「公開」なら、トーストは「公開しました」で、ページは公開状態を示します。
- プライマリとセカンダリは明確に異なるアクションである必要があります： 「はい」「いいえ」ではなく「プロジェクトを削除」と「キャンセル」。
- 1～3語が理想的です。 CTA は具体的なメリットを追加する場合に限り5語まで可能です（「無料で始める、カード不要」）。
- リンクテキストは単独で意味をなします （スクリーンリーダーはリンクを文脈から切り離してリスト表示します）：「こちら」ではなく「API ガイドを読む」。
- 破壊的なアクションは対象を明示します： 「3つのファイルを削除」「チームから Sam を削除」。
5. フォーム
- ラベルはフィールドの上に、常に表示。 プレースホルダーテキストはラベルではありません。入力を始めると消えます。
- プレースホルダーは形式を示し、指示ではありません：
[email protected]、MM / YY。ラベルで十分な場合は省略します。 - ヘルパーテキスト は入力前にユーザーが知る必要があるルールをフィールドの下に表示します：「12文字以上」。
- 必須フィールドではなく、オプションフィールドにマークを付けます （ほとんどのフィールドが必須の場合）：「会社名（任意）」。
- フォーカスが外れたとき、または送信時に検証します （キー入力ごとではありません）。エラーはそれが属するフィールドの横に表示します。
6. エラー
すべてのエラーは2つの質問に答えます：何が起こったのか、そして次に何をすべきか。
| 弱い | より良い |
|---|---|
| 無効な入力 | 今日より後の日付を入力してください |
| エラーが発生しました | サーバーに接続できませんでした。接続を確認して、もう一度お試しください。 |
| エラー 403 | このプロジェクトへのアクセス権がありません。オーナーに招待を依頼してください。 |
| アップロードに失敗しました | このファイルは24MBです。制限は10MBです。 |
| 支払いが拒否されました | カードが拒否されました。別のカードをお試しいただくか、銀行にお問い合わせください。 |
- ユーザーを責めないでください（「無効なメールアドレスが入力されました」）。修正方法を説明します（「[email protected] のようなメールアドレスを入力してください」）。
- コードやスタックトレースをメッセージに入れないでください。サポートが必要な場合に備えて、最後に参照 ID を付けます。
- ユーザーが入力した内容は保持します。1つのフィールドが失敗したからといって、フォーム全体をクリアしないでください。
7. 空の状態
空の状態は、新しいユーザーが最初に目にするものです。オンボーディングとして扱います：
- ここに何が表示されるかを伝えます：「送信した請求書がここに表示されます。」
- それを埋めるための1つのアクションを提供します：プライマリボタン「請求書を作成」。
- オプション：インポート、テンプレート、または短いガイドへのリンク。
「結果なし」の空の状態では、何を検索したかと、検索範囲を広げる方法を伝えます：「'invioce' の結果はありません。スペルを確認するか、フィルターをクリアしてください。」
8. ローディング、成功、トースト
- ローディング： 1秒以上かかる場合は、何が起こっているかを伝えます：「レポートを生成中…」。三点リーダー文字を使用します。
- 成功トースト： アクションの過去形と対象：「[email protected] に招待を送信しました」「プロジェクトを削除しました。元に戻す」。
- 元に戻せるアクションには、確認ダイアログではなく「元に戻す」を提供します。 元に戻せないアクションの場合にのみ確認を求めます。
- 確認ダイアログ： タイトルは実際の質問をします（「'Q3レポート' を削除しますか？」）、本文は結果を述べます（「これにより、全員から削除されます。この操作は元に戻せません。」）、ボタンはアクションを明示します（「レポートを削除」/「キャンセル」）。
9. 数字、日付、単位
- 数字を使います：「3つのファイル」ではなく「3ファイル」。
- ユーザーのロケールでフォーマットします。手作りの文字列ではなく、
Intl.NumberFormatとIntl.DateTimeFormat（またはtoLocaleString）を使用します。 - 最近のイベントには相対時間（「2分前」）、古いイベントには絶対日付（「3月4日」）を使用し、ツールチップに完全なタイムスタンプを表示します。
- 正しく複数形化します：「1ファイル」「2ファイル」「0ファイル」。
Intl.PluralRulesまたはヘルパー関数を使用し、「ファイル」のような括弧表記は絶対に使わないでください。 - 数字と単位は非改行スペース（HTML では
10 MB、JavaScript では"10\u00A0MB"）でくっつけ、改行で離れないようにします。
10. リアルなプレースホルダーコンテンツ
実際のコンテンツなしでデザインを構築する場合、実際のように見えるコンテンツを書きましょう：
- 具体的な名前とデータ： 「Maya Chen、Northwind のプロダクトデザイナー」「$12,480.00」「請求書 INV-2041」。「テスト太郎」「$XX」「Lorem ipsum」ではありません。
- リアルな長さ。 特に長いものを含めることで、レイアウトがテストされます：40文字の名前、1行の説明の隣にある3行の説明。
- 決して証拠をでっち上げないでください。 架空の顧客ロゴ、星評価、ユーザー数、または実際のものとして提示された推薦文は使用しません。マークされたプレースホルダー（
[顧客の声]、[ロゴ]）を使用するか、ユーザーに実際のものを依頼します。 - 製品の世界に合わせます。 開発ツールのサンプルデータはリポジトリとデプロイです。クリニックアプリのサンプルデータは予約と患者です。
11. コピーにおけるアクセシビリティ
- アイコンのみのボタンにはすべて、アクセシブルな名前を付けます：
aria-label="ダイアログを閉じる"。 - 画像が情報を伝える場合、alt テキストはそれが何を示しているかを説明します（「棒グラフ：1月以来、収益が24%増加」）。装飾的な画像は
alt=""とします。 - 色の単語だけに依存しないでください（「緑色のボタンをクリック」）。
- 対象読者が日常的に使用している場合を除き、最初に使用する際に略語を展開します。
12. 終了前の確認リスト
- セクション2の埋め草の単語、3つの形容詞のタグライン、インターフェース文字列内の em ダッシュがない。
- すべての見出しが要点を述べている。アイブローがない。
- すべてのボタンが動詞で始まり、その結果を明示している。
- すべてのエラーが何が起こったかと何をすべきかを伝えている。
- すべての空の状態が自らを説明し、次のアクションを提供している。
- 全体で文の先頭だけが大文字。
- サンプルコンテンツは具体的で、長さにばらつきがあり、でっち上げの証拠を含んでいない。
- アイコンのみのコントロールと意味のある画像にアクセシブルなテキストがある。