Claude Code × ロリポップ！活用チップス集

対象読者: プログラミング未経験だけど、Claude Code を使って自分のWebサイトやサービスを作りたいビジネスパーソン

前提: なぜ「ロリポップ！」なのか？

Claude Code を使えば、AIに指示するだけでWebサイトのコードを生成できます。しかし、生成したコードはどこかのサーバーに置かないとインターネットに公開できません。

ロリポップ！が最適な理由:

• 月額264円〜で始められる（試すハードルが極めて低い）
• WordPressが簡単インストール（60秒でセットアップ完了）
• 国内サーバーで表示が速い・サポートが日本語
• スタンダードプラン以上でSSH対応 → Claude Code から直接デプロイも可能

Tips 1: 「自分だけのWebサイト」を作って公開する最短ルート

やること

1. Claude Code に「会社紹介のWebサイトを作って」と指示する
2. 生成された HTML/CSS ファイルをロリポップ！にアップロード
3. 公開完了

Claude Code への指示例

シンプルな会社紹介サイトを作ってください。
- 会社名: ○○株式会社
- 事業内容: Webマーケティング支援
- ページ: トップページ、サービス紹介、お問い合わせ
- デザイン: 清潔感のある青基調
- レスポンシブ対応（スマホでも見やすく）

ポイント

• Claude Code は HTML / CSS / JavaScript を一式生成してくれる
• ロリポップ！のファイルマネージャーを使えば、ブラウザからドラッグ&ドロップでアップロードできる
• FTPソフト不要、コマンドライン不要

Tips 2: ランディングページ（LP）を自作して広告費を最適化

外注との比較

Claude Code への指示例

以下の商品のランディングページを作ってください。
- 商品名: ○○オンライン講座
- ターゲット: 30代の副業に興味がある会社員
- CTA: 無料体験申し込みボタン
- 構成: ヒーローセクション → 悩み共感 → 解決策 → 実績 → 料金 → FAQ → CTA
- デザイン参考: 信頼感のあるビジネス系

Tips 3: WordPress サイトのカスタマイズを Claude Code に任せる

ロリポップ！でWordPressをセットアップ済みの場合

1. 管理画面 → 外観 → テーマエディター でカスタマイズしたいファイルのコードをコピー
2. Claude Code に「このコードの○○を変更して」と貼り付けて指示
3. 修正されたコードをテーマエディターに貼り戻す

よくある依頼例

• 「ヘッダーの色を変えて、ロゴを中央に配置して」
• 「お問い合わせフォームに電話番号欄を追加して」
• 「ブログ記事の下に関連記事を表示するようにして」
• 「このCSSを修正して、スマホで文字が小さすぎる問題を直して」

Tips 4: お問い合わせフォームを Claude Code で作る

ロリポップ！はPHP対応なので、フォームも自作できる

お問い合わせフォームを作ってください。
- 入力項目: 名前、メールアドレス、お問い合わせ内容
- 送信先: info@example.com
- バリデーション付き（空欄チェック、メール形式チェック）
- 送信完了後にサンクスページに遷移
- PHP で動作するようにしてください（ロリポップ！サーバーで使います）

ポイント

• ロリポップ！は全プランでPHP対応
• 外部サービス（Googleフォーム等）に頼らず自前で持てるので、デザインの自由度が高い
• Claude Code にセキュリティ対策（CSRF対策等）も含めて指示すると安心
• 注意: AI が生成したコード（特にフォーム処理・メール送信・データベース操作）は、公開前に動作確認を十分に行い、可能であれば詳しい人にレビューを依頼してください

Tips 5: SSH接続で Claude Code から直接デプロイ（スタンダードプラン以上）

上級者向け: コマンド一つでサイトを更新

スタンダードプラン以上なら SSH が使えるので、Claude Code で作ったファイルを直接サーバーにアップロードできます。

ロリポップ！のサーバーに SCP でファイルをアップロードするコマンドを教えて。
ホスト名: ssh.lolipop.jp
ユーザー名: ○○○
アップロード先: /home/users/1/○○/web/

メリット

• ファイルマネージャーを開く手間が不要
• 複数ファイルを一括アップロード可能
• Claude Code に「更新してデプロイして」と指示するだけで完結するワークフローが作れる

Tips 6: Claude Code に「サイト改善」を相談する

既存サイトのコードを Claude Code に見せるだけで改善提案がもらえる

以下のHTMLを見て、改善点を教えてください。
特に気になるのは:
- SEO対策（検索に引っかかるようにしたい）
- 表示速度
- スマホでの見やすさ
- アクセシビリティ

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

Claude Code が提案してくれること

• meta タグの最適化（SEO）
• 画像の最適化提案
• レスポンシブデザインの改善
• alt 属性の追加（アクセシビリティ）
• 不要なコードの削除（表示速度改善）

Tips 7: 複数ページのサイトを一気に生成する

以下の構成で、飲食店のWebサイトを全ページ分作ってください。

- トップページ (index.html)
- メニュー (menu.html)
- アクセス・地図 (access.html)
- ご予約 (reserve.html)
- 共通ヘッダー・フッター・ナビゲーション付き
- 統一されたデザイン
- 全ページレスポンシブ対応

店舗情報:
- 店名: ○○食堂
- ジャンル: 和食
- 住所: 東京都渋谷区○○
- 電話: 03-XXXX-XXXX
- 営業時間: 11:00-22:00

ポイント

• Claude Code は複数ファイルを一括生成できる
• ロリポップ！のファイルマネージャーでまとめてアップロードすれば即公開
• ページ追加も「○○ページを追加して」と指示するだけ

Tips 8: 定期的な更新作業を効率化する

「毎月のお知らせ更新」も Claude Code で一瞬

以下のHTMLのお知らせセクションに新しいお知らせを追加してください。

追加内容:
- 日付: 2026年2月12日
- タイトル: 春のキャンペーン開始のお知らせ
- 内容: 3月1日より春の特別キャンペーンを実施します。

既存のHTML:
[ここにコードを貼る]

まとめ: Claude Code × ロリポップ！で変わること

「AIに指示する力」と「安くて簡単なサーバー」。この2つがあれば、誰でもWebサイトのオーナーになれる時代です。