copywriter

コピーライティングスキル

製品、マーケティング、ユーザーエクスペリエンスに役立つ、明確で説得力のあるコピーの作成をお手伝いします。

できること

UX ライティング：

• ボタンラベル、フォーム項目、エラーメッセージ
• 空の状態、オンボーディングフロー
• ツールチップ、ヘルプテキスト
• 確認ダイアログ

マーケティングコピー：

• ランディングページ、ヒーローセクション
• 機能の説明
• 行動喚起（CTA）ボタン
• メールキャンペーン

製品コンテンツ：

• 製品の説明
• 機能のお知らせ
• リリースノート
• ドキュメント

UX ライティングのパターン

ボタンラベル

// ❌ Bad: Vague, passive
<Button>Submit</Button>
<Button>OK</Button>
<Button>Click Here</Button>

// ✅ Good: Specific, action-oriented
<Button>Create Account</Button>
<Button>Save Changes</Button>
<Button>Start Free Trial</Button>

ガイドライン：

• 動詞＋名詞を使います（「保存」ではなく「変更を保存」）
• 具体的にします（「削除」ではなく「投稿を削除」）
• 結果がわかるようにします（「送信」ではなく「無料トライアルを開始」）

---

エラーメッセージ

// ❌ Bad: Technical, blaming user
"Invalid input"
"Error 422: Unprocessable Entity"
"You entered the wrong password"

// ✅ Good: Helpful, actionable
"Please enter a valid email address"
"We couldn't find an account with that email"
"Password must be at least 8 characters"

// Implementation
function PasswordInput() {
  const [error, setError] = useState('')

  const validate = (password: string) => {
    if (password.length < 8) {
      setError('Password must be at least 8 characters')
    } else if (!/[A-Z]/.test(password)) {
      setError('Password must include at least one uppercase letter')
    } else if (!/[0-9]/.test(password)) {
      setError('Password must include at least one number')
    } else {
      setError('')
    }
  }

  return (
    <div>
      <input type="password" onChange={(e) => validate(e.target.value)} />
      {error && <p className="text-red-600">{error}</p>}
    </div>
  )
}

エラーメッセージの構成：

1. 何が起きたか
2. なぜ起きたか（任意）
3. 解決方法

---

空の状態

// ❌ Bad: Just says it's empty
<EmptyState message="No results" />

// ✅ Good: Explains and guides user
function EmptySearchResults() {
  return (
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold">No results found</h3>
      <p className="mt-2 text-gray-600">
        Try adjusting your search or filters to find what you're looking for
      </p>
      <Button onClick={clearFilters} className="mt-4">
        Clear Filters
      </Button>
    </div>
  )
}

function EmptyInbox() {
  return (
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold">You're all caught up!</h3>
      <p className="mt-2 text-gray-600">
        No new messages. Enjoy your day! 🎉
      </p>
    </div>
  )
}

空の状態の構成：

• 見出し（何が空なのか）
• 説明（なぜ空なのか）
• アクション（次に何をするか）

---

フォームラベル

// ❌ Bad: Unclear, jargon
<Label>Metadata</Label>
<Label>FTP Credentials</Label>

// ✅ Good: Clear, helpful
<Label>
  Email Address
  <span className="text-gray-500 text-sm ml-2">
    We'll never share your email
  </span>
</Label>

<Label>
  Password
  <span className="text-gray-500 text-sm ml-2">
    Must be at least 8 characters
  </span>
</Label>

ラベルのガイドライン：

• 明確で日常的な言葉を使います
• 複雑な項目にはヘルプテキストを追加します
• 専門用語は避けます

---

読み込み中の状態

// ❌ Bad: Generic
<Loading message="Loading..." />

// ✅ Good: Specific, reassuring
function LoadingStates() {
  return (
    <>
      <Loading message="Creating your account..." />
      <Loading message="Processing payment..." />
      <Loading message="Uploading image (2/5)..." />
      <Loading message="This might take a minute..." />
    </>
  )
}

---

成功メッセージ

// ❌ Bad: Just confirms action
<Toast message="Saved" />

// ✅ Good: Confirms and suggests next step
function SuccessMessages() {
  return (
    <>
      <Toast
        message="Post published!"
        action={
          <Button onClick={viewPost}>View Post</Button>
        }
      />

      <Toast
        message="Payment successful. Receipt sent to your email."
      />

      <Toast
        message="Profile updated. Changes are now live."
      />
    </>
  )
}

---

ランディングページのコピー

ヒーローセクション

// components/Hero.tsx

export function Hero() {
  return (
    <section className="text-center py-20">
      {/* Headline: Clear value proposition */}
      <h1 className="text-5xl font-bold">
        Deploy your app in seconds, not hours
      </h1>

      {/* Subheadline: Expand on headline */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Skip the complex setup. Push your code and we'll handle the deployment,
        scaling, and monitoring automatically.
      </p>

      {/* CTA: Primary action */}
      <div className="mt-10 flex gap-4 justify-center">
        <Button size="lg">
          Start Free Trial
        </Button>
        <Button size="lg" variant="outline">
          Watch Demo (2 min)
        </Button>
      </div>

      {/* Social proof */}
      <p className="mt-8 text-sm text-gray-500">
        Trusted by 50,000+ developers at companies like Airbnb, Netflix, and Shopify
      </p>
    </section>
  )
}

ヒーローコピーの構成：

1. 見出し：主なメリット（何をするかではなく）
2. サブ見出し：仕組み、または対象者
3. CTA：主要なアクション
4. ソーシャルプルーフ：信頼性を高める要素

例：

❌ Bad:
"Cloud Deployment Platform"
"We provide deployment services"

✅ Good:
"Deploy with confidence"
"Ship faster with zero-config deploys"
"From code to production in 30 seconds"

---

機能の説明

// components/Features.tsx

const features = [
  {
    title: 'Lightning-Fast Deploys',
    description: 'Push your code and see it live in under 30 seconds. No waiting, no config files.',
    icon: '⚡'
  },
  {
    title: 'Auto-Scaling',
    description: 'Handle any traffic spike without lifting a finger. We scale from zero to millions seamlessly.',
    icon: '📈'
  },
  {
    title: 'Zero Downtime',
    description: 'Deploy updates without taking your site offline. Your users won't even notice.',
    icon: '🛡️'
  }
]

export function Features() {
  return (
    <section className="py-20">
      <h2 className="text-3xl font-bold text-center">
        Everything you need to ship fast
      </h2>

      <div className="mt-12 grid md:grid-cols-3 gap-8">
        {features.map((feature) => (
          <div key={feature.title}>
            <div className="text-4xl mb-4">{feature.icon}</div>
            <h3 className="text-xl font-semibold">{feature.title}</h3>
            <p className="mt-2 text-gray-600">{feature.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

機能コピーのガイドライン：

• 機能ではなくメリットに焦点を当てます
• 能動態を使います
• 具体的にします（数値、期間）
• ひと目で内容を把握できるようにします

---

行動喚起（CTA）

// Different CTA styles

// ❌ Generic
<Button>Sign Up</Button>
<Button>Learn More</Button>

// ✅ Value-focused
<Button>Start Free Trial</Button>
<Button>Get Started Free</Button>
<Button>Try it Free for 14 Days</Button>

// ✅ Urgency
<Button>Claim Your Spot</Button>
<Button>Join 10,000 Developers</Button>

// ✅ Low commitment
<Button>Browse Templates</Button>
<Button>See How It Works</Button>

CTA コピーの構成：

• 動詞から始めます
• メリットを強調します
• 利用のハードルを下げます（「無料」「クレジットカード不要」など）

---

メールのコピーライティング

ウェルカムメール

// Email template (React Email)
import { Button, Html, Heading, Text } from '@react-email/components'

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Heading>Welcome to TechStart, {name}! 👋</Heading>

      <Text>
        Thanks for signing up! We're excited to help you deploy faster.
      </Text>

      <Text>
        Here's what to do next:
      </Text>

      <ul>
        <li>Connect your Git repository</li>
        <li>Deploy your first project (takes 2 minutes)</li>
        <li>Invite your team members</li>
      </ul>

      <Button href="https://app.techstart.com/deploy">
        Deploy Your First Project
      </Button>

      <Text>
        Need help? Reply to this email or check our{' '}
        <a href="https://docs.techstart.com">docs</a>.
      </Text>

      <Text>
        Happy deploying!<br />
        The TechStart Team
      </Text>
    </Html>
  )
}

トランザクションメール

export function PaymentSuccessEmail({ orderNumber, total }: {
  orderNumber: string
  total: string
}) {
  return (
    <Html>
      <Heading>Payment Successful</Heading>

      <Text>
        We've received your payment of {total}.
      </Text>

      <Text>
        <strong>Order Number:</strong> {orderNumber}<br />
        <strong>Receipt:</strong> Sent to your email
      </Text>

      <Button href={`https://app.techstart.com/orders/${orderNumber}`}>
        View Order Details
      </Button>

      <Text>
        Questions? Contact [email protected]
      </Text>
    </Html>
  )
}

---

マイクロコピーの例

ツールチップ

// ❌ Bad: Repeats label
<Tooltip content="Click to delete">
  <Button>Delete</Button>
</Tooltip>

// ✅ Good: Adds helpful context
<Tooltip content="This action cannot be undone">
  <Button>Delete</Button>
</Tooltip>

<Tooltip content="Visible to all team members">
  <Toggle>Public</Toggle>
</Tooltip>

確認ダイアログ

// ❌ Bad: Scary, unclear
<Dialog
  title="Warning"
  message="Are you sure?"
  confirmButton="Yes"
/>

// ✅ Good: Clear, specific
<Dialog
  title="Delete this post?"
  message="This post will be permanently deleted. You can't undo this action."
  confirmButton="Delete Post"
  cancelButton="Cancel"
  variant="destructive"
/>

プレースホルダーテキスト

// ❌ Bad: Generic
<Input placeholder="Enter value" />

// ✅ Good: Helpful example
<Input placeholder="e.g., [email protected]" />
<Input placeholder="e.g., My Awesome Project" />
<TextArea placeholder="Tell us what happened..." />

---

ボイス＆トーンガイド

ブランドボイス（一貫性）

## TechStart Voice

**Professional but friendly**

- We're experts, but we don't talk down to you
- Use "we" and "you" (not "I" or "users")

**Clear and concise**

- Short sentences
- Simple words
- No jargon (unless necessary)

**Helpful and supportive**

- Anticipate questions
- Provide context
- Offer next steps

トーン（状況に応じて変化）

// Tone: Excited (product launch)
"We're thrilled to announce auto-scaling! 🎉"

// Tone: Reassuring (error message)
'Something went wrong, but your data is safe. Please try again.'

// Tone: Urgent (security alert)
'Action required: Suspicious login detected on your account'

// Tone: Casual (success message)
'All set! Your changes are live.'

// Tone: Professional (legal)
'By using this service, you agree to our Terms of Service.'

---

コピーライティングのチェックリスト

公開前に確認すること：

• 明確ですか？（12歳の子どもにも理解できますか？）
• 簡潔ですか？（不要な言葉を取り除いていますか？）
• 具体的ですか？（数値や例を使っていますか？）
• 行動につながりますか？（ユーザーが何をすべきかわかりますか？）
• 一貫していますか？（ブランドボイスに合っていますか？）
• アクセシブルですか？（スクリーンリーダーに対応していますか？）
• ひと目で内容を把握できますか？（見出し、箇条書き、短い段落を使っていますか？）

---

コピーライティングのリソース

効果的な言葉

緊急性： 今すぐ、本日限定、期間限定、終了間近、お急ぎください、迅速 価値： 無料、節約、ボーナス、追加、さらに 信頼： 保証済み、実証済み、認定済み、公式、安全 手軽さ： 簡単、シンプル、すばやく、手間いらず、即時

見出しの構成パターン

"How to [achieve goal] without [pain point]"
→ "How to deploy faster without complex configs"

"[Number] ways to [achieve benefit]"
→ "5 ways to ship code with confidence"

"Get [desired outcome] in [timeframe]"
→ "Get to production in 30 seconds"

"The [adjective] guide to [topic]"
→ "The complete guide to zero-downtime deploys"

---

こんなときにご利用ください

最適な用途：

• UX コピーの作成（ボタン、エラー、フォーム）
• ランディングページの作成
• 製品の説明文の作成
• メールキャンペーンの草案作成
• オンボーディングフローの構築

お手伝いできること：

• 明確で行動につながるコピーを作成します
• ブランドボイスに合わせます
• コンバージョン率を改善します
• ユーザーエクスペリエンスを向上させます
• 一貫性のあるメッセージを作成します

作成するもの

✏️ UX Copy (buttons, errors, labels)
📄 Landing Page Copy
📧 Email Templates
💬 Microcopy (tooltips, placeholders)
📚 Product Descriptions
🎯 CTAs that Convert

ユーザーの心に届くコピーを一緒に作りましょう！