AIでインタラクティブな照明ストアを作る（Supabase＋Hostinger）

Claude Desktop

Claude Codeはその中で動き、ストアをカスタマイズします。有料のClaudeプランが必要です。

Claude Desktopをダウンロードする

https://claude.ai/download

GitHubアカウント

無料です。LUMIÈREの自分用コピーをここに置き、Hostingerはそこからデプロイします。

GitHubアカウントを作成する

https://github.com/signup

Hostingerのホスティング

ライブストアはここで動きます。プランはステップ2で選びます。

Node.js、コードエディタ、ターミナルは不要です。ストアのビルドと実行はHostingerが行い、編集はClaudeが行います。

LUMIÈREをプレビューしてコピーする

まずは完成したストアを試してみましょう。真鍮のレールをなぞってペンダントライトを点け、ドラッグしてみて、1つクリックすると調光ダイヤルが開きます。デモには管理画面もチェックアウトもありません。

LUMIÈREのライブデモを開く

ブラウザで動く、完成版のストアフロントです。

https://lumiere-lighting-store.vercel.app/

GitHubでLUMIÈREを開く

https://github.com/salhiworks/lumiere-lighting-store

Use this templateをクリックし、Create a new repositoryをクリックする 名前を付け、PublicかPrivateを選ぶ Create repositoryをクリックする

自分専用のコピーであることを確認する

リポジトリのアドレスが github.com/ とあなた自身のユーザー名で始まっている

名前の下に、salhiworks/lumiere-lighting-store から生成されたとGitHubが表示されている

ここからは、自分のリポジトリだけを使います。Hostingerがステップ2でデプロイし、Claude Desktopがステップ3で編集します。元のスターターが変更されることはありません。

Node.jsホスティングを用意する

先に公開し、あとでカスタマイズします。数分でストアが本物のWebサイトになり、以降の変更はすべてそこに反映されます。

Hostingerのプランを選ぶ

UnlimitedプランかCloudプランを使ってください。LUMIÈREは静的サイトではなく、Node.js Web Appとしてデプロイされます。

リポジトリをインポートする

Hostinger Websites Create site Web App

まずは一時ドメインを選ぶ — 自分のドメインはステップ5で接続します Import Git Repositoryを選ぶ GitHubを承認し、ステップ1で作成した自分用のLUMIÈREのコピーを選びます。元のスターターではありません

設定してデプロイする

Hostingerが検出したNext.jsの設定をそのまま使う — ストアのビルドと起動はHostingerが行います Node.js 22を選ぶ ビルドスクリプトがbuildになっていることを確認する — ロックされたデモをビルドするbuild:demoは絶対に使わない

デプロイする前に、サイトのアドレスを環境変数として追加します。先ほど決めた一時的なアドレスです。最終的なドメインはまだ必要ありません — ステップ5で切り替えて再デプロイします。

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https://で始まる一時アドレス

ストアに必要なのはこれだけです。SupabaseとStripeはどちらも任意なので、あとで設定しましょう。

Deployをクリックし、ビルドが終わるまで待つ 一時アドレスを開く

公開されたストアを確認する

一時アドレスでLUMIÈREのストアが開く

レールをなぞるとランプが点灯し、写真がすべて読み込まれる

ショップと商品ページが開く

ストアが公開されました。これ以降、リポジトリのmainブランチにプッシュした変更は、Hostingerが自動的に再ビルドして公開します。

Claude Desktopでプロジェクトを開く

Claude Desktop Code Local

Documentsなどのフォルダーで Local セッションを始め、下にリポジトリのアドレスを入力して送信します：

コピーをクローンする

あなた自身のLUMIÈREリポジトリを新しいサブフォルダにダウンロードし、Claudeが更新できることを確認します。

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

リポジトリのアドレス

https://github.com/your-name/my-lighting-store

LUMIÈREフォルダを開く

新しいLocalセッションを始める Claudeが作成したフォルダー（README.mdが入っているもの）を開く Claude Desktopに聞かれたら、そのフォルダーを信頼する

Claudeがストアのこのコピーを変更し、その変更をあなた自身のGitHubリポジトリに送ります。その後、Hostingerがライブサイトを更新します。

ストアの内容をClaudeに伝える

わかる項目だけ入力してください。空欄の項目は、ClaudeがLUMIÈREのものをそのまま使います。入力したら、LUMIÈREのセッションで送信します：

自分の照明ストアをカスタマイズする

名前、商品、文章、デザインを差し替え、ランプのアニメーションと写真のペアはそのまま残します。

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server and don't push anything yet: I'll ask you to publish when I'm ready.

ストア名

Atelier Nord

あなたの照明スタジオならではの特徴は？

陶器と真鍮のペンダントライトを少量生産。リスボンで手作りし、ヨーロッパ全域に発送しています。

デザインの方向性

ランプ（1行に1つ：名前、仕上げ、価格）

陶器のドーム、サンド、$240 真鍮のコーン、ヘアライン、$310

ランプの写真

承認する前にプランを読んでください。ストアが自分らしくなるまで、同じセッションでClaudeに追加の変更を頼めます。

自分のランプ写真を使う

販売を始める前にデモ写真を差し替える

16枚のデモ用ランプ写真は元のコンポーネントのデモに含まれていたもので、権利関係は確認されていません。実際のストアでは、自分で所有しているか、ライセンスを受けた写真を使ってください。

ランプごとに、消灯時と点灯時の2枚の写真が必要です。レールは2枚をクロスフェードさせてランプを点けるため、ぴったり重なっている必要があります：

カメラ、位置、大きさは同じにする — 変わるのは光だけ

背景は透過にし、影は焼き込まない

吊り下げコードは上端の中央から出す

縦長で、すべての写真を同じキャンバスにする — デモでは557 × 900 pxを使用

Supabaseを使わない場合は、各ペアを商品名にちなんだ名前でプロジェクトのこのフォルダに置き（例: dome-enamel-off.webp と dome-enamel-on.webp）、Claudeにそれらを使って公開するよう頼みます。Supabaseを使う場合は、管理画面からペアをアップロードすると、自動でチェックされます。

public/lamps/

変更を公開する

Claudeがカスタマイズしたストアをあなた自身のGitHubリポジトリに送り、Hostingerがそこからライブサイトを再ビルドします。変更に満足したら、次のように送ります。

変更を公開して

ストアをチェックしたうえで、変更をコミットし、リポジトリのmainブランチにプッシュします。

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

公開された変更を確認する

Hostingerがストアを再ビルドするまで数分待つ ライブアドレスを再読み込みする レールをなぞる — すべてのランプが点灯し、コードがレールにつながっている ランプをクリックして調光ダイヤルを動かす — 変わるのは光だけ ショップと商品ページを開き、ランプをカートに入れる

数分たっても変わらない場合は、Web AppのSettings & Redeployを開いて再デプロイしてください。おかしな点があれば、同じセッションでClaudeに伝え、ランプレールには触れずに直すよう頼んでから、もう一度公開します。

自分のコンピューターでプレビューしたい場合（任意）

必須ではありません。公開前に変更を確認したいときは、セッションでClaudeにこう頼みます。依存関係をインストールし、npm run dev で開発サーバーを起動して、ローカルアドレスを教えて。Node.js 22以降が必要で、入っていなければClaudeが知らせます。ライブストアがこれに依存することはありません。

Supabaseプロジェクトを作成する

ライブストアはSupabaseなしでも動きます。それで十分ならステップ5へ進んでください。接続すると、商品・写真・在庫・注文を /admin の自分専用の管理画面で管理できます。

Supabaseアカウントを作成する

https://supabase.link/r4gdwhi

New projectをクリックする — リージョンは自由で、Freeプランで問題ありません データベースのパスワードを安全な場所に保存する プロジェクトの準備ができたら、Project IDをコピーする

Supabase Project Settings General

Claudeからプロジェクトにアクセスできるようにする

これにより、Claudeがデータベースを代わりに設定できます。Claude DesktopのLUMIÈREセッションで次の操作をします。

サイドバーで Customize を開き、Connectors を選んで Supabase を追加します — またはプロンプト欄の横にある + をクリックして Add connectors を選びます Connectをクリックし、ブラウザーでアクセスを承認します。プロジェクトが入っているOrganizationを選んでください Claudeが接続を認識できるよう、同じフォルダで新しいLocalセッションを開始する

サインインはブラウザーでSupabase経由で行うため、キーやパスワードをプロンプトに入力することはありません。この接続は、承認したOrganization内のすべてのプロジェクトを見ることができるため、次のプロンプトでClaudeをLUMIÈREプロジェクトだけに限定します。

Supabase コネクタが見つからない、または使いたくない場合は、次のプロンプトをスキップして、ステップ4の最後にある手動セットアップを使います。同じ3つの SQL ファイルで、コネクタは不要です。

データベースの設定をClaudeに頼む

SupabaseでLUMIÈREをセットアップする

Claudeがスターターのマイグレーションと商品を適用し、セキュリティとストレージを確認してから、Hostinger用の2つの公開値を渡します。

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

SupabaseのProject ID

abcdefghijklmnopqrst

Claudeは操作のたびに確認を求めます。内容を読んでから許可してください。あなたの番になると、Claudeは止まります。

管理者アカウントを作成する

Supabase Authentication Users

Add user、Create new userの順にクリックする メールアドレスと強力なパスワードを入力する Auto Confirm Userにチェックを入れたまま、ユーザーを作成する 管理者のメールアドレスをClaudeに伝える — パスワードは絶対に伝えない

Supabase Authentication Sign In / Providers

Allow new users to sign upをオフにして保存する — このストアには顧客アカウントがありません

Supabase接続がない場合は、手動で設定する

SupabaseプロジェクトでSQL Editorを開きます。LUMIÈREフォルダーにある次の3つのファイルを、この順番で実行します。それぞれ開いて全体をコピーし、新しいクエリに貼り付けてRunをクリックします。どれも何度実行しても問題ありません。

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

次のステップで示すとおり、Connectからご自身のProject URLとPublishable keyをHostingerにコピーします。上で管理者ユーザーを作成したら、下にメールアドレスを追加し、SQL Editorで次を実行します。

自分を管理者にする

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

管理者のメールアドレス

you@example.com

HostingerにSupabaseの変数を追加する

ライブストアは2つの公開値を通じてSupabaseを読み取ります。Web Appのダッシュボードで Environment Variables を開き、次を追加します。

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

SupabaseのProject URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

SupabaseのPublishable key

Claudeが両方の値を渡しています。Connectにもあります。

Connectを開く

https://supabase.com/dashboard/project/_?showConnect=true

公開してよい値だけ

SupabaseのSecret keyやservice_roleキーは、ここに絶対に追加しないでください。NEXT_PUBLIC_ で始まるものはすべてブラウザーから見えます。

変数を保存します。Hostingerがそれらを使ってストアを再ビルドします 再ビルドされない場合は、Settings & Redeployから再デプロイする ライブアドレスの /admin を開き、管理者のメールアドレスでサインインする

管理画面では、商品の追加と編集、OFF/ONの写真ペアのアップロード、在庫と注文の管理ができます。保存するたびに、レール、ショップ、商品ページが更新されます。

ドメインを接続する

Hostinger Your Web App Connect domain

ドメインを入力し、接続の手順に従う ドメインをほかの会社で登録している場合は、Hostingerに表示されるDNSレコードを登録先で追加する 既存のメール用レコードは残しておく ドメインが接続済みと表示され、SSLが有効になるまで待つ

DNSの変更がすべての人に反映されるまで、数時間（最大24時間）かかることがあります。

Webサイト・Webアプリに独自ドメインを接続する

ほかの会社で登録したドメインも含めた、詳しい手順です。

/video/connect-a-custom-domain-to-your-website-or-web-app

自分のドメインに切り替えて再デプロイする

ストアは、リンク、サイトマップ、管理画面の安全なログインを、このひとつのアドレスをもとに作ります。Web AppのダッシュボードでEnvironment Variablesを開き、値を自分のドメインに変更します：

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https://で始まる自分のドメイン

変数を保存する Settings & Redeployから再デプロイして、新しいアドレスを反映させる ビルドが終わるまで待つ

公開したストアをテストする

自分のドメインを開いて確認します：

アドレスがhttps://で始まり、鍵マークが表示される

レールをなぞるとランプが点灯し、写真がすべて読み込まれる

ショップと商品ページが開き、ランプをカートに入れられる

Supabaseを使う場合：/adminでログインできる

/shop/no-such-lampのような存在しないアドレスで、「ページが見つかりません」の画面が表示される

照明ストアが独自ドメインで公開されました。あとで変更するには、管理画面で商品を編集するか、Claudeにコードの変更と公開を頼みます。mainへのプッシュのたびに、Hostingerがストアを再ビルドします。