商品カタログ を AI で作る位置づけ
Claude Artifacts は、Claude の会話から一枚の成果物を書き出す仕組みです。書き出した成果物には専用の URL がつきます。相手には URL 一本で届きます。
商品カタログの場面で相性が良いのは二つです。ひとつは縦にスクロールする Web ページ。もうひとつは印刷にまわす PDF の下地です。
対応プランは Free、Pro、Max、Team、Enterprise の全プラン。2026 年 7 月 13 日の更新で、公開共有が全プランに開かれました。個人商店や地方の小売店も、URL 一本で会員と一般客に配れます。
使いどころは幅広く及びます。EC の一次露出、店頭配布の紙のカタログ、卸取引の商品リスト、ギフト特集の一冊。周年フェアの商品一覧や、予約受注の受付ページとしても組めます。
EC の商品管理システム（Shopify、BASE、STORES、futureshop、EC-CUBE）に登録する前の下書きにも向きます。書き出した URL を撮影スタッフや発注先に共有する場面も増えました。
EC サイトと店頭カタログの workflow 分岐
商品カタログを組むとき、最初に決めるのは向き先です。EC サイト向けか、店頭カタログ向けか。分岐で書き出しの形式と更新のリズムが変わります。
EC サイト向けは、Web ページを主軸に組みます。上部にキービジュアルと導線。中段に商品一覧。下段にキャンペーンと配送の案内。末尾に規約と特商法の記載を添える順が骨です。商品一覧はグリッド表示にし、モバイルは 2 列、PC は 4 列を目安にします。
店頭カタログ向けは、PDF を主軸に組みます。版型は A4 タテか A3 ヨコ。手渡す一冊として書き出します。商品写真は大きめに、価格と品番は表で追える形に。末尾に発注書の枠を添える構成が向きます。
EC と店頭の両方を持つ小売では、二本立てが向きます。常時公開の EC カタログは Web で組みます。シーズンごとに刷り直す店頭カタログは PDF で組みます。URL と印刷版を用途別に配り分ける形です。世界観を一冊にまとめる姉妹の型は Claude Artifacts でルックブックを作る実務ガイド で扱っています。
商品カタログの初稿を作るブリーフの六要素
初稿の質を決めるのはブリーフの精度です。ブリーフに入れる要素は六つを目安にします。
第一に、店舗と商品群の輪郭。店舗名、業態、扱う商品群を一行で書き出します。業態は食品、雑貨、アパレル、化粧品、家具、書籍などから当てはまるものを選びます。
第二に、掲載する品数と主力の内訳。全 60 品のうち定番 40 品、限定 20 品といった内訳の骨をブリーフに入れます。
第三に、価格帯と決済。価格の下限と上限を書きます。税込と税抜のどちらで見せるか、決済手段の並びも明示します。
第四に、在庫の見せ方。在庫数を数字で出すか、有無だけを出すか。売り切れの扱いをどうするかを決めます。
第五に、写真の構成。メイン写真の背景色、サブ写真の枚数、着用イメージの有無を並べます。
第六に、カタログの温度。ミニマルに整えるか、賑やかに並べるかを店舗の性格に合わせます。
この六つを Claude に一度に渡すと、初稿の骨が出てきます。文章にせず箇条書きで並べたブリーフのほうが、初稿の温度が揃います。
商品一覧ページの並べ方と絞り込み
商品カタログの主役は商品一覧の並べ方です。並べ方の型は四つあります。カテゴリー別、価格順、人気順、新着順。EC サイトの一覧では、この四つを切り替えるボタンをページ上部に置く作りが定着しています。
カテゴリー別は、商品分類で束ねる並びです。食品なら「主食・惣菜・調味料・菓子・飲料」。雑貨なら「キッチン・バス・ステーショナリー・小物」。アパレルなら「アウター・トップス・ボトムス・小物」。総品数が多いカタログで、目当ての商品に最短で辿り着く道が要る場面に向きます。
価格順は、安い順と高い順を切り替える並び。贈り物選びや予算軸の買い物と相性が良い型です。
人気順は、店舗の売上上位を先頭に置く並び。初めて訪れる客への露出設計として機能します。
新着順は、直近で入荷した商品を先頭に置く並び。再訪する常連客の目当てになります。
四つの並びを試すには、初稿を1つ書き出したあとで会話に戻る流れが素直です。「同じ商品リストを、カテゴリー別と価格順と新着順の三種類に組み直してください」と依頼します。書き出し URL は別々になります。店舗の一次露出はカテゴリー別、ギフト特集は価格順、新入荷案内は新着順という配り分けができます。絞り込みの UI（サイドバーのチェックボックス）も、Claude に指示すれば初稿に組み込めます。
商品詳細ページに載せる項目と写真の並べ方
一品ごとの詳細ページは、写真と文字と数字の三層で組みます。上段に商品写真とサブ写真。中段に商品名と価格。下段に商品説明と仕様。この骨が読みやすい配りです。
商品写真はメイン 1 枚とサブ 3 枚から 6 枚を並べます。メインは商品全体の姿を白背景か薄いグレー背景で撮った一枚。サブは角度違い、素材の質感、使用シーンの三系統に分けます。食品と化粧品は中身と使うシーンの写真を添えます。アパレルはモデル着用と置き撮り。家具と大型雑貨は寸法比較の写真を必ず添えます。EC 一覧に並ぶ写真の背景色を店舗内で統一しておくと、一覧が整った印象になります。写真の並べ方の詳細は、姉妹記事の Claude Artifacts で作るポートフォリオサイト の作品配列と骨が重なります。
Web ページに写真を載せるときは、写真そのものを Artifacts の中に埋め込まない作りが向きます。外部の CDN や画像ホスティングに置いた URL を Claude に渡します。ページが軽くなり、差し替えも独立します。写真の版権と使用範囲は、フォトグラファーとの契約書に事前に明示します。Web、印刷、SNS の二次利用、卸取引での配布用途を分けて権利処理する慣行が広く採用されています。
商品名は、店舗内で通っている呼び名を先頭に置きます。括弧書きで英語名や品番を添える形が広く採用されています。商品説明は三段構えが読み口として落ち着きます。素材や産地、使い方、注意事項の順です。仕様の表は縦に並べます。寸法、重量、素材、原産地、賞味期限、保存方法、洗い方、送料区分、返品の可否といった項目です。Claude に業態別のテンプレート（食品向け・アパレル向け・雑貨向け）を依頼すれば、詳細ページを一度に用意できます。
価格の見せ方（税込・税抜・会員・キャンペーン）
価格を見せるとき、決める点は四つあります。税込と税抜の表記、通常価格と会員価格の差、キャンペーン価格の期間、送料の別建てです。
日本国内の EC は、総額表示（税込）の義務化以降、税込を主表記にする運用が定着しています。税込と税抜を併記する場合は、大きな文字で税込、小さな文字で税抜という比重にします。
通常価格に打ち消し線を引き、会員価格を隣に大きく置く型は、会員登録の動機付けとして機能します。キャンペーン価格は期間の始まりと終わりを日付で明示します。期間終了後は通常価格に戻す運用を明示するのが素直です。
送料は、商品ごとの価格に含めない型が広く採用されています。カタログ下部か決済ページで一括表示します。送料込みと送料別が混在する場合は、商品ごとに送料の目安をアイコンで示すと購入直前の離脱が減ります。
景品表示法の二重価格表示については、消費者庁のガイドラインに沿って設計します。通常価格として打ち消す表記は、実際に相当期間その価格で販売していた実績が前提です。Claude 側の判断ではなく、店舗側の販売実績の記録に基づいて決めます。
在庫表示の設計と EC システムとの連動の限界
Claude Artifacts で作った商品カタログは、在庫の連動を Claude Artifacts の外に任せます。Shopify、BASE、STORES、futureshop、EC-CUBE、Salesforce Commerce、独自の基幹系。いずれも Claude Artifacts との自動連携はありません。
売り切れ表示やリアルタイムの在庫数を出したい場面では、切り分けが素直です。EC の商品ページの URL をカタログの各商品の脇にリンクし、在庫の表示は EC 側で持たせます。カタログは「商品の見せ方の一冊」と位置づけます。購入と決済は EC 側の URL に渡します。
在庫の見せ方は、店舗ごとに型を決めます。「残りわずか」「在庫あり」「入荷待ち」の三段階で出す型。有無だけを二値で出す型。売り切れ商品はカタログから外す型。在庫表示を一切出さず購入時に判定する型。実務でよく取られるのはこの四つです。EC 本体の在庫と連動しないカタログでは、三段階か二値の型が誤解を招きにくく無難です。
販売終了する商品は、会話に戻る運用が向きます。「販売終了商品を、末尾の『取扱終了』のセクションにまとめてください」と依頼します。書き出した URL は変わらないため、一冊として最新の状態を保てます。単発公開ページの URL 差し替えの応用例は、姉妹記事の Claude Artifacts で飲食店・カフェのメニューを作る の店内 QR の運用と骨が重なります。
会員限定カタログと公開カタログの URL 使い分け
商品カタログは、会員限定と公開の二本の URL を持たせる運用が向きます。会員限定は、会員価格・先行販売・限定商品を含む版。URL を会員リストの相手にだけ渡します。公開は、通常価格と定番商品だけを含む版。Web と SNS で URL を広く配ります。
会員限定の URL は、Claude Artifacts の公開共有の設定を「共有した相手だけがアクセスできる」相当の運用に寄せます。Claude Artifacts の公開 URL は、URL を知る全員が閲覧できる仕組みです。会員価格を含む版の URL は、会員リスト以外に流さない管理を徹底します。組織の Team・Enterprise プランでは、外部共有の可否を組織の管理者が決める設定になります。
会員限定カタログの配布は、会員向けメールマガジンや会員専用マイページからのリンクとして送るのが素直です。卸取引向けの商品リストは、別版として書き出します。上代・卸価格・最低発注数量・納期の四項目を含めます。卸バイヤーとの商談用に手渡します。一般客向けとは URL を完全に分けます。卸価格を含む版が一般公開の場に流れない管理を徹底します。
カタログ公開後の差し替えと Shopify・BASE 連携
Claude Artifacts で作った商品カタログは、公開後に中身を差し替えても URL を維持できます。差し替えた瞬間、URL を開いている読み手のブラウザに更新が反映されます。この動きが、シーズンの入れ替わり、新入荷の追加、価格改定と相性が良い型です。
一方で、EC システムとの本格的な連携は Claude Artifacts の担当範囲の外です。EC 本体の CSV 一括登録、在庫の自動連動、決済の処理は、EC の管理画面の中で行います。対象は Shopify、BASE、STORES、futureshop、EC-CUBE などです。Claude Artifacts のカタログは、EC 本体の入口または補助的な一冊として位置づけます。購入導線は EC 本体の商品ページの URL に渡します。
CSV での連携が要る場面では、会話に戻って依頼できます。「このカタログの商品情報を、Shopify の商品インポート用 CSV に整形してください」と伝えます。書き出した CSV を EC の管理画面から取り込む形で、二重管理の手間を減らせます。ブランド資産の一冊化の全体像は、姉妹の Claude Artifacts と Recraft のブランドブック運用 で扱っています。
制作会社・撮影スタジオ・EC 担当との分業
Claude Artifacts で作った商品カタログは、スモール EC や個人商店の一次カタログとして、そのまま使えます。一方で、担当範囲の外に置く仕事もあります。独自書体を要するブランドカタログ、印刷本冊子、大規模 EC のフルリニューアル、決済と会員基盤を組み込んだ本格 EC。これらは Web 制作会社と印刷会社と EC ベンダーの手を借ります。
線引きの目安は二点です。書体・色・撮影後の写真加工が「ブランドの資産の中核」として扱われるかどうか。決済と会員データの取り扱いが伴うかどうか。決済と個人情報の取り扱いは、Claude Artifacts の担当範囲の外です。決済フォームと会員登録フォームは、EC 本体か決済代行サービスの側に置きます。
撮影スタジオとの分業では、Claude Artifacts の会話に撮影の指示は含めません。撮影当日のショットリストや商品ごとのライティング指示は Claude Artifacts の外で管理します。スプレッドシート、Notion、PDF のショットリストなどが向きます。Claude Artifacts は撮影後の素材を一冊に束ねる道具として位置づけます。
EC 担当との分業では、商品情報の一次入力を EC 本体で行います。カタログ用の一冊を Claude Artifacts に書き出す順が素直です。カタログ側で商品名や価格を変更したら、EC 本体にも同じ変更を反映する運用ルールを決めておきます。全体像は、hub 記事の Claude Artifacts ブランドチーム活用ガイド で扱っています。
FAQ
Q1. 商品カタログ を AI で作るのに、EC の知識は必要ですか
A. 必要ありません。Claude.ai の会話の中で、扱う商品群と品数、価格帯、写真の並べ方を伝えれば、縦にスクロールする Web ページの初稿が書き出されます。右側のパネルで、目に見える要素の名前で直しを頼めます。決済と会員基盤を組み込んだ本格 EC は EC ベンダーと決済代行の側に任せます。Claude Artifacts は購入前の一次露出の一冊として使うのが向きます。
Q2. Free プランでも、商品カタログの URL を会員に配れますか
A. 配れます。2026 年 7 月 13 日の更新で、公開共有が全プランに開放されました。Free の利用者でも、書き出したカタログに公開の URL を発行できます。会員リストや店頭 QR コードから案内する運用ができます。Team と Enterprise の組織では、外部共有の可否を組織の管理者が決める設定になります。
Q3. 在庫数を Shopify や BASE と自動で連動できますか
A. 現時点で Claude Artifacts と EC 本体の間には自動連携がありません。売り切れ表示やリアルタイムの在庫数を出したい場面では、EC の商品ページの URL をカタログの各商品の脇にリンクし、在庫の表示は EC 側で持たせる切り分けが素直です。在庫の見せ方は、「残りわずか」「在庫あり」「入荷待ち」の三段階に絞ると、更新の手間と実態のズレを抑えられます。
Q4. 商品カタログの URL を、独自ドメインにできますか
A. Claude Artifacts の URL は Claude 側で管理される URL です。独自ドメイン（shop.example.com など）への割り当ては別の実装が要ります。会員と一般客に短くきれいな URL を見せたい場面では、独自ドメインの短縮 URL サービスから Claude Artifacts の URL に転送する運用が現実的です。店舗の正式な EC サイトを独自ドメインに載せる場面は、EC ベンダーと Web 制作会社に任せます。
Q5. 次のシーズンで、カタログの骨組みを流用できますか
A. 流用できます。会話に戻って、「前シーズンのカタログの骨組みを流用して、今回の商品リストと写真に差し替えてください」と依頼する流れです。次シーズンの Artifacts として別 URL で書き出されます。前シーズンの URL は残したまま、新しいカタログを新しい URL で運用できます。ブランドの資産として書体と色をまとめた Artifacts を持っておくと、シーズンごとの温度のブレがさらに減ります。