AIでインタラクティブな寿司レストランのサイトを作る

Claude Desktop

デスクトップアプリのClaude Codeを使って、レストランのサイトをセットアップしてカスタマイズします。

Claude Desktopをダウンロードする

https://claude.ai/download

GitHubアカウント

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

GitHubアカウントを作成する

https://github.com/signup

Node.js

LTS版をダウンロードしてください。Claudeがストアのインストールとチェックに使います。

Node.jsをダウンロードする

https://nodejs.org/en/download

Supabaseアカウント

無料プランで十分です。メニュー、写真、営業時間、注文、管理者のログイン情報を保管します。

Supabaseアカウントを作成する

https://supabase.link/r4gdwhi

Hostingerのホスティング

ホスティングが必要になるのは、ストアを公開するステップ5です。

Hostingerのプランを選ぶ

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

自分用のコピーを作成する

GitHubでKAITENを開く

https://github.com/salhiworks/kaiten-sushi-store

Use this templateをクリックし、Create a new repositoryをクリックする 名前を付け、PublicかPrivateを選ぶ Create repositoryをクリックし、そのアドレスをコピーする

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

Supabaseのダッシュボードを開く

https://supabase.com/dashboard

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

Supabase Project Settings General

Claudeに必要なプロジェクト情報はProject IDだけです。テーブルを作成したりSQLを書いたりする必要はありません。データベースはステップ3でClaudeがセットアップします。

Claude Desktopに取り込む

Claude Desktop Code Local

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

コピーをクローンする

自分のKAITENリポジトリを新しいサブフォルダーにダウンロードし、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-sushi-restaurant

KAITENフォルダーを開く

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

Claudeにストアの接続を頼む

KAITENのセッションで、下にProject IDを入力して送信します：

KAITENをSupabaseに接続する

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

Connect this KAITEN restaurant to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md (step 2, "Make it a real store with Supabase") and docs/SUPABASE.md first, and follow docs/SUPABASE.md's Supabase CLI steps. 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. Use only this project's own pinned Supabase CLI, through npx supabase after npm install — never a global supabase command — always on my hosted project. Never run supabase db reset, supabase migration repair or any command that deletes data, never use --include-seed, and never start a local database or Docker. Never ask me for a password, an access token or a Secret key, and never use --reveal. Do these yourself, and tell me what each one does before you run it: 1. Check that Node.js 22 or newer is installed (if it isn't, stop and tell me how to install it), then run npm install and check that npx supabase --version shows 2.122.0. If it doesn't, stop and tell me. 2. Check that I'm signed in to the Supabase CLI. If I'm not, stop and tell me to run npx supabase login in the Terminal myself, and continue when I say I'm signed in. 3. Link this folder with npx supabase link --project-ref {{PROJECT_REF}}, then show me the project's name and URL and ask me to confirm it's the right one. 4. Show me the project's migration history (npx supabase migration list --linked). If it has migrations that aren't in supabase/migrations, stop and explain what you see. If the history is empty but the table public.dishes already exists, the setup was already run by hand: stop and tell me, and push nothing, because these files must not run twice. 5. Show me what the push would apply (npx supabase db push --linked --dry-run). It must be exactly the three files in supabase/migrations, in order: kaiten_schema, kaiten_seed, kaiten_private_helpers. Then apply them with npx supabase db push --linked, so they are recorded in the project's migration history. They create the tables, the Row Level Security policies, the dish-images storage bucket and the starting menu. There is no separate seed step. 6. Verify the setup with npx supabase db query --linked: Row Level Security is on for all seven tables in public, the public dish-images bucket exists, and there are 5 plate tiers, 4 categories and 8 dishes. Fix nothing by hand: tell me what's wrong. 7. Show me my Project URL and Publishable key (sb_publishable_...) as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger, using npx supabase projects api-keys --project-ref {{PROJECT_REF}}. If no Publishable key is listed, tell me to copy it from Connect in the Supabase Dashboard. 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/SUPABASE.md ("Your admin account"), through npx supabase db query --linked, and check that the row exists. Finally, tell me in plain words what passed and what is still left to do.

SupabaseのProject ID

abcdefghijklmnopqrst

Claudeは操作を実行する前に毎回確認します — Allowをクリックしてください。あなたの番になると、Claudeは止まります。

Supabase CLIにログインする

Claudeに頼まれたら、これを自分で一度だけ実行します（ブラウザが開きます）：

セッションのタイトルバーにあるTerminalをクリックする 下のコマンドを実行する 開いたブラウザのウィンドウでログインを承認する サインインしたことをClaudeに伝える

npx supabase login

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

Supabase Authentication Users

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

Supabase Authentication Sign In / Providers

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

Claudeがあなたのメールアドレスをストアの管理者リストに追加します。公開したストアの/adminには、ステップ5でログインします。

Supabase CLIが動かない場合は、手動で設定する

SupabaseプロジェクトでSQL Editorを開きます。KAITENフォルダーにある次の3つのファイルを、この順番で1回ずつ実行します。それぞれファイルを開いて全体をコピーし、新しいクエリに貼り付けてRunをクリックします。

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

ConnectからProject URLとPublishable keyをコピーします — ステップ5でHostingerに追加します。上で管理者ユーザーを作成したら、下にメールアドレスを入力して、SQL Editorで次を実行します：

自分を管理者にする

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

管理者のメールアドレス

you@example.com

レストランについてClaudeに伝える

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

寿司レストランをカスタマイズして

店名、文章、デザインをリブランドし、回転レーンと注文の仕組みはそのまま残して、変更を自分のGitHubリポジトリにプッシュします。

This folder is my own copy of the KAITEN sushi restaurant. Before you change anything, read README.md ("How it works"), AGENTS.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the website for my restaurant. Restaurant name: {{RESTAURANT_NAME}} Our concept and story: {{RESTAURANT_STORY}} Visual identity: {{VISUAL_STYLE}} Where each change belongs: - The brand mark and its default name: src/components/site/brand-mark.tsx - Homepage and about copy: src/components/home/ and src/app/(store)/about/page.tsx - Colours and fonts: src/app/globals.css and src/app/layout.tsx The restaurant name guests see in the header, footer and page titles, plus the address, phone, opening hours, dishes, photos and plate prices, come from the database. Don't hard-code them: I'll set them in the admin after launch. Tell me which name to enter there. Keep these exactly as they are: - The sushi conveyor belt in src/components/ui/sushi-conveyor-menu.tsx: dragging, flicking, lifting a plate, the plate stack and every animation, timing and hit area - The menu, the order and checkout, pickup ordering, the admin, the Supabase migrations, KAITEN_MODE and the other environment variables - The dependencies: don't add new ones 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. Then summarize what you changed and wait. I may ask for more changes. Only when I say it's ready: make sure .env.local and any other secrets are not committed, commit everything with a clear message and push it 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.

店名

Sushi Nami

レストランのコンセプトやストーリー

2009年からリヨンで営む家族経営の回転寿司カウンター。魚は朝市から仕入れ、シャリは毎時炊き上げています。

デザインの方向性

Claudeはブランド、デザイン、コードを変更します。料理、写真、皿の価格、カテゴリー、営業時間、テイクアウトの情報、注文は、公開後にステップ5の管理画面で管理します。Claudeの変更を確認し、同じセッションで追加の修正を頼み、準備ができたらClaudeに伝えてください。ClaudeがGitHubリポジトリに1回プッシュし、それをステップ5でデプロイします。

Web Appを作成する

まだホスティングがありませんか？「必要なもの」でプランを入手してください。

Hostinger Websites Create site Web App

Hostingerでドメインを選べる場合は自分のドメインを選びます。選べない場合、アプリは一時ドメインで始まります Import Git Repositoryを選ぶ GitHubを認証し、ステップ4でClaudeがプッシュした変更を含む自分のKAITENのコピーを選びます

ドメインをほかの会社で登録している場合は、Hostingerに表示されるDNSレコードを登録先で追加し、既存のメール用レコードはそのまま残してください。

設定してデプロイする

Hostingerが検出したNext.jsの設定をそのまま使う — ストアのビルドと起動はHostingerが行います Node.js 22以降を選ぶ ビルドコマンドがnpm run build、起動コマンドがnpm startになっていることを確認します。ロックされたデモをビルドするnpm run build:demoは絶対に使わないでください

デプロイする前にEnvironment variablesを開き、Editをクリックして次の3つを追加します。KAITEN_MODEで実際の注文と管理画面が有効になります。これがないと、サイトはデモとしてビルドされます。2つのSupabaseの値は、ステップ3でClaudeが表示したものです。値はストアにビルド時に組み込まれるため、あとで変更するには再デプロイが必要です。

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

liveという単語（小文字）

NEXT_PUBLIC_SUPABASE_URL

SupabaseのProject URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

SupabaseのPublishable key

Supabaseの値はConnectにあります。

Connectを開く

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

公開してよい値だけ

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

Finish、続いてDeployをクリックし、ビルドが終わるのを待つ

一時ドメインで運用している場合

独自ドメインに切り替えるには、HostingerでWeb Appを開いてそこでドメインを接続し、表示されたDNSレコードをドメインの登録業者で追加します。KAITENは自分のアドレスを保存しないため、変更するものはなく、再デプロイも不要です。

レストランを設定する

公開したストアで/adminを開き、管理者のメールアドレスでログインします。管理画面で保存した内容はすべてデータベースに直接反映されます。コードの変更は不要です。

Restaurantで、まずHours are inでタイムゾーンを選び、次にRestaurant name、受け取り先の住所、電話番号、営業時間を設定して、Save restaurant detailsをクリックします Plates & pricesで皿の色ごとの価格を設定し、Save plate pricesをクリックします。その皿の料理はすべてこの価格になります Menuで料理のEditをクリックして詳細を変更し、Replace photoで自分の写真に差し替えてSave changesをクリックします。新しい料理はAdd dishで追加します 提供しない料理はOn menuをオフにし、その日に売り切れた料理はIn stockをオフにします Categoriesで、メニューのセクションの名前変更、並べ替え、追加を行います

開店前に初期写真を差し替える

8枚の初期料理写真は元のコンポーネントのデモから流用したもので、権利は確認されていません。自分で所有している写真か、ライセンスを取得した写真を使ってください。

料理写真の条件

正方形で、800 × 800 px以上

真上から撮影し、皿がフレームいっぱいに収まっていること

背景が透明（PNGまたはWebP）で、皿の周りにレーンが見えること

5 MBまで

確認して公開する

ドメインを開きます。鍵マークが表示され、レーンが回り、ヘッダーに営業状況が表示されます いくつかの皿を注文に取り、Review order、続いてCheckout for pickupをクリックします 名前と電話番号を入力し、Place pickup orderをクリックします 管理画面でOrdersを開き、注文を見つけてStart preparingをクリックします 注文の確認ページでRefresh statusをクリックします。Preparingと表示されます

ストアが注文を受け付けるのは、営業時間内で、かつすべての管理ページ上部にあるTaking ordersがオンのときだけです。お客様は受け取り時に支払います。オンラインのカード決済はありません。

その後は、料理、写真、価格、営業時間を管理画面で変更できます。変更はすぐに反映されます。デザインやコードを変更するときはClaudeに依頼してプッシュを承認してください。Hostingerはmainへのプッシュのたびにストアを再ビルドします。