こんにちは！ カラーミーショップ スタッフです。
このたび当サービスでは、ショップのデザインテンプレート（HTML・CSS）をAPI経由で取得・編集できるよう、「テンプレートAPI」を公開しました。
「カラーミーショップ AIコネクター」を利用している方は、AIチャットでの自然言語による指示だけで、デザインの編集・確認ができるようになります。
また「カラーミーショップ CLI」を通じて、コマンド操作でテンプレートをローカル環境で取得・管理することも可能です。
＼こんな方におすすめです／
- コーディングの知識がなく、デザイン編集にハードルを感じている方
- セールや季節イベントのたびにバナー差し替えなどの作業が発生している方
- 複数のショップやページを管理しており、デザインを効率よく更新したい方
- Gitでバージョン管理しながらチームでデザインを運用したい方
テンプレートAPIとは
テンプレートAPIとは、管理画面を介さず外部ツールやプログラムを通じてショップのデザインテンプレート（HTML・CSS）を取得・更新できる仕組みです。
これを利用することで、Claude Desktop などのAIツールからショップデザインを編集することができます。
対応している操作
- 追加済みテンプレート一覧の取得
- プレビューURLの取得
- 各ページのHTML・CSS取得
- 各ページのHTML・CSS更新
編集できるページ
- 共通
- トップ
- 商品一覧
- 商品詳細
- 特定商取引
- 商品検索結果
- オプション在庫・値段表
- プライバシーポリシー
テンプレートAPIを通じてできること
「AIコネクター」でデザインを編集する
「カラーミーショップ AIコネクター」と組み合わせることで、コーディングの知識がなくても、自然言語での指示だけでデザインの確認・編集が行えます。
デザインの確認
「トップページのデザインを確認して」と指示すると、AIがテンプレートのHTML・CSSを取得し、ページの構成やスタイルをわかりやすく要約します。
現在のデザインがどうなっているのか、コードを読まずに把握できます。
デザインの編集
アップロード済みのファイルURLを指定し、「商品詳細ページに追加して」などと指示すれば、AIがHTMLを編集してショップに反映します。
レイアウトの大幅な変更からバナー追加まで、これまでコードの編集が必要だった作業をAIに任せられます。
CLIでショップデザインを管理する
「カラーミーショップ CLI」を使うと、テンプレートのHTML・CSSをローカル環境に取得し、使い慣れたエディタで編集できます。
ローカルでの編集
追加済みのデザインテンプレート確認、各ページのHTML・CSSの取得および更新を、コマンド操作で行えます。
管理画面のエディタではなく、普段お使いのコードエディタで快適に編集できます。
Gitによるバージョン管理
取得したHTML・CSSをGitリポジトリで管理することで、変更履歴の追跡やロールバック（切り戻し）が容易になります。
「いつ、どこを変更したか」を記録できるため、チームでの共同作業やデザインの変更管理にも役立ちます。
AIでデザイン更新を自動化する
Claude Code の cron や Claude Desktop の Cowork など、定期タスク実行機能を活用することで、定期的なデザイン更新をAIに任せられます。
たとえば、下記のような運用が可能です。
- 「毎週月曜日の朝に、トップページのバナーを今週のおすすめ商品に更新して」と設定し、AIにスケジュール実行させる
- セール期間中だけトップページにセールバナーを表示し、期間終了後に自動で元のデザインに戻す
手動でのデザイン切替が不要になるため、主にイベントやキャンペーンが多いショップで活用していただけます。
注意事項
- テンプレートAPIの利用には、OAuth認証で read_templates / write_templates スコープの許可が必要です。詳しくはAPIドキュメントをご確認ください。
- HTMLは65,530バイト（プラチナ／プレミアムプランでは120,000バイト）、CSSは65,535バイトが上限となっています。