はじめに
こんにちは、株式会社Tsuzucle SPRING開発事業部の栁澤です！
今回はClaude 3.7 Sonnetを使用して新規ブロックを開発してみました。
普段ECサイトの構築や運用の支援をしている私が、開発の効率化を目的としたセクション・ブロック開発の過程や感想をお届けします！
Shopify開発におけるAIの活用方法やClaude 3.7 Sonnetを使ってみた感想について、ぜひ参考にしてください。
Cladue 3.7 Sonnetの登場
Claude 3.7 SonnetはAnthropicが新たにリリースしたLLMです。
複雑な推論能力と深い知識を持つAIアシスタントとして設計されています。
Claude 3.7 Sonnetは特にコードの理解や生成に強いモデルとのことなので、今回はClaudeに助けてもらいながらブロック（セクション）をより効率的に開発していきます！
もう少し効率的に新規セクション・ブロックを作りたい
セクションやブロックを作成するのは実に骨が折れます。
簡単なセクションを作成するにも以下のことを考慮して作成しなければなりません。
- テーマエディタ（スキーマの設定）に実装する機能
- サイト上に実装する機能
- デザイン・スタイル
- 保守性
- パフォーマンスの最適化
色々考慮しなければならないことがあるため、
これまでChatGPTなどを用いた効率化を図りましたが、
微妙にお門違いな回答が出てくる点が課題でした。
Liquidとして機能しないコードや存在しない変数やフォルダー名の使用などなど、、
こんな部分がClaude 3.7 Sonnetでは解決されて、
機能開発がより効率化できるといいな〜と淡い期待を寄せて開発してみました。
この機能を作成する背景
ある日、とあるブランド様から商品ページでバリエーション（カラーやサイズなど）ごとに「カートに追加」ボタンを表示してほしいという依頼がありました。いわゆるZOZO TOWNのような。
ZOZO TWONのカート追加ボタン
通常、Shopifyでは商品ページで選択ボタンからバリエーションを選択して購入するのが一般的です。
今回は、お客様が各バリエーションがどのような商品なのかパッとみてわかりやすく、間違いなく購入できる導線にすることで購入者数を拡大したいという意図がありました。
Dawnのデフォルトの商品ページ
例えば、Tシャツの場合、S/M/L/・緑/白/青といったサイズごとに個別の「カートに追加」ボタンを表示し、各ボタンをクリックするだけでそのバリエーションの商品がカートに追加できるように実装します。
作成したもの
今回は商品ページのブロックとして、バリエーションごとのカート追加ボタンをカスタマイズ画面から簡単に表示・非表示できるように作成しました。
ブロックとして商品画像横（PC時）に挿入ができます
スマホ時はこんな感じ
カート追加ボタンの色や文面もカスタマイズ画面から簡単に変更できます。
カスタマイズ画面
開発工程
ざっくり作りたいものを伝えてみた
最初は、簡単に作りたい機能の要件を伝えてみました。
何を何でどのように作りたいのか最低限のポイントを抑えて送信してみます。
以下は最初に送信したプロンプトです。
商品ページで、各バリエーションの組み合わせごとにカート追加が可能になるように、各バリエーション名とカート追加ボタンが表示されるセクションをLiquidファイルで作成してください。
## 今考えていること
* UI：スマホのブラウザで見る前提。理想のUIの画像ファイルを添付します
* ユーザーが期待する機能：
* カラーやサイズのバリエーションがパッとみてわかる
* 各バリエーションの組み合わせのカート追加ボタンをタップするとそのバリエーションの商品がカートに追加される。
* 構成：
* なるべく簡単な構想にする
* セクションとして作成し、ストア管理者は自由に非表示にすることができる
* 使用しているテーマはDawn
なんかいい感じにコードと実装した機能一覧を出力してくれました。
念の為コーディングするファイルのディレクトリ位置や設定方法なども聞いてみます。
お、かなりわかりやすい
適切なファイル・フォルダ名でかなりわかりやすく説明してくれました。
これまでの生成AIは、上記と同じ質問をしても微妙に違うディレクトリ名や設定手順を提示されていたので、この時点でかなりShopifyへの理解度が上がったなと感じました！
上記手順で実際にコードを実装してプレビューを確認します。
あれ、見た目はなんかいい感じだぞ、、。
スキーマ部分もいい感じに作ってくれている！！
いいですね〜
セクションだけでなくブロックとしても表示できるように依頼してみた
当初はセクションとして作成していましたが、従来のカート追加ボタンと同じ位置に表示できるようにブロックとして機能するように作成します。
さっそくブロックとして追加できるようにコードの編集を依頼してみます。
出力してくれたコードをそのままコピペしてカスタマイズ画面を確認してみます。
お、ブロックから追加できた。。
元々バリエーション選択やカート追加ボタンがあった箇所に表示できました！
ただ、スタイルは崩れてしまっていますね。
Claudeに依頼してもいいですが、ここは自分で調整した方が早そうです。
細かい調整は自分で
先ほどの崩れたスタイルですが、Claudeに修正を依頼しましたがイマイチいい感じにはなりません。
もちろんプロンプトによっては綺麗になることもあると思います。
しかし、特に要件が細かくなりがちなデザインに関しては、
理想のデザイン要件を言葉で正確に説明するのは意外と難しいですし、
うまく実装してもらうための詳細なプロンプトを作成するには時間がかかります。
よって細かい部分は自身で調整した方が素早く的確に完成します。
崩れたスタイルを何度か直してもらうようリクエストしたがうまくいかず、、。
セクション・ブロックを作成するにあたっては最低限のLiquidの知識が必要になりそうです。
細かい機能やスタイルの調整は自分で実施しましょう。
ちなみに自分で実装・調整した箇所は以下になります。
- ボタンやテキストサイズ・位置の調整
- 在庫が0の時の表示するボタンの文面・デザインの調整
- カスタマイズ画面における在庫が0の時のボタンリンクの設定機能
- 在庫が5より小さい場合に「残りわずか」を表示
- レスポンシブ対応(細かい部分の調整のみ自分、その他はClaude)
テストしてみよう
最後にテストして問題なければ本番環境に実装します。
今回チェックするポイントはこちら
- 全てのバリエーションが正しく一覧表示されるか
- 在庫あり/なしの状態が正しく表示されるか
- カートに追加ボタンをクリックした際に適切な商品が追加されているか
- レスポンシブデザインに問題がないか
- カスタマイズ画面での設定が適切に反映されているか
添付の動画はざっくりとしたテストですが、いい感じですね！
これにて本記事の冒頭で載せたブロックの完成です！
おわりに（感想）
今回はClaude 3.7 Sonnetの力を借りて爆速でブロックを作成してみました。
基本的な機能とデザインはClaudeだけで一瞬で作成できたので、
ざっくりとした要件定義から機能・デザインのベースとなる部分の実装はかなり効率化できそうです！
エラーもほとんど発生しなかったので思ったより安心して依頼できます！
ただし、細かい調整や機能追加するにあたっては人が作業する方が早そうです。
実際に機能開発を依頼される際は、より高度で複雑な機能・デザイン要件もあるので、
機能開発においてLiquidに関する基本的な知識は依然として不可欠であると思います。
今回作成したブロックのコードが気になる方はTsuzucleのホームページからお問い合わせください。
最後までご覧いただきありがとうございました🙌
株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：info@tsuzucle.com
Xアカウント：https://x.com/tsuzucle
Discussion