mcpField
C
content-style-guide

content-style-guide

github.com/bitwardenデザイン・UI16244 回インストール今日更新
リポジトリ

content-style-guide について

Bitwarden のユーザー向け製品コピーをレビューするスキルです。トーンの指針や評価手順に加え、文法とアクセシビリティの詳細ルールを参照できます。

主な機能

  1. 01製品の声とトーンの指針
  2. 02コンテンツ別のトーン設定
  3. 03構造化されたコピー評価形式
  4. 04文法とアクセシビリティの参考資料
  5. 05Figma のコピー検証ガイド

活用シーン

  1. 01エラーメッセージやダイアログのレビュー
  2. 02オンボーディングや空状態のコピー確認
  3. 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 へようこそ。使い方をご案内します!
  • 避ける例:こちらが保管庫です。今すぐ始めましょう。

このスキルの適用方法

文言の明示的なレビュー中(「この文言をレビューしてください」「このエラーメッセージで問題ないですか」など):

  1. コンテンツタイプ(エラー、オンボーディング、ボタンなど)と、上記のトーンマップに基づく適切なトーンを特定します。
  2. ボイスの一貫性(親しみやすく、前向きで、率直であること)を確認します。
  3. 該当する文法と表記のルールを確認します。references/grammar-mechanics.mdを参照してください。
  4. 該当するアクセシビリティのルールを確認します。references/accessibility-rules.mdを参照してください。
  5. 「これは間違いです」と伝えるだけでなく、具体的で実行可能な書き換え案を提示します。

figma-to-angularの実行中(clients リポジトリにある外部スキルで、このバンドルには含まれていません):

Figma のデザインに文言が含まれている場合は、Angular テンプレートに出力する前に、このガイドに照らして確認してください。文字列が明らかにルールに違反している場合(例:ボタンのタイトルケース、アンパサンド、「Click here」というリンク)、問題点を示し、ガイドに準拠した代替案を提案してください。黙って書き換えてはいけません。どちらを使用するかユーザーに確認してください。

デザインレビューでの批評中:

進捗が60%または90%の段階では、視覚面のフィードバックにコンテンツに関する所見も含めてください(「細かな文法の確認、文言の最終調整」に適しているのは90%の段階です)。30%の段階では、文言が変わるため、コンテンツに関する細かな指摘は控えてください。コンテンツへのフィードバックも視覚面のフィードバックと同様に、個人の好みではなく、ユーザーや製品の目標に結び付けて伝えてください。

コピーの批評に関する出力形式

  1. コンテンツの種類と想定されるトーン — この文字列が何であり、トーンのどの程度に位置づけるべきかを示します。
  2. 良い点 — 維持すべき点を示します。
  3. 問題点 — それぞれを、このガイドの具体的なルールに結びつけます(ルールがリファレンスファイルにある場合は、そのファイル名を含むセクション名を引用してください)。
  4. 修正案 — ユーザーが選べる具体的な案を提示します。

批評は具体的にしてください。「ボタンの表記がタイトルケースになっています。references/grammar-mechanics.md(大文字表記)のルールではセンテンスケースを使います」のほうが、「大文字表記が適切ではありません」よりも適切です。

追加リソース

詳細なルールは、2つのリファレンスファイルに記載されています。批評に必要な場合は参照してください。コピーに関する問題の多くは、1つか2つのルールに関係します。

  • references/grammar-mechanics.md — 頭字語、アンパサンド、大文字表記(センテンスケース、製品名、機能、一般的なオブジェクトの小文字表記)、日付と月、曜日、e.g. / i.e.、三点リーダー、ファイルサイズと形式、金額、数値、オックスフォードコンマ、時刻とタイムゾーン、対比表現。
  • references/accessibility-rules.md — 読みやすさと直接的な表現、一覧性の高いレイアウト、英語以外の言語と英語を母語としない人への配慮、頭字語の綴り出し、「easy」や「simple」という表現の回避、テキストのスタイル、空間表現、代替テキスト、意味が伝わるリンクテキスト、性別に依存しない代名詞。

コメント