AIでお店のサイトを作るキット

1お店の写真を、歩く映像にする

画像を作れるAI（Geminiなど）に、お店の外観の写真を渡して、まず「きれいな外観の1枚」にします。次に、動画を作れるAI（Klingなど）で、その1枚から「扉を抜けて店の中へ入る」映像を作ります。

① 画像AIに貼る（写真を添付）

Edit the reference photograph of my shop. Keep the building, framing, perspective, lighting and colour grade exactly identical. Remove all existing text and shop names from the signage. Photorealistic, 16:9, no people, no watermark.

コピーする

② 動画AIに貼る（①の画像を添付）

Slow, steady push-in toward the shop entrance. The glass doors slide open and the camera glides inside at eye level, ending on the main product wall. One continuous shot, no cuts, no people, natural motion.

コピーする

動画AIは、細かい商品を1コマごとに描き直してしまうことがあります。映像の最後は、別に作った高画質の1枚につなぐと、きれいに止まります。

2商品を、1点ずつ撮る

棚の写真から商品の部分を切り出して、画像AIに「同じ写真を、高画質で撮り直して」と頼みます。商品のデザインが変わらないよう、「同じ」を強く書くのがコツです。

The reference image is a low-resolution crop from a photograph of a product on a shelf in a premium boutique. Recreate EXACTLY the same photograph, same framing, same composition, same product (same model, colors, angle and position), same lighting, but at ultra-high resolution and real photographic quality, as if shot natively with a full-frame camera and an 85mm macro lens: crisp material texture, stitching, grain. Do not change the design of the product, do not add or remove objects, no text, no watermark, no people.

コピーする

商品の数だけ繰り返します。見本では、靴2点と服2点を実際に動かしています。

3動きを、コードでつなぐ

映像と写真を1つのフォルダに入れて、Claude Codeでそのフォルダを開き、下の文章を貼ります。

Build a single-file website (index.html) from the files in this folder: shot.mp4 (one continuous shot of walking into a shop), wall.jpg (the last frame of that video), and a products folder with one close-up image per product.

1. Scrolling the page moves the video time: video.currentTime = scroll progress x duration. Load the video as a blob so it scrubs smoothly.
2. When the video ends, show wall.jpg full width with a clickable hotspot over each product.
3. Hovering a hotspot shows a white neon outline plus the product name and price.
4. Clicking a hotspot zooms in place to that product's close-up image.
5. Works on phones. Use Japanese for all text except product names.
Ask me for anything you need before you start.

コピーする

最後の1行（始める前に質問して）を入れると、足りない情報をClaudeが先に聞いてくれます。

つまずきやすいところ

• 使える動画AIは、時期やアカウントで変わります。使えない場合は、別の動画AIで同じ文章を試してください。
• 生成した映像の最後と、別に作った1枚は、少しずれます。つなぐ前に、ずれを確認してください。
• お店の写真は、自分のお店か、使っていいと許可をもらったものだけを使ってください。