MENU
  1. ホーム
  2. Column
  3. リリース前に必ず確認！バイブコーディング＆非エンジニア向けWebアプリ安全チェックリスト

リリース前に必ず確認！バイブコーディング＆非エンジニア向けWebアプリ安全チェックリスト

Column

Cursor、Claude、v0などのAIツールで爆速開発できる時代になりました。しかし、「AIが生成したコードだから安全」と思い込んで公開すると、セキュリティ事故やユーザー体験の問題が発生します。

この記事では、AI開発で見落としがちなポイントを中心に、リリース前に必ず確認すべき項目をチェックリスト形式で解説します。実際に失敗した経験や、非エンジニアがハマりやすい落とし穴を踏まえた内容です。

目次

AI開発で見落としがちな3つの落とし穴

1. AIはセキュリティを「教科書通り」にしか実装しない

CursorやClaudeにコードを書かせると、基本的なセキュリティは実装してくれます。しかし、あなたのサービス固有のリスクは考慮されません。

具体例：

  • ユーザー名をhttps://example.com/users/◯◯で表示する機能を実装した
  • AIは「バリデーションを追加」と言われて文字数制限だけ実装
  • 結果、/adminや/apiなど予約語のユーザー名が登録できてしまった

2. v0やBoltで作ったUIは「見た目」しか考えていない

v0やBoltは美しいUIを生成しますが、アクセシビリティやSEOは無視されがちです。

具体例：

  • 画像のalt属性が全て空
  • ボタンが<div onClick>で実装されている（キーボード操作不可）
  • <title>タグが全ページで同じ

3. エラーハンドリングが「Happy Path」しか想定していない

AIは「正常系」のコードは完璧に書きますが、異常系の処理は忘れがちです。

具体例：

  • 決済処理でStripeの支払いは成功したが、DB更新でエラー発生
  • ユーザーは課金されたのにサービスが使えない
  • エラー通知の実装がないため、数日間気づかない

【公開3日前】基礎セキュリティの確認

まず最優先で確認すべきセキュリティ項目です。これを怠ると即座にインシデントに繋がります。

認証・Cookie設定

  • □ Cookie に HttpOnly 属性が設定されている（XSS緩和策）
  • □ Cookie に Secure 属性が設定されている（HTTPS通信のみ）
  • □ Cookie に SameSite=Lax または Strict が設定されている（CSRF対策）
  • □ パスワード再設定で「このメールアドレスは登録されていません」などのエラーメッセージを出していない（メールアドレス列挙対策）

失敗例：Firebase Authenticationはデフォルトでメールアドレスの存在確認ができてしまう仕様でした（2023年に修正済み）

ユーザー入力のバリデーション

  • □ バリデーションがサーバーサイドでも実行されている（クライアントだけでは不十分）
  • □ ユーザー指定のURL（プロフィールのWebサイト等）で javascript: プロトコルを拒否している
  • □ ユーザー名やハンドルネームに予約語（admin、api、settings等）が使えないようになっている
  • □ SQL文でプレースホルダを使用している（SQLインジェクション対策）

予約語の例：admin, api, settings, login, logout, register, dashboard, _next（Next.js）、_app（一部フレームワーク）

HTTPS・セキュリティヘッダー

  • □ Strict-Transport-Security ヘッダーが設定されている
  • □ X-Content-Type-Options: nosniff が設定されている
  • □ X-Frame-Options: DENY または SAMEORIGIN が設定されている（クリックジャッキング対策）
// Next.jsの例（next.config.js）
{
  headers: async () => [{
    source: '/:path*',
    headers: [
      { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
      { key: 'X-Content-Type-Options', value: 'nosniff' },
      { key: 'X-Frame-Options', value: 'DENY' }
    ]
  }]
}

【公開1日前】ユーザー体験の確認

メール送信設定

  • □ SPF / DKIM / DMARC の設定が完了している
  • □ 大量のメールを送る場合、1時間に数百通を超えないように制限している
  • □ メール本文にユーザー入力が含まれる場合、スパムメールとして悪用されないか確認している

失敗例：フォロー通知機能で、1人が1000人をフォローすると1000通のメールが一斉送信され、メール送信サービスからBANされた

SEO基本設定

  • □ 全ページで <title> タグが適切に設定されている
  • □ トップページに meta description が設定されている
  • □ エラーページ（404、500等）のステータスコードが正しい
  • □ <html lang="ja"> になっている（日本語サイトの場合）
  • □ サイト全体に noindex が付与されていない（開発中の設定を外し忘れ）

よくある失敗：Next.jsでは lang="en" がデフォルト。日本語サイトなのに英語設定のまま公開してしまうケースが多い

OGP設定（SNSシェア対策）

  • □ og:title が設定されている
  • □ og:description が設定されている
  • □ og:image が設定されている（1200×630px推奨）
  • □ twitter:card が設定されている

アクセシビリティ最低限

  • □ 画像に alt 属性が設定されている
  • □ アイコンだけのボタンに aria-label が設定されている
  • □ キーボードで操作できる（Tab キーでフォーカス移動、Enter で実行）
<!-- 悪い例 -->
<div onClick={handleClick}>
  <svg>...</svg>
</div>

<!-- 良い例 -->
<button onClick={handleClick} aria-label="メニューを開く">
  <svg aria-hidden="true">...</svg>
</button>

【公開当日】最終チェック

複数デバイス・ブラウザで確認

  • □ スマホサイズで表示してUIが崩れていない
  • □ Safari、Firefox、Chromeで動作確認している
  • □ 長いユーザー名やテキストを入力しても見た目が崩れない

よくある失敗：Chromeでしか確認せず、Safariで開いたらレイアウトが崩れていた

パフォーマンス基本

  • □ 画像に width / height または aspect-ratio が設定されている（レイアウトシフト防止）
  • □ 必要以上に大きい画像（2MB以上）を小さく表示していない
  • □ 静的ファイル（JS/CSS）がCDNから配信されている

エラーページ・ファビコン

  • □ 404ページが用意され、トップページへのリンクがある
  • □ 500エラーページが用意されている
  • □ ファビコンが設定されている
  • □ apple-touch-icon が設定されている

【公開後】監視と改善

エラー監視

  • □ サーバーエラーが発生したときに通知される仕組みがある（Sentry、Slack等）
  • □ Google AnalyticsまたはPlausibleなどのアクセス解析を導入している

決済機能がある場合

  • □ Stripe決済が成功したがDB更新に失敗した場合の検知ができる
  • □ 重複決済が発生しない実装になっている
  • □ サブスク契約中のユーザーが退会したときに自動キャンセルされる
  • □ カード期限切れでサブスク更新失敗時に、ユーザーに通知される

失敗例：Stripeで決済成功 → DBエラーで処理失敗 → ユーザーは課金されたのにサービス使えず → 3日後にクレームで発覚

コピペ用：Markdown形式チェックリスト

以下をコピーして、Notion、GitHub Issues、Trelloなどに貼り付けて使えます。

## 【公開3日前】基礎セキュリティ
- [ ] Cookie に HttpOnly 属性が設定されている
- [ ] Cookie に Secure 属性が設定されている
- [ ] Cookie に SameSite=Lax または Strict が設定されている
- [ ] パスワード再設定でメールアドレス列挙ができない
- [ ] バリデーションがサーバーサイドでも実行されている
- [ ] ユーザー指定URLで javascript: プロトコルを拒否している
- [ ] ユーザー名に予約語が使えないようになっている
- [ ] Strict-Transport-Security ヘッダーが設定されている
- [ ] X-Content-Type-Options: nosniff が設定されている
- [ ] X-Frame-Options が設定されている

## 【公開1日前】ユーザー体験
- [ ] SPF / DKIM / DMARC の設定が完了している
- [ ] メール送信が大量に発生しないように制限している
- [ ] 全ページで <title> タグが適切に設定されている
- [ ] <html lang="ja"> になっている
- [ ] サイト全体に noindex が付与されていない
- [ ] og:title, og:description, og:image が設定されている
- [ ] 画像に alt 属性が設定されている
- [ ] アイコンだけのボタンに aria-label が設定されている

## 【公開当日】最終チェック
- [ ] スマホサイズでUIが崩れていない
- [ ] Safari、Firefox、Chromeで動作確認している
- [ ] 画像にwidth/heightまたはaspect-ratioが設定されている
- [ ] 404ページが用意されている
- [ ] ファビコンが設定されている

## 【公開後】監視
- [ ] サーバーエラーの通知設定が完了している
- [ ] アクセス解析ツールを導入している

まとめ：AI開発でも基本は忘れずに

AI開発ツールは驚異的に便利ですが、セキュリティやアクセシビリティは自分で確認する必要があります。

このチェックリストのポイント：

  • ✅ AIが見落としがちなセキュリティを重点的にカバー
  • ✅ 時系列で整理（3日前→1日前→当日→公開後）
  • ✅ コピペで使えるMarkdown形式を提供
  • ✅ 実際の失敗例から学ぶ

特に、Cookie設定、ユーザー入力のバリデーション、メール送信制限は、AIが完璧に実装してくれないポイントです。公開前に必ず確認してください。

開発効率をさらに高める関連記事

リリース前のチェックが完了したら、開発効率を高めるツールやセキュリティ対策も学んで、より安全で効率的な開発体制を構築しましょう：

AI開発ツール

ノーコード・自動化

Column
AI開発 Cursor v0 Webセキュリティ セキュリティ対策 チェックリスト バイブコーディング リリース前確認 開発者ツール 非エンジニア
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次