content-style-guide について
Bitwarden のユーザー向け製品コピーをレビューするスキルです。トーンの指針や評価手順に加え、文法とアクセシビリティの詳細ルールを参照できます。
主な機能
- 01製品の声とトーンの指針
- 02コンテンツ別のトーン設定
- 03構造化されたコピー評価形式
- 04文法とアクセシビリティの参考資料
- 05Figma のコピー検証ガイド
活用シーン
- 01エラーメッセージやダイアログのレビュー
- 02オンボーディングや空状態のコピー確認
- 03Figma デザイン内の文字列の検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ bitwarden/ ai-plugins --skill content-style-guideインストール後、Claude Code で/content-style-guideを入力して読み込まれたか確認します。
同梱ファイルreferences/accessibility-rules.mdreferences/grammar-mechanics.md
詳細
製品コンテンツのスタイルガイド
このスキルでは、Bitwarden の製品コンテンツスタイルガイドに基づいて、GUI の文言を決定します。エンドユーザー向けの文字列のみを対象としてください。ボタンラベル、エラーメッセージ、トースト、モーダル、オンボーディングフロー、空の状態、フォームラベル、補足テキスト、リンクテキストなどが含まれます。デザイントークン、コードコメント、社内向け/開発者向けの文字列、マーケティング文には適用しないでください。
特定のケースについて迷ったときは、文言を変更する前に確認してください。
ボイスとトーン
ボイスは一定です。トーンは状況に応じて変わります。
製品のボイスは親しみやすく、前向きで、率直です。プラットフォームを問わず一貫させてください。
トーンは雰囲気を伝えるもので、誰に何を伝えるのか、またどのような状況なのかによって変わります。セキュリティは重要です。ユーザーはユーモアや余計な飾りを求めているのではなく、自分の情報が安全であると知りたいのです。そのため、Bitwarden の製品トーンはほぼ常に真摯で、相手を尊重するものです。
トーンのスペクトラム:
- カジュアル ↔ フォーマル
- 熱意がある ↔ 事実を淡々と伝える
一般的なコンテンツタイプがトーンマップのどこに位置するか(軸:カジュアル ↔ フォーマル × 事実を淡々と伝える ↔ 熱意がある):
| コンテンツタイプ | カジュアル/フォーマル | 事実を淡々と伝える/熱意がある |
|---|---|---|
| 成功メッセージ | カジュアル | 熱意がある |
| オンボーディングの文言 | カジュアル | 熱意がある |
| ダイアログ | カジュアル | 事実を淡々と伝える |
| 空の状態 | カジュアル | 事実を淡々と伝える(やや) |
| ラベル | ニュートラル | 事実を淡々と伝える |
| コミュニティ | フォーマル | 熱意がある |
| 確認 | フォーマル | 事実を淡々と伝える |
| ヘルプ記事 | フォーマル(やや) | ニュートラル |
| 警告 | フォーマル | 事実を淡々と伝える |
| エラー状態 | フォーマル | 事実を淡々と伝える |
例
エラーメッセージ — フォーマル、事実を淡々と伝える:
- 良い例:エラーが発生しました。もう一度お試しください。
- 避ける例:あらら!やっちゃいました。更新してください!
オンボーディングメッセージ — カジュアル、熱意がある:
- 良い例:こんにちは!👋 Bitwarden へようこそ。使い方をご案内します!
- 避ける例:こちらが保管庫です。今すぐ始めましょう。
このスキルの適用方法
文言の明示的なレビュー中(「この文言をレビューしてください」「このエラーメッセージで問題ないですか」など):
- コンテンツタイプ(エラー、オンボーディング、ボタンなど)と、上記のトーンマップに基づく適切なトーンを特定します。
- ボイスの一貫性(親しみやすく、前向きで、率直であること)を確認します。
- 該当する文法と表記のルールを確認します。
references/grammar-mechanics.mdを参照してください。 - 該当するアクセシビリティのルールを確認します。
references/accessibility-rules.mdを参照してください。 - 「これは間違いです」と伝えるだけでなく、具体的で実行可能な書き換え案を提示します。
figma-to-angularの実行中(clients リポジトリにある外部スキルで、このバンドルには含まれていません):
Figma のデザインに文言が含まれている場合は、Angular テンプレートに出力する前に、このガイドに照らして確認してください。文字列が明らかにルールに違反している場合(例:ボタンのタイトルケース、アンパサンド、「Click here」というリンク)、問題点を示し、ガイドに準拠した代替案を提案してください。黙って書き換えてはいけません。どちらを使用するかユーザーに確認してください。
デザインレビューでの批評中:
進捗が60%または90%の段階では、視覚面のフィードバックにコンテンツに関する所見も含めてください(「細かな文法の確認、文言の最終調整」に適しているのは90%の段階です)。30%の段階では、文言が変わるため、コンテンツに関する細かな指摘は控えてください。コンテンツへのフィードバックも視覚面のフィードバックと同様に、個人の好みではなく、ユーザーや製品の目標に結び付けて伝えてください。
コピーの批評に関する出力形式
- コンテンツの種類と想定されるトーン — この文字列が何であり、トーンのどの程度に位置づけるべきかを示します。
- 良い点 — 維持すべき点を示します。
- 問題点 — それぞれを、このガイドの具体的なルールに結びつけます(ルールがリファレンスファイルにある場合は、そのファイル名を含むセクション名を引用してください)。
- 修正案 — ユーザーが選べる具体的な案を提示します。
批評は具体的にしてください。「ボタンの表記がタイトルケースになっています。references/grammar-mechanics.md(大文字表記)のルールではセンテンスケースを使います」のほうが、「大文字表記が適切ではありません」よりも適切です。
追加リソース
詳細なルールは、2つのリファレンスファイルに記載されています。批評に必要な場合は参照してください。コピーに関する問題の多くは、1つか2つのルールに関係します。
references/grammar-mechanics.md— 頭字語、アンパサンド、大文字表記(センテンスケース、製品名、機能、一般的なオブジェクトの小文字表記)、日付と月、曜日、e.g. / i.e.、三点リーダー、ファイルサイズと形式、金額、数値、オックスフォードコンマ、時刻とタイムゾーン、対比表現。references/accessibility-rules.md— 読みやすさと直接的な表現、一覧性の高いレイアウト、英語以外の言語と英語を母語としない人への配慮、頭字語の綴り出し、「easy」や「simple」という表現の回避、テキストのスタイル、空間表現、代替テキスト、意味が伝わるリンクテキスト、性別に依存しない代名詞。