制作者が知っておくべきウェブ技術の新動向を整理してみた

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

春の新しい技術や動向が出揃ってきたので、今知っておきたいウェブ制作・WordPress・セキュリティの動きを整理してみました。それぞれがどう制作現場に影響するか、中小企業サイトでどう活用できるかという視点で見ていきます。

WordPress 7.0の準備が本格化

WordPress 7.0は2026年5月20日にリリース予定で、現在RC(リリース候補版)の最終テストが行われています。リアルタイム共同編集機能がGutenberg Phase 3の一環として導入される見込みで、複数人でのコンテンツ制作が大きく変わりそうです。

ただし、この機能にはWebSocket接続をサポートするホスティングが必要になる可能性があるため、現在のサーバー環境が対応しているかの確認が必要です。システム要件もPHP 7.4以上、MySQL 8.0またはMariaDB 10.6以上に引き上げられるため、古い環境からのアップグレード計画も立てておきたいところです。

WordPress 6.9.1のメンテナンスリリースも2月に配布済みで、49件のバグ修正が含まれています。メジャーバージョンの前に安定性を確保する流れが見えています。

CSS コンテナクエリがようやく実用段階に

コンテナサイズクエリは、Chrome 105+、Firefox 110+、Safari 16+、Edge 105+で95%以上のグローバル対応を達成し、制作現場で本格的に使えるレベルになりました。2015年から求められていた機能が、ついに全主要ブラウザで実際に動作する状況です。

コンテナクエリの何が変わるかというと、コンポーネントがビューポートサイズではなく、親コンテナのサイズに基づいてスタイルを調整できることです。同じカードコンポーネントをサイドバーに配置しても、メディアクエリだとページ幅を見てしまうが、コンテナクエリならサイドバーの幅に応じて適切にレイアウトが変わるというわけです。

ただし、スタイルクエリ(@container style())はChrome 111+とEdge 111+のみ対応で、FirefoxとSafariはまだ開発中なので、段階的な導入が賢明でしょう。

Core Web VitalsのINPが本格始動

Interaction to Next Paint(INP)は2024年3月にFirst Input Delay(FID)に代わってCore Web Vitalになりましたが、2026年に入ってその影響が本格化しています。

2026年初頭のCrUXデータによると、43%のウェブサイトがINPの200ミリ秒の閾値をクリアできず、最も失敗率の高いCore Web Vitalとなっています。FIDからINPへの移行により、モバイルのCore Web Vitals合格率が約5ポイント低下しており、多くのサイトで対応が急務です。

INPがFIDより厳しいのは、最初のインタラクションだけでなく全てのインタラクションを測定し、入力遅延だけでなく処理時間と描画遅延も含むためです。重いアニメーションや複雑なJavaScriptが動くサイトでは、パフォーマンスの見直しが必要になるでしょう。

WordPressセキュリティの新たな脅威

4月のセキュリティ動向で注目すべきは、Essential Pluginポートフォリオの31個のプラグインで、所有者変更後にバックドアが仕込まれ、8か月間潜伏した後に数千のサイトが感染した事件です。

WordPressはプラグインの所有者変更をユーザーに通知しない仕様のため、信頼していたプラグインが密かに悪意のあるコードを含むようになっても気づけません。最近の1週間だけで185件の新しい脆弱性が発見されており、そのうち16件は未修正という状況も踏まえると、定期的なセキュリティ監査の重要性が高まっています。

2026年には商用WordPressプラグインは法的にEU圏ユーザーに提供するため脆弱性開示プログラム(VDP)の設置が義務化される予定で、セキュリティ体制の透明性がより求められるようになります。

実務への影響を考える

これらの動向を踏まえ、制作現場で今できることを整理すると、WordPress 7.0に向けては現行サーバー環境の要件確認、コンテナクエリは既存メディアクエリとの併用での段階導入、INP対策は重いJavaScriptの見直しとパフォーマンス測定の習慣化、セキュリティは月次でのプラグイン監査の仕組み作りが挙げられます。

3つのCore Web Vitalsすべてをクリアしたサイトは、失敗サイトと比べて離脱率が24%低く、オーガニック検索トラフィックの改善も確認されているという調査結果も出ているため、パフォーマンス改善の投資対効果は明確です。

新技術の導入は一度にすべて対応する必要はありません。現在運用中のサイトの安定性を保ちながら、段階的に新しい手法を取り入れて、ユーザー体験の向上につなげていくのが現実的なアプローチでしょう。

3-1 コンテンツ管理システム(CMS):人気のCMSの比較(WordPress、Joomla、Drupal等)

3-1 コンテンツ管理システム(CMS):人気のCMSの比較(WordPress、Joomla、Drupal等)

3-1 人気のCMSの比較(WordPress、Joomla、Drupal等)

はじめに
コンテンツ管理システム(CMS)は、ウェブサイトの作成、管理、公開を容易にするためのソフトウェアアプリケーションです。CMSを使用することで、技術的な専門知識がなくても、テキストや画像などのデジタルコンテンツを編集し、ウェブサイトに公開することができます。現在、市場にはさまざまなCMSが存在しますが、その中でもWordPress、Joomla、Drupalは最も広く使用されているシステムです。この章では、これらの人気CMSを機能、使いやすさ、カスタマイズ性、セキュリティの観点から比較し、どのCMSがあなたのプロジェクトに最適かを探ります。

1. WordPress

WordPressは、世界中で最も広く使われているCMSです。利便性、拡張性、大規模なコミュニティサポートが主な特徴です。非技術者でも簡単にウェブサイトを構築でき、数千のテーマとプラグインを利用してカスタマイズ可能です。小規模なブログから大企業のウェブサイトまで、幅広い用途に対応しています。

長所

  • 利用者が多く、サポートと情報が豊富
  • インストールと設定が簡単
  • 広範囲のテーマとプラグインで高度にカスタマイズ可能

短所

  • カスタマイズが進むと、パフォーマンスが低下する場合がある
  • セキュリティの問題が発生しやすい

2. Joomla

Joomlaは、中規模から大規模のウェブサイトに適したCMSです。社会的なネットワーキングサイトやeコマースサイトなど、複雑な機能を必要とするサイトの構築に最適です。カスタマイズの自由度は高いですが、WordPressに比べると少し技術的な知識が求められます。

長所

  • 強力なコンテンツ管理機能
  • 柔軟なアクセス管理と拡張機能
  • eコマースサイトや社会的ネットワーキングサイトの構築に適している

短所

  • 初心者にはやや扱いにくい
  • 拡張機能の質が不均一

3. Drupal

Drupalは、高度にカスタマイズ可能で強力なCMSです。大規模な企業や高度なデータベース統合が必要なプロジェクトに適しています。Drupalは柔軟性が高く、複雑なサイト構築のニーズに応えることができますが、その分、学習曲線は急です。

長所

  • 強力なカスタマイズと開発機能
  • セキュリティが高く、大規模サイトに適している
  • 複雑なコンテンツ構造とデータ管理が可能

短所

  • 初心者には非常に難しい
  • セットアップと管理に時間がかかる

4. まとめ

WordPress、Joomla、Drupalはそれぞれ異なるニーズに対応しています。WordPressは使いやすさと拡張性を求めるユーザーに、Joomlaは少し複雑なサイトを構築したい中級者に、Drupalは高度なカスタマイズとセキュリティを必要とする専門家や大企業に最適です。上記以外にもMovable Typ、MT7、Concrete5、EC-CUBEなどもあります。最終的には、プロジェクトの要件、技術的なスキル、将来の拡張計画に基づいてCMSを選択することが重要です。

「一部のJavascriptファイルは縮小されていないようです」の解決方法

Wordpress

All in One SEOのSEO分析で「一部のJavascriptファイルは縮小されていないようです」と表示された場合の解決方法です。

これを解決するのはWordpressのプラグインの「Autoptimize」が便利です。
WordPressにAutoptimizeを追加して以下のように設定します。

AutoptimizeのJavaScript オプション
AutoptimizeのCSS オプション
AutoptimizeのHTML オプション

上記の設定が完了すると

すべてのJavaScriptファイルが縮小されているようです。

警告が解除されます。

「お使いのサーバーは画像に “expires” ヘッダーを使用していません。」の解決方法

Wordpress

All in One SEOのSEO分析で「お使いのサーバーは画像に “expires” ヘッダーを使用していません。」と表示された場合の解決方法です。

今回は、Apache で mod_expires モジュールが使えるのを前提に書いています。
htaccessに以下のように追加します。

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

期間はお好みで設定してください。
上記の例では1 year(1年)になっております。

htaccessに追加が完了すると

お使いのサーバーは画像に "expires" ヘッダーを使用しています。

警告が解除されます。

「オープン・グラフのメタタグはありません」の解決方法

Wordpress

All in One SEOのSEO分析で「オープン・グラフのメタタグはありません」と表示された場合の解決方法です。
これはOGP(Open Graph Protocol)、つまりSNSでシェアされた時に表示される設定が完了していないことを意味します。

OGPの設定には、他のプラグインは必要なく、このプラグインのAll in One SEO Pack自体で設定できます。
設定を始める前に、OGPに設定する画像を用意しておくとスムーズです。

Facebook用の画像サイズは、最小サイズ:200px x 200px、理想的な比率1.91:1、最大8MB(例:1640px x 856px、Retinaスクリーン用3280px x 1712px)です。JPG、PNG、WEBP、GIF形式のみ。

Twitter用の画像サイズは、最小サイズ: 300px x 157px、理想的な縦横比2:1、最大5MB。 JPG、PNG、WEBP、GIF 形式のみ。

手順
1)All in One SEOの「ソーシャルネットワーク」にアクセス。

1)All in One SEOの「ソーシャルネットワーク」にアクセス。


2)Facebookの一般設定を表示して「デフォルト投稿Facebook画像」を設定する。

2)Facebookの一般設定を表示して「デフォルト投稿Facebook画像」を設定する。

3)Twitterカード設定を表示して「デフォルト投稿Twitter画像」を設定する。

3)Twitterカード設定を表示して「デフォルト投稿Twitter画像」を設定する。

以上で完了です。

必要なオープングラフメタタグがすべて見つかりました。

このように警告が解除されます。