WooCommerce 10.9でカラースウォッチがコア機能に。商品ページの視覚表現が大幅に向上
WooCommerce 10.9で商品属性に新しいタイプ「Color / Image」が追加された。これまではテキストリンクやセレクトボックスでしか選べなかった色や柄のバリエーションを、フロントエンド上で視覚的なスウォッチ（小さな色見本）として表示できるようになる。
この機能はブロックテーマ利用時の実験的機能として提供され、商品フィルターブロックや「カートに追加＋オプション」ブロック内のバリエーションセレクターに自動適用される。WooCommerce Developer Blogの記事によると、6月8日予定のベータ版から利用可能だ。
本記事では、この新機能の概要、具体的な設定手順、技術的な内部構造、そして他のブロックとの共有APIの仕組みを詳しく解説する。WooCommerceストアを運営する担当者や、ECサイトのデザインを改善したい制作者に役立つ情報だ。
カラースウォッチ機能の概要
上の比較で分かるように、テキストだけでは実際の色味が伝わらず、購入者は商品画像だけを頼りに判断するしかなかった。今回の変更で、Chipsブロック（チップス）やListブロック（リスト）での表示が直感的になる。
対応するブロックと表示パターン
カラースウォッチが適用されるのは、以下の2つのブロック内でColor / Image属性がレンダリングされる場面だ。
- 商品フィルター内の「属性で絞り込む」ブロック（Filter by Attribute）
- 「カートに追加＋オプション」ブロック内のバリエーションセレクター（Variation Selector）
Chipsスタイルでは、各スウォッチがHEXカラーコードまたは画像を使った円形で表示される。管理画面で設定した色や画像がそのままフロントエンドに反映される仕組みだ。Listスタイルでは、属性名の隣に小さなスウォッチが並ぶ。これにより、フィルター画面でも色の判別が容易になる。
色だけでなく画像スウォッチにも対応
今回の機能は単なるカラーピッカーにとどまらない。属性タイプ名が「Color / Image」であることからも分かるとおり、メディアライブラリから画像を選択することも可能だ。チェック柄やヒョウ柄、グラデーションパターンなど、HEXコードでは表現しきれない複雑なデザインもスウォッチ化できる。
この画像スウォッチ機能は、ファッションECやインテリアECで特に効果を発揮する。テキストだけでは「ダマスク柄」「ストライプ」といった情報が伝わりにくいが、小さなサムネイル画像があれば購入者は直感的に商品の外観を把握できる。
設定手順と利用条件
カラースウォッチ機能はブロックテーマでのみ利用可能な実験的機能として提供される。有効化の手順は以下の3ステップだ。
特徴的なのは、この機能が完全にオプトイン方式である点だ。既存の属性をColor / Imageタイプに更新しない限り、ストアフロントにスウォッチは一切表示されない。既存のテキスト表示を維持したい商品がある場合も、属性タイプを変更しなければ従来通りの挙動を保てる。
属性タイプの内部的な識別子
属性のタイプを設定すると、各属性ターム（付与する値）の編集画面にカラーピッカーと画像選択の入力欄が追加される。内部的には、この属性タイプは「wc-visual」というスラッグで識別される。
スラッグの先頭に「wc-」というプレフィックスが付与されているのは、既存のプラグインが独自に登録している可能性のあるカスタム属性タイプとの名前衝突を防ぐためだ。すでに何らかのカラースウォッチ系プラグインを導入しているストアでも、コア機能とプラグイン機能が競合することなく共存できる設計になっている。
ブロックテーマが必須条件
現時点では、クラシックテーマではこの機能は動作しない。あくまでブロックテーマ（Site Editing対応テーマ）に限定された実験的機能だ。クラシックテーマ利用者向けには、引き続きサードパーティ製のカラースウォッチプラグインが代替手段となる。
正式リリースまでの間にクラシックテーマ対応が追加されるかは明言されていないが、WooCommerceのブロック化推進の流れを踏まえると、今後もブロックテーマを前提とした機能拡充が続くと見ておくのが妥当だろう。
共有インナーブロックによるブロック間の連携強化
カラースウォッチ機能と並行して、WooCommerceチームはブロック間のインナーブロック共有APIにも手を入れた。具体的には、「商品フィルター」ブロックと「カートに追加＋オプション バリエーションセレクター」ブロックが同じインナーブロックを再利用できるようになっている。
これまでは、商品フィルター用のChipsブロックとバリエーションセレクター用のUIが別々に実装されていた。今回の変更で、片方のブロックに加えられた改善がもう片方にも自動的に反映されるようになる。開発者視点では、メンテナンス対象のコードが減り、一貫性のあるUIを提供しやすくなるメリットがある。
また、後方互換性にも配慮されている。Variable Product（バリエーション商品）テンプレートパーツをカスタマイズしているストアでも、フロントエンド表示時やエディターで開いた際には、自動的に新しいインナーブロックが適用される仕組みだ。既存のカスタマイズが壊れる心配はない。
今後のロードマップとテスト参加方法
WooCommerce Developer Blogの記事によると、カラースウォッチ機能は6月8日予定のWooCommerce 10.9ベータ版からブロックテーマ上のフィーチャーフラグ（機能フラグ）として提供される。すでにGitHub上のナイトリービルドでもテスト可能だ。
正式版リリースに向けた注意点
現時点では実験的機能という位置付けであるため、本番環境への適用は避け、まずはステージングサイトでテストすることをWooCommerceチームは推奨している。テスト中に発見した不具合や改善要望は、GitHubのWooCommerceリポジトリのIssueトラッカーで報告できる。
実験的機能がいつ正式機能に格上げされるかは明言されていないが、WooCommerceのリリースサイクルを踏まえると、大きな問題が報告されなければ2〜3バージョン以内に正式対応となる可能性が高い。
プラグイン開発者への影響
「wc-visual」という標準化された属性タイプが追加されたことで、サードパーティ製プラグインやテーマ開発者にも恩恵がある。視覚的属性を識別するための統一的なパターンができたため、複数のプラグイン間での相互運用性や拡張性が高まる。
たとえば、商品エクスポートプラグインがスウォッチ情報をCSVに含めたり、カスタムテーマがスウォッチのスタイルを独自に調整したりする際に、「wc-visual」というスラッグを基準に処理を分岐できるようになる。
この記事のポイント
- WooCommerce 10.9で商品属性に「Color / Image」タイプが新設され、フロントエンドで視覚的なスウォッチ表示が可能になる
- 商品フィルターとバリエーションセレクターの両方で、ChipsブロックとListブロックに自動適用される
- HEXカラーだけでなくメディアライブラリの画像もスウォッチとして使用できる
- ブロックテーマ限定の実験的機能であり、設定画面のトグルで明示的に有効化するオプトイン方式
- 共有インナーブロックAPIの改善により、複数ブロック間で一貫性のあるUIとメンテナンス効率の向上が図られている
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験