管理ダッシュボード付きのAI高級ファッションストアを作る

Claude Desktop

デスクトップアプリのClaude Codeで、ストアをセットアップしてカスタマイズします。

Claude Desktopをダウンロードする

https://claude.ai/download

GitHubアカウント

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

GitHubアカウントを作成する

https://github.com/signup

Node.js

最新のLTS版をダウンロードしてください。パソコン上でストアを動かすのに使います。

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

https://nodejs.org/en/download

Supabaseアカウント

無料プランで十分です。商品、写真、注文、オーナーのログイン情報を保管します。

Supabaseアカウントを作成する

https://supabase.link/r4gdwhi

Cloudflareアカウント

無料です。Turnstileのチェックで、チェックアウトからボットを締め出します。

Cloudflareアカウントを作成する

https://dash.cloudflare.com/sign-up

Hostingerのホスティング

STILLFORMは無料です。公開するストアはここで動きます。

Hostingerのプランを選ぶ

UnlimitedプランかCloudプランを使ってください。STILLFORMはNode.js Web Appとしてデプロイされます。

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

まずはライブデモで完成したストアを試してみましょう。洋服ラックにカーソルを合わせたり、ドラッグしたり、アイテムを開いたりできます。デモではチェックアウトとStudioは無効になっています。

GitHubでSTILLFORMを開く

https://github.com/salhiworks/stillform-fashion-store

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

パソコンに取り込む

Claude Desktop Code Local

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

コピーをクローンする

自分のSTILLFORMリポジトリを新しいサブフォルダーにダウンロードします。

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, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

新しいリポジトリのアドレス

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

STILLFORMフォルダーを開く

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

ストアをローカルで起動する

STILLFORMのセッションで、次を送信します：

STILLFORMを準備して起動する

プロジェクトをインストールし、パソコン上でストアをデモモードで起動します。

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Claudeが教えてくれるアドレス（通常は http://localhost:5173）を開きます。Supabaseがない間、ストアは内蔵のコレクションを使ったデモモードで動きます。ラック、商品ページ、バッグは使えますが、チェックアウトはステップ3まで無効のままです。

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

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

https://supabase.com/dashboard

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

Supabase Project Settings General

Claudeに必要なプロジェクト情報はProject IDだけです。Project URLとPublishable keyは、ClaudeがSupabase CLIを通じて自分で読み取ります。

Supabase CLIにログインする

ブラウザが開くので、これは自分で一度だけ実行します：

STILLFORMセッションの上部にあるTerminalボタンをクリックする 下のコマンドを実行する 開いたブラウザのウィンドウでログインを承認する

npx supabase login

Turnstileウィジェットを作成する

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

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

ウィジェットにストアの名前を付ける ホスト名にlocalhostを追加する ショップのドメインがすでに決まっていれば、それも追加する — まだならステップ5で追加します Managedモードを選び、ウィジェットを作成する ページは開いたままにしておく：ステップ3でサイトキーとシークレットキーを使います

Claudeにストアの接続を頼む

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

STILLFORMをSupabaseに接続する

Claudeがプロジェクトをリンクし、データベースとスターターコレクションを用意して、チェックアウト用の関数をデプロイします。

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

SupabaseのProject ID

abcdefghijklmnopqrst

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

Terminalでシークレットを入力する

Claudeに頼まれたら、ストア独自のセットアップをTerminalで実行します。Claudeが済ませた作業はすべてスキップされ、非公開の情報だけを聞かれます：

npm run setup

チェックアウト保護では1を選び、Turnstileのサイトキーとシークレットキーを貼り付ける place-order関数の再デプロイを提案されたら、nを入力する — Claudeがすでにデプロイしています オーナーアカウント用に、メールアドレスと12文字以上のパスワードを入力する 求められたら、SupabaseダッシュボードでAllow new users to sign upをオフにしてからEnterキーを押す — オフになっているかをセットアップが確認します 完了したことをClaudeに伝える

Supabase Authentication Sign In / Providers

非公開にしておく

Turnstileのシークレットキーとパスワードは、Terminalの非表示の入力欄にだけ入力してください。チャットには絶対に貼り付けないでください。

セットアップを確認してログインする

Claudeがストアのチェックを実行し、ストアを再起動します。すべて合格したと言われたら：

ローカルのストアを再読み込みする — コレクションがデータベースから読み込まれるようになります /adminを開き、オーナーのメールアドレスとパスワードでログインする

ここがストアのダッシュボード、Studioです。開けるのはストアの管理者リストに載っているアカウントだけで、誰も新規登録できません。

商品を追加する

Studioで保存したものはすべて、そのままデータベースに反映されます。コードを変更する必要はありません。

Studio Products Add a product

Name、Category、One-line summaryを入力する Photosで正面の写真を追加する Price, sizes and stockでPriceを設定し、Sizesを選ぶ 最初のカラーに名前を付け、スウォッチを選び、サイズごとの在庫数を入力する ほかのカラーごとにAdd a colourをクリックする Publishをクリックする

任意：自分のアイテムを追加したら、Productsで8つのデモ商品をアーカイブまたは削除できます。

写真をラックに合わせる

正面の写真を追加すると、ラック用のエディターが開きます。上部にハンガーのフックがある透過PNGの切り抜きがいちばんきれいに見えますが、明るい無地の壁の前で撮った写真でも大丈夫です。

写真が切り抜きでない場合は、Remove the plain backgroundをオンにする Sizeと位置を調整するか、プレビュー内で写真をドラッグする スクリーンリーダー向けに写真の説明を書く Use this photoをクリックする

Preview on the railで確認しましょう。カーソルを合わせるとアイテムが回転し、クリックするとクローズアップが開きます。背面と側面の写真があれば、ぐるりと回転させられます。

ラックを並べる

Studio Rail

Add a pieceで、新しい商品とカラーを選ぶ アイテムをドラッグするか矢印を使って並べ替える ホームページに出したくないアイテムを外す Save railをクリックする

デスクトップ画面には6〜10点がちょうどよい数です。スマートフォンでは、ラックがスワイプできるカルーセルになります。

コレクションとルックブックを整える

Studio Collections

Homepage selectionで、ホームページの先頭に出すアイテムを選び、Saveをクリックする New collectionをクリックするか既存のものを編集し、アイテムを追加する

Studio Lookbook

タイトルと紹介文を編集する 各見開きに自分の写真とキャプションをアップロードする 見開きを非表示にしたり並べ替えたりしてから、Save lookbookをクリックする

設定を更新してチェックアウトを開く

Studio Settings

Storeで、ストア名と通貨を設定する Contact、Shipping、Policiesに自分の情報を入力する Homepageで、ラックまわりの文言を変更する CheckoutでCash on delivery、Bank transfer、Pay at studio pickupのいずれかをオンにし、その説明文を編集する Open checkoutをオンにする Save settingsをクリックする

STILLFORMはカード情報を一切受け取りません。買い物客はあなたが用意した支払い方法から選び、入金が確認できたら各注文を支払い済みにします。

テスト注文をする

ローカルのストアを開き、アイテムをバッグに入れてチェックアウトする 確認ページに表示された注文番号を控える StudioでOrdersを開き、テスト注文をクリックする Cancel orderをクリックする — 在庫が販売中に戻ります

Web Appを作成する

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

Hostinger Websites Create website Web App

自分のドメインを選ぶか、まずは一時ドメインを使う Import your Git repositoryを選ぶ Continue with GitHubに進み、STILLFORMリポジトリへのアクセスをHostingerに許可する リポジトリとmainブランチを選ぶ

設定してデプロイする

Hostingerが検出したViteのフレームワークプリセットをそのまま使う Node.js 22を選ぶ ビルドコマンドをnpm run buildにする — build:demoは絶対に使わない 出力ディレクトリをdistにし、エントリーファイルは空のままにする

最初のビルドの前に、次の3つの環境変数を追加します。値は.env.localと同じで、Claudeに表示してもらえます。値はストアに組み込まれるため、あとで変更したら再デプロイが必要です。

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

SupabaseのProject URL

VITE_SUPABASE_ANON_KEY

SupabaseのPublishable key

VITE_TURNSTILE_SITE_KEY

Turnstileのサイトキー

Supabaseの値はConnectにあります。サイトキーはTurnstileウィジェットに表示されます。

Connectを開く

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

公開してよい値だけ

Turnstileのシークレットキー、SupabaseのSecret key、service_roleキーは、絶対にHostingerに追加しないでください。VITE_で始まるものはすべてブラウザから見えます。

ストアの公開前チェックであるnpm run preflightをClaudeに実行してもらい、合格したときだけデプロイする Deployをクリックし、ビルドが終わるまで待つ 公開アドレスを開く

公開ドメインを接続する

Supabase Authentication URL Configuration

Site URLを、https://で始まる公開アドレスにする 同じアドレスをRedirect URLsに追加する Saveをクリックする

Cloudflare Turnstile

STILLFORMのウィジェットを開く 公開ドメインをホスト名に追加して保存する

SupabaseのAllow new users to sign upはオフのままにします。

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

商品ページのどれかをアドレスで直接開き、再読み込みする 公開アドレスの/adminでログインする アイテムをバッグに入れてチェックアウトする — Turnstileのチェックは表示されないか、チェックボックスが1つ出るだけです Ordersでテスト注文を見つけて、キャンセルする

このストアの直接リンクをHostingerがどう扱うかは、まだ確認されていません。商品ページを開いたり再読み込みしたりしたときに404が表示される場合は、docs/DEPLOY.mdのHostingerのセクションを一緒に確認するようClaudeに頼んでください。

あとでストアを更新する

商品、写真、在庫、注文、設定：Studioで変更すれば、すぐに反映されます

デザインやコードの変更：Claudeに変更とmainへのプッシュを頼みます — プッシュするたびにHostingerがストアを再ビルドします