副業のハンドメイド作家が、プログラミング未経験でClaudeと配色シミュレーターを作った話
受注生産の小さなお店を、ひとりで運営しています。本業は会社員で、お店は副業です。ハンドメイド作家として、本業の合間に、この配色シミュレーターを作りました。
お客様が革やパーツの色を自由に選べる商品があって、「この色の組み合わせ、実物ではどう見えるの?」という不安を減らすために、配色を選ぶと、その場で絵が変わるシミュレーターを作りました。プログラミングは、まったくの未経験でした。
これは、その全体像と、作った理由を書く連載の第1回です。
何を作ったのか
色の組み合わせを選ぶと、商品の絵がその場で変わる
選んだ配色を、正方形の画像として保存できる
そのまま「カートに入れる」ができる
いま、18ページ(16商品)で動いている
最初の1つは、革20色×パーツ3色の組み合わせでした。そこから商品ごとに作り足して、16商品に広がっています。
実際の商品は載せられないので、仕組みだけを再現した簡易デモを用意しました。色も価格も、すべて架空の数字です。よかったら、触ってみてください。
▼ 配色デモ(ログイン不要)
https://claude.ai/artifact/M8fLRQMow74xErgkbhgYyJ
なぜ作ったのか
理由は3つありました。
全部の組み合わせを、実物で撮影するのは現実的ではなかった。 色の組み合わせが多いので、すべて作って商品写真を撮るのは不可能です。
文字だけで色の組み合わせを説明するのには限界があった。 「実際に色を変えながら、直感的にイメージできたら、選ぶ時間も楽しんでもらえるのでは」と思いました。
有料アプリのコストを抑えたかった。
3つ目を、もう少し詳しく書きます。当時は、Shopifyの標準機能だけでは、登録できるオプションの数に限りがありました。そこで、商品オプションの有料アプリを使って、選択肢を増やしていました。ただ、そのアプリには、年間で100ドル以上かかっていました。
有料プランで、オプションの設定が33個
ほとんどは「色の選択肢+固定価格」という単純な構成
でも、色をクリックしても絵は変わらない(ドロップダウンで選ぶだけ)
自作のシミュレーターは、有料アプリとは無関係の独自実装でした。作るほどに、有料アプリの出番が減っていきました。2026年9月に新しいシミュレーターを6つ公開した時点で、有料アプリは0円プランに下げられる条件が揃いました。
プログラミング経験は?
まったくの未経験でした。 WordPressで、CSSやHTMLを少しかじった程度です。Webアプリや補助的なアプリを作るのは、これが完全に初めてでした。
色を変える仕組みは、意外とシンプル
デモの色が変わる部分は、たったこれだけです。
// 選んだ色を、名前の付いたパーツに入れるだけ
svg.getElementById('body').setAttribute('fill', '#B8442F');
// 価格は「基本料金 + 限定色の加算」
price = 3000 + (本体が限定色なら 600) + (ふちが限定色なら 300) + ...絵の1つ1つのパーツに名前(id)を付けておいて、選んだ色をそのパーツに入れ替えているだけです。縫い目の線の色は、本体の明るさから「見える色」を自動で選んでいます。
選んだ配色は、1080×1080の正方形の画像として書き出せます。実際のお店では、この画像を保存して、注文の確認や共有に使えます。
いちばん最初に詰まったこと
商品の「絵」を作ることでした。 最初は、商品の写真をClaudeに読み込ませて、そこから絵を作ってもらえないかと考えました。でも、それでは商品のディテールがまったく表現されず、ここで一度、完全に詰みました。
抜け道は、AIに全部任せるのをやめることでした。
自分でIllustratorを使って、SVG(色を変えられる絵)を描いた
別のAI(Gemini)に商品の写真を送って、線画を抽出してもらい、その画像を流用した
AIに任せられる部分と、人が手を動かす部分を分ける。これが、最初の大きな学びでした。
作ってよかったと感じた瞬間
うれしかった瞬間は2つあります。
気軽に使ってもらえているのが分かったとき。 お客様が保存した画像が溜まっていくのを見て、実際に触ってもらえていると実感しました。
以前より複雑な配色の注文をいただくようになったとき。 選べる幅が広がったことが、そのまま注文に表れました。
連載の予定
この連載では、次のことを書いていきます。
第2回:色を変える絵の仕組み(SVGと、ハマったバグ)
第3回:52通りのバリエーションに、価格をどう組んだか
第4回:「保存してからでないとカートに入れない」仕様をやめた失敗
第5回:16商品に広げるための共通化
第6回:実際に効果はあったのか(効果測定)
第6回は、10月17日以降のデータが揃ってから書きます。うまくいったことも、いかなかったことも書くつもりです。
※Anthropic社・Shopify社とは無関係の、個人の運営記録です。
ここまで読んでくださった方へ、おまけです。
Claudeへの頼み方(さわり)
「Claudeと作った」と書くだけでは、真似できないと思います。そこで、私が最初に送った依頼のひな形を載せます。実際のやりとりを、読みやすく整理し直したものです。
私はプログラミング未経験です。ネットショップの商品ページに、
お客さんが色を選ぶと商品の絵の色が変わる「配色シミュレーター」を作りたいです。
いきなり作らず、まず次を教えてください。
1. 必要な部品と、全体の仕組みを、初心者向けに
2. 私が用意しなければいけない素材(絵など)
3. いちばん最初に作る、いちばん小さな動くもの
専門用語は、そのつど短く説明してください。ポイントは、「作って」ではなく「まず教えて」と頼んだことです。特に2番の「私が用意しなければいけない素材」を先に聞いたことで、いちばん大変な部分が「商品の絵」だと早めに分かりました。作り始めてから気づくより、ずっと傷が浅くて済みます。
この続き(商品の絵を作ってもらった依頼文)は、連載の第2回で書きます。読んでみたい方は、コメントやXで教えてください。
