【2025年春版】Shopify（EC）開発で導入して良かったAI関連サービス
こんにちは。ノンスタ代表兼CTOの高崎です。
最近のAIの進化には目をみはるものがありますね。
わたしたちもAIの活用を積極的に行い、より多くのリソースをお客様との対話や新規機能の開発に注ぐべく研究中です。
この記事では、そんなわたしたちが導入して良かったAI関連サービスをご紹介します。
目次
コーディング支援(エディタ)
今までは人間のサポートをAIがするイメージでしたが今年に入って、エージェントモードというAIがコードを書く機能がコードエディタに組み込まれ、AIが書いたコードを人間が確認する形になっています。
本当にこれは今までの感覚が変わるというか、人を一人雇ったかのようなインパクトがあります。
その中でも弊社チームでは以下のどちらかのエディタを使っているメンバーが多いです。
Cursor
VSCode + Github Copilot
URL:https://code.visualstudio.com/
私も両方試したのですが、どちらも有料版であれば、大きな差はないように感じます
体感ではCursorの方が新機能のリリースが少し早い印象があります。
またAIにコードをお願いするときは全体を丸投げするのではなく、プロジェクトをある程度タスクに分割して、実行の順序を指定してあげる必要があり、そういうところも人間のスタッフに接するときと同じですね。
ターミナル
Warp
AIを積んだターミナルで、ローカルサーバーを立ち上げている際に出るエラーメッセージをAIエージェントに読み込ませると、エラーの原因を自動で解消してくれるので、サーバー関連に起因するエラーの解消が格段に早くなりました。
また環境構築時のエラーも自動で解消してくれるので、新しい技術に挑戦する時の環境構築ストレスが格段に減りました。
MCPサーバー
MCPサーバーはAIがPCローカル上で様々な機能（ブラウザの操作、ファイル作成、検索など）を実行することができるようにするツールです。
AIコードエディタにいれてチャット欄から使っています。
その中でも以下のMCPサーバーが便利でした。
Shopify Dev MCPサーバー
URL:https://github.com/Shopify/dev-mcp?tab=readme-ov-file#setup
このツールをお使いのAIコードエディタに入れると、AIがShopifyの公式の技術ドキュメントを読み込みすることで、公式の情報からコードを生成することが可能です。
結果、AIが自動生成するコードがよりShopify推奨するコードへと精度が上がります。
クエリを書く際に特に便利で、「商品情報のメタフィールドを取り出すには？」といったShopifyのAPIのデータ構造を理解していないと答えられない問題に答えてくれます。
Shopifyからデータを引っ張ってくるためのGraphQLを書く手間が大幅に減りました。
Microsoft Playwright MCPサーバー
URL：https://github.com/microsoft/playwright-mcp
これを導入するとE2Eテスト（ブラウザテスト）をAIにチャットで自然言語で指示することができます。
ECサイトの制作はCSSの干渉などでカートボタンが表示されないといった、ちょっとのミスが致命的なエラーを起こす可能性がありますが、かといって毎回毎回人間によるすべての動作チェックをするのは大変、、という問題を一気に解決してくれます。
「このURLにアクセスして、商品がカートに追加できるかチェックして」などと、エディタのチャット欄にテストしたい内容を伝えれば、AIが自動でブラウザを立ち上げてチェックしてくれます。
チャット欄にテストして欲しい内容を伝えると、AIがブラウザを立ち上げてテストしてくれる。便利。
コードレビュー
Code Rabit
URL:https://www.coderabbit.ai/ja
GitHubにプルリクエストが送られた際に自動でそのプルレクのサマリーとコードレビューを行ってくれます。
変数のスペルミスなど人間では気づきにくい箇所まで素早くチェックしてくれるので重宝しています。
AIによるコードレビューのサンプル
試したが導入を見送ったもの
Dify
このサービスを使うと簡単にAI関連のアプリを作ることができます。
わたしたちの会社ではNotionにクライアントさんとのやり取りや技術的知見をためているので、社内NotionをAIに学習してもらい、メンバー間の認識の共通化や対応の脱属人化に役にたてようとしたのですが、おそらくわたしたちのNotionのデータ行動の問題もあり、期待値より社内RAGとしての精度が低く導入を見送りました。
時間が経てばまた進化していると思うので今後に期待しています！
Figmaを自動でコードに変換する系サービス
AIにはクオリア（意識によって経験される感覚的な質、主観的な感覚や感情）がないので、視覚情報をコードに変換するといったクオリアを必要とする業務は苦手な傾向にあるのかなと思います。
Figmaで作ったデザインをAIが自動でコードにしてくれる系のサービスは軒並み、この生成されたコードを直して使うのであれば最初から自分でコード補完機能を使いながら書いたほうが早いかなという印象でした。
こちらも今後のパワーアップに期待です。
試したサービス
試さずに導入を見送ったもの
コードエディタ自体ににAgentモードがついており、他にもAI Agentに類するサービスを導入してしまうとかえって混乱のもとかと思い、導入を見送っています。
おまけ：読んで良かった本
AIがどういう仕組で、どういう風に指示すると良いパフォーマンスがでるか、AI駆動開発を考える上で「コード×AIーソフトウェア開発者のための生成AI実践入門」の本がとても参考になりました。おすすめです。
わたしたちの今までの調査結果は以上です、ここに書かれてないサービスで良いものがありましたらぜひ、感想フォームやSNSのコメントで教えてくださいね。
わたしたちも新しい学びがありましたら随時発信していきたいと思っていますので、どうぞよろしくお願いします。