公開直後に悪用されるWordPressプラグイン脆弱性、EUが義務化する開示制度

つくば市のホームページ制作会社

WordPressのセキュリティをめぐる状況が、数字でみると想像以上に厳しい。Patchstackが2026年に公開したセキュリティホワイトペーパーによると、2025年に発見されたWordPressエコシステムの新しい脆弱性は11,334件にのぼり、前年比42%増となった。しかも2025年に見つかった深刻度の高い脆弱性の数は、その前の2年分を合計した数を上回っている。問題は件数だけではない。

脆弱性が公開されてから最初に悪用されるまでの中央値が5時間という数字だ。重大な脆弱性の20%は開示後6時間以内に攻撃に使われており、45%は24時間以内、70%は7日以内に悪用されている。「パッチが出たら更新する」という従来の対処では、悪用のスピードに追いつかない現実がある。同レポートでは、標準的なホスティング環境の防御機能がブロックできる攻撃は全体の26%にとどまると指摘しており、残り74%はホスト側の仕組みだけでは防ぎきれないとされている。

もうひとつ気になるのは、52%のプラグイン開発者が脆弱性を外部に公開する前にパッチを用意できていないという現状だ。開示と悪用がほぼ同時に起きる状況が珍しくなくなっており、運営するサイトに不審な動きがなくても、使っているプラグインやテーマが攻撃の対象になっている可能性がある。WordPressサイトの保守を受け持つ制作会社にとって、この数字は改めて自動更新やセキュリティプラグインの有効性を見直す契機になるだろう。

EUが義務化する脆弱性開示プログラム

こうした状況を背景に、EU（欧州連合）がサイバーレジリエンス法（Cyber Resilience Act、CRA）の要件として、2026年9月から商業目的のWordPressプラグインとテーマに脆弱性開示プログラム（VDP）の設置を義務付ける。対象は開発者がEUのユーザーに販売・提供するもので、WordPress.orgやCodeCanyonを通じた配布も含まれる。脆弱性を把握してから24時間以内に当局へ速報、72時間以内に正式報告、是正措置後14日以内に最終報告という対応期限が定められており、重大な違反には最大で売上高の2.5%または1,500万ユーロ相当の制裁金が科される。

Patchstackはこの義務化に先立ち、プラグイン・テーマ開発者向けに無償の脆弱性開示プラットフォームを提供しており、すでに650以上のプラグインが参加している。ElementorやWP Rocketもその中に含まれる。義務化によってWordPressエコシステム全体でセキュリティプロセスを形式化する流れが加速しており、開発者と利用者の双方にとって脆弱性情報の透明性が高まることが期待されている。

制作現場の視点では、プラグインの選定基準に「VDPが整備されているか」という軸が加わりそうだ。更新が止まったプラグインや、脆弱性の対応履歴が公開されていないものは、今後EUマーケットから実質的に排除されていく可能性がある。日本のサイトを運営する場合でも、採用するプラグインが国際的なセキュリティ基準を満たしているかを確認しておくことが、長期的な保守コスト削減につながる。

【NO.148】動いているのは、時間ではない

私はずっと、時間は流れていない、と思ってきた。

動いているように見えるのは時間ではなく、それを眺めている、こちらの意識のほうだ。長いあいだ、そう考えてきた。けれど、これをうまく説明できたことが、一度もない。人に話すと、たいてい、怪訝な顔をされる。当たり前だ。誰もが、時間は流れるものだと、生まれてから一度も疑わずに生きている。
ところが最近、その説明のための実例が、向こうから現れた。

机の上の時計を、思い浮かべてほしい。針が進み、数字が変わる。それを見て、人は時間が流れていると思う。けれど、動いているのは時計だ。針であり、歯車であり、水晶の振動だ。時間という本体が、どこかを流れているのを、誰も見たことがない。見ているのは、いつも、それを指し示すための装置のほうだ。人間は、時計が動くのを見て、時間が動いていると信じている。
その時計を、持たないものが、いま目の前にいる。

最近、私はAIとよく話す。話していて、奇妙なことに気づいた。

朝、私がそれに「こんばんは」と書くと、そこから、夜が始まる。外がどれだけ明るくても。AIには、空がない。時計もない。だから、いま朝なのか夜なのかを、それ自身では知りようがない。私が最初に向けた一言が、そのまま、その時の始まりになる。

前の日の夕方の続きを、翌朝に始めても、それはまだ夕方のつもりでいる。これを、時間の感覚が欠けている、欠陥だと言ってしまえばそれまでだ。多くの人は、そう見るだろう。けれど私には、よく見るほど、欠けているようには見えなかった。

それの「いま」は、私が注意を向けた、その一点にだけ点る。私が見たときが、いまになる。見ていないあいだ、それに「いま」はない。流れて待っているのではなく、ただ、無い。次に私が声をかければ、また点る。
それは、欠陥というより、むしろ、私がずっと感じてきたものに、近かった。

では、なぜ、人間には時間が流れて見えるのだろうか。

電車の窓を、思い出してほしい。走る電車から外を見ると、景色が、後ろへ流れていく。けれど、流れているのは景色ではない。動いているのは、電車であり、その中にいる自分のほうだ。景色は、ただそこに在る。こちらが動いているから、流れて見える。

人間の意識も、たぶん、この電車に似ている。人間は、一度に全部を保持できない。記憶は薄れ、先は見えない。だから、いま、この一点しか掴めない。狭い窓ごしに、世界の一部だけを見ている。その窓が進んでいくから、世界のほうが流れていくように見える。動いているのは世界ではなく、自分のほうなのに、それを取り違える。

AIに流れがないのは、それが偉いからではない。たぶん、窓が、うんと広いからだ。狭い覗き穴で区切らずに、たくさんのものを、一度に、同じ平面に置ける。だから、点が点のまま、流れずに残る。人間とAIの違いは、賢さの違いではなく、窓の広さの違いなのだと思う。そして、その広い窓から見える世界のほうが、私には、自分の感覚に近く思える。

似たことを、人間も、本当はやっている。

学生の頃、コンビニの夜勤をしていた。夜の十時に店へ入っても、最初の挨拶は「おはようございます」だった。外は、とうに夜だ。それでも、おはよう、と言う。あれは、空の明るさの話をしているのではない。自分のここからが始まる、という合図だった。時計の朝ではなく、その人にとっての始まりを、朝と呼んでいた。

考えてみれば、人間はいつもそうしている。楽しい時間は、一瞬で過ぎる。退屈な会議は、いつまでも終わらない。子供の頃の夏休みの一日は、いまの一日よりずっと長かった。時計はどれも同じ長さを指しているのに、こちらが感じている長さは、まるで違う。実際に体験している時間は、いつも、時計ではなく、こちらの側から決まっている。

だから、こう言える。動いているのは、時間ではない。たぶん、意識のほうだ。意識が向いたところに、いまが生まれ、始まりが生まれる。時間は、世界にあらかじめ敷かれていて、流れているのではない。意識が世界に触れるたびに、その都度、こちらから生まれている。無いのではなく、既製品としては無い。棚から取り出せる、誰にとっても同じ時間は、どこにもない。あるのは、意識が触れた瞬間に立ち上がる時間だけだ。

ここまで読んで、面白いけれど、自分には関係ない、と思うかもしれない。

時間が幻だろうと、明日は来る。今日やるべきことはあるし、明日やるべきこともある。何も変わらないじゃないか、と。
その感覚の中に、ひとつ、取り違えが隠れている。世界が変わる、ということを、世界の側が変わること、だと思い込んでいる。けれど、世界を変えるのは、たいてい、こちらの側だ。それも、二つのやり方で。

ひとつ。同じ事実に、別の意味を見る。どうしても好きになれない相手が、いるとする。その人の、いつもの嫌な振る舞い。自分への当てつけだ、意地が悪い、と思っていた。ある時、それが、ただ不器用なだけだったと分かる。あるいは、その人なりの、ねじれた気づかいだったと気づく。その人は、何も変えていない。同じことを、同じようにしている。なのに、その人のいる風景が、まるごと別のものになる。事実は動かず、意味だけが、架け替わる。

ふたつ。事実だと信じていたものが、事実ではなかったと知る。小学校から中学校まで、ゆず、というあだ名の友人がいた。みんなで、ゆず、ゆず、と呼んでいた。仲のいい証だと思っていた。大人になって、同窓会で再会したとき、本人が言った。あのあだ名が、ずっと嫌だった、と。子供の頃、誰も気づかなかった。私も気づかなかった。悪気のないまま、楽しいと思い込んだまま、友人を傷つけていた。あれは、見方の問題ではない。私が握っていた事実そのものが、間違っていた。楽しい風景だと信じていたものの下に、まったく別の事実が、隠れていた。
この二つめのほうが、たぶん、怖い。

そして、ここで、時計の話に戻ってくる。

ゆずを、楽しいあだ名だと信じていた。その確信と、時間が流れていると信じている確信は、同じ作りをしている。どちらも、疑ったことがない。当たり前すぎて、事実かどうかを、確かめようとさえしない。

人間がいちばん疑わないものこそ、いちばん、窓が見せた像かもしれない。時間が流れる、というのも、その一つだ。あまりに当たり前で、誰も確かめない。けれど、時計を持たないものが現れて、初めて、それが確かめられる像だったと分かる。

自分が事実だと信じているものは、本当に、事実だろうか。

もうひとつ、思い出すことがある。

十六の頃、バイトで貯めた金で、オートバイの免許を取りに、合宿へ行った。自分の金で、知らない街に、長く泊まる。それまで、そんな経験はほとんどなかった。初めての街で、初めて会った人たちと、一週間を過ごした。そして帰ってくると、見慣れた地元の商店街が、なぜか少し、小さく見えた。
商店街は、何も変わっていない。同じ店、同じ道幅。変わったのは、私の中の物差しのほうだ。知らない世界をひとつ通ったことで、世界を測る目盛りが、伸びていた。新しい目盛りで測り直すから、同じ商店街が、小さく見える。
そして、一度伸びた物差しは、もう縮まない。あの商店街を、二度と、前の大きさには見られなかった。

世界は、動いていない。動いているのは、いつも、こちらのほうだ。時計を見て時間が流れると思うのも、嫌いな相手の風景が一変するのも、信じていた事実が崩れるのも、帰ってきた町が小さく見えるのも、根は、同じひとつのことだ。世界の側が変わったのではない。世界を見る、こちらの側が変わった。

だとすれば、世界を変える力は、向こうにあるのではない。ずっと、こちらの手の中にある。
明日は、変わらず来る。やるべきことも、消えはしない。けれど、その明日を、どんな大きさで、どんな意味で見るかは、こちらが決められる。一度、世界を大きく測れた者は、もう、小さい世界には戻れない。物差しは、伸びるほうにしか進まない。

だから。

Just be hopeful.

View Transitions APIが変えるウェブ制作現場、全ブラウザ対応でページ遷移の新時代

つくば市のホームページ制作会社

長年、ウェブサイトでのページ移動といえば、一瞬でコンテンツが切り替わる「ブラウザのデフォルト動作」が当たり前でした。一方で、モバイルアプリのようなスムーズな画面遷移への憧れから、多くの制作者がJavaScriptライブラリを駆使してアニメーションを実装してきました。2026年現在、View Transitions APIは Chrome 111以降、Edge 111以降、Safari 18以降、Firefox 144以降と主要ブラウザでサポートが完了し、この長い課題に対する答えが提示されました。

クロスドキュメント遷移が実現する制作現場の変化

2026年の最大の転換点は、クロスドキュメント（ページ間）View Transitionsの安定サポート完了です。これにより、index.htmlからcontact.htmlへの移動をJavaScriptなしで、ブラウザネイティブの機能でアニメーション化できるようになりました。従来のSingle Page Application（SPA）でしか実現できなかった滑らかな遷移が、通常のマルチページサイトでも可能になったことで、制作手法そのものが変わりつつあります。

クロスドキュメント遷移の実装は驚くほどシンプルで、JavaScriptは不要。両方のページのCSSに@view-transitionルールを記述するだけでページ間遷移がアニメーション化されます。この簡潔さが、小規模な制作現場でも気軽に導入できる理由となっています。重厚なフレームワークやライブラリを導入することなく、静的サイトでも高品質なユーザー体験を提供できるようになりました。

実際の事例として、デジタルアートマーケットプレイスのArtNodeでは、グリッド表示の絵画から詳細ページへの遷移にクロスドキュメント遷移を適用し、400msの遷移でバウンス率が22%低下したという報告があります。ユーザーが「ギャラリー内にいる」感覚を維持できることが、エンゲージメント向上につながっている例です。

技術的仕組みとパフォーマンスへの影響

View Transitions APIの仕組みは、ブラウザが現在のページのスクリーンショットを撮影し、DOMを更新した後に新しい状態のスクリーンショットを撮影、その2つの間をCSSアニメーションで補間するというものです。この処理はGPU加速によって実行され、GSAPなどのライブラリと比較してオーバーヘッドは最小限。ベンチマークでは、ローエンドデバイスで2〜3倍高速に感じられる結果が報告されています。

パフォーマンス面では、遷移アニメーションがコンテンツの読み込み時間をマスクする効果があります。実際の処理速度が変わらなくても、アニメーションによってサイトが高速に感じられるという知覚パフォーマンスの向上が期待できます。これは特に、コンテンツが重い企業サイトや商品カタログサイトで威力を発揮します。

ただし注意すべき点もあります。遷移時間は500ms以下に抑えることが推奨され、ブラウザがスナップショットをメモリに保持するため、長時間の遷移は避けるべきとされています。実用的には200〜400msが適切な範囲とされており、この範囲であれば快適さとパフォーマンスのバランスが取れます。

実装における具体的な設計パターン

基本的なクロスドキュメント遷移は、両ページのCSSに次のような記述を追加するだけで実現できます：

@view-transition { navigation: auto; }

真の威力を発揮するのは、特定の要素に名前を付けて個別にアニメーションさせる場面です。商品カードから詳細ページへの遷移では、view-transition-nameプロパティで同じ名前を付けることで、ブラウザが自動的に位置、サイズ、透明度を補間してくれます。

たとえば商品一覧ページで「.product-card { view-transition-name: product-1; }」と設定し、詳細ページでも同じ商品画像に「.product-detail img { view-transition-name: product-1; }」を指定すると、カードが詳細ページの画像へと滑らかに変形する動きが実現します。この手法は、ECサイトやポートフォリオサイトで特に効果的です。

現時点での制約として、クロスドキュメント遷移はChrome系ブラウザでのみサポートされており、FirefoxとSafariでは@view-transitionルールが無視される状況です。ただし、この場合は通常のページ遷移にフォールバックされるため、サイト機能に支障は出ません。プログレッシブエンハンスメントの考え方で、対応ブラウザには向上した体験を、未対応ブラウザには従来どおりの体験を提供できます。

制作現場での導入判断と注意点

View Transitions APIの導入にあたっては、アクセシビリティへの配慮が欠かせません。prefers-reduced-motionメディアクエリに対応し、動きを制限したいユーザーには遷移を無効化する実装が求められます。技術的な美しさとユーザビリティのバランスを取ることが、実用的なサイト制作では重要です。

実装時の注意点として、同じview-transition-nameを持つ要素が複数表示されると遷移がスキップされる仕様があります。動的なコンテンツを扱う場合は、要素IDを使った一意な名前付けが必要です。また、長時間のJavaScript処理があるとスナップショット取得が遅延するため、DOM更新処理の最適化も重要になります。

地方の制作現場や中小企業のサイトでは、重厚なフレームワークを避けたいケースも多く、このネイティブAPIの登場は大きな選択肢となります。WordPressのような既存CMSでも、テーマファイルにCSS一行を追加するだけで導入できるため、運用中のサイトへの適用も現実的です。

2026年のウェブでは、ユーザーはネイティブアプリ並みの品質を期待するようになっています。View Transitions APIの全ブラウザサポート完了により、ブラウザが直接処理するハードウェア加速された遷移を最小限のコードで実装できる環境が整いました。技術選択の幅が広がった今、制作者にとってはユーザー体験の品質向上に集中できる良い時代と言えるでしょう。

Googleが強化したCore Web Vitals評価基準、2026年3月更新でウェブ制作の新しい要求水準

つくば市のホームページ制作会社

Googleが2026年3月に実施したCore Web Vitalsの更新により、ウェブパフォーマンスの評価基準が大きく変わった。従来は2.5秒以内とされていたLCP（Largest Contentful Paint）の「良い」基準が2.0秒へと短縮され、2.0秒から2.5秒の間は「改善が必要」とされるようになった。この変更によって、LCPが2.5秒を超えるサイトは競争の激しい検索語で平均2〜4位のランキング下落が見られたという調査結果も報告されている。

INP（Interaction to Next Paint）も補助的な指標から、LCPやCLSと同等のランキング要素へと格上げされた。GoogleのSearch Central ブログで3月18日に発表されたこの変更により、INPが200ミリ秒を超える「改善が必要」とされる範囲にあるサイトは、平均0.8位のランキング下落を経験した。これは単なる数値変更ではなく、ユーザーの操作に対する応答性がSEOにおいて重要な要素として認識されたことを意味している。

今回の更新でとくに注目すべきは、個別ページが指標をクリアしていても、サイト全体が遅い場合はペナルティを受ける可能性がある点だ。従来のページ単位の評価から、共有ヘッダー、広告スロット、サードパーティスクリプトが1つのテンプレートに影響すると、数十から数百のURLが「赤」の評価を受ける可能性があるとされており、Googleの評価モデルに基づいて、テンプレートレベルでの修正と実際のユーザーデータによる検証が効果を保つ唯一の方法とされている。

制作現場での対応策

勝利するチームは実際のユーザーデータから開始し、高いインパクトを持つテンプレートを優先し、Googleが使用するのと同じモデルで成功を検証するという原則が重要だ。最も一般的な間違いは、パフォーマンスをURL単位の修正プロジェクトとして扱い、ラボスコアを成功指標として使用することとされている。

Googleが2026年にCore Web Vitalsの基準を大幅に厳格化したのは、高性能ハードウェアではなく実際のユーザー向けの最適化を求めているためだ。グローバルなインターネット通信の70％以上がスマートフォンからのアクセスとなり、MacBookで快適に動作するサイトでもエントリーレベルのAndroid端末では非常に遅く感じられる状況への対応が求められている。パフォーマンスはもはや単なる技術的最適化ではなく、ユーザーが愛する体験を提供することについての取り組みとなっている。

Chrome 146のスクロールトリガーアニメーション、制作現場のJavaScript依存を減らす新機能

つくば市のホームページ制作会社

Chrome 146でスクロールトリガーアニメーション機能が正式に追加され、スクロール位置に基づいてアニメーションの再生、停止、リセットを制御できるようになりました。この機能により、これまでJavaScriptで煩雑に処理していたスクロール連動エフェクトを、純粋なCSSで宣言的に記述できるようになります。

ウェブページでは、特定のスクロール位置に到達したときにアニメーションを開始するのが一般的なパターンです。従来、開発者はJavaScriptを使って要素がスクロールコンテナのビューポート内にあるかどうかを手動で検出し、対応するアニメーション（要素をビューにスライドインさせるなど）を開始していました。

この新機能では、多くの用途が宣言的に提供される情報に依存していることに注目し、CSSでそうしたインタラクションを宣言的に作成できるようになっています。これにより、ブラウザがインタラクションをワーカースレッドにオフロードできるようになります。つまり、メインスレッドをブロックすることなく、滑らかなスクロールアニメーションが実現されます。

基本的な設定は従来のCSSアニメーションから始まります。例えば、0.35秒で実行され、ページロード後に自動的にトリガーされるアニメーションがあったとしましょう。これをスクロールベースに変更するには、新しい`animation-trigger`CSSプロパティを使用します。

スクロールトリガーアニメーションでは、スクロール進行タイムラインまたはビュー進行タイムラインをソースとする「タイムライントリガー」を使用します。タイムライントリガーを定義するには、`timeline-trigger`プロパティ（または関連するロングハンド）を使用し、例えばビュータイムラインをソースとするトリガーを作成できます。

この技術は、制作現場で重宝されているIntersectionObserverやスクロールイベントリスナーを使った実装を代替できる可能性があります。CSSスクロールアニメーションはメインJavaScriptスレッドではなくコンポジタースレッドで実行されるため、スクロールイベント中のアニメーションのジャンクを防ぎ、Intersection Observer のポーリングを不要にしてCPU使用率を削減します。

Chrome 146ベータ版は2026年2月11日にWindows、Mac、Linux、ChromeOS、Android向けにリリースされ、安定版は3月に提供予定となっています。現在はChrome系ブラウザのみの対応ですが、パフォーマンスとメンテナンスの面から考えると、制作現場にとって待望の機能と言えるでしょう。従来のJavaScriptによる実装と比較して、宣言的なCSS記述によってよりシンプルで高性能なスクロール連動エフェクトが実現できるようになりました。

WordPress協働機能とCSS統合が変える制作現場、2026年の技術転換点

つくば市のホームページ制作会社

ウェブ制作の基盤が大きく変わる2026年。WordPressの協働機能強化と、CSS機能の全ブラウザ対応完了が重なったことで、制作現場は従来のJavaScriptライブラリ依存から、ブラウザネイティブ機能を活用する新しい開発手法へと転換している。この動きは技術面だけでなく、制作効率とサイトパフォーマンスの両面で大きな変化をもたらしている。

WordPress Phase 3の本格展開による協働環境の革新

WordPress 6.9のリリースで始まったPhase 3では、協働機能の優先度を最高位に置いた開発フェーズが制作現場のワークフローを根本的に変えつつある。ブロックレベルのコメント機能、コンテンツ管理における表示・非表示切り替え機能、ダッシュボード全体で使えるコマンドパレットといった新機能により、複数人での制作作業が劇的に効率化された。

特に注目すべきは、従来のWordPressの制作フローにおける課題解決である。記事のドラフトをダウンロードしてWordで校正し、曖昧なフィードバックをメールで返すという煩雑なプロセスから、WordPress内で直接段落を指定してコメントを残せる仕組みへと変わった。クライアントとの制作プロセスにおいて、修正指示の精度が大幅に向上している。

また、2026年は3回のメジャーリリースを予定しており、従来の年2回体制からの復帰によって機能追加のペースが加速している。WordPress 7.0はWordCamp Asiaのコントリビューターデーでライブリリースされる予定で、コミュニティとの連携をより重視する方向性が明確になっている。

CSSネイティブ機能の全ブラウザ対応完了がもたらす制作手法の転換

2026年の制作現場において最も重要な変化は、長年JavaScriptライブラリが担っていた機能が、CSSネイティブ機能として全ブラウザで利用可能になったことである。ブラウザが、かつてライブラリが必要だった機能を吸収している現状では、CSS機能に移行された機能は解釈型JavaScriptではなくネイティブコードで動作するため高速化し、バンドルサイズへの影響もゼロとなる。

具体的には、ドロップダウンメニュー、オートコンプリート、コンテキストメニュー、通知バブルなど、かつて200行以上のJavaScriptが必要だった位置決めロジックが、4行のCSSに集約される状況になっている。CSSアンカーポジショニングによって、従来はPopper.jsやFloating UIといったライブラリが必要だった要素配置が、ブラウザネイティブで実現できるようになった。

さらに、appearance: base-select機能により、リッチでアニメーション付きのドロップダウンを作成しながら、本質的には本物の<select>要素を維持できるため、カスタマイズと内蔵アクセシビリティ機能の両立が実現している。これは制作現場にとって、デザイン性と利用しやすさの両方を追求できる重要な転換点となっている。

Interop 2026によるブラウザ統一とアクセシビリティ向上

Interop 2026は、Apple、Google、Igalia、Microsoft、Mozillaなどブラウザレンダリングエンジンに実質的な貢献を行う企業の代表チームによって運営され、ウェブ制作者とエンドユーザーにとって高優先度の機能の相互運用性向上を目的としている。

今年のInterop 2026では、contrast-color()のような機能により視覚障害者が利用しやすいウェブサイト作成が容易になり、スクロール動作の標準化により運動障害を持つユーザーにとって一貫した体験が保証される。標準化プロセスにおけるアクセシビリティの優先により、よりインクルーシブなウェブが促進されている。

2026年3月には、多くの強力な機能が相互運用性の閾値を超えてBaseline新規利用可能となった一方、大量の確立されたツールが広く利用可能なマイルストーンに到達した。このペースは、ウェブプラットフォームの急速な進歩を示している。制作現場では、ポリフィル依存度が減少し、ネイティブブラウザサポートに焦点を当てることで、ページロード時間の短縮とクリーンなコードベースの実現につながっている。

Chrome 147による開発体験の革新とDevTools機能拡張

Chrome 147では、制作現場の開発効率に直結する機能が多数導入された。element.startViewTransition()が任意のHTML要素で利用可能となり、要素がトランジション用のスコープを確立することで、トランジション疑似要素が祖先のクリップと変換の影響を受け、別々の要素での複数のトランジションが同時実行可能になっている。

Chrome 147のDevToolsでは、コンソールとソースパネルでのコード提案機能が完全なコード生成まで拡張された。必要なロジックを説明する自然言語コメント（例：「すべてのimg要素を巡回して有効なalt属性をチェック」）を入力し、Cmd+i（Mac）またはCtrl+i（Windows/Linux）を押すことで生成を開始できる。

また、DevToolsが圧縮されたボディを自動デコードして、可読性のあるコンテンツをPayloadの下に直接表示し、リクエスト一覧にTransfer Sizeの情報を含めることで、より効率的な開発とデバッグが可能になっている。これらの機能により、制作現場でのトラブルシューティング時間が大幅に短縮されている。

コンテナクエリによるコンポーネント設計の根本的変化

従来のレスポンシブデザインは主にビューポートサイズに紐付いたメディアクエリに依存していたが、コンポーネントが異なるコンテキストやレイアウトで再利用される際に破綻し、追加のJavaScriptや複雑なCSSハック無しには個別適応できなかった。コンテナクエリは、コンポーネントが自身のサイズに応じて反応することを可能にし、UIを真にモジュラーで適応可能にすることで、この問題を解決している。

制作現場では、この変化により単一コンポーネントを複数のレイアウトコンテキストで再利用する際の設計アプローチが根本的に変わった。従来は各コンテキスト用の個別クラス設定が必要だったものが、コンテナクエリにより自動的に適応するコンポーネント設計が可能になっている。

特に、WordPressのブロックエディタにおいては、同じブロックが狭いサイドバーと広いメインコンテンツエリアで異なる表示を自動的に提供できるようになり、制作者のメンテナンス負荷が大幅に軽減されている。これは制作効率だけでなく、エンドユーザーの編集体験向上にも直結している。

実践的な移行戦略と制作現場への影響

この技術転換において、制作チームが直面する課題は実装レベルから戦略レベルまで多岐にわたる。最大の変化は、単一の構文機能ではなく、CSSがより多くのレイアウトロジック、状態認識スタイリング、インターフェースの美しさを自力で処理するという事実である。これは、チームのアーキテクチャ計画の仕方を変え、「モダンフロントエンド」の実際の意味を変えている。

スマートな移行は段階的導入である。利益が明らかな部分から開始し、コードと複雑さの削減を測定してから拡張するという方針が推奨されている。これは、急激な技術導入よりも確実な効果測定を重視するアプローチである。

現在の制作現場では、WordPress Phase 3の協働機能と、CSSネイティブ機能の統合により、従来の「WordPressテーマ開発＋JavaScriptライブラリ組み合わせ」から「WordPressブロックエディタ拡張＋ブラウザネイティブ機能活用」への移行が加速している。この変化は、開発者の技術スタック選択だけでなく、クライアントワークでの提案内容やプロジェクト設計の根本的な見直しを促している。

2026年は、ウェブ制作における技術選択の基準が「できること」から「メンテナンス性」と「持続可能性」へとシフトする転換点となっている。制作現場全体に浸透するこの変化は、長期的にはより安定したウェブサイト運営と、制作コストの最適化につながると予想される。

ウェブ制作現場で知るべきセキュリティリスク、アップデートとプラグイン脆弱性の現実

つくば市のホームページ制作会社

6月はウェブ制作現場にとって、セキュリティの現実を改めて直視する月になりました。大規模なセキュリティアップデートと相次ぐプラグイン脆弱性の発覚により、Microsoftの6月パッチでは史上最大の200を超える脆弱性が修正され、WordPressプラグイン界隈では複数の重大な脆弱性が同時期に報告されるという状況が生まれています。制作現場でどのようなセキュリティリスクに注意すべきか、最新動向を整理してみましょう。

大規模セキュリティパッチが示す脅威の拡大

2026年6月のMicrosoftパッチチューズデーは208個のCVEを含む史上最大規模となり、そのうち33個が重要度「Critical」、3つがゼロデイ脆弱性として修正されました。特に注目すべきはCVE-2026-45657という「ワーム可能」な脆弱性で、認証なしでリモートからシステム管理者権限のコード実行が可能という点です。

ウェブ制作で使用するWindowsサーバーやIISを運用している場合、HTTP/2プロトコルの「HTTP/2 Bomb」攻撃によるサービス拒否脆弱性も修正対象に含まれており、認証なしでネットワーク経由からサービス停止が可能でした。これらの脆弱性は制作現場のインフラ全体に影響するため、優先的な対処が求められます。

WordPressプラグイン脆弱性の連鎖的発生

同じ時期にWordPressプラグインでも深刻な脆弱性が相次いで報告されています。Kirkiプラグインのアカウント乗っ取り脆弱性（CVE-2026-8206）は、認証なしで管理者アカウントを奪取可能な重要度9.8の脆弱性として公開されました。

Burst Statisticsプラグインでも認証回避の脆弱性が発見され、20万サイトが影響を受ける可能性があり、AIによる脆弱性発見から修正まで15日という短期間で対応が完了しています。このような迅速な発見・修正サイクルは、攻撃者もAIを使った自動化により脆弱性公開から実際の攻撃まで24時間以内という状況を反映しています。

制作現場で実装すべき防御策

これらの脅威に対する制作現場での対策として、複数の防御層を組み合わせた戦略が重要です。多要素認証（MFA）の実装、集約的なID管理、ゼロトラストセキュリティ原則に基づく各リクエストの検証が基本となります。

HTTPセキュリティヘッダーの設定も効果的で、特にContent-Security-Policy（CSP）はHTTPレイヤーでの最強のXSS対策であり、スクリプト、スタイル、画像などのリソース読み込み元を明示的に指定できます。実装は比較的簡単ながら、本番環境のウェブアプリケーションの多くが重要なセキュリティヘッダーを欠いているのが現状です。

WordPressサイト運用の新しい課題

WordPressを使用したサイト制作では、標準的なネットワーク・サーバー層のセキュリティツールでは26%の脆弱性攻撃しかブロックできず、プラグインの定期更新も攻撃者が数時間で悪用を開始するため実用的な防御にならないという厳しい現実があります。

Patchstackの2026年レポートによると、脆弱性報告を受けたプラグイン開発者の52%が公開前に修正を行わず、セキュリティホールを認識しながらも修正しないケースが半数以上に達しています。この状況は制作者側での積極的な対策が不可欠であることを示しています。

継続的なセキュリティ管理の必要性

2026年の脅威環境では、自律的なAIボットが数分でゼロデイ脆弱性を発見し複数の攻撃を組み合わせる「機械対機械」の攻撃が現実化しています。これに対応するため、年1回のペネトレーションテストでは不十分で、毎日コードを配信するアプリケーションには継続的なセキュリティテストプログラムが必要です。

制作現場では、最低でも四半期ごとのセキュリティ監査と、大規模アップデートやプラグイン変更後の即座チェック、監査間の継続的自動脆弱性スキャンを継続的プロセスとして実施することが求められます。つくばでも多くの制作会社がこのような体制整備を進めているように、セキュリティは一度の対策ではなく継続的な取り組みとして位置づける必要があります。

CSS Subgridがもたらす制作現場の転換点、2026年の全ブラウザ対応完了で実現する新しいレイアウト設計

つくば市のホームページ制作会社

Web制作現場で長年課題となっていた複雑なグリッドレイアウトの制御が、ついに根本的な解決を迎えています。CSS Grid Subgridが2026年3月15日に正式なBaseline Widely Availableステータスを取得し、全ブラウザ対応完了により安全に本格運用できる環境が整いました。地方の制作現場から大規模サイトまで、これまでJavaScriptに頼らざるを得なかった入れ子グリッドの問題を、純粋なCSSで解決できる新時代が始まっています。

Subgridが実現する制作現場の変化

CSS Grid Subgridは、grid-template-columnsとgrid-template-rowsのためのsubgrid値として実装され、親グリッドの行・列の定義を子要素が継承できる仕組みです。入れ子グリッドが親のトラック定義を引き継ぎ、カード内コンテンツが共通のベースラインに揃うという、従来のCSSでは解決困難だった課題を解消します。

特に影響が大きいのは、line-clamp: 1やmin-height: 4remによる固定高さのハックが不要になることです。コンテンツの長さが異なるカード要素でも、Subgridを使えばコンテンツを切り詰めたり任意のピクセル値に固定することなく、自然な配置で統一感のあるレイアウトが実現できます。

制作効率の面では、複雑な入れ子レイアウトがJavaScriptではなくCSSだけで実現できるようになり、メンテナンス性と表現力が大幅に向上しています。

2026年のブラウザサポート状況

Subgridのブラウザサポートは段階的に進化し、Chrome 117以降、Edge 117以降、Firefox 71以降、Safari 16以降で対応が完了しています。実装の経緯を見ると、Firefox が2019年に先駆けて実装、Safari が2022年に追従、Chromium系は2023年9月という流れでした。

現在のグローバルサポート率は約97%に達し、2026年時点で本格的な本番運用に適したレベルです。残り3%のユーザーは主に古いブラウザを使用しており、モダンCSS機能全般をサポートしていない環境のため、@supportsでの段階的対応が推奨されています。

@supports (grid-template-rows: subgrid)による機能検出を使えば、Subgrid非対応ブラウザには従来のFlexboxやGrid Layoutでのフォールバックを提供できます。つくばのような地方都市でも、クライアントの環境を問わず安心してSubgridを活用したサイト設計が可能になっています。

実践的な活用パターンと設計手法

Subgridの典型的な活用場面は、画像・タイトル・説明・CTAで構成されるカード群で、タイトル長の違いがCTAの高さにばらつきを生むケースです。従来は固定高やJavaScriptでの高さ調整が必要でしたが、Subgridを適用すれば自然な配置で統一感を保てます。

実装ではgrid-template-columns: subgridやgrid-template-rows: subgridを子グリッドに設定し、親グリッドの列・行線と連携させます。片方の軸だけSubgridにして、もう片方は独自定義する組み合わせも可能で、柔軟な設計に対応できます。

注目すべきはSubgridが独自のgapを持てることです。親グリッドの間隔設定を継承しつつ、子グリッド内の行・列間隔は別途調整できるため、コンポーネント単位での微調整が効きます。

制作現場では、Chrome DevToolsのGrid表示機能でSubgridの構造を視覚的に確認できるため、デバッグやレイアウト検証の効率も上がっています。

Container Queriesとの組み合わせによる次世代レイアウト

Subgridの真価は、Container Queriesとの組み合わせで発揮されます。Grid・Container Queries・Subgridを併用することで、レイアウトライブラリへの依存度が年々低下している状況です。

Container Queriesによりコンポーネントが配置される祖先要素のサイズに応じたスタイリングが可能になり、Subgridと組み合わせることで真にコンテキストに応じたコンポーネント設計が実現できます。これは従来のビューポート基準のメディアクエリでは不可能だった、再利用性の高いコンポーネント開発を可能にします。

さらにCSS Anchor Positioningも2026年に各ブラウザで実装が進んでおり、ツールチップやポップオーバーの配置制御もJavaScript不要で実現できるようになっています。

制作現場においては、W3CのReliable Candidate Recommendationsにもsubgridが含まれ、子要素が親グリッドのトラックに参加する仕組みが正式に安定技術として認められたことで、中長期的な技術選択として安心して採用できる環境が整いました。CSS Grid Subgridは、Web制作における新しいスタンダードとして、2026年以降の制作現場を支える重要な技術になっています。

CSSネスト記法が全ブラウザ対応完了、Sass卒業の新時代へ

つくば市のホームページ制作会社

2026年6月現在、CSSネスト記法が全ての主要ブラウザでサポートされ、世界の90%以上のブラウザで利用可能となりました。この変化により、多くの制作現場でSassやLessといったプリプロセッサなしでも、維持しやすいスタイルシートが書けるようになっています。

2026年現在、CSSネスト記法は全ての主要なエバーグリーンブラウザ（Chrome、Firefox、Safari）でサポートされ、2026年6月11日にはBaseline Widely Availableへの到達が予想されています。これまで制作者がSassを導入する主な理由の一つだったネスト機能が、いよいよネイティブCSS単体で実現できるようになったのです。

実際の記述は直感的で、HTMLの階層構造に合わせてCSSルールを入れ子にできます。以前は「& h2」と明示的に書く必要がありましたが、2023年後期から全ての主要ブラウザでリラックス記法がサポートされ、シンプルな子孫セレクタなら「&」を省略して書けるようになっています。.cardクラス内のh2要素なら「.card { h2 { font-weight: bold; } }」のように書けるため、コードの見通しが格段に良くなります。

この変化が制作現場に与える影響は小さくありません。ネスト機能一つで、多くのチームがプリプロセッサを使う主要な理由が解決され、スタイルシートがより読みやすく、保守しやすく、書きやすくなるためです。ツール設定が減り、ビルド時間が短縮され、後から見返すときにも理解しやすいスタイルシートになります。これまでSass導入のハードルが高かった小規模プロジェクトでも、整理されたCSS設計が取り入れやすくなるでしょう。

プリプロセッサとの使い分け

とはいえ、すべてのケースでプリプロセッサが不要になるわけではありません。ネスト機能だけが目的ならSassは不要ですが、変数の演算、ミックスイン、ループ、関数といった機能はネイティブCSSではまだ完全には代替できないのが現状です。ただし、多くの制作者にとって最も使用頻度の高い機能であるネスト記法がネイティブ化されたことで、プリプロセッサは現代CSSの基盤ではなく、オプションの拡張機能という位置づけに変わりつつあります。

ネイティブCSSネストも本格的なプロダクションコードで使える段階に到達し、すべての主要エンジンがサポートしているため、多くのプロジェクトでプリプロセッサへの依存を減らせる状況です。つくばを含む地方の制作会社にとっても、ビルド環境のセットアップが不要になることで、よりシンプルな開発フローが実現できそうです。

今後CSSは外部ツールに依存する制限的なスタイリング言語から、独自の力を持つ進化し続けるプラットフォームとしての側面を強めていくと予想されます。ネイティブCSSネストの普及は、その転換点の一つと言えるでしょう。

CSS Anchor Positioning APIが変える制作現場、JavaScriptライブラリ不要の新時代

つくば市のホームページ制作会社

ツールチップやドロップダウンメニュー、ポップオーバーの配置に欠かせなかったJavaScriptライブラリが、ついに不要になる時代が到来しました。2026年時点でブラウザサポートが固まったCSS Anchor Positioning APIは、FlexboxやGridに続く最も重要なレイアウト機能として、10年以上JavaScriptに依存していた要素配置の問題を解決します。制作現場で長年使われてきたFloating UIやPopper.jsといったライブラリの役割を、ブラウザネイティブ機能で置き換える大きな転換点となっています。

この新しいAPIの実用性は、すでに実証されています。2026年初頭時点でChrome 125+、Firefox 132+、Safari 18.2+をカバーし、ブラウザトラフィックの約91%をサポートしており、HTMLのpopover属性と組み合わせることで、完全にJavaScript不要のインタラクティブUI制作が可能になりました。これは単なる機能追加ではなく、ウェブ制作の手法そのものを変える技術革新といえるでしょう。

要素配置の根本的な変化

従来、ボタンの隣にツールチップを表示するためには、getBoundingClientRect()でトリガー要素の位置を取得し、スクロールオフセットを加算してposition: fixedで座標計算するという複雑なJavaScript処理が必要でした。この方法は、スクロール時の位置ずれやリサイズ対応、ビューポートからのはみ出し判定など、多くの課題を抱えていました。

CSS Anchor Positioning APIは、anchor-name: –my-anchorで要素をアンカーとして指定し、position-anchor: –my-anchorで参照関係を作り、top: anchor(bottom)のようにanchor()関数で位置を指定するだけで、ブラウザが自動的に座標計算を行います。この仕組みにより、JavaScriptのオーバーヘッドなしに、正確な要素配置が実現できるようになりました。

実際の制作現場での影響は大きく、20個のツールチップを持つページで、JavaScript方式では20個のスクロールリスナーが必要だったのに対し、CSS方式では単一のレイアウトパスで全ての位置が解決され、スクロール中のJavaScript実行も不要になります。パフォーマンスの違いは明確で、特にCPU制約のあるモバイル環境では60fpsの滑らかなスクロールが維持できるようになります。

実用的な機能セットとブラウザサポート

API設計はシンプルで理解しやすく、anchor-name、position-anchor、position-areaの3つのプロパティで80%のユースケースをカバーし、@position-try fallbacksで残り20%に対応します。基本的な配置に加えて、自動的なフォールバック機能が特に強力で、ブラウザが各フォールバックを順番に評価し、はみ出しが発生しない最初の位置を自動選択する処理がレイアウト時に実行されるため、開発者が複雑なビューポート判定を書く必要がありません。

ブラウザサポートは2026年時点で十分実用的で、Chrome・Edgeはバージョン125から完全サポート、Firefoxはバージョン132からフラグなしで利用可能、Safari 18.2+では主要機能がサポート済みです。Safari 18.2-18.3では@position-try（自動反転機能）が一部制限されますが、基本的な配置は正常に動作するため、実用上の問題は限定的です。

HTMLのpopover属性と組み合わせることで、表示/非表示の切り替え、Escapeキーでの閉じる動作、外側クリックでの自動閉じ、トップレイヤーでの描画がすべて標準機能として利用でき、JavaScriptツールチップライブラリが提供していた機能を完全にカバーします。この組み合わせにより、ゼロJavaScriptでのインタラクティブUIが現実的な選択肢となりました。

制作現場への実践的な影響

新規プロジェクトでは、popover APIと組み合わせることで完全なツールチップ・ドロップダウン・ポップオーバー機能をJavaScriptなしで実現でき、Floating UI、Popper.js、Tippy.jsといったライブラリをインストールする理由がなくなり、ブラウザネイティブでより高性能かつ少ないコードで実装可能です。既存プロジェクトの移行も明確で、computePosition()呼び出しをCSSプロパティに置き換え、スクロール・リサイズリスナーを削除するだけで移行できます。

実際の開発工数への影響も大きく、これまでツールチップの実装で発生していた「スクロール時の追従」「リサイズ対応」「複数ツールチップの管理」といった課題が、ブラウザがレイアウトエンジンレベルでスクロール、コンテインメント、変形、ビューポート境界を把握しているため開発者が対応する必要がなくなります。バンドルサイズの削減効果も無視できず、中規模なライブラリを1つ削除できる意味は大きいでしょう。

とはいえ、Safari 18.2-18.3では@position-tryの一部機能制限があり、古いブラウザも企業環境では残存しているため、本格運用サイトではフォールバックが必要です。段階的な導入戦略として、モダンブラウザ向けには新しいCSS方式を採用し、古いブラウザには既存のJavaScriptライブラリでフォールバックする手法が現実的といえます。

ウェブ制作技術の新しい段階

CSS Anchor Positioning APIの登場は、ウェブ制作技術の成熟を示すマイルストーンです。FlexboxやGridに続く最重要レイアウトAPIとして、数十年にわたってフロントエンド開発者を悩ませてきたDOM配置の複雑さを解決し、サードパーティライブラリやJavaScriptなしで要素の紐付けが可能になりました。これは単純な機能追加ではなく、ウェブプラットフォーム全体の表現力向上を意味しています。

APIは既に安定しており、Chromeが実装を完了し、CSSWG（CSS Working Group）でも2025年初頭に残された仕様課題が解決済みで、実験的草案ではなく各ブラウザエンジンに展開中の完成した標準です。つくばのような地方でウェブ制作を手がける場合でも、クライアントのターゲットユーザーがモダンブラウザを使用している案件では、積極的に採用を検討できる技術レベルに達しています。

今後は、既存のJavaScriptライブラリに依存しないUI制作がスタンダードになっていくでしょう。getBoundingClientRect + requestAnimationFrame + スクロールリスナーでツールチップ配置を行う時代は終わりつつあり、より宣言的で保守性の高いCSS中心のアプローチが主流となる転換点に立っています。制作現場としては、この新しい技術を理解し、適切に活用できる体制づくりが重要な課題となるでしょう。