app-copy について
app-copyは、既存アプリのUI文言の監査や、アプリの説明からマイクロコピー一式を作成するスキルです。画面と操作の種類ごとに整理し、文体や各種UI状態の指針、確認項目を扱います。
主な機能
- 01既存UI文言の監査と採点
- 02画面ごとのマイクロコピー作成
- 038種類のUI文言カテゴリに対応
- 04製品に合わせた文体調整
- 05明確さとボタンラベルの確認
活用シーン
- 01既存アプリのハードコード文字列を点検
- 02新規アプリのUI文言を作成
- 03空状態、エラー、ボタンの文言を改善
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ tushaarmehtaa/ tushar-skills --skill app-copyインストール後、Claude Code で/app-copyを入力して読み込まれたか確認します。
詳細
既存の UI コピーを監査するか、アプリのマイクロコピーを一度にすべて生成します。画面とインタラクションの種類ごとに整理されたコピー資料を出力します。
フェーズ 1:モードを決定する
監査モード — コードベースが存在します。ハードコードされた文字列、プレースホルダーテキスト、汎用メッセージをスキャンし、評価して書き直します。
生成モード — ユーザーがアプリについて説明します。ゼロから完全なコピー資料を作成します。
スキャン方法: ページコンポーネントを読み、次を探します。
- JSX/TSX 内の文字列(
<p>、<h1>、ボタンのテキスト、placeholder 属性) - トースト/通知メッセージ(
toast(、notify(、alert(を検索) - エラーバウンダリーと catch ブロック
- 空状態コンポーネント(「empty」「no results」「nothing here」「get started」を検索)
- 読み込み中のテキスト(「loading」「please wait」、スケルトンコンポーネントを検索)
- フォームの検証メッセージ
- モーダル/ダイアログのコピー
書き始める前に、次の情報を集めます。
- アプリの機能(1 文)
- ブランドのトーン(カジュアル/プロフェッショナル/遊び心のある/ミニマル)
- 主なユーザー
コードベースから判断できる場合は、質問しないでください。
フェーズ 2:8 つのコピーカテゴリ
監査モードでは各項目を 1~10 で評価します。生成モードではチェックリストとして使います。
空状態(15%) — ユーザーがまだ何もしていないときに表示される内容です。多くのアプリで最も不十分な部分です。空状態では、ここに何が表示されるのかを説明し、作成方法を示し、何もない状態ではなく、使いたくなる印象を与える必要があります。「項目はまだありません」は 1/10 です。
エラーメッセージ(15%) — 何が壊れたのか、その理由、次に何をすればよいのかを伝えます。次の 3 つの要素が必要です。(1)何が起きたのか、(2)その理由、(3)今できること。ユーザーを責めてはいけません。曖昧な表現も避けてください。「問題が発生しました」は 1/10 です。
ボタンラベル(15%) — すべてのボタンは「私は___したい」という文を完成させる必要があります。「送信」はこのテストに合格しません。「下書きを保存」「招待を送信」「プロジェクトを作成」なら合格です。
オンボーディング(15%) — 初回利用時の体験です。ウェルカムメッセージ、セットアップ手順、最初のアクションを促す文言が含まれます。価値を実感するまでの時間を短縮する必要があります。機能を説明するのではなく、最初のアクションへ導いてください。
読み込みと進捗(10%) — 待機中に何が起きているかを伝えます。スケルトン画面 > スピナー >「読み込み中…」の順で効果的です。時間のかかる処理では、進捗と処理内容を表示してください。スピナーだけより「データを処理しています」のほうが効果的です。
成功メッセージ(10%) — 操作が成功したことを確認します。具体的に伝えます。「成功!」ではなく、「[email protected] に請求書を送信しました」とします。必要に応じて、次のアクションも提示してください。
ツールチップとヘルプテキスト(10%) — 状況に応じたガイダンスです。ユーザーがその場で疑問に思っていることに答えます。15 語以内にしてください。それ以上必要な場合は、ドキュメントへのリンクを付けます。
確認ダイアログ(10%) — 取り消せない操作では、影響を明確にします。何が起きるか、取り消せないことは何かを伝え、主ボタンには操作を表す動詞を使います。「よろしいですか?[OK][キャンセル]」ではなく、「3 件のプロジェクトを削除」とします。
フェーズ 3:トーンを調整する
コピーを書く前に、トーンを決めます。
カジュアル(Slack、Notion) — 短縮形を使い、すべて小文字にし、適切な場面ではユーモアを交えます。「準備完了です!」/「ここにはまだ何もありません。最初のプロジェクトを作成しましょう」
プロフェッショナル(銀行、医療、エンタープライズ) — 正しい大文字表記を使い、ユーモアを避け、正確な言葉を選びます。「振込手続きを開始しました。」/「レコードが見つかりません。上の検索フィルターをお使いください。」
遊び心のあるトーン(Duolingo、Mailchimp) — 個性を前面に出し、絵文字も使い、キャラクターらしい口調にします。「やったね!大成功!」/「受信トレイが寂しがっています。最初のキャンペーンを送りましょう!」
ミニマル(Linear、Vercel) — できるだけ短くし、余計な言葉を省き、簡潔にします。「問題なし」/「デプロイ済み」/「保存済み」
製品に明確な理由がない限り、カジュアルを基本にしてください。 多くのインディー製品や雰囲気重視でコーディングされた製品には、カジュアルなトーンが適しています。
フェーズ 4:空状態のルール
空状態のコピーは、どのアプリでも最も軽視されがちです。また、新しいユーザーが最初に目にするものでもあります。
構成:
[Illustration or icon — optional but effective]
[Headline — what will appear here]
[Subtext — how to create the first one]
[CTA button — the action to take]
良い例:
No projects yet
Create your first project to get started.
[+ New Project]
No messages
When someone messages you, it'll show up here.
Your dashboard is empty
Connect your first data source to see metrics.
[Connect Data Source]
悪い例:
No data ← says nothing
Nothing to show ← no guidance
0 results found ← database language, not human language
No items match your search ← ok but add "Try different keywords"
フェーズ 5:エラーメッセージのルール
すべてのエラーには 3 つの役割があります。何が起きたのか、なぜ起きたのか、次に何をすればよいのかを伝えます。
定型: [何が起きたか]. [理由/背景]. [次に何をすればよいか].
Couldn't save your changes. The server didn't respond. Try again in a few seconds.
That email is already registered. Sign in instead?
File too large. Max size is 10MB. Try compressing the image first.
Payment failed. Your card was declined. Update your payment method to continue.
次のような表現は使わないでください:
- 「問題が発生しました」(何が問題だったのでしょうか?)
- 「入力が無効です」(どの入力でしょうか?何が問題なのでしょうか?)
- 「エラー 500」(ユーザーには意味がありません)
- 「しばらくしてからもう一度お試しください」(「しばらく」とはいつでしょうか?)
- 「予期しないエラーが発生しました」(すべてのエラーは予期しないものです)
- 重大なエラーの前に「おっと!」と付ける(決済の失敗はかわいくありません)
フェーズ 6:ボタンと CTA のルール
すべてのボタンは、「私は ___ したい」という文を完成させるものにします。
ボタンが何であるかではなく、何をするかを組み合わせます:
"Save changes" ← what it does
"Submit" ← what it is (bad)
"Send invitation" ← specific action
"Confirm" ← vague (bad)
"Delete account" ← clear stakes
"OK" ← unclear stakes (bad)
"Start free trial" ← value clear
"Get Started" ← started with what? (bad)
破壊的な操作のボタンには、操作を明記する必要があります。「プロジェクトを削除」「メンバーを削除」「サブスクリプションをキャンセル」のようにします。対象を示さず、単に「削除」や「キャンセル」とするのは避けてください。
フェーズ 7:出力形式
監査結果:
APP COPY AUDIT — [product]
════════════════════════════════════
Empty States [X/10] [one-line note]
Error Messages [X/10] [one-line note]
Button Labels [X/10] [one-line note]
Onboarding [X/10] [one-line note]
Loading & Progress [X/10] [one-line note]
Success Messages [X/10] [one-line note]
Tooltips & Help [X/10] [one-line note]
Confirmations [X/10] [one-line note]
────────────────────────────────────
Overall [X/80]
════════════════════════════════════
REWRITES (worst 3 categories):
[Category] — [file:line]
Before: "[original text]"
After: "[rewritten text]"
生成結果:
画面/コンポーネントごとに整理します。各項目:
[Screen Name]
empty state: "[copy]"
error: "[copy]"
success: "[copy]"
buttons: "[label1]" / "[label2]"
placeholder: "[copy]"
生成後、コードベースに直接コピーを書き込むことを提案してください。コンポーネントを見つけて、該当する文字列をその場で置き換えます。
検証
[ ] Every empty state explains what will appear and how to create it
[ ] Every error message has: what happened + why + what to do next
[ ] Every button passes the "I want to ___" test
[ ] No "Submit", "OK", "Confirm", "Click here", "Learn more" without context
[ ] No "Something went wrong" or "An error occurred" anywhere
[ ] No "Loading..." as the only loading indicator
[ ] Success messages are specific — name the thing that was created/sent/saved
[ ] Destructive buttons name the object being destroyed
[ ] Voice is consistent across all copy (same tone, same casing, same punctuation)
[ ] No lorem ipsum, placeholder text, or TODOs left in the codebase