★☆★ ようこそ！！ Claude Code × ロリポップ！活用ガイドへ！！ ★☆★ このページはリンクフリーです！！ バナーはお持ち帰りください ★☆★ キリ番踏んだ方はBBSに報告してね！！ ★☆★
🚧 このサイトは永遠に工事中です 🚧

Claude Code × ロリポップ！活用ガイド

外部公開したいときに使えるプロンプト集

対象読者: Claude Code でサイトやアプリを作ったけど、「公開する」ための指示の出し方がわからない人。ロリポップ！レンタルサーバーでの公開を前提としています。

なぜ「公開用のプロンプト」が必要なのか？

Claude Code で作ったサイトは、そのままでは「自分のPC上」でしか見られません。外部に公開するためには、以下のような追加作業が必要です:

これらをすべて Claude Code に指示できます。 以下のプロンプト集をコピペ＆カスタマイズして使ってください。

Step 1: 公開前の最終チェックを依頼する

プロンプト: 公開前チェックリストを作ってもらう

このWebサイトをインターネットに公開します。
ロリポップ！レンタルサーバーにアップロードする前に、
公開前のチェックリストを作って、問題があれば修正してください。

チェックしてほしいポイント:
- リンク切れがないか
- 画像パスが正しいか（相対パスになっているか）
- 個人情報やテストデータが残っていないか
- メタタグ（title, description）が設定されているか
- favicon が設定されているか
- OGP画像（SNSシェア用）が設定されているか

ポイント

Step 2: SEO対策を施す

プロンプト: 基本的なSEO対策

このHTMLファイルに SEO 対策を施してください。

対策してほしい内容:
- title タグを最適化（30文字前後で、キーワードを含む）
- meta description を追加（120文字前後で、ページの内容を要約）
- 見出しタグ（h1〜h3）の構造を最適化
- 画像に alt 属性を追加
- 構造化データ（JSON-LD）を追加（ローカルビジネスの場合）
- canonical URL を設定
- sitemap.xml を生成

サイトの情報:
- サイト名: ○○
- 事業内容: ○○
- ターゲットキーワード: ○○
- 所在地: ○○（ローカルビジネスの場合）

[ここにHTMLコードを貼る]

プロンプト: sitemap.xml と robots.txt を生成

以下のサイト構成で sitemap.xml と robots.txt を作ってください。
ドメインは https://www.example.com です。

ページ一覧:
- トップページ (index.html)
- サービス紹介 (service.html)
- 会社概要 (about.html)
- お問い合わせ (contact.html)
- ブログ一覧 (blog/index.html)

Step 3: セキュリティ対策を指示する

プロンプト: お問い合わせフォームのセキュリティ

このお問い合わせフォーム（PHP）にセキュリティ対策を追加してください。

必要な対策:
- CSRF 対策（トークンの生成と検証）
- XSS 対策（入力値のエスケープ）
- SQLインジェクション対策（もしDBを使っている場合）
- メールヘッダインジェクション対策
- 入力値のバリデーション強化
- レートリミット（連続送信の防止）

ロリポップ！のサーバーで動くPHPコードにしてください。

[ここにPHPコードを貼る]

プロンプト: .htaccess でのセキュリティ設定

ロリポップ！のサーバー（Apache）で使う .htaccess ファイルを作ってください。

設定してほしい内容:
- ディレクトリ一覧の表示を無効化
- .htaccess 自体へのアクセスを禁止
- 特定のファイル（.env, .git 等）へのアクセスを禁止
- XSS 対策のヘッダー追加
- クリックジャッキング対策
- HTTPS へのリダイレクト（SSL設定済みの場合）
- キャッシュの設定（画像・CSS・JSの有効期限）

Step 4: パフォーマンス最適化を依頼する

プロンプト: 表示速度の改善

このWebサイトの表示速度を改善してください。

やってほしいこと:
- CSS を minify（圧縮）する
- JavaScript を minify する
- 画像の遅延読み込み（lazy loading）を設定する
- 不要な CSS / JavaScript を削除する
- フォントの読み込みを最適化する
- above the fold（最初に見える部分）の表示を優先する

ロリポップ！のサーバーで動かします。
ビルドツール（webpack等）は使わず、手動で適用できる方法でお願いします。

[ここにHTMLコードを貼る]

ポイント

Step 5: レスポンシブ対応の最終調整

プロンプト: スマホ表示の修正

このHTMLをスマホで見たときの表示を改善してください。

修正してほしいポイント:
- ナビゲーションメニューをハンバーガーメニューにする
- テーブルを横スクロール対応にする
- フォントサイズをスマホでも読みやすいサイズにする
- 画像がはみ出さないようにする
- タップ領域を十分な大きさにする（最低44px × 44px）
- viewport の meta タグを確認する

[ここにHTML/CSSコードを貼る]

Step 6: 独自ドメインでの公開を設定する

プロンプト: 独自ドメイン用のHTML修正

このサイトを独自ドメイン（https://www.example.com）で公開します。

以下を修正してください:
- すべての内部リンクを独自ドメインに対応させる（相対パスに統一）
- OGP タグの URL を独自ドメインに変更
- canonical URL を独自ドメインに設定
- sitemap.xml のURLを独自ドメインに更新
- robots.txt の Sitemap パスを更新
- Google Search Console 用の認証ファイルの設置場所を教えて

ポイント

Step 7: SNSシェア対応

プロンプト: OGPタグを設定する

このHTMLに OGP（Open Graph Protocol）タグを追加してください。
SNS でシェアされたときに、きれいなカードが表示されるようにします。

設定情報:
- サイト名: ○○
- ページタイトル: ○○
- 説明文（80文字以内）: ○○
- OGP画像URL: https://www.example.com/images/ogp.jpg
- サイトURL: https://www.example.com
- Twitter カード形式: summary_large_image
- Twitter アカウント: @○○

[ここにHTMLの<head>部分を貼る]

Step 8: 公開後のアクセス解析を設置する

プロンプト: Google Analytics の設置

このHTMLに Google Analytics（GA4）のトラッキングコードを設置してください。

測定 ID: G-XXXXXXXXXX

設置のポイント:
- 全ページの <head> 内に設置
- Cookie 同意バナーとの連携（必要に応じて）
- ページビュー以外にも、ボタンクリックなどのイベントトラッキングを設定

対象ページ:
- index.html
- service.html
- about.html
- contact.html

Step 9: 公開手順を確認する

プロンプト: デプロイ手順書を作ってもらう

以下のファイル構成のWebサイトを、ロリポップ！レンタルサーバーにアップロードして公開する手順書を作ってください。

ファイル構成:
├── index.html
├── service.html
├── about.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── logo.png
│   ├── hero.jpg
│   └── ...
├── .htaccess
├── sitemap.xml
└── robots.txt

前提条件:
- ロリポップ！のアカウントは作成済み
- 独自ドメインは ○○.com（設定済み / これから設定）
- FTPソフトは使わない（ファイルマネージャーを使う）

手順はスクリーンショットなしでもわかるように、具体的に書いてください。

困ったときのプロンプト

「アップロードしたけど表示されない」

ロリポップ！にHTMLファイルをアップロードしましたが、
ブラウザでアクセスすると表示されません（404エラー / 真っ白 / レイアウトが崩れている）。

状況:
- アップロード先: /home/users/○○/web/
- アクセスURL: https://○○.com
- 起きている現象: ○○

考えられる原因と対処法を教えてください。

「SSL（HTTPS）にしたい」

ロリポップ！で公開しているサイトを HTTPS 対応にしました。
HTTPでアクセスされた場合にHTTPSにリダイレクトする .htaccess を書いてください。

また、HTML内の http:// で始まるリソース参照があれば、
https:// に修正するか、プロトコル相対URL（//）に変更してください。

[ここにHTMLコードを貼る]

「エラーが出ている」

ロリポップ！にアップロードした PHP ファイルでエラーが出ています。

エラーメッセージ:
○○○○

PHPバージョン: ○○（ロリポップ！の管理画面で確認できます）

このエラーの原因と修正方法を教えてください。

[ここにPHPコードを貼る]

まとめ: 公開までのプロンプトフロー

作成 → チェック → SEO → セキュリティ → 最適化 → レスポンシブ → ドメイン対応 → SNS対応 → 解析設置 → 公開
ステップ プロンプトのキーワード
公開前チェック 「公開前のチェックリストを作って、問題があれば修正して」
SEO対策 「SEO対策を施して」「sitemap.xmlを生成して」
セキュリティ 「セキュリティ対策を追加して」「.htaccessを作って」
パフォーマンス 「表示速度を改善して」「手動で適用できる方法で」
レスポンシブ 「スマホ表示を改善して」
ドメイン対応 「独自ドメインに対応させて」
SNS対応 「OGPタグを追加して」
アクセス解析 「GA4のトラッキングコードを設置して」
手順確認 「ロリポップ！へのアップロード手順書を作って」

Claude Code に正しく指示すれば、プロのWebデベロッパーがやるような公開前作業を、非エンジニアでも漏れなく実行できます。

あなたは 000672 人目の訪問者です！
📖 BBS（掲示板） | 🔗 リンク集 | 🐦 管理人のSNS