Modern Web Guidance のガイド

高コントラストのインターフェースを好むユーザー向けに、スクロールバーの視認性を高める

WebGL シェーダーを使用して HTML コンテンツにカスタム ビジュアル エフェクトを適用します。

コントラスト要件、ライトとダークのカラーパターン、強制カラーモード、ベースカラーからの色合いとシェードの生成など、ウェブのカラー ガイダンス。

要素とそのコンテンツを、シンボル、ブラシストローク、有機的なテクスチャなどの自由な形状にクリップして、より表現力豊かなデザインを作成できます。

下線、上線、取り消し線、完全にカスタムの形状などのテキスト装飾を追加できます。表示アニメーション、カスタム オフセット、エンド インセット、柔軟なインク スキップも利用できます。

スクロールバーの色や太さをカスタマイズする

ユーザーのライトモード / ダークモードの設定を尊重し、ブラウザ UI（スクロールバー、フォーム コントロールなど）を適応させる方法でダークモードのサポートを実装する

インタラクティブな HTML 要素を 3D シーンに統合します。

動的な背景色に対して十分なコントラストがあり、読みやすいテキストの色を選択します。

ポスタースタイルや積み上げ見出しのタイポグラフィのように、複数行の見出しやロックアップの各行が同じ幅になるようにします。両端揃えのテキストとは異なり、テキスト自体が幅に合わせてサイズ変更され、間隔が引き伸ばされることはありません。

動的な HTML コンテンツを、Canvas 内から画像または動画フレームとしてキャプチャしてエクスポートします。

キャンバスにレンダリングされたコンテンツを、支援技術、翻訳、読み上げモードなどのブラウザ機能に公開します。

ブラウザでテキストを折り返すときに、均等にバランスの取れた改行を適用できるようにすることで、短いスタンドアロン テキスト コンテンツ（数行以内の見出しなど）のレイアウトと読みやすさを改善します。

あらゆるフォントのテキストを垂直方向に正確に配置できます。たとえば、テキストの上下にまったく同じ視覚的なパディングを適用したり、テキストを隣接するアイコンや画像と完全に揃えたりします。

複数のシェイプを組み合わせて、要素に複雑な切り抜きや「ノックアウト」効果を作成します。たとえば、要素にノッチを追加します。

コンテンツの端に透明度のグラデーションを適用して、さらにスクロール可能な領域があることを示したり、ペイウォールで保護されたテキストを隠したりします。

テキスト選択、スクロールバー、フォーム コントロール、選択ツールなど、ブラウザで生成される UI を、カスタム要素で再作成するのではなく、CSS でテーマ設定します。

フォントサイズ単位、行の高さ、テキストの折り返しとバランス、ビューポートに合わせてスケーリングされる流動的なタイプなど、ウェブのタイポグラフィのベスト プラクティス。

レイヤード シャドウ、ブレンドモード、予測可能な色補間を使用したグラデーション、グラデーションのみで作成されたストライプ、チェッカーボード、ドット、円グラフなどのパターンなど、CSS を使用した視覚効果。

優先フォントと代替フォントのいずれかが入れ替わった場合（またはその逆の場合）でも、テキストが読みやすく、視覚的に一貫性を保てるようにフォント スタイルを定義します。

複数のフォントを使用して 1 つのテキスト ブロックをレンダリングする場合でも、テキストが読みやすく、視覚的に一貫性を保てるようにフォント スタイルを定義します。

要素にリアルな風化やテクスチャ パターンを適用して、有機的な、経年劣化した、または物理的な素材の外観を与えます。

スクロール進行状況バー、ステップ進行状況トラッカー、またはユーザーがページやセクションをどこまでスクロールしたかを伝える視覚的なアフォーダンスを作成します。

画像やその他の視覚要素を含むスライドのカルーセルを作成します。各スライドは、スクローラーに入るとき、中央に配置されるとき、スクローラーから出るときにアニメーション化されます。たとえば、スライドをフェードイン / フェードアウトしたり、回転させたり、拡大 / 縮小したりできます。

ページのカラーパターンとは無関係に、特定の要素（コードブロック、メディア プレーヤーなど）をライトモードまたはダークモードに強制的に設定します。

要素がフォールバック位置に反転したときに、正しい方向を自動的に指す方向矢印（またはその他の視覚的なスタイル）を使用して、ツールチップとポップオーバーを作成します。

ユーザーが画面をプルダウンして、検索バーなどのコンテンツを表示できるようにする、プルして表示する機能を構築します。

適切なヘッダー セマンティクスを持つ表形式データを表示し、小さな画面や支援技術でも読みやすく、操作しやすいデータテーブルを作成します。

ユーザーがスクロールしたかどうかに応じて表示 / 非表示が切り替わるフローティング ボタンやウィジェット（トップに戻る、一番下までスクロール、チャット ランチャーなど）を作成する。

スクロール シャドウ オーバーレイ、グラデーション フェード、方向矢印インジケーターを作成します。これらは、実際にその方向にスクロールするコンテンツがさらにある場合にのみ表示されます。

スクロール時に固定ヘッダーまたは全画面カバーをスムーズにアニメーション化して、事前に定義されたスクロール距離にわたって動的に縮小、影の追加、レイアウトの変換を行います。

実際に上部に「固定」されたときに視覚的に変化する、固定セクション ヘッダーやナビゲーション バーを作成します。たとえば、カラーパターンを変更したり、シャドウを追加したりします。

CSS から設定およびパラメータ化できるアイコンを表示、管理します。これらのアイコンは、読み込みが速く、どの解像度でも鮮明で、支援技術に適切に公開（または非表示に）されます。

トリガーボタンにリンクされたプルダウン、フライアウト、コンテキスト アクション パネルを配置して、クリップされるのではなく、ビューポートの端で軸が自動的に反転するようにします。

利用可能なスペースとコンテンツに合わせて表示を調整するカード コンポーネントを作成します。

オプションまたはアクションのリストを表示するメニュー コンポーネントを作成します。ネストされたサブメニューもサポートされています。

ナビゲーション メニューで、ページ内の現在表示されているセクションをハイライト表示する

タスクまたはプロセスの完了を、確定状態と不確定状態の両方で伝える、スタイル設定された進行状況バーを作成します。

特定の種類のリンク（ユーザー プロフィールなど）にカーソルを合わせたときに、そのリンク先のページのインタラクティブな構造化プレビューを表示するホバーカード コンポーネントを作成します。

ユーザー操作中も開いたままになる、テザリングされたネイティブ オーバーレイを使用して、永続的なオンボーディング ウォークスルーを作成します。

永続的でスタック可能なメッセージングと状態通信のために、邪魔にならないトースト通知とオーバーレイ通知を作成します。

ユーザーが現在のサイトのシステム カラーパターンの設定をオーバーライドできるようにする、ダークモード切り替えコンポーネントを構築します。

アクセス可能で、フォーカスを適切に管理し、各プラットフォームでユーザーが期待する方法で閉じることができる、モーダルまたは非モーダルのダイアログ コンポーネントを構築します。

すべてのユーザーにビジー状態を伝え、モーションを抑える設定を尊重し、効率的にアニメーション化する読み込みスピナーを作成します。

ナビゲーション ドロワー コンポーネントを作成します。このコンポーネントは、メニューボタンからトリガーされると、既存のページ コンテンツの上に重ねて横からスライドインし、閉じられると（スワイプ、外側をタップ、または Esc キーを押す）スライドアウトします。

タスクやプロセスの完了ステータスを視覚的に表す進捗状況グラフ コンポーネントを作成します。中央のコンテンツとブランドに一貫したスタイルをサポートします。

全画面表示の階層型ナビゲーションを構築して、ユーザーがネストされたビューにドリルダウンし、スワイプまたは戻る操作で戻れるようにします。ブラウザの履歴は同期されたままになります。

カスタム アイコン、レイアウト、色、チェック / チェック解除のアニメーションなど、チェックボックスのスタイルを設定します。ネイティブの機能とユーザー補助は維持されます。

ユーザーがスクロールしているときに、要素がスクロールポート（またはビューポート）に出入りする際に、フェードイン、スケールアップ、その他の複雑な表示タイプのエフェクトを作成します。

2 つのターゲット要素の位置間で要素をシームレスに遷移させます。たとえば、選択したタブの下線を、以前に選択したタブと現在選択しているタブの間で移動します。

DOM から要素が追加または削除されたとき、または表示値が切り替えられたときに、要素をスムーズに非表示または表示します。

ダイアログ、ポップオーバー、ツールチップなどの要素が最上位レイヤに出入りする際にアニメーション化します。

ドラッグしてページ内でフローティング要素を移動できるようにします。

スクロールベースの効果（パララックスなど）を作成します。前景レイヤと背景レイヤが異なる速度で移動し、ユーザーがスクロールすると奥行き感が生まれます。

スクロール スナップ カルーセル、ギャラリー、全画面スワイプ エクスペリエンスで、現在スナップされている非インタラクティブ アイテムを視覚的にハイライト表示します。たとえば、スナップされたときにカードを展開したり、隠しコンテンツを表示したりします。

クロスドキュメント ビュー遷移を開始する前に、重要なページの状態が読み込まれ、安定していることを確認します。つまり、重要な CSS スタイルが読み込まれて適用され、重要な JavaScript が読み込まれて実行され、ユーザーが最初に表示するページの HTML が解析されてから、遷移が実行されます。

兄弟要素間でアニメーションまたは遷移のタイミングをずらし、兄弟リスト内の位置に基づいて計算された遅延後に各要素が開始されるようにします。

クロスフェード、カスタム表示効果、あるページから次のページへのコンテンツのモーフィングなど、全画面ページ ナビゲーション間でスムーズでシームレスな遷移を作成します。

宣言型ボタンコマンド、呼び出し元コマンド、ボタンコマンド、カスタム コマンド、宣言型トグル アクションを使用して、ボタンを任意の要素に宣言的に接続し、アプリケーション固有のカスタム アクションをトリガーします。

JavaScript を記述せずに、ボタンからダイアログまたはポップオーバーの表示を切り替えます。

ユーザーのナビゲーション フローの方向を反映するように、視覚的な状態の変化をアニメーション化します。たとえば、進むときは右から新しいコンテンツをスライドインし、前の画面に戻るときは左からスライドインします。

同じ遷移ロジックを使用して、類似する要素のグループを同時に遷移させます。たとえば、ショッピング カートから商品を削除し、他のすべての商品をアニメーションで新しい位置に移動させます。

検索結果、スペルミス、共同編集カーソルなど、ページ上の任意のテキスト範囲をハイライト表示します。

ユーザーのポインタを追跡して画像や UI セクション内の詳細を表示するスポットライトなど、インタラクティブな表示効果を作成します。

ユーザーが関心を示したとき（ホバー、フォーカス、長押しなど）、クリックする前にボタンの効果のライブ プレビューを表示します。

ライト ディスミス（ダイアログの外側をクリックまたはタップ）で閉じることができるモーダル ダイアログを作成する

CSS の遷移、アニメーション、スクロール駆動型アニメーション、ビュー遷移を使用して UI をアニメーション化します。その際、コンポジタでモーションを維持し、モーションを減らす設定を尊重します。

インタラクティビティの状態（:focus/:active）、<iframe> の読み込み状態、アニメーション / 遷移の状態など、重要な要素の状態を失うことなく、DOM 要素を移動または再親化します。

モーダル ダイアログ、全画面表示要素、ネイティブ ポップオーバーの基盤となる DOM ノードが DOM 内で移動または再親化されたときに、それらの要素を視覚的に開いたままにし、機能的にアクティブな状態を維持します。

バウンスやスプリングなど、物理ベースのカスタム アニメーションやトランジション効果を作成できます。従来のイージング曲線よりも自然で魅力的な効果を実現できます。

プラットフォーム固有の標準的なユーザー操作（デスクトップ プラットフォームでは Esc キーを押す、モバイル プラットフォームでは「戻る」または「閉じる」ジェスチャーなど）で閉じることができるモーダル ダイアログを作成する

モーダル ダイアログが開いている間、基になるページがスクロールされないようにします。

シングルページ アプリケーション（SPA）で、異なるページ状態やナビゲーションにわたって持続する要素（商品サムネイルをフルブリードのヒーロー画像に拡大するなど）を、サイズ、位置、その他のスタイル プロパティをスムーズにモーフィングすることで、視覚的に接続します。

ページの残りの部分がインタラクティブなままで、他の遷移が同時に実行されている間に、単一のコンポーネント（カード、リスト、パネル、その他のサブツリー）内の状態変化をアニメーション化します。

ユーザーがスナップに沿って配置されたコンテンツをスクロールしているときに、スクロール ジェスチャーが完了する前に、リンクされた UI 要素でリアルタイムの視覚的なフィードバックを提供します。

ナビゲーション インジケーター、リンクされたコンテンツ パネル、アナリティクス トラッキングを、スクロール可能なコンテナ内のアクティブにスナップされたアイテムと同期します。

ターゲット要素の視覚プロパティをアニメーション化します。たとえば、背景をフェードしたり、背景色をシフトしたり、スクロールテリング エクスペリエンスを作成したりします。これらはすべて、まったく異なる要素のスクロールポート位置によって駆動されます。

アコーディオン、タブ、「続きを読む」セクションなどのパターンを使用してコンテンツを非表示にします。ただし、非表示のテキストがネイティブの「ページ内検索」で表示されるようにし、検索エンジンによるインデックス登録を可能にし、URL フラグメントのディープリンクをサポートし、ARIA のユーザー補助を維持します。

要素のスクロール可能なリスト（画像のカルーセルやチャットの会話スレッドなど）を作成します。このリストは、最初のレンダリング時に特定の要素がスクロールされて表示されるように設定できます。

ユーザーがインタラクティブ要素にカーソルを合わせる、フォーカスする、または長押ししたときに、クリックを必要とせずにツールチップや補足情報を表示します。

矢印キーを使用して、さまざまなレイアウト モード（グリッドなど）で正しく動作する、アクセス可能な空間ナビゲーションを実装する

ユーザーが水平方向のスワイプ操作でリスト内のアイテムを操作（削除、アーカイブ、既読にするなど）できるようにすることで、別のコントロールをタップすることなく、エントリをすばやく処理できるようにします。

リストアイテムまたはコンテンツ ペインを水平方向にスワイプすると、コンテキストに応じた操作ボタンまたはサイドメニューが表示されるようにします。このとき、操作が自動的にトリガーされないようにします。

ターゲット要素へのスムーズなプログラムによるスクロールが完了した後にのみ、その要素で視覚効果、アニメーション、フォーカスの変更をトリガーします。

ユーザーが、地図、拡大画像、無限キャンバス、大規模なデータグリッドなどの 2 次元サーフェスを、ジェスチャーが単一の水平軸または垂直軸にロックされることなく、両方向（斜め方向またはジェスチャーの途中で方向を変える）に自由にパンまたはスクロールできるようにします。

プルダウンがアニメーション化されたカスタム選択コンポーネントを作成します。たとえば、メニューがフェードインまたはスライドインして表示されたり、選択したオプションがアニメーション表示されたりします。

チェックボックス、ラジオボタン、範囲スライダー、進行状況バーを、カスタム コンポーネントに置き換えることなく、サイトのカラーパレットに合わせることができます。

ネイティブの機能とユーザー補助を維持しながら、カスタムのトラック、つまみ、塗りつぶし、フォーカス状態を使用してネイティブの範囲スライダーのスタイルを設定します。

ボタン、選択ツール、矢印アイコン、チェックマークがすべて、ブランドまたはデザイン システムのタイポグラフィ、色、間隔、枠線の処理とシームレスに一致するカスタム選択要素を作成します。

正しい予測入力値と自動入力サポートを使用してカードの詳細を収集する支払いフォームを作成します。

正しい予測入力値と自動入力サポートを備えたログイン フォームを作成します。

正しい予測入力値と自動入力サポートを備えた登録フォームを作成します。

ネイティブの HTML スイッチ属性を使用して、アクセス可能なスイッチを構築します。サポートされていない場合は、スタイル設定されたチェックボックスにフォールバックします。

予測入力属性と自動入力サポートが適切に設定された住所フォームを作成します。

従来の積み上げリストではなく、独自の興味深い方法でオプションが配置されたカスタム選択ピッカーを作成します。

ユーザーの入力（ユーザーが別のオプションを入力または選択するなど）に合わせて、フォーム フィールドを拡大または縮小できるようにします。最大サイズと最小サイズの制限を適用して、ページデザインに適合する動的でレスポンシブなフォーム フィールドを作成します。

アクセスしやすく、安全で、ユーザー フレンドリーなウェブフォームを構築するためのベスト プラクティス。フォーム、入力、送信フローを作成または変更する際は、このガイドを使用してください。

CSS を使用して、ブラウザによって自動入力され、ユーザーによって編集されていないフォーム フィールドをハイライト表示します。

テキストエリアと 1 行入力（チャット、検索、インラインの名前変更）で Enter キーを押して送信する機能を、IME（入力方式エディタ）ユーザー向けに安全に実装し、不完全なテキストが送信されないようにします。

必須のフォーム フィールドがスキップされたり、空白のままにされたりした場合のエラー メッセージは、ユーザーの操作後にのみ表示します。これにより、先制的なエラーを回避し、ユーザーのフローにタイムリーかつコンテキストに沿ったフィードバックを提供できます。

カスタムの選択コンポーネントを作成します。このコンポーネントのオプションには、書式なしテキストだけでなく、複雑な HTML 形式（画像、アイコン、その他のリッチ形式など）を含めることができます。

ユーザーがコントロールを操作した後にのみ、選択メニューでデフォルト以外のオプションが選択されていることを検証します。

SMS で送信されたユーザーの電話番号とワンタイム パスコードを、自動コード抽出とアクセス可能なフォーム入力で確認します。

フォーム フィールドの検証フィードバック（パスワードの複雑さやメール形式の要件など）は、ユーザーが最初の操作を完了した後にのみ表示し、ページの読み込み時やユーザーの入力中にエラーが早めに表示されないようにします。

ElementInternals ARIA ミックスインを介してロールと ARIA 状態を設定し、delegatesFocus でフォーカスを管理し、ARIA 関係を単一のシャドウルート内に保持することで、カスタム要素をデフォルトでアクセス可能にします。

自律カスタム要素のライフサイクルを定義、登録、管理します。これには、コンストラクタ ルール、ライフサイクル コールバック、アップグレードのタイミング、属性 / プロパティの反映、命名規則が含まれます。

formAssociated と ElementInternals を使用して、カスタム コントロールをフォームにネイティブに参加させ、独自の値の送信、制約検証との統合、リセット、無効化、状態復元への対応を行います。

最新の HTML アーキテクチャ、セマンティクス、ネイティブ インタラクティブ API（Dialog、Popover、Details）、フォーカス管理、リソースの優先順位付けに関する、アクション指向のガイドライン。このガイドは、ウェブ ドキュメントの構造化、ネイティブ オーバーレイの実装、リソースの読み込み順序の最適化を行う際に使用してください。

カスタム要素をサーバーでレンダリングし、再レンダリングやスタイルのないコンテンツのフラッシュなしで、その場でハイドレートします。

Shadow DOM を使用してコンポーネントの DOM とスタイルをカプセル化し、HTML テンプレートを使用してツリーを効率的に構築し、スロットを使用してコンシューマー コンテンツを投影します。

:host セレクタ、テーマ設定用の継承プロパティとカスタム プロパティ、::slotted と ::part、コンポーネント内のカスケード レイヤとコンテナクエリを使用して、シャドウ境界を越えてスタイルを設定します。

ウェブ コンポーネントの作成と使用に関する方向性と横断的な原則。カスタム要素、Shadow DOM、テンプレートとスロット、宣言型 Shadow DOM、シャドウ境界を越えたスタイル設定、フォーム関連のカスタム要素、ユーザー補助要件を網羅しています。このガイドは、再利用可能な UI コンポーネント、デザイン システム、サーバー レンダリングされたカスタム要素を構築する際に使用してください。

インタラクティブなコンポーネント（アコーディオン、メニュー、展開可能なカードなど）を、自然なサイズとの間でスムーズにアニメーション化します。

要素の固有のサイズに基づいて要素のサイズを計算し、指定された設計上の制約内に収まるようにします。

子要素の状態に基づいてスタイルを変更するコンポーネントを作成します。たとえば、テーマの切り替えがオンかオフかに基づいて、ライトモードまたはダークモードでレンダリングされるコンポーネントです。

特定の at-rule がブラウザでサポートされている場合にのみ、特定の CSS ルールまたは宣言を条件付きで適用します。

特定の子要素が含まれているかどうかに基づいてレイアウトを変更するコンポーネントを作成します。たとえば、コンポーネントに画像が含まれている場合はマルチカラム レイアウトを使用し、それ以外の場合はデフォルトでシングル カラム レイアウトを使用します。

Flexbox、グリッド、サブグリッド、コンテナクエリ、アンカーの配置、固有のサイズ設定などの最新の CSS レイアウト。レスポンシブな UI コンポーネントやページ レイアウトを設計する際に、このスキルを使用します。

カスケード、セレクタ、スコープ、ネスト、デザイン トークンなど、最新の CSS アーキテクチャに関する実践的なガイドライン。このガイドは、スタイルを作成する場合やデザイン システムを管理する場合に使用します。

密度モード（コンパクト、標準、広め）やテーマなどの高次デザイン トークンを定義し、子孫コンポーネントが変更に直接、コンポーネントに適した方法で反応するようにします。

固定ブレークポイントを使用するのではなく、親コンテナのサイズに基づいて、フォントサイズ、間隔、メディアサイズなどのアイテムをスムーズにスケーリングします。

個々の CSS 変換プロパティ（移動、回転、拡大縮小など）を、単一の要素の他の変換プロパティとは独立してアニメーション化またはオーバーライドします。

要素の表示可能なクリッピング境界を、コンテンツ エッジ、パディング エッジ、ボーダーエッジ、またはこれらのいずれかからの指定されたオフセットに揃えるように調整することで、コンテンツのクリッピング方法をより細かく制御できます。

複雑なスタイル設定ロジックや動的なスタイル設定ロジックを再利用可能な関数（一連の入力パラメータに基づいてグラデーションを計算する関数など）にカプセル化することで、スタイル設定の過度な繰り返しを減らします。

コンテナクエリ、動的ビューポート単位、アスペクト比、レスポンシブ タイポグラフィなど、コンテナとビューポートのサイズに適応する UI を構築します。

セレクタと条件付き @ ルールの積集合または和集合に基づいてターゲット要素を指定し、繰り返しを最小限に抑えます。

CSS コンテナ スタイルクエリを使用して、セマンティック コンテキストに基づいてビジュアル ロジックを適応させるコンポーネントを構築します。

ビューポートの幅や高さではなく、独自の幅や高さに条件付きで依存するスタイルを持つコンポーネントを構築します。たとえば、サイズに応じてレイアウトを変更できるカード コンポーネントや、幅に基づいてヘルパー テキストを条件付きで表示できる行動を促すフレーズのボタンなどです。

フィールドが無効な場合に、フォーム フィールドの親要素（ラベルやフィールドセットなど）のスタイルを設定します。

グループ内の要素数に自動的に適応する動的な視覚スペクトルやレイアウト配置を作成します。

Temporal.Duration と Intl.DurationFormat を使用して、日時間の経過時間または残り時間を計算し、期間単位のバランスを取り、Temporal.Duration と Intl.DurationFormat を使用して、人が読めるローカライズされた期間の形式を計算します。

Temporal Plain 型を使用して、モデルのロケーションに依存しないカレンダーの日付、壁掛け時計の時間、部分的な日付（繰り返される誕生日、クレジット カードの有効期限）、タイムゾーンのずれのない繰り返される月間隔をモデル化します。

将来の会議やイベントをスケジュールする際は、地理的な IANA タイムゾーンに明示的にバインドすることで、夏時間（DST）の移行や、時計の変更による「スキップ」または「繰り返し」の時間に関係なく、イベントの時間を正確に保つことができます。

Temporal.Instant を使用して、日付の切り捨てによる競合を発生させることなく、ミリ秒未満またはナノ秒単位の ISO 8601 タイムスタンプの間隔を解析、並べ替え、測定します。

グレゴリオ暦以外の暦法（イスラム暦、ユダヤ暦、中国暦など）を使用する海外のユーザー向けに、日付を正確に表示、計算する。

Emscripten を使用して C/C++ を WebAssembly にコンパイルする

負荷の高い同期処理（複雑な計算や長いループ）や DOM の更新を分割して、ブラウザがユーザー入力を処理して画面を再描画できるようにします。

ユーザーが実際にページを閲覧した合計時間を計算します。タブがバックグラウンドにあった期間は除外します。

ページのすべてのスクリプト依存関係にわたる複雑なオーケストレーションを必要とせずに、非同期依存関係を条件付きで読み込むか初期化します（欠落しているウェブ機能のポリフィルをインポートするなど）。

複数の分析、テレメトリ、Core Web Vitals イベントをデバウンスして 1 つのビーコンにバッチ処理することで、ネットワークの競合を最小限に抑え、サーバーの負荷を軽減しながら、リアルタイムの更新を提供します。

ユーザーにすぐに表示されないコンテンツのレンダリングを遅らせることで、コンテンツの多いウェブページ（長いフィード、多数の記事、複雑なダッシュボードを含むページなど）のレンダリング時間を短縮します。

DOM の更新、データの取得、アナリティクスのトラッキング、レイアウトの再計算などの負荷の高いオペレーションは、スクロールが完了するまで遅らせて、スムーズ スクロール パフォーマンスを維持します。

次世代の画像形式（AVIF や WebP など）と複数のピクセル密度（1x や 2x など）を同時に提供することで、最適化された装飾画像（背景、UI アイコン、複雑なマスクなど）を配信します。これにより、ブラウザはユーザーのデバイスの機能に合わせて、ファイルサイズと視覚品質の最適な組み合わせを動的にネゴシエーションできます。

Fetch API を使用して行われるバックグラウンド データ取得の優先度を下げ、ユーザーが開始したリクエストとのネットワーク競合を防ぎます。

ユーザーがページをフォアグラウンドに移動した後にスクリプトが非同期で読み込まれた場合でも、ページが最初にバックグラウンドで読み込まれたかどうかを確実に判断します。

コンポーネントが画面外にあるときにバックグラウンドの JavaScript 実行（<canvas> アニメーション、WebGL レンダリング、高頻度の WebSocket データ ポーリングなど）を一時停止し、スクロールして画面内に戻ったときにジャストインタイムで再開することで、システム リソースとバッテリー駆動時間を節約します。

シングルページ アプリケーション（SPA）で、以前にアクセスしたビューの構造的な DOM 状態を保持することで、ナビゲーションごとに破棄して再構築するのではなく、以前にアクセスしたビューへの移行を高速化します。

クライアントサイドの JavaScript を使用して A/B テスト、多変量テスト、その他のテストを配信、レンダリングし、HTML、CSS、JavaScript を変更または挿入します。このとき、テスト コンテンツを表示する前に、オリジナル コンテンツがちらつきやフラッシュなしで表示されるようにします。

実行速度の遅い JavaScript や、Interaction to Next Paint（INP）の応答性が低下するその他の原因を特定します。

長いアニメーション フレームの原因となっているスクリプトを特定する

ユーザーが次にアクセスする可能性が高いページをプリフェッチまたは事前レンダリングすることで、ページの読み込みパフォーマンスを向上させます。

動画ポスター画像やプリロードされたメディアデータなど、画面外の動画アセットと音声アセットのダウンロードを、メディア プレーヤーがビューポートに近づくまで遅らせることで、帯域幅を節約し、最初のページ読み込み時のネットワーク競合を軽減します。

ユーザー インタラクションとクライアントサイド ナビゲーションで、新しいコンテンツの更新が画面にレンダリングされるまでにかかる時間を測定します。

Largest Contentful Paint（LCP）候補の画像の読み込み優先度を最適化し、重要でない画像の優先度を下げることで、重要なリソースの読み込み遅延を減らします。

プリロードされたコンテンツの相対的な優先度を最適化して、重要なリソースの読み込み遅延を軽減します。

重要な非同期スクリプトを優先し、重要でないスクリプトや本文の後半にあるスクリプトの優先度を下げることで、スクリプトの読み込み優先度を最適化し、シーケンスを改善して遅延を減らします。

データ量の多いダッシュボードやスプレッドシート形式のグリッドなど、複雑なレイアウトでのレイアウトの再計算を回避することで、インタラクションをより迅速かつレスポンシブにします（Interaction to Next Paint（INP）スコアを低減）。

後で同じ HTML ドキュメントにストリーミングされるコンテンツや、命令型 JavaScript API を介してストリーミングされるコンテンツを使用して、ページを宣言的に更新します。

最新のウェブ アプリケーションを最適化するための実用的なガイドライン。このガイドは、パフォーマンスの監査、読み込み指標の最適化、遅いインタラクションの修正、Core Web Vitals（LCP、INP、CLS）の最適化を行う際に使用します。

ユーザーのページ訪問全体にわたって、アナリティクス、Core Web Vitals、エラー、テレメトリー データを確実に追跡し、ユーザーがページを離れるまでデータの送信を遅らせます。

CSS 疑似要素（::before や ::after など）で解像度を最適化した画像を使用して、DOM ノードの数を減らします。

優先度の異なるタスクをスケジュールして、重要な作業を最初に実行し、バックグラウンド作業を後回しにする。

セマンティック HTML、フォーカス管理、フォーム、メディア、テストなど、アクセス可能なウェブ アプリケーションを構築するための実用的なコーディング ガイドライン。このスキルは、ユーザー補助機能、キーボード ナビゲーション、ARIA の監査や実装を行う際に使用します。

プログラムによるユーザー補助の状態（aria-invalid など）を視覚的な :user-invalid 状態と同期して、スクリーン リーダーのユーザーが操作後にのみエラー フィードバックを受け取るようにし、視覚的なエクスペリエンスを反映します。

CSS で生成されたコンテンツ（::before / ::after）を、装飾コンテンツの代替テキストなど、アクセス可能な方法で使用します。

ページのオペレーティング システムのテキスト スケール設定を尊重し、フォントサイズ、レイアウト、rem ベースの測定値がユーザーのユーザー補助設定に従うようにします。

エラーが発生しやすい文字列解析を行わずに、クロスドキュメント メッセージと URL 全体でウェブにおけるオリジンとサイトを安全に比較、検証します。

公開鍵カプセル化または鍵合意（ハイブリッド保護やポスト量子保護など）を使用して共有シークレットを確立し、認証付き暗号化を使用してブラウザで機密データを暗号化します。

パブリック ウェブ アプリケーションから、ユーザーのローカル ネットワークまたはループバック インターフェース上のリソースにアクセスする。

パスキーを使用して、メインのログインでリピーターを認証する。

パスワード ログインが成功した後、既存のユーザーのパスキーをサイレント登録する。

ユーザーがアカウントに登録されているパスキーを表示、管理できるようにします。

機密性の高い操作を行う前に、既存のパスキーを使用してログイン ユーザーの本人確認を行います。

既存のユーザー アカウントにパスキーを登録する。

ウェブ アプリケーションに WebAuthn とパスキーを実装するための包括的なオリエンテーションと横断的な原則。このガイドは、パスキーの登録、認証、管理、再認証を処理する際に使用してください。

信頼できない HTML をサニタイズする Trusted Types ポリシーを定義し、innerHTML などの DOM シンクに書き込む際にそのポリシーを使用し、コンテンツ セキュリティ ポリシーを介して Trusted Types を適用することで、DOM ベースの XSS 攻撃を防ぎます。

ログインページに移動したり、ワークフローを中断したりする前に、保存済みのパスキーまたはパスワードを使用して、リピーターをその場で認証します。

ページまたはワーカーが、ネットワーク エンドポイントの明示的な許可リストとのみ通信するように制限して、不正なサードパーティ リクエストやクライアントサイドのデータ漏洩を防止します。

安全でない要素と属性を削除して、ユーザー入力から信頼できない HTML コンテンツを安全に解析して表示します。

サードパーティのオリジンから読み込まれた外部スクリプト、スタイルシート、フォント、画像の暗号化の整合性を検証し、それらのリクエストが認証情報やリファラー URL を送信するかどうかを制御します。

従来型または耐量子（ポスト量子）非対称鍵を使用して、ブラウザでメッセージ、トークン、アーティファクトに署名して検証し、データの完全性と真正性を確保します。

アカウントの作成、ログイン、復元の際に、ワンタイム パスコードやマジックリンク メールを送信することなく、ユーザーがメールアドレスを所有していることを確認します。

ウェブ デベロッパー向けの予防的なセキュリティ ガイドライン（XSS、CSP、Cookie、クロスオリジン分離）。このスキルを使用して、セキュリティ ポリシーの監査、テスト、デプロイを安全に行うプロセスをガイドします。

ウェブ デベロッパーがプライバシー バイ デザイン、データの最小化、第三者監査、安全なデータ処理を実装するための、行動指向のガイドライン。このスキルは、アプリケーションの設計、サードパーティ サービスの統合、ユーザーデータの処理、セキュリティ ヘッダーの構成を行う際に使用します。

インストール済みのウェブアプリを新しいオリジンに移行する際に、ユーザー設定と OS レベルのショートカットを保持します。

ユーザー作成コンテンツまたは既存のサイト コンテンツの言語を検出する。

Prompt API を使用して、ブラウザでオンデバイスの自然言語推論を実行します。ストリーミング出力、構造化 JSON レスポンス、マルチターン セッション管理が可能です。

オンデバイスの Summarizer API を使用してテキスト コンテンツを要約します。

オンデバイスの Translator API を使用して、言語間でテキストを翻訳します。

標準の HTML フォームに WebMCP 属性をアノテーションすることで、クライアントサイドの機能をツールとして AI エージェントに公開します。

WebMCP Imperative API を使用して、クライアントサイドの JavaScript 関数を AI エージェントのツールとしてプログラムで登録します。

このガイドでは、ブラウザ アプリケーションに WebMCP（Web Model Context Protocol）を実装し、宣言型 API または命令型 API を介してクライアントサイドの機能をツールとして AI エージェントに公開する方法について説明します。