# noteがフロントエンドのアーキテクチャを刷新ーーGoogleのModern Web Guidance活用から読み取れること

元のページ: <https://chot-inc.com/columns/note-frontend-architecture-modern-web-guidance>

開発 2026.11.13

note株式会社は2026年11月11日、Webサービスを支えるフロントエンドのアーキテクチャを刷新したと発表しました。もっとも改善幅の大きかった記事ページで表示が約24％速くなり、アクセシビリティの評価も向上したとしています。注目すべきは結果そのものよりも手段で、設計・構築にGoogleがAIコーディングエージェント向けに公開する「Modern Web Guidance」が使われ、その過程がChrome for Developersにケーススタディとして公開されました。AIにコードを書かせる前提で、何をどう指示すれば品質が上がるのかが具体的に示された事例です。

## 発表の要点を整理する

noteの発表によれば、今回の刷新ではGoogleの協力を得てテストを重ね、検索エンジンによる記事の認識、表示速度、アクセシビリティを一つずつ確認しながら移行を進めました。記事ページはnoteでもっとも閲覧の多いページであり、読者体験と検索エンジンからの認識を維持することが重視されています。なおnoteとGoogleは2025年1月に資本業務提携を締結しています。

前提として、noteのフロントエンドはAngular 1.x系からNuxt.jsへ移行し(2021年に完了)、その後Next.jsベースへ段階的に置き換える流れをたどってきました。noteのエンジニアチームは2026年の課題として、AIとコードベースの相性を高めることや、長期的に運用しやすいアーキテクチャへの進化を挙げています。今回の刷新はその延長線上にあります。

## Modern Web Guidanceとは何か

Modern Web GuidanceはGoogleが公開する「スキル」の集合で、Webプラットフォームの知見・ベストプラクティス・ブラウザ互換性データをコーディングエージェントに組み込むものです。`npx modern-web-guidance@latest install` でインストールでき、Claude CodeやCopilot CLIなど複数のエージェントに対応します。ドキュメントには、レガシーなモーダル実装を `<dialog>` 要素に置き換える、ツールチップをPopover APIへ移行する、といった具体的なプロンプト例も並びます。

要するに、AIが出力しがちな「古いやり方のJavaScript」を、ブラウザ標準機能に寄せるための知識ベースです。人間向けのコーディング規約ではなく、エージェントが参照する前提で設計されている点が従来のベストプラクティス集との違いです。

## 検証結果が示したこと

Chrome for Developersに掲載されたケーススタディによると、noteは本番Next.jsリポジトリのクローン上で6種類のUI実装タスクを設定し、2つの商用エージェントについて計180回の実行を比較しました。評価は静的解析だけでなく、ChromiumとWebKitのヘッドレスブラウザでレンダリング結果やCSS算出値を19項目の基準に照らして検証しています。

Web標準への準拠率は、ガイダンスなしの状態からリポジトリに置くだけの状態、明示的に参照を指示した状態へと段階的に上がり、一方のエージェントでは60.8％から94.0％へ、もう一方では75.8％から90.0％へ改善したと報告されています。具体的には、スクロール連動ヘッダーがJSのイベントリスナーからCSSスクロール駆動アニメーションに、ツールチップが座標計算付きの独自実装からPopover APIに、FAQアコーディオンがReactの状態管理から `<details name>` に置き換わりました。導入後の431件のプルリクエストでは、LCP候補画像への `fetchpriority` 指定が28％、フォームの `autocomplete` 対応が69％増えたとされています。

この数字の読み方には注意が必要です。24％という速度改善はもっとも改善幅が大きかった記事の値であり、サイト全体の平均ではありません。準拠率もnoteのコードベースと19項目の基準に依存した社内評価で、モデル名も公表されていません。再現性を期待する数値ではなく、「明示的に指示したときに効果が最大化する」という傾向を示す材料として受け取るのが妥当です。

## デザインシステムとWeb標準の境界をどう決めるか

実務的にもっとも参考になるのは、noteが直面した衝突とその解き方です。Web標準に従えと無条件に指示すると、エージェントは自社コンポーネントライブラリ(note-ui)に同等の部品があっても、素の `<dialog>` や `<input>` を選ぼうとしました。デザインシステムの一貫性とアクセシビリティの基準線が、ガイダンス遵守によって崩れる構図です。

noteはこれを、ガイダンスのオン・オフではなく優先順位の問題として扱い、リポジトリの `AGENTS.md` に三段構えのルールを明記しました。①ダイアログやフォームなど自社コンポーネントがある領域はそちらを使う、②スクロール連動効果・検索可能な開閉UI・Core Web Vitals・フォーム属性など自社コンポーネントが扱えない領域でModern Web Guidanceを参照する、③両者が衝突する場合はコンポーネントが提供するpropsや属性の範囲で標準の推奨を適用する、という順序です。

この構造は、コンポーネントライブラリを持つチームならほぼそのまま移植できます。重要なのは「どちらが偉いか」を決めることではなく、自社ライブラリが守備範囲としない領域を言語化しておくことです。境界が曖昧なままだと、エージェントは指示の強さに引きずられて毎回違う判断をします。

## 自分のプロジェクトで試すなら

手順としては、まず既存リポジトリのクローンでModern Web Guidanceを導入し、自社で頻出するUIパターンをいくつか選んで、ガイダンスなし・置くだけ・明示指示の3条件で出力を比べるのが現実的です。noteの検証が示すとおり、置くだけでも一定の改善はありますが、プロンプトやAGENTS.mdで参照を明示したときに差が開きます。

検証は静的解析だけで済ませず、実ブラウザでのレンダリング結果まで確認してください。CSSスクロール駆動アニメーションやPopover APIのような新しい機能は、バンドラーやフレームワークの環境と組み合わさったときに初めて挙動が分かります。noteのコード例でも `@supports` によるフォールバックと `prefers-reduced-motion` への配慮が併記されており、標準機能への置き換えがそのまま互換性リスクの放置にならないよう手当てされています。採用判断の際は、対象機能のBaseline対応状況と自社の対応ブラウザを突き合わせるのが先決です。

そのうえで、AGENTS.mdに自社コンポーネント優先の原則と、標準機能を使う領域の列挙を追記します。ルールは短く、判断に迷う場面を名指しで書くほど機能します。

今回の事例から持ち帰れるのは、速度改善の数字よりも「AIにコードを書かせる前提でルールの階層を設計する」という運用の型です。コンポーネントライブラリを運用しているチームは、まず自社ライブラリの守備範囲外を書き出すところから始められます。

## 出典

- [note株式会社: note、Webページの表示を支える仕組みを刷新。記事をより速く表示し快適に読めるように](https://note.jp/n/ncf0d9b6ba4b1)
- [Chrome for Developers: note社がModern Web Guidanceでモダンなガイドライン準拠率を61%から94%へ高めた方法](https://developer.chrome.com/blog/mwg-with-internal-component)
- [Chrome for Developers: Modern Web Guidance 公式ドキュメント](https://developer.chrome.com/docs/modern-web-guidance)
- [noteエンジニアチームの技術記事: noteのフロントエンドのざっくり歴史まとめ](https://engineerteam.note.jp/n/nb5b9d045cf86)
- [noteエンジニアチームの技術記事: noteエンジニアが2026年に挑戦する重要課題](https://engineerteam.note.jp/n/nae0f799a491a)

## この記事に関連するchot Inc.の支援

chot Inc.は日本初のVercel公式パートナーとして、Next.jsを中心としたWebサイト・Webアプリケーションの開発を支援しています。Vercelの導入・契約・運用の見直しは[Vercel公式パートナー開発支援](https://chot-inc.com/services/vercel-partner)で、Next.jsによる新規開発や既存システムからの技術移行は[モダンWeb開発](https://chot-inc.com/services/modern-web-development)で紹介しています。

この記事をシェア

## 最新の記事

[AI最新情報 2026.11.13](https://chot-inc.com/columns/nvidia-ceo-transition-why)

### [NVIDIAがCEO交代した理由を整理する — フアン氏辞任とクレス暫定CEO体制の論点](https://chot-inc.com/columns/nvidia-ceo-transition-why)

[開発 2026.11.12](https://chot-inc.com/columns/rules-vs-classifier-vs-llm-for-routing)

### [条件分岐・分類モデル・生成AI、どれで判断する？ 3方式の選び分け](https://chot-inc.com/columns/rules-vs-classifier-vs-llm-for-routing)

[AI最新情報 2026.11.11](https://chot-inc.com/columns/adobe-max-2026-announcements)

### [Adobe MAX 2026の発表まとめ：Creative Agent拡大、ローカルMCP連携、Fireflyの刷新](https://chot-inc.com/columns/adobe-max-2026-announcements)

[コラム一覧](https://chot-inc.com/columns)