YouTube・ケーススタディ

ケーススタディ：日本のnoteの導入評価

元の資料：Case Study: note inc. — How note inc. boosted modern web guideline adherence from 61% to 94% using Modern Web Guidance
2026年11月10日（Chrome for Developers ブログ）

月間9,000万人超が使う日本のnoteが、自社のデザインシステムとModern Web Guidanceの役割分担を、180回の比較評価で決めた事例です。

現場と問い

noteはNext.jsとReactで作られ、自社のReact部品ライブラリ note-ui が、ダイアログ、ツールチップ、アコーディオン、フォーム欄など、ブランドとアクセシビリティの土台を担っています。問いは2つでした。Modern Web Guidanceが一番効くのはどこか。そして、自社の部品ライブラリとどう役割を分けるかです。

評価の組み立て

• 本番のNext.jsコードベースの複製で、実在のUIの課題6件を実施しました。削除確認ダイアログ（note-uiの範囲内）、スクロールで縮むヘッダーと記事ページの高速化（範囲外）、FAQアコーディオン・プロフィールのツールチップ・会員登録フォーム（部分的に範囲内）です。
• 条件は3つです。ガイドなし、明示的にガイドを引くよう指示した場合、リポジトリに置いてあるだけ（指示なし）の場合。
• 180回の実行を、静的なコード確認だけでなく、ChromiumとWebKitの自動ブラウザで描画後のDOMとCSSを確かめ、現代的なWeb標準の19の基準で採点しました。

結果

決めたこと：AGENTS.mdの優先順位

明示的に「Webのガイドに従え」とだけ指示すると、エージェントはnote-uiの部品がある場面でも標準のHTML要素を選んでしまいました。そこで、全か無かではなく、リポジトリの指示ファイルに優先順位を書く形にしました。要旨は次の3段です。

1. note-uiを優先する。既にある部品（ダイアログ、トースト、ボタン、フォーム欄、ポップオーバー等）はそれを使い、既存の流儀に従う。ガイドが勧めるからといって標準の <dialog> や素の <input> に置き換えない。
2. note-uiが届かない所でModern Web Guidanceを使う。スクロール連動の効果はCSSのスクロール連動アニメーション、排他や検索可能な開閉は <details name> と hidden="until-found"、Core Web Vitalsは fetchpriority と content-visibility、フォームの属性は部品のprops経由で渡す。
3. ぶつかる場合は既存部品を優先し、ガイドは部品の範囲で当てる。フォームのエラー表示は部品の仕組み（validationState／errorMessage、または aria-describedby を付けたHelpText）を使い、自前の警告要素は作らない。

教訓

• デザインシステムが終わる所から、プラットフォームの機能が始まります。部品ライブラリはブランドのUIが得意で、スクロール、ポップオーバー、読み込み優先度のようなブラウザの能力はガイドが担います。
• 既存の部品ライブラリがあるコードベースでは、AGENTS.md のような場所に短い優先順位を書くことで、デザインシステムを守りながら標準化が進みます。
• 確認は実際のブラウザの実行環境で行います。現代的なCSSとHTMLが、バンドラやフレームワークとどう組み合わさるかがその場で分かります。

「私たちの使命は『だれもが創作をはじめ、続けられるようにする』ことです。その土台は、すべての作り手と読み手にとって速く、アクセシブルでなければなりません。AIのコーディングエージェントが書くコードが増える中で、Modern Web Guidanceは、古いJavaScriptの書き方ではなく、現代的で標準に基づく解法のほうへエージェントを向けてくれます。」— 板橋岳彦（VP of Technology, note inc.）※発言の要旨