画像の差し替え

ワンページサイトの画像を効果的に差し替える方法を3つの手法で解説します。目的や状況に応じて最適な方法を選択してください。

Claude Code AI検索

最も簡単で効率的な方法です。AIが文脈に合った画像を自動検索し、複数の候補を提案します。

依頼例：

画像を差し替えたいです。差し替える画像は「ヒーローセクション」の「メイン画像」です。まず、良さそうな画像候補をURL付きで、番号付きで複数リストアップしてください。

AIが行うこと：

• コンテンツの文脈を理解
• 適切なキーワードで画像検索
• 複数候補の提案（URL付き）
• 最適化されたパラメーター設定

Unsplash手動検索

高品質な無料画像を自分で選択したい場合の方法です。

1. 画像検索

• Unsplash.com にアクセス
• キーワードで検索
• 無料フィルターを設定（重要）

2. 画像URL取得

• 気に入った画像をクリック
• 右クリック → 「画像のアドレスをコピー」

3. 差し替え依頼

「ヒーローセクション」の「メイン画像」を、以下のURLに差し替えてください。UnsplashのURLパラメーターは、必要に応じて修正してください。

https://images.unsplash.com/photo-xxxxx?w=800&q=80

独自画像アップロード

オリジナル画像やブランド画像を使用する場合の方法です。

1. 画像最適化（推奨）

• Squoosh.app で画像を圧縮
• ファイルサイズを300KB以下に
• WebP形式への変換を検討

2. アップロード方法

方法A: プロンプト添付

• 画像ファイルをプロンプトに直接ドラッグ&ドロップ
• 差し替え指示と共に送信

方法B: ディレクトリ保存

• 画像を public/assets/images/ に保存
• ファイルパスを指定して依頼

「ヒーローセクション」の「メイン画像」を、assets/images/hero-image.webp に差し替えてください。

画像最適化のベストプラクティス

ファイルサイズ

• ヒーロー画像: 500KB以下
• セクション画像: 300KB以下
• アイコン: 50KB以下

画像形式

• WebP: 最高の圧縮率（推奨）
• JPEG: 写真に適している
• PNG: 透明背景が必要な場合

解像度

• デスクトップ: 1920px幅
• タブレット: 1024px幅
• モバイル: 768px幅