WP.orgがProtect The Shire発表、プラグイン更新に24時間の猶予
2026年6月5日、WordPress.orgはセキュリティイニシアチブ「Protect The Shire」を正式に発表した。AIによるコード生成能力が急激に進化する中、78,000以上にのぼる公式プラグインとテーマをサプライチェーン攻撃から守るための大規模な取り組みだ。
この施策の中核は、すべてのプラグインとテーマのリリースに対して設けられる最大24時間の猶予期間である。開発者が新バージョンをプッシュしても、自動更新がユーザーサイトに配信されるまでにクールダウンが発生する仕組みに変わる。
Protect The Shire イニシアチブの全容
WordPress.org の共同創設者 Matt Mullenweg 氏は今回の発表で、2026年という年がソフトウェア開発において「緊張の年」になると指摘する。最新のセキュリティパッチを一秒でも早く適用する必要性と、悪意あるコードが更新に混入していないか慎重に見極める必要性が、かつてないほど対立しているためだ。
自動更新前の24時間クールダウン
従来のフローでは、開発者がプラグインやテーマの新バージョンをリポジトリにコミットすると、即座に世界の全サイトへ自動更新が配信されていた。これは利便性が高い一方で、ひとたび悪意のあるコードが混入すれば、被害が広範囲に瞬時に拡散するリスクを常にはらんでいた。
Protect The Shireの導入により、リリースから配信までの間に最大24時間の待機時間が挿入される。この時間を利用して、人間のレビューチームとAIがコードを精査する。
この変更により、悪意のあるコードを含むアップデートが即座に配信されるリスクが抑えられる。AIによる事前チェックと人間の確認が介在することで、サプライチェーンセキュリティが大幅に強化される仕組みだ。
AI「Gandalf」によるコード監視
24時間の猶予期間におけるレビュー作業を強力に支援するのが、新たに導入されるAIだ。Mullenweg氏はこれを「Gandalf」と名付けられたWapuuだと表現している。
人間のレビューチームは寝る必要があるが、AIにはそれがない。24時間体制でコミットの差分を分析し、不審なコードパターンや既知の脆弱性シグネチャを検出する。Mullenweg氏は、今回のAI技術の進歩がなければ実現しえなかったレビューの深さだと言及している。
なぜいまエコシステムの防御を固めるのか
昨年末から今年にかけて、AIのコーディング能力は飛躍的に向上した。Anthropicが2026年4月に公開したモデル「Mythos」は、その能力の高さと潜在的なリスクで開発者コミュニティに衝撃を与えている。また、Chromeブラウザの最新版が429件ものセキュリティ修正を含んでいたことも、各所のセキュリティ活動を加速させた。
拡大するサプライチェーン攻撃の脅威
ソフトウェアのサプライチェーンを標的とした攻撃は、もはや日常的だ。オープンソースエコシステムにおいても、マルウェアを仕込まれたパッケージが正規のアップデートとして配布される被害が後を絶たない。WordPressコミュニティ内でも、信頼されていたプラグインが悪意ある新しい所有者に売却され、バックドアを仕掛けられた「Essential Plugins」のような事件が発生している。
AIによる攻撃コードの生成能力が向上すれば、この種の脅威はさらに巧妙化し、頻度も増加する。WordPress.orgが今回、エコシステム全体の防衛に乗り出したのは必然だったといえる。
更新速度と安全性のジレンマ
WordPress 7.0のアップグレード率はリリース後わずか2週間で50%を超えた。これは数えきれないほどの開発者とホスティング事業者の協力による成果だ。素早いアップデートの適用は、脆弱性への露出時間を最小化するという点で極めて重要である。
しかし、Mullenweg氏は「2026年は、安全を確保するために可能な限り早く更新するのか、それとも安全を確保するために更新を保留するのか、その緊張が続く年になる」と述べている。急速なコード配布は、攻撃者にとっても好都合な環境になりうる。このジレンマを解消するのが、今回の24時間ルールというわけだ。
WordPressが目指す「透明性によるセキュリティ」
Mullenweg氏は発表の中で「自由とセキュリティはゼロサムではない」という考えを強調した。これは、セキュリティの名の下にパーミッションを厳格化しすぎて、ソフトウェアの自由な流通や改変を妨げることへのカウンターである。オープンソースは、曖昧さによるセキュリティではなく、透明性こそが強固なセキュリティをもたらすことを示してきた。
スケールするレビュープロセス
プラグインレビューチームは献身的に活動しているが、人間の処理能力には限界がある。Mullenweg氏は、現在の24時間という猶予が、AIモデルのさらなる進歩とともに「数分」にまで短縮される可能性に期待を示している。
ひとつのリリースを複数のAIエージェントが並列でレビューし、人間の承認プロセスと連携する。これにより、手動では不可能な精度と速度で、78,000以上のプロジェクトの安全性を担保しようという狙いだ。
4億インストールの重み
WordPress.orgのプラグインディレクトリには、累計で4億を超えるインストールが記録されている。69のプラグインは、100万件以上のサイトにインストールされている。その開発者の多くは個人であり、巨大なコミュニティを構成している。
WordPress.orgはこの多様なエコシステムを守るため、Star数などの表面的な評価だけでなく、実際のコードの安全性に焦点を当てた支援を強化する方針だ。そのための現実的な第一歩が、今回のProtect The Shireである。
この記事のポイント
- WordPress.orgがプラグインとテーマの自動更新に「最大24時間の猶予期間」を導入した
- AI Wapuu「Gandalf」を含む新たなレビューフローにより、サプライチェーン攻撃のリスクを低減する
- この施策は、AIによる高度なコード生成が一般化する時代におけるエコシステム防衛策である
- オープンソースの理念に沿い、透明性を保ったままセキュリティ水準を引き上げる試みだ
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WooCommerce 10.9で取引メールログ機能がコアに統合、送信失敗の可視化でトラブル解決が容易に
WooCommerceのメールトラブルシューティング用ドキュメントは、サポート対応の中で常に上位のアクセス数を記録してきた。全サポートやり取りの1%以上で、最終的にこのドキュメントを案内する流れになっているという。こうした状況を踏まえ、WooCommerce開発チームは問題の切り分けに不可欠なログ機能をコアプラグインに組み込む判断を下した。
WooCommerce 10.9では、取引メール（トランザクショナルメール）の送信ログ機能が標準搭載される。店舗運営者はどのメールが正常に送信され、どのメールが失敗したのかをログで一元的に確認できるようになる。失敗時には具体的なエラー理由も記録されるため、従来のように外部のログ取得プラグインを導入する手間が省ける。
取引メールのログ機能の仕組み
このデモ図で示すように、従来はエラーのたびに外部ツールやプラグインを頼っていたが、10.9以降はWooCommerce本体が自動的にメール送信のログを取得する。店舗運営者の負担が一段階減る形だ。
内部設計の要点
新たに導入されるEmailLoggerクラスは、以下の4つのフックに接続される。これにより、メール送信のあらゆる局面を捕捉できる仕組みになっている。
- woocommerce_email_sent：WooCommerceがメールを送信するたびに発火し、成功または失敗の真偽値と
WC_Emailインスタンスを受け取る。 - woocommerce_email_disabled：メール種別が設定で無効化されていて送信が行われなかった場合に発火する。
- woocommerce_email_skipped：受信者が存在しないなどの前提条件を満たさず、送信がスキップされた場合に発火する。短い理由識別子も渡される。
- wp_mail_failed：WordPress全体のメール送信失敗フック。ここから
WP_Errorメッセージを取得し、SMTP接続エラーなどの具体的な原因をログに含める。
いずれの結果も、wc_get_logger()を通じて新しいソース名transactional-emailsの下に書き込まれる。WooCommerce標準のロガーを経由するため、店舗側がすでに設定しているログハンドラ（ファイルまたはデータベース）とログレベルしきい値をそのまま利用できる。
- ログハンドラ：デフォルトは
wp-content/uploads/wc-logs/ディレクトリへのファイル出力だが、WooCommerce ＞ ステータス ＞ ログ画面でデータベース保存に切り替えている場合はそちらが使われる。新たなストレージ層は不要だ。 - ログレベル：送信成功は
INFO、失敗はWARNING、無効化やスキップによる未送信はNOTICEとして記録される。本番環境でエラーレベルのみ取得する設定にしておけば、失敗だけを素早く把握できる。 - 保持期間：他のWooCommerceログと同様に、WooCommerce ＞ ステータス ＞ ログ ＞ 設定から保持ポリシーを管理できる。
ログに記録される情報
各ログエントリは1行で完結し、大量のメールが飛び交う店舗でもストレージへの影響はほとんどない。文脈情報は次のような構造で出力される。
context = [
'source' => 'transactional-emails',
'email_type' => 'customer_processing_order',
'status' => 'sent' | 'failed' | 'disabled' | 'skipped',
'recipient' => 'jdoe' | 'guest' | 'jdoe, guest',
'reason' => 'no_recipient', // スキップ時のみ
'order' => 12345, // 注文ID、状況に応じて'product'や'user'が入る
]ログレベルが3段階に整理されているため、WARNINGなら即座に問題を疑い、NOTICEなら設定通りの挙動であることを確認し、INFOなら正常に送信されたと判断できる。フィルタリングやアラートの仕組みと組み合わせれば、運用の自動化にもつなげやすい。
注文画面での確認
ログとは別に、個々の注文に関連づいたメールの履歴が注文ノートにも表示されるようになった。WooCommerce ＞ 注文から任意の注文を開くと、その注文に対して送信が試みられた取引メールとその成否が一覧できる。
ここで注意したいのは、注文ノートに表示されるのは「実際に送信が試みられたメール」だけという点だ。設定で無効化されているメール種別や、受信者不在でスキップされたものは表示されない。注文ノートを無駄に長くせず、期待される挙動とその結果に焦点を絞る設計思想がうかがえる。
プライバシーと拡張性への配慮
上図のように、メールアドレスが直接ログに書き込まれることはない。プライバシー保護と拡張性の両面に配慮した設計が盛り込まれている。
プライバシー保護の仕組み
受信者のメールアドレスはログに一切出力されない。resolve_recipient()メソッドが各アドレスをWordPressのユーザー名に変換する。アカウントを持たない購入者（ゲスト）の場合は'guest'というラベルに置き換えられる。BCCなどで複数の受信者がいる場合は、カンマ区切りのラベル一覧が記録される。
PHPMailerが返すエラー文字列には、しばしば受信者アドレスが直接埋め込まれているが、これもredact_emails()という正規表現によるスクラブ処理で除去される。この処理はRemoteLogger::redact_user_data()と同等のロジックを採用しており、WooCommerce全体で一貫したプライバシー保護が維持される。
拡張ポイント
WooCommerce 10.9では、メールログの動作をカスタマイズするためのフィルターフックが2つ追加されている。
- woocommerce_email_log_enabled：ログ出力の有効・無効を切り替える。グローバルに無効化したり、
$email_idをチェックして特定のメール種別だけ対象外にできる。 - woocommerce_email_log_context：ログに書き込まれる文脈情報を書き換える。フィルターには書き込み前の配列が渡されるため、項目の追加・削除・変更が自由に行える。
ログ機能そのものは、WooCommerce ＞ ステータス ＞ ログ ＞ 設定タブから管理画面でオフにできる。特定の機能のみを無効にしたい場合は、以下のコードをテーマのfunctions.phpなどに追加する。
add_filter( 'woocommerce_email_log_enabled', '__return_false' );パフォーマンスへの影響を最小限にしたい場合や、すでに別のシステムでメールログを収集している場合は、このフィルターで柔軟に対応できる。
実装上の注意点と今後の展望
ログ機能にはひとつ、既知の制限が存在する。wp_mail_failedはWordPress全体のグローバルなフックであるため、WooCommerceのメール送信処理の直後に別のプラグインが送信に失敗した場合、そのエラーが誤ってWooCommerceのメールに紐づく可能性がある。
$last_mail_errorはWooCommerceのメール送信ごとにクリアされるため、古いエラーが後続の処理に引き継がれることはない。しかし、送信の直後という非常に狭い時間枠では、別のエラーが紛れ込む余地が理論上残る。この事象は実際にはまれであり、影響を受けるのは人間が読むための失敗理由テキストだけだ。email_typeやstatusといった主要な情報は常に正確である。
この取引メールログ機能は、Automatticが実施した「Radical Speed Month」の一環として開発された。まずは診断機能としての土台を固め、次のステップではWooCommerceが自らメールエラーを警告し、修正を支援する能動的なレイヤーの追加を検討しているという。トラブルシューティングにかかる時間をさらに短縮し、より多くの店舗運営者がメール問題に煩わされずに済む未来を描いている。
この記事のポイント
- WooCommerce 10.9から、取引メールのログ機能がコアプラグインに標準搭載される。外部ツール不要で送信の成否と失敗理由を把握できる。
- ログは
INFO（成功）、WARNING（失敗）、NOTICE（未送信）の3段階で出力され、管理画面の注文ノートにも関連メールの履歴が表示される。 - メールアドレスはログに直接記録されず、ユーザー名やゲストラベルに変換される。エラーメッセージ内のアドレス情報も自動で除去される。
- フィルターフックを使ってログ出力の無効化や文脈情報のカスタマイズが可能。パフォーマンスや既存システムとの兼ね合いで柔軟に調整できる。
- 開発チームは今後の展開として、エラーを自動検知して運営者に通知する仕組みの追加を視野に入れている。
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
SiteGroundがAIプラグインを強制配信、100万件の自動インストールが引き起こした評価1.1の大炎上
2026年5月末、ホスティングサービス大手のSiteGroundが、100万以上の顧客サイトに対して、AIプラグインを事前の同意なく自動インストールし、自動有効化するという事態が発生した。このプラグインはわずか数日でWordPress公式ディレクトリにおいて1.1という極めて低い評価を記録。100万インストールと最低評価という数字が、単なる機能の問題ではない、深い信頼の危機を物語っている。
一連の騒動は、企業が持つリーチの大きさと、その使い方を誤ったときに発生する信用コストの非対称性を浮き彫りにした。ここでは何が起きたのか、なぜここまで批判が集中したのか、そしてこの出来事がWordPressエコシステム全体に投げかける課題を整理する。
何が起きたのか。同意なき「AI Agent」の一斉配信
問題となったのは「AI Agent by SiteGround」というプラグインだ。機能面だけを見れば、チャットインターフェースを通じてWordPressやWooCommerceを管理し、複数サイトの一括更新なども行える、実用性の高いツールである。だが、その配信方法が全ての火種となった。
ユーザーが自ら検索してインストールしたわけではない。SiteGroundのホスティングを利用している顧客のWordPressサイトに、ある日突然このプラグインが現れ、有効化された状態になっていたのだ。運営者が気づかぬうちに、外部のAIサービスと連携する準備が整えられたソフトウェアが設置されていたことになる。
この事実が発覚するや否や、WordPressのプラグインレビュー欄は非難の声であふれた。「自動インストールは大きな過ちだ」「なぜ同意なしにインストールしたのか」「ひどい、そして deceptive だ」「もうSGのファンではない」。わずか数日のうちに35件の星1レビューが投稿され、星5はわずか1件という異様な状況が生まれた。
Redditでも同様の議論が巻き起こった。あるユーザーが「WARNING – SiteGround just put some AI plugin into every single site」と題したスレッドを立ち上げ、社内で誰がこのプロジェクトを承認したのかと疑問を呈したのだ。
「安全でオプションです」という説明が響かなかった理由
批判を受けてSiteGroundは迅速に対応し、Redditやサポートフォーラムで直接説明を行った。彼らの弁明はこうだ。このプラグインはWordPress 7.0の新しいAIフレームワークへの準備として追加されたものであり、顧客がコネクタやAPIキーを手動で設定する手間を省くための措置だった。プラグインはバックグラウンドで何かをするわけではなく、ユーザーが能動的に使わない限りサイトに影響を与えず、いつでも無効化または削除できる。事前にメールでも通知したという。
技術的には、この説明に誤りはないかもしれない。しかし、この釈明は根本的な怒りのポイントを外していた。WP Mayorの記事によれば、ユーザーが懸念していたのは「プラグインが密かにサイトを破壊するかもしれない」という技術的リスクよりも、もっと大きな原則論だった。自分が選んでいないソフトウェアを、自ら責任を負うインフラに勝手に置かれたこと、その行為自体への反発なのだ。
Redditの投稿者が指摘したように、たとえ自分がそのAI機能を使わなくとも、顧客が管理画面でそれを見つけて興味本位で操作を始めてしまうリスクがある。機能の説明で「信頼」に対する異議に答えることはできない。「頼んでないのに何故入れたのか」という不満に対し、「安全だしオプションです」と返しても、相手の懸念を全く理解していないことを表明するに等しい。
→ これは機能の問題ではなく、関係性の問題。
→ 「頼んでない」という根本的懸念には何も答えていない。
格付けが示すもう一つの不公正
この騒動には、もう一つ見逃せない副次的影響がある。WordPress公式プラグインディレクトリで「AI agent」と検索すると、このAI Agent by SiteGroundが上位3位に表示される。星1.1という散々な評価でありながら、何百もの競合プラグインを押しのけて、だ。
WordPress.orgのディレクトリ検索は、アクティブインストール数をランキングの重要な要素として扱っている。通常、これはユーザーがプラグインを見つけ、気に入り、自らの意思でインストールした結果を反映するものだから理にかなっている。しかし、ホスティング事業者が100万件ものインストールを一晩で「製造」できてしまうなら、その前提は崩壊する。
WP Mayorの記事では、運営者自身が開発するプラグインが10万インストールに到達するまでに何年もかかった経験が引き合いに出されている。地道に一人ひとりのユーザーを獲得して可視性を高めてきた独立系開発者にとって、この出来事はフェアとは言い難い。評価1.1のプラグインが、そうした開発者の努力を数日で飛び越え、ランキング上位に躍り出た。これはSiteGroundだけの問題ではなく、WordPress.orgディレクトリのランキングシステムが抱える構造的な脆弱性も浮き彫りにした。
他社が学ぶべき「絶対に守るべき三つのルール」
今回の出来事は、ホスティング事業者やプラグイン開発者が顧客との関係で決して踏み越えてはならない一線を教えている。
第一に、すべてはオプトインであるべきだ
顧客のサイトに影響を与える変更のデフォルトは、常に「同意を得る（オプトイン）」でなければならない。「拒否しなければ同意とみなす（オプトアウト）」方式は、あなたがすでに顧客の許可を持っているという前提に立っており、その差は顧客に即座に感じ取られる。
第二に、「技術的に通知した」は同意ではない
「何日前にメールを送ったはずだ」という類の抗弁は、同意の証明にはならない。ユーザーがその一通のメールを見ていることを前提とした通知戦略は、同意ではなく「記録」に過ぎない。両者は全くの別物であり、顧客はその違いをよく知っている。
第三に、リーチとは責任であり、ただの利便性ではない
100万サイトに一斉配信できる能力は、巨大な信託の上に成り立っている。それを単なる「配信ショートカット」として扱い始めた瞬間、そのリーチを可能にしていた信頼そのものを食いつぶし始めている。
WP Mayorの記事は、ロードマップ会議で「いかに摩擦なく導入させるか」という議論がなされると、ときにこの原理が忘れられてしまうと指摘する。摩擦のない導入と、同意の尊重はしばしば対立する。そして対立したときは、必ず同意が勝たねばならない。同意こそが、レピュテーションの素材だからだ。
SiteGroundは信頼を回復できるか
フェアな視点で言えば、この状況はまだ立て直しが可能だ。SiteGroundが自動インストールを停止し、真にオプトイン方式へと切り替え、さらに「ロールアウトは間違いだった」と明言すれば、関係は修復に向かう。しかし、「ご意見は製品チームに転送されました」といった、問題を管理するための企業言語でやり過ごそうとすれば、事態は悪化するだけだろう。
顧客は、自分たちが間違っていたと認める企業を、正しかったと説明し続ける企業よりもはるかに早く許すものだ。人々がこれほど怒っているのは、まさにSiteGroundに「もっと良い対応」を期待していたからに他ならない。その期待自体は、まだ彼らに残された修復可能な資産なのである。100万という数字も、もしそのうちの一つでも「選択」の結果だったなら、全く異なる意味を持っていたはずだ。
この記事のポイント
- SiteGroundが100万件以上の顧客サイトにAIプラグインを事前同意なく自動インストールし、評価1.1の大炎上を招いた
- ユーザーの怒りは機能の安全性ではなく「同意なく自サイトにソフトウェアを置かれた」という信頼の毀損に集中した
- この強制配信により、WordPress公式ディレクトリのランキングシステムが持つ構造的な不公正も露呈した
- 顧客のデジタル資産に触れるあらゆる行為はオプトインが原則であり、「通知」は「同意」の代わりにはならない
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WPプラグインのサプライチェーン攻撃、AIで見えてきた隠れた脅威
WordPressプラグインのサプライチェーン攻撃が急速に広がっている。悪意ある攻撃者がプラグイン企業を買収し、あるいは正規のプラグインを乗っ取り、無防備なサイトへマルウェアを配信する手口だ。従来の「サイトを直接ハッキングする」という攻撃とはまったく異なるレイヤーで、静かに進行する。
Anchor Hostingの創業者であるAustin Ginder氏は、WP Tavernのポッドキャストでこの問題の全容を語った。同氏は2010年からWordPressに関わり、現在は数千のWordPressサイトを管理している。2026年に入り、長年安定していた顧客サイトでマルウェアが頻出するようになったことを受け、AIを駆使した徹底調査を開始した。
調査の結果、明らかになったのは単なる脆弱性の話ではない。正規のプラグイン更新チャンネルそのものが攻撃者に乗っ取られているという、構造的な脅威だ。本記事ではその仕組み、具体的な被害事例、そしてAIによって変わりつつあるセキュリティ対策の最前線を解説する。
サプライチェーン攻撃の実態（2つの侵入経路）
この図はサプライチェーン攻撃の2大経路を示している。いずれも、ユーザーが自動更新を有効にしている場合、まったく気づかずに感染する点が共通している。WP Tavernのポッドキャストで語られた内容を整理すると、攻撃者はこうした手法でプラグインを「武器化」し、正規更新を装いながらマルウェアを拡散している。
プラグイン買収による攻撃
WP TavernのポッドキャストでAustin Ginder氏が明かした最も衝撃的な手口は、攻撃者が実際にプラグイン企業を買収して武器化するというものだ。同氏はEssential Pluginsと呼ばれる30以上のプラグインを抱えるパッケージが売却され、その後にコード改変が行われた事例を報告した。
攻撃者は6桁の金額を投じてでも正規の配信チャンネルを手に入れる価値があると判断している。プラグインを買収すれば、更新ボタンを押すだけで何万ものサイトにコードを配信できるからだ。この手法の巧妙な点は、プラグインの本来の機能はそのまま維持されることである。ユーザーは見た目の変化に気づかない。
プラグインハイジャックによる攻撃
もうひとつの経路は、プラグインの更新先をすり替えるハイジャック型だ。攻撃者はまず正規のプラグインにサードパーティのアップデータを密かに組み込む。これはwordpress.orgのガイドライン違反だが、コードを巧妙に隠すことで審査をすり抜ける。
一度このコードが仕込まれると、以降の更新はwordpress.orgではなく攻撃者の管理するサーバーから配信される。wordpress.org側からは一切の可視性が失われ、ユーザーのサイトは知らぬ間に乗っ取られた状態になる。この手口は特に長期間気づかれにくく、過去にQuick Redirectionプラグインなどで実際に確認されている。
偶然のマルウェア除去から始まった調査
Austin Ginder氏がこの問題に気づいたのは、2026年2月に顧客サイトのマルウェア除去作業を行っていたときのことだ。同氏はWP Tavernのポッドキャストで「長年安全だったサイトが突然マルウェアに感染するようになった」と振り返っている。
従来のマルウェア除去は不安がつきまとう作業だった。ファイルをひとつずつ確認し、疑わしいコードを取り除いても、本当にすべてを取り切れたか確信が持てなかった。しかし同氏は、AIを使うことで状況が一変したと語る。AIがすべてのファイルを精査し、感染経路の特定から根本原因の解明までを一貫して行えるようになったのだ。
ある顧客の調査で行き着いた先はwordpress.orgのリポジトリだった。同氏はAIを使い、問題のプラグインの変更履歴を解析した。すると、正規の更新チャンネルが改ざんされている痕跡が見つかった。ここから本格的な調査が始まった。
以降、同氏は4件の詳細な調査レポートを公開した。いずれも異なるプラグイン、異なる攻撃者によるものだった。最初の1件が単発の事件ではなかったことが、ここで明らかになった。
AIが切り拓く新たな脅威検出
ファイル単位の徹底監査
Austin Ginder氏はAIの活用について、WP Tavernのポッドキャストで具体的な方法を説明している。同氏は月額200ドルのClaude Codeサブスクリプションを使い、顧客サイトの全ファイルを1行ずつ監査している。これは人間には不可能な作業量だが、AIなら数十万行のコードを短時間で精査できる。
「1バイトの変更も見逃さない」と同氏が語るこの手法は、静的解析の域を超えている。AIはコードの文脈を理解し、単なるシグネチャマッチングでは検出できない巧妙なバックドアも特定する。あるケースでは、一見無害に見えるJavaScriptの埋め込みコードから、クレジットカードスキマーの存在を突き止めた。
バリアント検出ツールの実装
さらに同氏は、プラグインのバージョン差異を検出する独自ツールをAIで構築した。これは、インストールされているプラグインのコードがwordpress.org上の正規バージョンと異なっていないかを自動照合する仕組みだ。
このツールのテスト中、Quick Redirectionプラグインのバリアント版が12サイトで稼働していることを発見した。本来の作者が意図せず（あるいは意図的に）、多くのユーザーをハイジャック版へ誘導していた事例だ。さらに、上位2000のWordPressサイトをスキャンした際には、Scroll To Topプラグインに不正コードが仕込まれているのを確認した。このプラグインは2万サイトにインストールされていたが、攻撃者はまだ「引き金を引いておらず」、被害が表面化する前に発見できたという。
AIによる監査は、コードの意味を解釈しながら異常を浮かび上がらせる。従来のシグネチャベースでは見逃していた「まだ発動していない攻撃コード」も、文脈の不自然さとして検出できる点が最大の強みだ。
過去13年間活動を続ける攻撃者の発見
Austin Ginder氏はWP Tavernのポッドキャストで、13年にわたって活動を続けている攻撃者の存在にも言及した。この攻撃者は、何度アカウントやプラグインを閉鎖されても、新しいアカウントを作り直し、別のプラグインで同じ手口を繰り返してきた。
「彼らを止めるには、単にコードを修正するだけでは足りない」と同氏は語る。攻撃のインフラそのものを無効化し、再発を防ぐ仕組みが必要だ。AIによる大規模監査が、こうした長期化する脅威への対抗手段として期待されている。
WP Beaconが目指すコミュニティの連携
Austin Ginder氏は、調査結果を共有するプラットフォームとして「WP Beacon（wpbeacon.io）」を立ち上げた。これは従来の脆弱性データベースとは異なり、サプライチェーン攻撃に特化した情報を集約する場である。既存の脆弱性DBが「コードの欠陥」に注目するのに対し、WP Beaconは「悪意ある行為者」そのものの行動パターンを記録する。
同氏はWP Tavernのポッドキャストで、WP Beaconの真の目的は「セキュリティ研究者やホスティング企業が行動を起こすための情報基盤」になることだと述べた。実際、同氏が発見した攻撃者のサーバーは、協力者の手によってドメイン停止措置が取られたという。調査と対策を分業し、攻撃インフラを迅速に無力化する流れを作ることが狙いだ。
今後の対策と個人でできること
Austin Ginder氏はWP Tavernのポッドキャストの中で、個人でもすぐに実践できる対策として、自サイトのバックアップをAIで監査する方法を提案した。Claude Codeなどのツールにサイトの全ファイルを読み込ませ、「すべての行をチェックし、脆弱性やマルウェアの痕跡を報告してほしい」と指示するだけでも、高い精度の分析結果が得られるという。
「我々はデータの上に座っているが、それを使いこなせていない」と同氏は指摘する。大手ホスティング企業が保有する数百万サイト分のデータをAIで横断分析できれば、攻撃パターンの早期発見と封じ込めが可能になる。WP Beaconがそうした連携の起点となることが期待されている。
長期的には、プラグインの全コード監査を自動化し、変更が発生するたびにAIがチェックを行う仕組みが必要だ。wordpress.orgのリポジトリには6万以上のプラグインが存在するが、CSSや画像ファイルを除外し、PHPやJavaScriptの変更だけを対象にすれば、現実的な範囲でカバレッジを確保できる。
この記事のポイント
- WordPressプラグインのサプライチェーン攻撃は、買収とハイジャックの2経路で進行する
- ユーザーは自動更新を通じて、まったく気づかずにマルウェアを受け取る可能性がある
- AIを使った全ファイル監査で、従来の方法では見逃していた潜伏型の脅威も検出できる
- WP Beaconはサプライチェーン攻撃に特化した情報基盤として、コミュニティ連携を促進する
- 個人でもClaude CodeなどのAIツールで自サイトの監査を実施できる
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WordPress 7.0リリースとAI管理ツール最新動向 2026年5月
WordPressエコシステムに大きな動きがあった。2026年5月末、待望のWordPress 7.0「Armstrong」が正式リリースされたのだ。管理画面の刷新やAI機能の統合が実装され、次世代サイト運営の基盤が整った。
これと同時に、AIを駆使した管理ツールも相次いで発表されている。サイト翻訳、スパム対策、アナリティクス対話、自動化まで、もはや手動運用の時代は終わりつつある。WPBeginnerの2026年5月Spotlight記事は、これらの新製品群とコミュニティ動向を詳細に報じた。
WordPress 7.0 Armstrongのリリース
WordPressコアチームは2026年5月、バージョン7.0「Armstrong」を公開した。このリリースは、管理画面のデザイン刷新とAI機能のネイティブ統合が最大のトピックだ。リアルタイム共同編集は今回見送られたが、AIコネクタの導入だけでも近年で最も大きなアップデートの一つと評価されている。
カラースキームは固定で、視認性が悪い部分も
新しいカラースキームで視認性が向上
AIコネクタ 搭載で全プラグインからAI APIキーを一元管理
このデモでは、管理画面の変化を概念図として示している。実際のバージョン7.0では、ページ読み込み速度が大幅に改善し、操作フィードバックが即時になった。
AIコネクタとサイトエディタの強化
AIコネクタは、サイト全体でAI APIキーを一箇所に登録できる仕組みだ。これにより、各プラグインが個別にAPIキーを要求する必要がなくなり、一貫したAI機能の提供が可能になった。ユーザーはOpenAIや他のAIプロバイダーのキーを設定画面で一度入力するだけで、対応プラグイン全体がそのキーを利用できる。
ブロックエディタにも大幅な改善が加わった。具体的には、個別ブロックへのカスタムCSS追加、デバイスごとのブロック表示・非表示制御が可能になった。これらの機能は、モバイル、タブレット、デスクトップそれぞれに最適化した表示を簡単に設計できることを意味する。正式リリースに先立ち公開されたベータ版の情報を追っていたユーザーからは、特にこの柔軟性に対して高い期待が寄せられていた。
AI翻訳ツールUniversallyの登場
多言語サイトを手軽に実現したいが、従来の翻訳プラグインはデータベース肥大化やパフォーマンス低下を招きやすい。SaaS型の翻訳サービスは高価で、個人事業主や中小企業には手が出せなかった。このような課題に対し、AI搭載のウェブサイト翻訳プラットフォーム「Universally」が登場した。
✕ パフォーマンス低下や複雑な設定が必要
✓ hreflangタグやXMLサイトマップなど多言語SEO最適化
無料プラン あり（1サイト、1言語、月2,000語）
Universallyはデータベースに翻訳データを保存しないクラウド型アーキテクチャを採用し、サイトパフォーマンスを維持したまま多言語化できる。AI用語集機能により、ブランド名や専門用語の誤訳も防ぐ。プライベートベータ段階で既に2億5,000万語以上の翻訳実績があり、WordPress以外にShopifyやWix、Replitなどにも対応する。有料プランは年払いで月額7.5ドルから利用可能だ。WPBeginnerの創設者による詳細な紹介記事も掲載されている。
AIスパム対策ActiveLayerとCAPTCHAフリーの保護
WordPressサイトのコメントやフォームへのスパム攻撃は、今なお運営者の大きな悩みだ。従来のCAPTCHAは人間のユーザーにもストレスを与え、フォーム離脱の原因にもなり得る。WPBeginner創設者のSyed Balkhi氏が公開した新サービス「ActiveLayer」は、AIを使いミリ秒単位でサーバーサイド分析を行い、CAPTCHAなしでスパムをブロックする。
フォーム離脱率が上昇し、コンバージョンに悪影響
信頼度スコア でスパム判定を可視化
WPForms、Gravity Forms、Contact Form 7など主要フォームプラグイン対応
ActiveLayerのWordPress.org版プラグインは無料で、月1,000回の無料スパムチェックが含まれる。有料プランは月額4ドルからで、無制限のサイトとフルAPIアクセスを提供する。WPBeginnerやその他のビジネスサイトで発生した大規模スパム攻撃への対処経験が、このサービスの開発背景にある。
StellarWPブランド終了とプラグイン再編
Liquid Webは、GiveWPやLearnDash、SolidWP、The Events Calendarなどを含む「StellarWP」ブランドの終了を正式発表した。これらは新設された「Liquid Web Software」に統合され、Kadence、LearnDash、The Events Calendar、Giveの4製品を中核に据える方針だ。
WPBeginnerの記事によれば、この統合により、長期ユーザーからは将来のロードマップや価格変更、製品の独立性について懸念の声が上がっている。特に複数のStellarWP製品に依存しているサイト運営者は、自動更新設定やバックアップ戦略を今のうちに見直しておくべきだ。
Uncanny AgentやCharlie ChatなどAI管理ツールの台頭
WordPress管理の手動作業を減らすAIエージェントが相次いで登場している。Uncanny Automatorチームが開発した「Uncanny Agent」は、ダッシュボード内に統合されたAIアシスタントだ。自然言語で問い合わせると、WooCommerceの売上データやユーザー活動のレポート作成、フォーム送信時のSlack通知自動化などを対話形式で設定できる。
一方、MonsterInsightsが公開した「Charlie Chat」は、Google Analyticsのデータを平易な言葉で問い合わせられるAIアシスタントだ。「主要なトラフィックソースは？」「どのコンテンツを更新すべきか？」といった質問に、実際のGA4データを基に即答する。無料のLite版でも利用可能で、WooCommerceストア向けには売上傾向やカゴ落ち分析も行える。
これらに加え、WPFormsはKlaviyoとのネイティブ連携アドオンを公開し、メールマーケティングのROI向上を狙う。SeedProdはWordPress Abilities APIに対応し、AIコマンドでランディングページの更新やメンテナンスモード切替を可能にした。無料のAIチャットボットHelpJetは、既存のサイトコンテンツを数分で学習し、24時間カスタマーサポートを提供する。WPBeginnerのSpotlight記事は「AI管理ツールの波がWordPressエコシステムを一変させつつある」と総括している。
この記事のポイント
- WordPress 7.0 Armstrongがリリースされ、管理画面刷新とAIコネクタが導入された
- AI翻訳ツールUniversallyは、クラウド型で110言語以上に対応し、パフォーマンス低下を回避する
- AIスパム対策ActiveLayerは、CAPTCHA不要で主要フォームプラグインと統合できる
- StellarWPブランド終了に伴い、依存プラグインの長期運用戦略を見直す必要がある
- Uncanny AgentやCharlie Chatなど、AIによる対話型管理ツールが続々と登場している
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WordPressに登場したエージェンティックAI Angie。ウェブ制作を変える自律型アシスタント
WordPressの開発現場では、コード補完やコンテンツ生成に生成AIを使うのが当たり前になりつつある。しかし2026年、状況はさらに大きく変わる。エージェンティックAIと呼ばれる新たな技術がWordPress内部に直接統合され、サイトのテーマやプラグイン、データベースを理解した上で、コードの作成から実行、テストまでを自律的にこなすようになるのだ。
本記事では、Elementorが提供する「Angie」を中心に、エージェンティックAIがウェブ制作にもたらすインパクトと、その実践的な使い方を掘り下げる。従来の生成AIとの決定的な違い、安全を担保するワークフロー、そしてカスタムウィジェット構築やサイト管理までを一手に引き受ける仕組みを詳しく見ていこう。
エージェンティックAIがWordPressにもたらす本質的な変化
これまでの生成AIは、あくまで「会話する頭脳」だった。コードの断片を提案したり、記事の草案を書いたりはできても、実際にそのコードをサイトに反映させるには、人間がコピー＆ペーストし、テストし、不具合があれば修正する必要があった。エージェンティックAIは違う。サイトの内部状態を能動的に読み取り、目的達成のために自ら計画を立て、ファイルやデータベースに直接アクセスして実行する。まるで腕利きのジュニア開発者のように振る舞うのだ。
従来の生成AIは外部ツールとしてブラウザの別タブで使うのが一般的だった。一方、エージェンティックAIはWordPressの管理画面に組み込まれ、許可された範囲でファイルやデータベースにアクセスする。この「コンテキストの有無」が両者の最大の差だ。WordPressサイトは一つひとつ異なるプラグイン構成やカスタムテーマ、PHPバージョンを持つ。エージェンティックAIはこれらをすべて把握した上で、衝突を避けたコードを生成する。
ElementorのAngie──WordPressネイティブの自律型エージェント
エージェンティックAIの具体的な実装として注目されているのが、Elementorが提供する「Angie」だ。以前のElementor AIがコンテンツ生成や画像編集に主眼を置いていたのに対し、Angieは開発者のためのアクション志向のアシスタントとして設計されている。
Angieは外部APIキーの設定やNodeパッケージのインストールを必要としない。WordPressの管理画面にネイティブ統合され、現在有効なテーマやプラグイン、カスタム投稿タイプ、WooCommerceの商品データ、ACFのフィールド構造などを自動的に認識する。Elementor BlogのItamar Haim氏は「エージェンティックAIはウェブサイト管理の根本的な転換点だ。コードを外部のチャット画面からコピーする代わりに、AIがデータベースやコードファイルの内部でタスクを調整し、開発者は実行の全権を握ったままでいられる」と述べている。
プラグインやテーマを理解したコード生成
Angieに「会員登録フォームを作ってほしい」と指示すれば、単なるHTMLフォームを出力するだけでは終わらない。アクティブなフォームプラグイン（WS Formなど）に接続し、テーマのグローバルカラーやフォントを適用したスタイルで、完全に機能するフォームを構築する。既存のレイアウトを壊すこともない。
また、WooCommerceが有効なら商品ループのカスタマイズ、LearnDashが有効なら学習ポータルの構築、ACFが有効なら構造化された動的コンテンツの表示といった具合に、サイトの「現実」に即したカスタマイズが可能だ。これにより、サードパーティ製プラグインを追加でインストールする必要が減り、サイトの軽量化にもつながる。
安全に機能を実装する5ステップのワークフロー
エージェンティックAIは「ブラックボックス」ではない。人間の承認を組み込んだ明確なワークフローで動作する。Angieは以下の5ステップでタスクを処理する。
特に重要なのがSTEP 2の計画フェーズだ。大規模な変更の場合、Angieは「Brief（Plan Mode）」と呼ばれる詳細な技術計画を提示し、開発者の承認を仰ぐ。データベースのテーブルを変更する際は、対象となる行やフィールドが明示され、問題があればその場で計画を修正できる。この「Human-in-the-loop」設計により、自動化の速度と手動の安全性を両立している。
サンドボックスが本番サイトを守る仕組み
AIが生成したコードをいきなり本番環境にデプロイするのは危険だ。半角セミコロン一つで致命的エラーが発生しうる。Angieはすべてのコードを隔離されたサンドボックスで実行する。無限ループを引き起こしても、クラッシュするのはサンドボックスだけであり、クライアントの公開サイトには影響が及ばない。
開発者はサンドボックス上で生成されたアセットのビジュアルプレビューと機能テストを行い、PHPシンタックスエラーやサーバーリソースの消費も監視される。問題がなければ「承認」をクリックするだけで、本番のWordPress構造に安全にマージされる。このプロセスによって、複雑な機能追加でも安心して試すことができる。
カスタムコード生成とサイト管理の自動化
Angieの真価は、コードの記述とサイト運用の自動化にある。開発者が手作業で行ってきたルーティン作業を、チャットでの会話によって置き換える。
会話するだけでElementorウィジェットを新規作成
Angie Codeは、自然言語の指示からカスタムウィジェットを構築する。たとえば「投資シミュレーターを表示するウィジェットがほしい」と伝えれば、独自のフィールドやスタイルコントロール、動的なフロントエンドの挙動を備えたウィジェットが自動生成される。生成されたPHPクラスファイルはクリーンで、WordPressコーディング規約に準拠しており、Elementorパネルにカスタムコントロールが露出するため、後からクライアントがビジュアル編集することも可能だ。
さらに、Angieは軽量なJavaScriptルーチンを作成し、スクロール演出や独自のナビゲーション、商品マッチングクイズといったインタラクティブなUIを追加できる。これらのスクリプトはCore Web Vitalsを意識して最適化されるため、表示速度を損なわない。
一括データ処理とPHPエラーのデバッグ
サイト管理の面では、Super Admin Modeが強力だ。これはオプトインで有効化する機能で、Angieにファイルシステムとデータベースへの読み書き権限を与える。これにより、商品価格の一括更新やユーザー権限の変更、孤児化したポストメタのクリーンアップといった作業を、チャットでの指示だけで実行できる。処理はタイムアウトを避けるため、小さなバッチに分割して行われる。
PHPエラーが発生した場合も、Angieはスタックトレースを解析し、問題のファイルと行番号を特定する。誤った設定やプラグイン競合を修正するコードを提案し、もし実行中に新たな衝突が生じれば即座にロールバックする。トラブルシューティングにかかっていた数時間が、数分の対話に短縮される。
ウェブ制作の未来──エージェンティックAIが変える開発者の役割
エージェンティックAIの登場は、開発者の仕事を奪うものではない。むしろ、単純作業から開発者を解放し、より高度な設計や戦略に集中できる環境を提供する。Elementor Blogの記事でも、Angieは「開発者の代わりではなく、反復作業やバルク処理を肩代わりする高度なアシスタント」と位置づけられている。
実際の開発フローでは、開発者が建築家として全体像を描き、Angieが大工として実装を進めるイメージだ。コードの品質は開発者が最終確認し、必要に応じてチャットで修正を重ねる。このコラボレーションモデルにより、個人事業主や小規模エージェンシーでも、従来は大規模チームでしか実現できなかったカスタマイズやサイト運用が手の届くものになる。
注意すべきは、Super Admin Modeのような強力な機能を使う際のバックアップ習慣だ。Angieは安全策を講じているが、大規模なデータベース操作の前には必ずサイト全体のバックアップを取ることが推奨される。また、AIが生成するコードは常に最新のWordPressコーディング規約やPHPバージョンに従うが、開発者自身がコードを読み、理解する姿勢も引き続き重要である。
エージェンティックAIは、ウェブ制作における「手動作業の時代」から「対話による構築の時代」への転換を象徴している。今後、Angieのようなツールが普及すれば、WordPressサイトの開発速度は飛躍的に向上し、より少ないリソースで高度な機能を実装できるようになるだろう。
この記事のポイント
- エージェンティックAIはサイトの内部状態を理解し、コード生成から実行までを自律的に行う。
- ElementorのAngieはWordPressにネイティブ統合され、テーマやプラグインを認識した上でカスタム開発が可能。
- プロンプト→計画→接続→実行→反復の5ステップで、人間の承認を挟みながら安全に動作する。
- サンドボックス環境でテストされるため、本番サイトに影響を与えずに複雑な機能追加が試せる。
- Super Admin Modeを使えば、一括データ処理やPHPエラーのデバッグをチャットで完結できる。
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WooCommerceがAI商品提案プラグインβ版公開、カタログ改善を自動化
WooCommerceが2026年5月25日、商品カタログの品質改善を支援する新プラグイン「AI Product Advisor」のパブリックベータ版を公開した。このツールはサイト内の全商品を分析し、改善の余地が大きい商品を特定した上で、タイトルや説明文の修正案を提示する。EC担当者が抱える「どこから手をつければいいかわからない」という課題に、AIが直接答えを出す形だ。
商品カタログのメンテナンスは後回しにされがちな作業の一つである。タイトル、説明文、カテゴリ、タグ、バリエーション情報と、改善ポイントは無数に存在する。人的リソースが限られる中小規模のECサイトでは、優先順位をつけること自体が難しかった。AI Product Advisorはこの問題に対して、データに基づく判断軸を提供する。
本記事では、AI Product Advisorの主要機能と導入方法を解説する。さらに、このツールがEC運営にもたらす実務的な変化と、AIエージェントの台頭がECサイト運用に与える構造的な影響について考察する。WooCommerceユーザーはもとより、EC業界全体のトレンドを掴みたい担当者にも有用な情報だ。
AI Product Advisorの概要
AI Product Advisorは、WooCommerce管理画面に専用のメニューを追加するプラグインである。アクティベート後の初回起動時にオンボーディングプロセスが走り、既存ストアのコンテンツを分析する。このとき単に商品データを読み込むだけでなく、ストア固有のブランドトーンを学習する点が特徴だ。これにより、AIが生成する提案文が「無機質なAIコピー」ではなく、ストアの世界観に沿った自然な文体になる。
分析完了後、プラグインは商品タイトル、詳細説明、短い説明文、カテゴリ、タグ、バリエーション詳細といったフィールド単位で改善提案を生成する。提案は一覧画面にキューとして蓄積され、EC担当者は優先度の高いものから順に確認できる。各提案はサイドバイサイドの差分表示で提示され、元のテキストとAI提案文を比較しながら、ワンクリックで適用するか編集するかを選べる。
3つの主要ビュー
本プラグインは、EC担当者の業務フローに合わせた3つの画面で構成されている。
保留中の提案数、承認率、週間利用状況をダッシュボード表示。変更適用済み商品には「受注増減インジケーター」が付き、改善後の効果を数値で追跡できる。
優先度順にソートされた改善提案の一覧。商品をクリックするとインライン編集可能な差分画面が開き、その場でテキストを調整できる。
承認したすべての変更を時系列で記録する監査ログ。各変更は元に戻すことができ、誤った適用を即座にリバート可能。
3つのビューは、EC担当者の「状況把握→改善実行→事後検証」という一連の業務サイクルに対応している。特に履歴画面の存在は重要だ。AI提案を機械的に適用するのではなく、人間が判断し、結果を検証し、必要に応じて差し戻すという運用プロセスを前提に設計されている。
ブランドトーン学習の仕組み
AI Product Advisorが他のAIライティングツールと一線を画すのは、ストア固有のブランドトーンを学習する機能である。オンボーディング時にプラグインは既存の商品説明文やストア情報を分析し、「です・ます調」「だ・である調」の文体選択にとどまらず、語彙の傾向、感情表現の強さ、専門性のレベルまでプロファイル化する。
Developer WooCommerce Blogの記事によれば、このトーンプロファイルは提案生成時に参照され、AIが出力するテキストをストアの世界観に自動調整する仕組みだ。たとえばカジュアルなファッションブランドであれば親しみやすい口調で、ビジネス向けのBtoB商材なら専門的でフォーマルな表現で提案が生成される。AIコピーにありがちな「無機質さ」や「浮いた感じ」を抑える狙いがある。
この機能がもたらす実務上の恩恵は大きい。従来のAIライティングツールは「それっぽい文章」を出力できても、ストアの声と一致させるには結局人間が手直しする必要があった。トーンプロファイルによる自動調整は、この手直し工程を大幅に削減する可能性を秘めている。もっとも、ベータ版であるため、現時点では学習精度にばらつきが出ることも想定しておくべきだろう。
導入方法とベータ版の注意点
インストール手順
- GitHubのリリースページからプラグインZIPファイルをダウンロードする
- WordPress管理画面で「プラグイン」→「新規追加」→「プラグインをアップロード」を開く
- ダウンロードしたZIPファイルを選択し、インストール後に有効化する
- 管理メニューに追加された「Product Advisor」を開き、オンボーディングを完了させる
オンボーディングではストアの接続とブランドトーンの設定を行う。所要時間はストアの商品点数によって変動するが、Developer WooCommerce Blogの記事では明示的な所要時間の言及はない。小規模ストアであれば数分、数千SKUを抱える大規模ストアでは相応の処理時間を見込む必要があるだろう。
ベータ版利用時の注意点
AI Product Advisorは「実験的なプラグイン」という位置づけである。WooCommerce開発チームは「実際の利用から学ぶために早期公開した」と明言しており、本番環境への導入はステージング環境での十分なテスト後が推奨される。フィードバックはGitHub IssuesまたはDeveloper WooCommerce Blogのコメント欄で受け付けている。
また、AIが提案するテキストはあくまで「提案」であり、最終的な判断と責任はストア運営者にある。特に法的表記が必要な商品（食品表示、薬機法関連、特定商取引法に基づく表記など）については、AI提案をそのまま適用せず、必ず担当者が内容を確認する必要がある。
AI Product Advisorが示すEC運営の変化
AI Product Advisorの登場は、単なる「便利なプラグインが増えた」という話にとどまらない。EC運営におけるAIの役割が「分析補助」から「実行提案」へと明確にシフトしている点が重要だ。
従来のEC向けAIツールは、アクセス解析や売上レポートといった「現状把握」を支援するものが中心だった。データを見て、そこから改善策を考えるのは人間の役割である。一方、AI Product Advisorは「この商品の説明文にこういう問題がある」「こう書き換えると効果が見込める」という具体的な行動提案まで踏み込んでいる。WooCommerceのエコシステムにおいて、AIが「実行レイヤー」に進出した最初期の事例と言える。
このフロー変化が示すのは、EC担当者の役割が「考えて書く人」から「判断して承認する人」へと変わりつつあることだ。時間を奪われていた反復作業から解放され、本来注力すべき「戦略立案」や「ブランド育成」にリソースを振り向けられるようになる。WooCommerceがAIエージェントへの布石を打ったと見ることもできる。
AIエージェント型EC運用の展望
AI Product Advisorはまだ「提案→人間が判断」という協調型だが、この延長線上には「AIが自動的にA/Bテストを実施し、勝ちパターンを学習して自律的にカタログを最適化し続ける」エージェント型運用が想定される。WooCommerceの開発チームがGitHub上で公開しているソースコードには、将来的な拡張を見越したアーキテクチャが示唆されている。
EC運営者はこの流れを「自分たちの仕事が奪われる」と警戒するのではなく、「ルーティンワークから解放されるチャンス」と捉えるべきだ。AIが商品説明文を最適化している間、人間は新商品の企画や顧客体験の設計といった、より創造的な業務に集中できる。中小規模のEC事業者にとって、この人的リソースの再配分が競争力の源泉になる。
この記事のポイント
- AI Product Advisorは商品カタログ全体を分析し、改善余地の大きい商品を優先度順に提示する
- ブランドトーン学習機能により、ストア固有の文体に合わせた自然な提案文が生成される
- 3つのビュー（概要・提案キュー・履歴）で、改善実行から効果検証まで一貫して管理できる
- ベータ版のため、本番適用はステージング環境でのテスト後に実施することが推奨される
- AIが「実行提案」まで踏み込むことで、EC担当者の役割は「判断と承認」へシフトしつつある
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
contrast-color()で自己修正するカラーシステム構築、動的テーマにブラウザネイティブ対比色
ウェブ上のカラーコントラスト問題は長らく手つかずだった。HTTP Archiveの調査によれば、2025年時点で約70%のサイトがWCAGの最低限の対比率を満たせていない。WebAIMの2026年データでは、ホームページの83.9%が低コントラストと判定されている。多くの開発者は対比に配慮しているが、実装の手間やランタイム計算の煩雑さが壁になっていた。この状況を根本から変えるCSSの新機能が、
contrast-color()関数だ。背景色を渡すだけで、ブラウザが適切な文字色（黒または白）を計算して返す。JavaScriptやビルドステップは不要で、スタイル計算の段階で解決される。
contrast-color() とは何か
基本的な動作
CSS Color Level 5で導入されたこの関数は、引数に与えた色に対して最適な対比を持つblackまたはwhiteを返す。使い方はシンプルだ。
.button {
background-color: var(--brand-color);
color: contrast-color(var(--brand-color));
}--brand-colorを蛍光グリーンに変えれば文字色が黒になり、ネイビーに変えれば白になる。ランタイムのテーマ変更にもリアルタイムで追従する。
返り値と名称の変遷
contrast-color()は色値を返すため、border-colorやbox-shadowなど色を受け付けるあらゆるプロパティで使える。初期の仕様ドラフトではcolor-contrast()という名前だったが、対比率（数値）を返すように見えるという理由で改名された。古い記事やチュートリアルの構文は現在のブラウザでは動作しないので注意が必要だ。
ブラウザ対応状況
Chrome 147、Firefox 146、Safari 26.0のすべての安定版で出荷済みだ。2026年4月にはBaseline Newly Availableステータスを獲得し、主要エンジン間で実装が揃った。Web Platform Testsもパスしており、エッジケースの挙動も統一されている。
グローバルサポート率は一見低く見えるが、更新しないエンタープライズ環境が大半を占める。実際に最新ブラウザを使っている読者なら、ほぼ確実に利用できる。
/* プログレッシブエンハンスメント */
.card {
background: var(--bg);
color: #fff;
text-shadow: 0 0 4px rgb(0 0 0 / 0.8);
}
@supports (color: contrast-color(red)) {
.card {
color: contrast-color(var(--bg));
text-shadow: none;
}
}@supportsで未対応ブラウザには影つきの白文字をフォールバックとして提供できる。ただし自動アクセシビリティチェッカー（Lighthouseなど）はtext-shadowを評価せず、フォールバック側をコントラスト違反と誤判定する点は把握しておきたい。
実践的な使い方
コンポーネントのベースカラーに
ボタンやカードなど、背景色が変わるUI部品であれば、contrast-color()を一行加えるだけで文字色が自動調整される。
.btn {
background-color: var(--accent);
color: contrast-color(var(--accent));
border: 1px solid contrast-color(var(--accent));
}複合的なカラー生成との統合
単に黒か白を返すだけでは味気ない場合、他のCSSカラー関数と組み合わせることで表現の幅が広がる。
/* 背景色の色相を取り入れたテキスト */
.card {
--bg-hue: 260;
--bg: oklch(0.6 0.1 var(--bg-hue));
background: var(--bg);
color: oklch(from contrast-color(var(--bg)) l 0.05 var(--bg-hue));
}contrast-color()の出力の明度を維持しつつ、少しだけ彩度と背景の色相を加えることで、単なる黒や白ではない深みのある文字色になる。ただし対比が落ちる可能性があるため、最終的な色はアクセシビリティチェッカーで確認しよう。
/* color-mix でソフトな対比を実現 */
.alert {
--bg: var(--alert-color);
background: var(--bg);
color: color-mix(in oklch, contrast-color(var(--bg)) 80%, var(--bg));
border: 1px solid color-mix(in oklch, contrast-color(var(--bg)) 40%, var(--bg));
}上記デモのAfterで使われている色#2E0F0Cは、color-mix(in oklch, black 80%, #e74c3c)を簡易的に再現したものだ。実際のコードではブラウザが動的に最適な中間色を生成してくれる。
light-dark() との連携
システムのカラースキーム（ライト/ダーク）に対応する場合、light-dark()と組み合わせるだけで、OSの設定に応じた対比色が自動的に決まる。
:root {
color-scheme: light dark;
--surface: light-dark(#fff, #121212);
}
.component {
background: var(--surface);
color: contrast-color(var(--surface));
}知っておくべき注意点
トランジションでスナップする
背景色をアニメーションさせると、contrast-color()の返す黒か白の値は離散的なため、スムーズに補間されずに切り替わる。しかも切り替えタイミングはWCAG 2.xの相対輝度の特性上、アニメーションの終盤に偏る。
このアニメーションは実際には約1秒かけて連続的に行われるが、文字色だけは終盤でカットインするように変わる。transition-behavior: allow-discreteを使っても、切り替えのタイミングが50%地点にずれるだけで、根本的なジャンプは解消されない。スムーズにしたい場合はcolor-mix()で中間色を手動管理する必要がある。
完全中立のグレーでは白が優先される
両方の対比率がまったく同じになる完全な中間グレー（およそ相対輝度17.9%）では、仕様上白が選ばれる。グレースケールパレットを扱う際に頭の片隅に入れておけば混乱しない。
透明色やグラデーションには使えない
引数は単一の不透明な色に限られる。半透明の色を渡すと、ブラウザが不透明なキャンバス（通常は白）に合成した上で計算するため、意図しない結果になることもある。グラデーションや画像のURLを渡すとパースエラーになる。
従来のアプローチが不要になる
これまで開発者は、Sassのlightness()関数でコンパイル時に判定したり、--r --g --bチャンネルを分割してcalc()内で輝度計算を行ったりと、複雑なハックで対比色を実現してきた。chroma-jsやpolishedといったライブラリも広く使われてきたが、いずれもランタイムにメインスレッドで計算が走り、SSR時のハイドレーションフラッシュの問題も抱えていた。
contrast-color()はこれらすべてをネイティブのスタイル計算フェーズに置き換える。テーマが変わっても、JavaScriptが走る前から正しい文字色が描画される。対比の自動化は、ケアすることのハードルを限りなくゼロに近づける。
この記事のポイント
contrast-color()はCSS Color Level 5で導入され、背景色に応じて黒か白を返す- Chrome 147、Firefox 146、Safari 26で出荷済み。主要ブラウザすべてで使える
- 動的テーマでもJavaScript不要。スタイル計算時に即座に反映される
- トランジション中はスナップする点や、透明色・グラデーション非対応など注意が必要
- 他のCSSカラー関数と組み合わせることで、より高度なカラーシステムを構築できる
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WooCommerce.comがナイトリーコードで稼働、本番環境で不具合を早期発見
# WooCommerce.comが毎晩の最新コードで稼働開始。本番環境で不具合を早期発見する仕組みとは
2行目
**WooCommerce.comが2026年5月からナイトリー（毎晩）ビルドのWooCommerce Coreで本番稼働を開始した。** 同サイトは商用のWooCommerceストアであり、拡張機能（エクステンション）の販売と実際の決済を処理している。公開から最初の数時間でパフォーマンスの低下を検出し、本流コードに反映される前に修正を提案する成果をすでに上げている。
なぜ本番環境でナイトリービルドを使うのか
通常、ソフトウェア開発では「安定版」以外を本番環境に導入することは避けられる。しかしWooCommerce.comのチームは、WordPress.orgがWordPress trunk（開発のメインブランチ）上で稼働しているのと同じ考え方を採用した。つまり、開発中のコードに近い環境で運用し、問題を早期に発見する手法だ。
このアプローチにより、公開リリース前に実環境での問題を捉えられる。WooCommerce.comは大規模なストアであり、実際のトラフィックと決済が発生するため、机上のテストでは見つけにくいパフォーマンス低下やクエリの問題が浮き彫りになる。
WordPress.orgとの共通点
WordPress.orgは長年にわたり、開発ブランチ（trunk）を本番サイトで稼働させてきた実績がある。WordPress本体の開発チームは、trunkに変更がマージされると即座に本番環境に影響が出る仕組みを意図的に維持している。これにより、問題が発生すれば数時間以内に検出され、修正が迅速に行われる。
WooCommerceのチームも同様に、開発の最前線にコミットし、バグを早期に発見して上流に還元するサイクルを回し始めた。これがWooCommerceエコシステム全体の安定性向上につながる。
構築したパイプラインの全体像
チームが構築したパイプラインは、平日毎日自動実行される一連の処理から成る。開発者ブログの記事に掲載されたフロー図を元に、各ステップを以下に整理する。
AIが担当するのは、紫色で示されたステップ4の一部だ。最終的なマージ判断は依然として人間が行う。チームは今後、デプロイ後のテレメトリ（スロークエリ異常検出、エラー率比較、レイテンシのパーセンタイル計測）が自動判断に耐えうるほど信頼できるものになった段階で、人間の関与を徐々に減らす計画だ。
現時点では平日のみ稼働し、週末は稼働しない。これは十分に監視体制が整っていない段階で、無人運転によるリスクを避けるためだ。
AIが担う3つの重要な工程
このパイプラインで特に注目すべきなのは、従来は人間の開発者が手動で行っていた3つの作業をAIが置き換えた点だ。Developer WooCommerce Blogの記事では、それぞれの詳細が次のように説明されている。
パッチの再適用判断
WooCommerce.comでは、WooCommerce Coreに対して若干のパッチ（修正コード）を適用して運用している。これらのパッチは本来、上流のWooCommerce Core本体やAction Schedulerに取り込まれるべき修正だが、リリースに反映されるまでの暫定対応として独自に適用している。
ナイトリービルドを取り込むたびに、これらのパッチが「まだ必要なのか」「すでに上流に取り込まれたのか」「調整が必要なのか」を判断する必要が生じる。AIはパッチマニフェスト（パッチの一覧と説明）を読み取り、パッチごとに状態を判定し、結果をコミットする。この作業は、最初の稼働時点ですでに高い精度で動作している。
コア差分のコードレビュー
WooCommerce Coreのナイトリービルドは、前日との差分が数千行に及ぶこともある。これを人間がすべてレビューするのは現実的ではない。AIは変更全体をレビューするのではなく、WooCommerce.comの独自コードベースと接する「統合ポイント」に焦点を絞ってレビューを行う。
具体的には、WooCommerce.com側のコードが依存しているフックや関数、データベースクエリパターンに影響しそうな変更をピックアップし、生成された各プルリクエストに対して判定コメントを投稿する。初回の判定は汎用的すぎて実用に耐えなかったが、プロンプトの書き直しと差分の事前絞り込みによって改善されたという。
ステージング環境での探索的テスト
ステージング環境にデプロイした後、AIエージェントが実際のユーザーフローを模して主要な導線を巡回する。たとえば商品購入、アカウント管理、拡張機能の検索といった経路を自動でたどり、異常があればプルリクエストのコメントとして報告する。
この探索的テストは現時点ではv1段階であり、テストチャーター（テストの範囲と観点）のチューニングが必要だ。チームはAIからの報告を「シグナル（兆候）」として扱い、ゲート（通過判定）としては使っていない。
- コードレビューAIは初期には役に立たなかったが、プロンプト改善で実用化
- 探索的テストAIは範囲のチューニングが進行中
- パッチ再適用AIはパッチマニフェストの注釈品質に依存
最初の2週間で何が検出されたか
実際の本番運用開始からわずか2週間で、2件の具体的な問題が検出された。いずれも公開リリース前の時点であり、エコシステム全体への影響を未然に防ぐ成果となった。
1週目：統合テストの破損を検出
最初の実行で、統合テストが壊れていることがAIによってフラグ付けされた。原因は上流の特定の変更にまで追跡可能だった。興味深いのは、この問題に気づいた時点で、すでに上流チームが修正をリバート（巻き戻し）していたことだ。
もし毎日のチェック体制が整っていれば、さらに早い段階で検出できていた可能性が高い。これは、ナイトリービルドを監視することの有効性を示す初期事例となった。
2週目：注文メタデータへのスロークエリを実環境で発見
初の自動生成アップグレードが本番環境に適用されてから数時間後、パフォーマンスへの具体的な影響が観測された。注文メタデータ（order metadata）に対するデータベースクエリが低速化し、チェックアウトの遅延、定期購入（リニューアル）の参照遅延、Webhookの滞留といった二次的な影響が現れた。
原因は、orders metaテーブルに設定されていたデータベースインデックスを簡素化する上流のプルリクエストだった。この変更自体は合理的で、削除されたインデックスは肥大化しており、WooCommerce.comでは約15GBに達していた。しかし、このインデックスに依存していたクエリパターンが複数の拡張機能に存在したことが見落とされていた。WooCommerce Core本体の問題ではなく、その上に構築された拡張機能側の依存だった。
WooCommerce.comのチームは同日中に類似のインデックスを自前で復元して暫定対応し、詳細なスロークエリデータを添えて上流にバグ報告を行った。上流チームはすでに更新版のインデックスをマージしており、WooCommerce 10.8でのリリースが予定されている。
この取り組みがWooCommerceエコシステムに与える影響
WooCommerce.comがナイトリービルドを先行運用することは、拡張機能開発者とコア貢献者の両方にとって意味がある。
拡張機能開発者にとって
WooCommerce.comが本番環境で最新コードを動かし続けることで、WooCommerce Coreのリリースが拡張機能に届く前に、より安定した状態になる。最も有効な対策は、自社の拡張機能をWooCommerce Coreのベータ版やリリース候補版で早期にテストすることだ。
また、Coreの変更によって拡張機能が影響を受ける場合に備えた防御的パターンを構築している開発者からの知見は、コミュニティ全体にとって貴重な資産となる。
WooCommerce Core貢献者にとって
trunkへのマージから1日以内に、実運用している大規模ストアでその変更がテストされる。もしWooCommerce.com側で何かが壊れれば、数時間から数日以内に報告が上がる。公開リリース後に初めて問題が発覚するという従来のパターンと比べて、格段に速いフィードバックループが実現する。
このサイクルは、WordPress.orgが長年実践してきた「自分たちのサイトで自らのソフトウェアを動かす」というドッグフーディング文化の延長にある。WooCommerceエコシステムとしても、同様の姿勢を取ることで開発の健全性を高める狙いだ。
今後の展望。テレメトリと自動化の拡大
チームのロードマップは、より多くの自動化と手動ステップの削減にある。当面の優先課題は、デプロイ後のテレメトリをアップグレードプロセスのコア要素として組み込むことだ。
具体的には以下の3つの指標を自動監視し、異常を検出したら自動的に関係者に通知する仕組みを構築する。
- スロークエリの異常検出（通常と異なる遅いクエリの発生）
- エラー率の比較（デプロイ前後でのエラー発生頻度の変化）
- レイテンシのパーセンタイル計測（P50、P95、P99などの応答時間分布）
これらのデータが十分に信頼できるものになれば、人間によるレビュー工程をさらに省略し、AIがマージ判断まで行う自動化の範囲を広げられる。現時点では平日のみの稼働だが、監視体制が成熟すれば週末も含めた連続運用への移行も視野に入る。
この記事のポイント
- WooCommerce.com本番サイトがナイトリービルドで稼働し、問題の早期発見を実現
- AIがパッチ再適用、コードレビュー、探索的テストを自動化し、従来人手だった工程を連続実行可能に
- 初回稼働から2週間でデータベースインデックス問題を検出し、公開リリース前に対策
- 拡張機能開発者はWooCommerce Coreベータ版での早期テストがこれまで以上に重要に
- テレメトリ自動監視の成熟により、将来的には完全自動化されたデプロイパイプラインを目指す
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
CSSのsibling-index()とsibling-count()でDOMを数式レイアウト
CSSに<sibling-index()>と<sibling-count()>という2つの関数が追加された。これらは要素の兄弟関係を「数値」として取得し、calc()の中で計算できる。2025年6月時点でChrome 138とSafari 26.2が対応済みで、Firefoxも実装が進行中だ。
この新機能の最大の価値は「ブラウザがすでに知っている情報を、CSSから直接引き出せる」点にある。従来はJavaScriptでループ処理するか、Sassで大量の:nth-child()ルールを生成するしかなかった。それが1行のCSSで完結する。
本記事では、sibling-index()とsibling-count()の基本から実践パターン、注意点までを解説する。WordPressサイトのカスタムCSSを書く制作者にも役立つ内容だ。
従来のスタガードアニメーションが抱えていた問題
カードグリッドに1枚ずつ遅延させて表示する「スタガードカスケード効果」は、見た目がよく実装も簡単に思える。ところが実際には、かなり面倒なコードが必要だった。
:nth-child()の限界
10枚のカードに異なるアニメーション遅延を設定したいとする。従来の方法では、こう書くしかなかった。
li:nth-child(1) { --idx: 1; }
li:nth-child(2) { --idx: 2; }
li:nth-child(3) { --idx: 3; }
/* ...8個分続く... */
li:nth-child(10) { --idx: 10; }
li {
animation-delay: calc(var(--idx) * 100ms);
}10項目なら10ルールで済むが、50項目なら50ルールだ。Sassのループでビルド時に数百個のセレクタを生成する方法もあるが、CSSファイルが膨れ上がる。Roman Komarov氏が考案したO(√N)戦略でも、1023要素をカバーするのに63ルールが必要になる。
JavaScript依存の落とし穴
もう1つの方法は、JavaScriptでDOMを走査してインラインスタイルを書き込む方式だ。style="--index: 3" を各要素に付与する。動作はするが、レイアウトのための値がスクリプトに分散し、半年後に別の開発者がコンポーネントをリファクタリングした際に静かに壊れる。ブラウザはすでに「どの要素が3番目の子か」を知っているのに、CSSからはその情報にアクセスできなかった。
Smashing Magazineの記事で著者の一人が指摘するように、この状況は「ブラウザがすでに持っているデータを、わざわざ手動で再計算している」矛盾だった。
sibling-index()とsibling-count()の基本
この2つの関数はCSS Values and Units Module Level 5で定義されている。どちらも引数を取らず、CSSの宣言内で直接数値として使える点が革新的だ。
element.parentElement.children.length に相当counter()との違いに注意したい。counter()は文字列を返し、疑似要素のcontentプロパティ内でしか使えない。一方、sibling-index()はCSS内の任意の場所で使える実数だ。時間値や角度、ピクセル値との計算もCSSが自動的に型変換する。
:nth-child()との本質的な違い
:nth-child()は「セレクタ」であり、要素を選択するための仕組みだ。calc(:nth-child() * 10px)のような書き方はできない。sibling-index()は「宣言の中で使える値」を生成する。両者は役割が異なり、補完関係にある。
実践的なユースケース
これらの関数が整数を返すと理解できれば、応用の幅は一気に広がる。以下に、WordPressサイトのカスタマイズにも活用できるパターンを紹介する。
リバーススタガー
最後の項目から先にアニメーションさせたい場合は、引き算で反転する。
.card {
animation: fade-in 0.4s ease both;
animation-delay: calc((sibling-count() - sibling-index()) * 80ms);
}最後の子要素は (N – N) × 80ms = 0ms で即座に表示される。最初の子要素は (N – 1) × 80ms の遅延となる。ページ読み込み直後からアニメーションが始まり、待ち時間が生じない。
自動均等幅
タブやカラムの幅を子要素の数に応じて自動調整する。
.tab {
width: calc(100% / sibling-count());
}5つのタブなら各20%、6つ目が追加されれば約16.66%になる。メディアクエリやリサイズ監視、JavaScriptは不要だ。ただし項目が増えすぎてタブが細くなりすぎる場合は、Flexboxの折り返しなど別の手法を併用する判断も必要になる。
色相分布
カラーホイール上で均等に色を分散させる。
.swatch {
background-color: hsl(
calc((360deg / sibling-count()) * sibling-index()) 70% 50%
);
}3項目なら120度間隔、12項目なら30度刻みで色相が割り当てられる。DOM内の項目数に応じてパレットが自動調整されるため、JavaScriptのカラーライブラリで行っていた処理をCSSだけで完結できる。
円形メニュー
項目を円周上に配置する計算も、CSSの三角関数と組み合わせればシンプルになる。
.radial-item {
--angle: calc((360deg / sibling-count()) * sibling-index());
--radius: 120px;
position: absolute;
left: calc(50% + var(--radius) * cos(var(--angle)));
top: calc(50% + var(--radius) * sin(var(--angle)));
transform: rotate(calc(var(--angle) * -1));
}6項目なら六角形、8項目なら八角形になる。項目を追加・削除すればレイアウトが再計算される。JavaScriptで座標を逐一計算する必要はない。
Z-indexスタッキング
カードを扇状に重ねる表現も1行で済む。
.card {
z-index: calc(sibling-count() - sibling-index());
}最初のカードが最も高いz-indexを持ち、最後のカードは0になる。逆順にしたい場合は計算式を反転すればよい。
注意点と制限事項
仕様を読み込んでも気づきにくい落とし穴がいくつかある。実際に使い始める前に把握しておきたい。
Shadow DOMのスコープ
sibling-index()とsibling-count()は「DOMツリー」に対して動作し、フラット化された視覚ツリーではない。この違いはWeb Componentsを使う場面で問題になる。
カスタム要素内のシャドウDOMで内部のdivにsibling-index()を適用すると、slotで投影された外部コンテンツはカウントされない。slotが300要素を投影していても、シャドウツリー内ではsection直下の子要素はslot要素とdivの2つだけだ。
また、外部のスタイルシートから::part()経由でコンポーネント内部にsibling-index()を使おうとすると、ブラウザは0を返す。これはサードパーティコンポーネントの内部構造を外部CSSから探られるのを防ぐための意図的な設計だ。
疑似要素はカウントされない
::beforeや::afterは兄弟要素ではない。sibling-count()に含まれず、自身のsibling-index()も持たない。ただし、疑似要素の宣言内でこれらの関数を使うことは可能だ。その場合、疑似要素ではなく「元の要素」のインデックスが評価される。
display:noneでもカウントされる
これは特に注意が必要だ。display:noneを指定した要素はレイアウトツリーから消えるが、DOMツリーには残っている。sibling-index()はDOMツリーを見るため、非表示要素もカウントしてしまう。
visibility:hiddenやopacity:0も同様にカウントされるが、これらは要素が空間を占有し続けるため直感的にも理解しやすい。display:noneだけが「視覚的に消えているのにDOMスロットを占有している」という特殊な挙動になる。
カスタムプロパティの即時評価
親要素で –idx: sibling-index() と定義すると、その値は親要素自身のインデックスで即座に解決される。すべての子要素が同じ固定値を継承してしまい、意図した動作にならない。
正しい方法は、関数を必要な要素自身に直接適用することだ。
/* 誤り：親で定義すると全子要素が同じ値を継承 */
.parent {
--idx: sibling-index();
}
/* 正解：各子要素で個別に定義 */
.child {
--idx: sibling-index();
animation-delay: calc(var(--idx) * 100ms);
}CSSWGでは@propertyのinherits:declaration拡張が議論されているが、まだ仕様化には至っていない。当面は各要素に直接適用するのが安全だ。
大規模DOMでのパフォーマンス
DOMの変更（要素の追加、削除、並べ替え）は、影響を受ける兄弟要素すべてのスタイル再計算を引き起こす。この処理はカスケードフェーズで行われるため、JavaScriptでループしてインラインスタイルを書き込む従来の方法よりは高速だ。
ただし、1万子要素を持つコンテナの先頭に要素を挿入すると、後続の全要素のインデックスが再計算される。ナビゲーションやカードグリッドのような通常の用途では問題にならないが、リアルタイム株価表示や無限スクロールフィードなど、数千ノードが常時入れ替わる場面では、仮想化ウィンドウ内でJavaScript管理のインデックスを使い続ける方が無難だ。
アクセシビリティへの配慮
これらの関数は純粋に「視覚的」なものである点を強調しておきたい。見た目を変えるだけで、意味を変えるわけではない。
sibling-index()の計算結果を使ってorderプロパティやグリッド配置でリストを視覚的に並べ替えた場合でも、スクリーンリーダーはDOMのソース順で読み上げる。キーボードのタブ順もDOM順に従う。視覚レイアウトとセマンティック構造が矛盾すれば、アクセシビリティ上の問題になる。
データグリッドやラジアルメニューなど、ツリーカウントに依存するインタラクティブなコンポーネントでは、JavaScriptでARIA属性（aria-posinsetやaria-setsize）を同期させる必要がある。CSSが計算した値とARIAが伝える情報が食い違えば、支援技術のユーザーには壊れた体験が提供される。
ブラウザ対応とフォールバック戦略
2025年6月時点で、Chrome/Edge 138とSafari 26.2が安定版で対応している。FirefoxはMozillaのポジションが肯定的で実装作業が進行中だが、安定版にはまだ含まれていない。最新の対応状況はcaniuseで確認することを推奨する。
ChromeとSafariで世界のトラフィックの約75〜80%をカバーするが、Firefox未対応の間はフォールバックが必須だ。
/* すべてのブラウザで動作するベースライン */
.item {
width: 25%;
animation-delay: 0ms;
}
/* 対応ブラウザでプログレッシブエンハンスメント */
@supports (z-index: sibling-index()) {
.item {
width: calc(100% / sibling-count());
animation-delay: calc(sibling-index() * 80ms);
}
}Firefoxには静的なフォールバック、対応ブラウザには数式レイアウトを提供する。どのブラウザでもページが壊れることはない。
ポリフィルについて補足すると、JavaScriptで兄弟要素をループしてインラインスタイルを設定する方式は、まさにこれらの関数が置き換えようとしているものだ。Juan Diego Rodríguez氏が公開している段階的移行の手法では、Roman Komarov氏のカウンティングハックなど既存のCSSテクニックを橋渡しとして活用し、ネイティブ対応までの移行期間をしのぐアプローチを提案している。
今後の展望
現在の仕様では「すべての要素兄弟」をカウントするのみだが、CSSWGのIssue #9572では、:nth-child()と同様の「of セレクタ」引数の拡張が計画されている。
sibling-index(of .active)のような記法が実現すれば、特定のセレクタに一致する兄弟だけをカウントできる。全体で8番目の子だが.activeクラスを持つ中では3番目、という要素は3を返す。フィルタリングやトグル表示を伴う動的なUIでも、DOM操作なしで連続したインデックスを維持できるようになる。
さらに、children-count()とdescendant-count()の提案もCSSWGで議論されている。children-count()は要素が持つ子要素の数、descendant-count()はすべての子孫を再帰的にカウントする。sibling-index()とsibling-count()が「兄弟の間での自分の位置」という水平方向の情報を提供するのに対し、children-count()とdescendant-count()は「自分の下に何があるか」という垂直方向の情報を提供する。両方が揃えば、CSSからDOMツリーを俯瞰できるようになる。
10個の:nth-child()ルールを書きながら「もっと良い方法があるはずだ」と感じていた制作者にとって、その「もっと良い方法」がようやくブラウザに実装されつつある。CSSがDOMツリーを「理解」し始めたことで、レイアウトの表現力は次の段階に入ったと言える。
この記事のポイント
- sibling-index()とsibling-count()はDOMツリーの構造をCSSから数値として取得できる新関数である
- スタガードアニメーションや均等幅レイアウトが1行のCSSで完結し、JavaScriptや大量の:nth-child()ルールが不要になる
- Chrome 138とSafari 26.2が対応済み、Firefoxは実装進行中で@supportsを使ったフォールバックが必須
- display:noneの要素もカウントされる点、カスタムプロパティの即時評価、Shadow DOMのスコープに注意が必要
- 視覚的な並べ替えはアクセシビリティ上の問題を引き起こすため、ARIA属性との同期が欠かせない
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験