プライバシーポリシーと利用規約ページを作る

レストランを開業するとき、メニュー表だけでなく「お店のルール」を入口に掲示しますよね。Webサイトでも同じです。プライバシーポリシー（＝お客さんの情報をどう扱うかの約束事）と利用規約（＝サイトを使う際のルール）は、サイトを公開する前に必ず用意しておきたいページです。

このレッスンでは、AIツール（＝人工知能を使った便利な助手）に文章のたたき台を作ってもらい、自分のNext.js（＝Webサイトを組み立てるための道具セット）プロジェクトに2ページ追加します。15分あれば完成しますので、リラックスして進めましょう。

このレッスンを始める前に、次の2つが揃っているか確認してください。

• Next.jsのプロジェクトが動いている — ブラウザで http://localhost:3000 を開いて自分のサイトが表示される状態
• AIツールが使える — 以下のどれか1つが使えればOKです
  • Claude Code（ターミナルで動くAI助手）
  • Codex CLI（ターミナルで動くAI助手）
  • Cursor（AIが組み込まれたコードエディタ）
  • ChatGPT（ブラウザで使えるAIチャット）

まだプロジェクトが準備できていない方は、先に「Next.jsプロジェクトを作る」のレッスンを終えてから戻ってきてくださいね。

料理のレシピをプロの料理人に相談するように、法律文章の「たたき台（＝下書き）」をAIに作ってもらいましょう。

使うAIツールを選ぶ

AIに指示を出す（プロンプト例）

次のテキストをコピーして、AIツールにそのまま貼り付けてください。あなたのサービス名 と サービスの概要 だけ、自分のものに書き換えます。

私のWebサイト「あなたのサービス名」向けに、以下の2つのページを作成してください。

1. プライバシーポリシー（個人情報の取り扱いについて）
2. 利用規約（サイト利用のルールについて）

サービスの概要: ユーザーがログインしてメモを保存できるWebアプリ
保存するユーザー情報: メールアドレス、表示名
日本の個人情報保護法に基づく内容にしてください。

出力形式:
- 各ページを Next.js の App Router 用コンポーネント（TSXファイル）として出力
- Tailwind CSS の prose クラスで読みやすく整形
- ファイルパスも明記してください

ポイント: AIにファイルの形式（TSXファイル）まで指定すると、コピペだけで完成するコードが出てきます。

良い指示と悪い指示を比べる

良い例: 「私のWebアプリ『メモ帳アプリ』向けに、ユーザーのメールアドレスと表示名を保存する前提で、日本の法律に基づくプライバシーポリシーをTSXファイルとして作ってください。」 → サービス名・扱う情報・出力形式が明確なので、AIがそのまま使えるコードを出してくれます。

悪い例: 「プライバシーポリシー書いて」 → 情報が足りず、自分のサイトに合わない一般論が出力されてしまいます。

AIが書いてくれたコードを、プロジェクトの正しい場所に保存します。手紙を正しい郵便受けに入れるイメージです。

Claude Code / Codex CLI を使っている場合

AIがファイルを自動で作成してくれる場合が多いです。AIの回答に「ファイルを作成しました」と表示されたら、ステップ3に進んでください。自動作成されなかった場合は、次の「手動で配置する」の手順に進みます。

Cursor を使っている場合

AIの回答に「Apply」ボタンが表示されたら、それをクリックするだけで自動的にファイルが作られます。表示されない場合は「手動で配置する」に進んでください。

手動で配置する（ChatGPT などの場合）

AIの出力をコピーして、以下の2つのファイルを手で作ります。

ファイル1: プライバシーポリシー

プロジェクトフォルダの app/privacy/page.tsx というファイルを新規作成し、AIの出力を貼り付けます。もしAIが完成コードを出してくれなかった場合は、以下のテンプレートを使ってください。

export default function PrivacyPage() {
  return (
    <main className="prose mx-auto max-w-3xl p-8">
      <h1>プライバシーポリシー</h1>
      {/* ここにAIが書いた内容を <p> タグで囲んで貼り付ける */}
    </main>
  );
}

ファイル2: 利用規約

同じ要領で app/terms/page.tsx を作成します。

export default function TermsPage() {
  return (
    <main className="prose mx-auto max-w-3xl p-8">
      <h1>利用規約</h1>
      {/* ここにAIが書いた内容を <p> タグで囲んで貼り付ける */}
    </main>
  );
}

prose というクラス名（Tailwind CSS の機能）を付けておくと、見出しや段落が自動で見やすく整形されます。

ファイルを保存したら、ブラウザで次の2つのURLを順番に開いてみましょう。

• http://localhost:3000/privacy → プライバシーポリシーが表示される
• http://localhost:3000/terms → 利用規約が表示される

確認チェックリスト

以下の5項目すべてにチェックが入れば合格です。

• プライバシーポリシーのページがブラウザに表示される（404エラーにならない）
• 利用規約のページがブラウザに表示される（404エラーにならない）
• 自分のサービス名が正しく文中に入っている
• 見出しが大きく表示され、段落が読みやすく整っている
• 読んでみて違和感のない日本語になっている

最初の出力をそのまま使ってもいいですが、気になる点があればAIにお願いして直してもらいましょう。

追加のプロンプト例:

先ほど作ったプライバシーポリシーに、以下の内容を追加してください。
- Cookieの使用について
- Google Analyticsを使ったアクセス解析について
- お問い合わせ先の情報

利用規約の文章がちょっと硬いので、もう少し柔らかい表現にしてください。
個人で運営する小さなWebサービスなので、堅苦しくならない程度でお願いします。

ヒント: 一度で完璧にしようとせず、「こうしてほしい」を追加で伝えるのがAIとの上手な付き合い方です。

ページが「404 Not Found」になる

ファイルの場所が間違っている可能性が高いです。以下を確認してください。

1. ファイル名が page.tsx になっているか（Page.tsx や index.tsx ではダメ）
2. フォルダ構造が app/privacy/page.tsx になっているか（app フォルダの直下に privacy フォルダがあり、その中に page.tsx がある）
3. 開発サーバー（npm run dev で起動したもの）が動いているか

AIに助けてもらう方法: 「app/privacy/page.tsx を作ったのに 404 になります。原因を調べてください」とAIに聞いてみましょう。ファイルの場所や内容をチェックしてくれます。

文字化けする

ファイルの保存形式が「UTF-8」になっているか確認してください。ほとんどのエディタは初期設定でUTF-8なので問題ありませんが、Windowsのメモ帳で編集した場合は注意が必要です。

AIの出力に自分のサービス名が入っていない

指示文の中にサービス名を入れ忘れた可能性があります。「サービス名を『〇〇アプリ』に書き換えてください」と追加で伝えましょう。

「prose」クラスが効かず文字が小さいまま

Tailwind CSS の Typography プラグイン（文章を見やすく整える追加機能）が入っていない可能性があります。AIに次のように聞いてみてください。

Tailwind CSS の typography プラグインをインストールして設定してください

---

おつかれさまでした！ これでサイトに必要な法律ページが2つ完成しました。どちらもAIに作ってもらった文章なので、公開前に一度じっくり読み返して、自分のサービスに合っているか最終確認してくださいね。

次は、これらのページへのリンクをフッター（ページの一番下にある共通メニュー）に追加して、どのページからでもアクセスできるようにしましょう。