カラーミーショップ AIコネクターで、デザイン編集を試してみた
先日から提供開始された、アプリ「カラーミーショップ AIコネクター」。
カラーミーショップのアプリストアからアプリ追加すると、つかえるようになります。
公式の記事にはどんなふうに書いてあるか、引用してみましょう。
本アプリを通じて、受注確認や商品在庫の確認、顧客情報の更新、売上分析といった日々の運営業務を、AIツールとの対話で進められるようになります。
流行りのAI、どんなことにつかえるの？ って話ですが、おもに業務の効率化に役立ちそうです。
現在手動で行っている、カラーミーショップ全般の操作も自動化してくれそうな雰囲気ですし、慣れると便利そうですよ。
さて、今回の記事は、さらにAI利用の範囲が広がって、デザイン編集が可能になったというお話です。
早速、試してみました。
AIをつかって、デザイン編集
このたびテンプレートAPIが公開され、外部からテンプレート取得・編集ができるようになりました。
テンプレートAPIとAIをつかうことで、
カラーミーショップ
のデザイン編集を自動で行ってくれるようになりました。
AIに指示をだすと、自動でコードを書いて、更新までしてくれる。
そういう時代なんですね。
AIコネクターアプリの利用の流れ
カラーミーショップ公式の記事から抜粋してみました。
手順はかんたんで、この三つです。
・カラーミーショップのアプリをインストール
・Claude Desktopをインストール（ふだんつかっている方は不要）
・Claude Desktopの設定を行う
詳細を読みたい方向けに、公式の記事も引用しておきます。
本アプリは、すでに Claude Desktop などのAIツールを日常的に活用されている方向けの機能です。
MCPサーバーの接続設定をご自身で行える環境をご用意のうえ、ご利用ください。1. アプリストアから「カラーミーショップ AIコネクター」をインストールする
2. アプリにログインし、MCP設定画面に表示されるサーバーURLをコピーする
3. Claude Desktop の設定にMCPサーバーを追加する
4. Claude Desktop を起動し、ショップのデータに話しかけて操作する
1.～3. の手順については、以下で解説します。
「カラーミーショップ AIコネクター」をインストールする
アプリストアから「追加する」ボタン。利用料金は無料。
画面を読んでチェックしたり、カラーミーショップのアカウントにログインしたり、アクセスの許可ボタンを押したりして、インストールを完了します。
最後に、MCPサーバー接続手順という画面がでます。
表示に従って、この後、AI側（今回はClaude Desktop）で登録を行います。
リモートMCPサーバーURLが必要になりますので、メモっておきます。
Claude Desktop をインストールする
Anthropic社が提供するAI「Claude」をダウンロードします。
公式）https://claude.com/ja-jp/download
デスクトップ版をインストールしましょう。
macOS版のダウンロードボタンもあります。
登録には、メール（アカウントにつかう）と携帯電話番号（SMSが届く）が必要になります。
Windowsの場合、インストール時に英語メッセージがでる場合があります。
その場合は、内容をよんでから、Windowsの 設定＞システム＞詳細設定の、開発者モードを一時的にオンにします（デフォルトはオフになっていると思います）。
Claude Desktop の設定にMCPサーバーを追加する
Claude Desktop アプリの左上に三本線アイコンがありますので、そこから
ファイル＞設定＞左側のコネクタ＞カスタムコネクタを追加します。
入力欄は、先ほどカラーミーショップ アプリをインストールしたさいに表示された、リモートMCPサーバーURLになります。
カスタムコネクタの追加が終われば、コネクタ画面のリスト右側に表示されている「連携/連携させる」を押して完了。下画像は連携後になります。
Claude Desktop を使って、デザイン編集を試す
デザイン編集のテストをしたいので、ごくかんたんに
「naeco2.shop-pro.jpのヘッダーメニューに、CONTACTってリンクを追加したい」とお願いしてみます。
テンプレートAPIの使用許可を尋ねてきますので、許可します。
しばらくすると、AIがテンプレートの解析を終えて、どこに追加するかの報告をして、更新を始めます。
テンプレートのバックアップは必須ですね（こんなことも、頼めば、たぶんAIがしてくれそう）。
更新完了後に、追加場所とコードを教えてくれます。
PCだけでなく、SPメニューにも指示なしで追加してくれました。
このあたりは丁寧に指示すると、こまかい要望も実行してくれるのだろうと思います。
実行結果
メニューの項目が増えてる、成功です！
今回の作業内容はかんたんでしたが、
昨今のAIはかしこいので、もっと複雑な依頼もこなしてくれますよ。
プロンプトにやりたいことを入力してみましょう。
おわりに
Claudeの無料プランでは、お試し程度でしかつかえませんので、有料プランにアップグレードしたいところです。Claude Desktopにかぎらず、MCPがつかえるAIと接続できます。
便利なツールで、以前は手間のかかっていた作業も、かんたんにできるようになりました。
やりたいことが実行可能かは、AI本人に質問するといいです。
AIコネクター アプリのお困り事は、カラーミーショップのサポートに聞いてください。
AIをつかってどういう業務を省力化・自動化できるかは、カラーミーショップ公式の参考記事に例が挙がっていますので、目を通しておくと役立ちます。
参考１）AIへの指示だけでショップデザインを編集できるようになりました | お知らせ・最新情報 カラーミーショップ ECサイト構築サービス
参考２）AIツールからショップ操作が可能に！「カラーミーショップ AIコネクター」を提供開始 | お知らせ・最新情報 カラーミーショップ ECサイト構築サービス
執筆者
えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら