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