ARCHIVE
아카이브
기존에 공개한 글을 원래 주소 그대로 보관합니다.
과거의 글에는 작성 당시의 기술과 관점이 담겨 있습니다.
356개 글 · 2 / 12 페이지
· JA
サンプル26ページが取りこぼした3種類：WCAG-EM 2.0を1,342ページに当てた記録
W3Cが7月23日にWCAG-EM 2.0をGroup Noteとして公開した。その手順どおりにサンプルを26ページ選び、同じビルドの1,342ページ全部をaxe-coreで走らせて突き合わせた。サンプルが拾えたのは違反4種類のうち1種類。ランダムサンプルが新しい発見を返す確率は0.29%だった。
· JA
タイトルを宣言している七か所のうち、自分が書いたのは六か所だった
一つの記事のタイトルは title・h1・og:title・headline・RSS など六か所で宣言される。1,296本すべてで一致していた。問題は七つ目のチャネルだった。自サイトに向かう内部リンク18,296本のうち、リンク先の見出しと一致するアンカーテキストは0.7%。原因はカード全体を包んだ<a>一つだった。
· JA
内部リンク46,382本のうち24,948本が301を踏んでいた
アクセシビリティ指標を測るために書いたスクリプトが、URLのバグを掘り当てた。ビルド済みHTML 1,334ページの内部リンクを全数調査したところ、半分を超える24,948本が末尾スラッシュなしの、つまり301リダイレクトを経由するURLを指していた。原因の特定と4段階の修正、そしてゼロにするまでの記録。
· JA
言語別の一覧4枚を外したら296本が到達不能になった: クロール深度の実測
関連記事リンクが中央値8本ついているサイトの内部リンクを、到達性の基準で数え直した。ビルド済みHTML1,330枚を幅優先で辿ると記事1,288本のうち1,276本が深度2。ところが言語別の一覧ページ4枚をリンクグラフから外した瞬間、296本がホームから届かなくなった。入口は言語別の一覧ページだった。
· JA
divグリッドの表が失うもの：アクセシビリティツリーとテキスト抽出の同時実測
同じ営業時間の表を4通りのマークアップで作り、axe-coreと5種類の抽出器に通した。axeは4つとも違反0件。ところがHTMLをMarkdownやテキストへ還元した途端、7行のうち0行しか復元できないマークアップが3つあった。role="table"では届かない層を実測ログで整理する。
· JA
prerenderを入れたらLCPが6.2秒になった — activationStartを引かないRUMは嘘をつく
Speculation Rulesでページを先読みすると、LCPの生値に待ち時間がまるごと乗る。Chrome 150で6244msと103.5msの差を実測し、補正すべき箇所を整理した。
· JA
モデルを上げるたびに注入テストを回し直す理由：ゲートを実際に組んでみた
LLMパイプラインに注入回帰スイートを実際に回した。素朴なガードは11件中2件、構造的なガードは11件すべてを止め、リファクタで落ちた検知もゲートが指し当てた。
· JA
WebMCPがオリジントライアルに入った — provideContextが半年で消えた理由
WebMCPがChrome 149のオリジントライアルとして配備されたが、2月のAPIはもう変わった。navigator.modelContextはdocument.modelContextへ移り、provideContextはセキュリティ上の理由で削除された。今登録すべきツールの形と注釈を公式文書に基づいて整理する。
· JA
FAQPageのリッチリザルトは終わった。それでもQ&Aマークアップを消すな
Googleが2026年5月7日にFAQリッチリザルトを完全終了した。オフライン検証器でFAQPage JSON-LDを測るとスキーマは通るのにリッチリザルトはDEPRECATEDと返る。検証通過と露出が分かれたこの地点で、Web開発者がコードとコンテンツをどう変えるべきかを公式文書に沿って整理した。
· JA
公式は「WebSocketはbfcacheを妨げない」と発表した。測り直すと三度とも妨げられた
Chrome 149はWebSocketがbfcacheを妨げなくなったと発表した。Chrome 150の三環境で測り直すと、notRestoredReasonsは変わらずwebsocketを返した。三度測って三度とも同じだった。リリースノートと実測がずれる地点を、再現スクリプトと測定ログごと記録した。
· JA
aria-modal="true"は何も防いでいなかった — モーダルのフォーカス脱出実測とinert
role="dialog"とaria-modal="true"を備えた「正しく見える」モーダルで、Tabを3回押すとフォーカスがオーバーレイの裏へ抜けた。axeの違反は0件。同じマークアップをaria-hidden、inertに切り替えながら、キーボードフォーカスが実際にどこへ落ちるかを記録した。
· JA
「L.O. 21:30」はJSON-LDに書けない — 飲食店の営業時間マークアップ、3層検証の実測
自分で運営する飲食店推薦PWAにRestaurant構造化データを実装した記録。曜日別の平文営業時間をopeningHoursSpecificationへ変換し、同じ欠陥3つを型チェック・スキーマバリデーター・ランタイムゲートに順に流して、どの層が何を捕まえるかを測った。MEOへの効果は公式ドキュメントを引いて正直に線を引く。
· JA
unloadは弾かれ、beforeunloadは通った: bfcache実測6本
「戻る」が一瞬で開くかどうかは好みではなく計測対象だ。阻害要因を一つずつだけ仕込んだページを6枚用意し、実際にback遷移をかけてpageshow.persistedとnotRestoredReasonsを受け取った。unloadは弾かれ、beforeunloadとno-storeは通った。
· JA
統合RSSの1,248件に言語表示がゼロだった話
W3Cが2026-07-16に公開した文字列の言語・方向メタデータ草案。その基準で四言語ブログを監査したら、統合RSS 1,248件が言語表示なしで配信されていた。first-strong推定が14件中4件外れる実測、dc:languageでの修正、回帰を止めるビルドゲートまで。
· JA
WCAG 2.2の最小ターゲットサイズ、92点の緑の裏に隠れたAA不合格
指先が滑る22×22のボタンに、Lighthouseはアクセシビリティ92点を出した。WCAG 2.2が新設したSC 2.5.8(最小24×24)をサンドボックスに仕込み、自作スクリプトとLighthouseで二度測った。自動ツールはサイズ違反こそ捕まえるが、例外判定は人間に丸投げする。24pxの円が重なるかを計算するスペーシング例外まで、実測ログとCSS修正で整理する。
· JA
AI Overview に引用されるかを決める meta 一行 — robots スニペット指示子を実測する
nosnippet の一行は、もう検索スニペットを消すだけではない。Google 公式ドキュメントは、この指示子が AI Overview・AI Mode への引用入力まで遮断すると明記した。二つのページを作り、パーサーで max-snippet・data-nosnippet の実効果を測り直した。
· JA
CSS一行で強制レイアウトが27.3ms→1.8msに — content-visibility実測
同じHTML・同じバイト数なのに、CSSを一行足しただけで強制レイアウトが27.3msから1.8msに縮んだ。400セクションのページを二つ作りChromeトレースで content-visibility: auto の削減量を測り、contain-intrinsic-size と落とし穴まで整理する。
· JA
クリック1回に264ms — 同じ処理を刻んだら56ms、INP実測記
INPは2024年にFIDを置き換えたCore Web Vitalsの応答性指標だ。同じ220msの処理を一気に回す場合とscheduler.yieldで刻む場合をEvent Timing APIで直接測定し、264ms(改善が必要)が56ms(良好)まで落ちる過程をコードとログで詳しく記録した。
· JA
ボタンを押す瞬間、画面がずれた — CLS 0.559を0.014まで下げた実測記録
読み込み中にレイアウトがずれるのは好みの問題ではなく、数値で測れる指標だ。同じページを二通り作り、layout-shift PerformanceObserverでCLSを計測。画像サイズの予約とスロット確保だけで0.559(POOR)を0.014(GOOD)まで下げた過程を、コードとログで残す。
· JA
ヒーロー画像は117KB、なのにLCPは1.2秒 — ブラウザが画像を「遅れて見つける」理由
LCPが遅いのは画像が重いからではない。ブラウザがその画像を「いつ発見するか」の問題だ。CSS背景画像がプリロードスキャナに見えない現象をChrome DevToolsで実測し、fetchpriority・preload・レンダーブロッキング除去でLCP 1247msを109msまで落とした記録。
· JA
構造化データはデプロイ前に落とす — JSON-LDをCIで自動検証する
JSON-LDパーサーが通しても検索エンジンには読めないマークアップがある。schema.orgの@vocabのせいで、タイポも大文字小文字の誤りも正常なJSON-LDとして展開される。60行のスキーマ対応バリデーターを書き、CIでデプロイ前に捕まえた実測記録。
· JA
自動アクセシビリティ検査が緑になっても残る四つの壁
チェックアウトページ一枚にWCAG違反を八つわざと埋め込み、axe-coreで走らせた。ルール型の四つは捕まったが、人間の判断が要る四つは緑の裏にそのまま残った。自動化が構造的に見られないものと、その穴を埋める手動レビューのチェックリストを、実測ログとともにまとめる。
· JA
JSON-LD vs Microdata vs RDFa — 構造化データの構文、いつどれを使うか(実測比較)
同じProductエンティティを三つの構文で書き、パーサーに通してバイト数と壊れやすさを実測した。Googleは三つを同等に扱う。ならJSON-LDを勧める本当の理由は順位ではなく、リデザインで生き残る結合度だった。公式ドキュメントと再現ログで整理する選択基準。
· JA
アクセシブルネームがずれると、音声操作もAIエージェントもボタンを押せない
ボタンにaria-labelを付けたのに、アクセシビリティツリーは画面に出ていない文字を読んでいる。WCAG 2.5.3 Label in Nameの違反をサンドボックスで再現してツリーで確認し、Lighthouse 13.3.0の新カテゴリAgentic Browsingで0点が100点に変わる過程を実測した。
· JA
AIクローラーはあなたのJavaScriptを実行しない
GPTBotもClaudeBotもJSをレンダリングしない。CSRページがAI検索に見えない理由をcurlで再現し、サーバーサイドで直す手順をまとめた。
· JA
sitemap.xmlでGoogleが本当に読むのは lastmod だけだ
priority 1.0 に changefreq always を付けても、Googleは全部捨てる。公式ドキュメントが使うフィールドは lastmod ひとつ。しかも検証可能なほど正確なときだけ使う。三種類のsitemapを公式XSDで実際に通し、何が検証を通り、何が黙って無視されるかを実測した。
· JA
同じマークアップ、違う判定 — axe-coreをCIに入れるとcolor-contrastが静かに消える理由
AIが吐き出した予約ウィジェットを1つ、jsdomと実ブラウザでそれぞれaxe-coreに通してみた。構造的な違反4件はブラウザなしでも捕まったが、color-contrastだけjsdomではincompleteに落ちた。なぜそうなるのか、カバレッジの穴を開けないためにCIパイプラインをどう2段に組むかを実測ログとともにまとめた。
· JA
技術SEO監査を5日間回した — 直した5項目より効いたのはゲートだった
4言語ブログを5日間、実測で監査した。relatedPostsの404が12件、hreflang破損4ペア、レンダーブロッキングのフォントCSS 405KB、翻訳ドリフト21件、断片化したJSON-LD 7ブロック。全部直した。だが本当の成果は、これらが二度と戻れないようにしたビルドゲートだ。実測ログと検査器のコードまで。
· JA
JSON-LDを一つの@graphに束ねる — 散らばった構造化データを検索とAIが読むエンティティモデルへ
自分のページのJSON-LDを検証ツールにかけたら、三つの島にバラバラだった。@idのノード参照でOrganization・WebSite・Articleを一つの@graphに繋ぎ、jsonldで連結性を実測。3コンポーネントが1つに統合される過程と、Googleが保証しない点まで。
· JA
hreflangは双方向でなければならない — 4言語ブログを自分で監査して見つけたトップページのバグ
30行のチェッカーを自サイトのビルド成果物に直接走らせた。ブログ記事248本のhreflangクラスターは全部通ったのに、トップページだけが引っかかった。Google公式の相互リンク規則、実測ログ、3つの実装方法の比較、そして開発者がすぐ適用できる修正コードまでまとめた。