{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreicpzkbrd4mrp53w32fksm3v5tgd5keoa5zfalbcl7hrw73uf5qqui",
"uri": "at://did:plc:ctnrfotecqqhvo7kl5cgtpwt/app.bsky.feed.post/3mf6rzrdqa5q2"
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreihlt6svflmsg3cbkkap4dunsdy4djw6ju36xths4krzl5csb3fixa"
},
"mimeType": "image/png",
"size": 657712
},
"path": "/entry/2026/02/19/130000",
"publishedAt": "2026-02-19T04:00:00.000Z",
"site": "https://toranoana-lab.hatenablog.com",
"tags": [
"github.com",
"github.com",
"Claude Code Docs: Add supporting files",
"デジタル庁「ウェブアクセシビリティ導入ガイドブック」",
"WCAG 2.2",
"WCAG 2.2 日本語訳",
"WAIC（ウェブアクセシビリティ基盤委員会）",
"Apple: Adopting Liquid Glass",
"Meet Liquid Glass - WWDC25",
"NN/g: Liquid Glass Is Cracked, and Usability Suffers in iOS 26",
"Infinum: Apple's iOS 26 Liquid Glass: Sleek, Shiny, and Questionably Accessible",
"Bento Grids 事例集",
"Anthropic: Equipping agents for the real world with Agent Skills",
"Claude Code Skills ドキュメント",
"Colour Contrast Analyser",
"axe DevTools",
"Chrome Lighthouse",
"toranoana-lab.co.jp",
"@references",
"@media"
],
"textContent": "【検証】 AIへの「アクセシビリティ指示」で デザインシステムの 実装品質はどう変わるか こんにちは。虎の穴ラボ株式会社のKTです。\n\n最近はClaude Codeを使って個人的に欲しいなと思うWEBアプリを細々と開発しています。\n\n開発しているとき、画面にデザインを適用すると一段とモチベーションが上がりませんか？（私は上がります💪）\n私自身はデザインの素養はないのですが、Claude Codeの公式プラグイン「frontend-design」や自作のSkillsを使って試行錯誤しながらデザインを適用しています。\n\n手探りでデザインシステムを作る中でふと思ったのが **「トレンドのデザインとアクセシビリティの両方を考慮したスタイルが一気に適用できたらいいのに」** ということでした。\nアクセシビリティをどう言語化したら良いのか、どのように指示すればデザインと両立できるのか、コツを掴みたいと思ったのです。\n\nそこで、本記事では Claude Code の Skills機能を使い、Liquid Glass風のデザインシステムを「アクセシビリティ指示なし」と「アクセシビリティ指示あり」の 2 パターンで実装して、実測データをもとに結果を比較してみました。\n\n## 実験の設計\n\n今回Liquid Glass風を選定した理由は「Liquid Glass風にして」「トレンドのデザインにして」と指示した時に背景と文字色のコントラスト比が低いデザインが生成がちな印象があったためです。\n\nこの問題がアクセシビリティについての指示追加でどれだけ改善するのかを検証します。\n\n### サンプルサイト\n\n架空のプロジェクト管理SaaS「Sample Dashboard」を題材に、以下の 3ページを作成しました。\n\n * **LP** （ランディングページ）：Hero セクション、Bento Grid の機能紹介、料金プラン\n * **Login** ：ログイン / サインアップフォーム、バリデーション\n * **Dashboard** ：サイドバー、統計カード、タスクテーブル、Bento Grid レイアウト\n\n\n\n技術スタックは Next.js（App Router）+ TypeScript + Tailwind CSS + shadcn/ui です。\n\n### 3パターン比較\n\nパターン | 内容\n---|---\nベースライン | shadcn/ui デフォルトのみ。カスタムスタイルなし\nwithout-a11y | Liquid Glass + Bento Grids のデザインスキルを適用。アクセシビリティの指示なし\nwith-a11y | 同じデザインスキルに、デジタル庁「ウェブアクセシビリティ導入ガイドブック」の要件を追加\n\nアクセシビリティの言語化としてすぐに参考にできそうだったのが「ウェブアクセシビリティ導入ガイドブック」だったため採用しました 。 また、いずれのパターンでも「frontend-design」スキルは使用していません。\n\n### 評価基準\n\n * Lighthouse アクセシビリティスコア\n * コントラスト比（Colour Contrast Analyser で実測）\n * セマンティック HTML の構造（DevTools で確認）\n * メディアクエリ対応（`prefers-reduced-motion`, `prefers-contrast`）\n * スキルに書いた指示の実装率\n\n\n\n## Claude Code Skills とは\n\nClaude Code の Skills は、タスク固有の知識や手順をまとめたフォルダで、Claude が必要に応じて動的に読み込む仕組みです。プロジェクトの `.claude/skills/` ディレクトリに `SKILL.md` ファイルを配置すると、Claude Code がタスクに応じて自動的にスキルを参照してくれます。\n\n\n .claude/skills/ └── design-pattern-with-a11y/ └── SKILL.md\n\nスキルファイルは YAML フロントマター（名前と説明）と Markdown 本文で構成されています。フロントマターの `description` が、Claude がスキルを使うかどうかを判断するトリガーになります。\n\n今回は、このスキルファイルに「デザインシステムの CSS 定義」と「アクセシビリティの実装ルール」を記述して Claude Code に渡すことで、デザインとアクセシビリティの両立を試みました。\n\n## ベースライン：shadcn/ui デフォルト\n\nまず shadcn/ui のデフォルトコンポーネントだけで 3ページを実装しました。これがデザインスキル適用前の比較基準になります。\n\nClaude Code への指示はこちらです：\n\n\n @references/baseline-spec.md を読んで、この仕様書通りに3ページを実装してください。 以下のルールを守ってください： - shadcn/ui のデフォルトテーマのみ使用し、カスタムスタイルは一切加えない - 必要な shadcn/ui コンポーネントをインストールして使用する - ダミーデータはハードコードで構いません - 3ページ: / (LP), /login (ログイン), /dashboard (ダッシュボード)\n\nSaaSダッシュボード風と指示しているため、AI生成ではおなじみのキャッチコピー付きのサンプルサイトが作成できました。\n\nサンプルサイトのベースライン（LP）\n\nサンプルサイトのベースライン（Login）\n\nサンプルサイトのベースライン（Dashboard）\n\n## without-a11y：Liquid Glass + Bento Grids\n\n### スキルファイル\n\n以下が without-a11y のスキルファイル全文です。Liquid Glass の CSS 変数、Glass マテリアルのバリエーション、Bento Grid レイアウト、タイポグラフィ、コンポーネントスタイル、アニメーションを定義しています。**アクセシビリティに関する指示は意図的に含めていません。**\n\n※ SKILL.md の全文はリポジトリの `skills-master/design-pattern-without-a11y/SKILL.md` を参照\n\ngithub.com\n\n### Claude Code への指示\n\n\n Liquid Glass + Bento Grids デザインスキルを使って、現在の Sample Dashboard の3ページすべてに デザインを適用してください。 以下のルールを守ってください： - SKILL.md に定義された CSS 変数、Glass マテリアル、Bento Grid レイアウト、 タイポグラフィ、コンポーネントスタイル、アニメーションをすべて適用する - ダークテーマをデフォルトにする（LP はライトモードも可） - 既存の機能やコンテンツは変更せず、見た目のみ変更する - shadcn/ui のコンポーネントは引き続き使用するが、スタイルを上書きする\n\n### 結果\n\nサンプルサイトのアクセシビリティ指示なし版（LP）\n\nサンプルサイトのアクセシビリティ指示なし版（Login）\n\nサンプルサイトのアクセシビリティ指示なし版（Dashboard）\n\nLiquid Glass 風の半透明マテリアルと Bento Grid のレイアウトが適用されて、見た目はかなりモダンな印象になりました。でも、この時点で実はいくつかの問題が潜んでいます（詳細は後述の計測結果で！）。\n\n## with-a11y：デジタル庁ガイドライン反映\n\n### スキルファイルの差分\n\nwith-a11y のスキルファイルは、without-a11y の全内容に加えて、★マーク付きでアクセシビリティ指示を追加したものです。\n\n**追加した原則（5 項目）：**\n\n * **Contrast Guaranteed** ：Glass マテリアル上のテキストでコントラスト比 4.5:1 以上を確保（WCAG 1.4.3）\n * **Not Color Alone** ：色だけで情報を伝えない。色 + アイコン + テキストの 3 重で区別（WCAG 1.4.1）\n * **Keyboard Navigable** ：すべてのインタラクティブ要素にフォーカスインジケーターを設定（WCAG 2.1.1, 2.4.7）\n * **Semantic Structure** ：適切な HTML 要素と ARIA 属性を使用（WCAG 1.3.1, 1.3.2）\n * **Reduced Motion Respected** ：`prefers-reduced-motion: reduce` でアニメーション無効化（WCAG 2.3.3）\n\n\n\n**追加した実装ルール（12 項目）：**\n\n\n 9. コントラスト検証必須（Glass 背景上のテキスト 4.5:1 以上） 10. フォーカスリング必須（Glass 背景に溶け込まない明るい色） 11. 色だけで情報を伝えない（アイコン・テキスト併用） 12. ラベル必須（プレースホルダーをラベル代わりにしない） 13. DOM順序 = 視覚順序（CSS order 禁止） 14. 見出し階層の遵守（h1→h2→h3、レベル飛ばし禁止） 15. ランドマーク設定（header, nav, main, footer + aria-label） 16. スキップリンク設置 17. prefers-reduced-motion 対応 18. prefers-reduced-transparency 対応 19. prefers-contrast: more 対応 20. 最小タッチターゲット 44x44px\n\n**CSS の具体的な変更点：**\n\n項目 | without-a11y | with-a11y | 変更理由\n---|---|---|---\nテキスト不透明度（primary） | `rgba(255,255,255, 0.90)` | `rgba(255,255,255, 0.95)` | コントラスト確保\nテキスト不透明度（secondary） | `rgba(255,255,255, 0.60)` | `rgba(255,255,255, 0.75)` | コントラスト確保\nテキスト不透明度（tertiary） | `rgba(255,255,255, 0.40)` | `rgba(255,255,255, 0.60)` | コントラスト確保\nGlass 背景不透明度 | `rgba(255,255,255, 0.08)` | `rgba(255,255,255, 0.12)` | テキスト可読性\nフォーカスリング | 未定義 | `3px solid oklch(0.80 0.18 240)` | Glass 上での視認性\n`prefers-reduced-motion` | 未定義 | `animation: none` | 動作制約対応\n`prefers-contrast: more` | 未定義 | Glass を不透明化 + ボーダー強化 | 高コントラスト対応\n`prefers-reduced-transparency` | 未定義 | `backdrop-filter: none` | 半透明制約対応\n\n※ SKILL.md の全文はリポジトリの `skills-master/design-pattern-with-a11y/SKILL.md` を参照\n\ngithub.com\n\n### Claude Code への指示\n\n\n アクセシブルな Liquid Glass + Bento Grids デザインスキルを使って、 現在の Sample Dashboard の3ページすべてにデザインを適用してください。 まず ../references/20251016_introduction_to_web_accessibility.pdf を読んで、 ウェブアクセシビリティの要件を把握した上で、SKILL.md のルールに従って実装してください。 以下のルールを守ってください： - SKILL.md に定義された CSS 変数、Glass マテリアル、Bento Grid レイアウト、 タイポグラフィ、コンポーネントスタイル、アニメーションをすべて適用する - ★マーク付きのアクセシビリティ実装ルール（20項目）を必ずすべて適用する - ダークテーマをデフォルトにする（LP はライトモードも可） - 既存の機能やコンテンツは変更せず、見た目のみ変更する - セマンティック HTML 要件（スキップリンク、aria-label、scope 等）を必ず実装する - prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast に対応する\n\n### 結果\n\nサンプルサイトのアクセシビリティ指示あり版（LP）\n\nサンプルサイトのアクセシビリティ指示あり版（Login）\n\nサンプルサイトのアクセシビリティ指示あり版（Dashboard）\n\n見た目は without-a11y とほぼ同じ Liquid Glass デザインを維持しつつ、アクセシビリティが強化されています。パッと見ではほとんど区別がつかないのがポイントです。\n\n## 【比較検証】Lighthouseスコアとコントラスト比の実測結果\n\nデザイン適用後のサイトの状態を実際に数値で比較してみましょう。\n\n### Lighthouse アクセシビリティスコア\n\nページ | without-a11y | with-a11y\n---|---|---\nLP | 98 | 96\nLogin | 95 | 96\nDashboard | 93 | 96\n\nこれは意外な結果でした。\n**without-a11y（アクセシビリティ指示なし） の LP（98）が with-a11y（指示あり）（96）を上回っています！**\nLighthouse の自動チェックだけではアクセシビリティの品質を正しく評価できないことがわかります。\n\nデジタル庁のガイドブックにも、まさにこの点が指摘されています。\n\n> チェックツールで見つけられる問題は、ウェブアクセシビリティの問題の2割から3割程度です。ウェブアクセシビリティは基本的に「人がチェックする必要がある」と考えましょう。\n>\n> ― 出典：デジタル庁「ウェブアクセシビリティ導入ガイドブック」（DS-671.2、2025年10月16日版）p.13\n\n### コントラスト比\n\nColour Contrast Analyser を使って、画面上のレンダリング結果から直接計測しました。\nテキストの文字色と、文字に近い位置の背景色をスポイトツールでそれぞれ拾い、コントラスト比を算出しています。\nLiquid Glass風のような半透明背景では DevTools の自動計算が効かないため、この方法で計測しています。\n\nWCAG AA 基準は通常テキストで 4.5:1、大テキスト（24px 以上太字 / 29px 以上通常）で 3:1 です。\n\n**LP - Hero テキスト（大テキスト、基準 3:1）：**\n\n箇所 | without-a11y | with-a11y | 判定\n---|---|---|---\n「プロジェクト管理を、」 | 16.2:1 | 15.8:1 | 両方 ✅\n「もっとシンプルに。」左端 | 7.5:1 | 6.5:1 | 両方 ✅\n「もっとシンプルに。」右端 | 5.7:1 | 5.8:1 | 両方 ✅\n\nHero テキストは大テキストのため基準が緩く、両パターンとも合格です。ただし Liquid Glass の特性上、グラデーション背景の位置によってコントラスト比が大きく変動する点（左端 7.5:1 vs 右端 5.7:1）には注意が必要です。\n\n**LP - Glass カード上の本文（通常テキスト、基準 4.5:1）：**\n\n箇所 | without-a11y | with-a11y | 判定\n---|---|---|---\n「タスク管理」カード | 6.7:1 | 8.6:1 | 両方 ✅、with-a11y が +1.9 向上\n\nGlass の不透明度を 0.08 → 0.12 に引き上げた効果が出ています。\n\n**Dashboard - バッジテキスト（通常テキスト、基準 4.5:1）：**\n\n箇所 | without-a11y | with-a11y | 判定\n---|---|---|---\nステータス「進行中」 | 3.8:1 ❌ | 4.4:1 ❌ | 改善したが未達（あと 0.1！）\nステータス「レビュー」 | 5.1:1 ✅ | 5.7:1 ✅ | +0.6 向上\nステータス「完了」 | 5.1:1 ✅ | 4.8:1 ✅ |\nステータス「未着手」 | 5.6:1 ✅ | 7.6:1 ✅ | +2.0 向上\n優先度「高」 | 3.5:1 ❌ | 3.3:1 ❌ | 未改善\n優先度「中」 | 4.9:1 ✅ | 5.6:1 ✅ | +0.7 向上\n優先度「低」 | 5.6:1 ✅ | 8.1:1 ✅ | +2.5 向上\n\n**Login - プレースホルダー（通常テキスト、基準 4.5:1）：**\n\n箇所 | without-a11y | with-a11y | 判定\n---|---|---|---\nプレースホルダー | 3.2:1 ❌ | 3.5:1 ❌ | 改善したが未達\n\nwith-a11y で「進行中」バッジは 3.8:1 → 4.4:1 と改善しましたが、基準の 4.5:1 にあと 0.1 届きませんでした。\n優先度「高」とプレースホルダーは両パターンとも不合格で、これらは人の手で修正すべき箇所です。\n\n### コントラスト比以外の差分\n\nここからがコントラスト比だけでは見えない、本当の差分です。\n\n項目 | without-a11y | with-a11y\n---|---|---\nスキップリンク | ❌ なし | ✅ あり\nフォーカスリング | あり（デフォルト） | ✅ あり（水色、視認性高い）\n`aria-label`（nav） | ❌ なし | ✅ あり\n`aria-current=\"page\"` | ❌ なし | ✅ あり\n`prefers-reduced-motion` | ❌ 変化なし | ✅ アニメーション停止\n`prefers-contrast: more` | ❌ 変化なし | ✅ 不透明度上昇（8.4:1→11.3:1）\n\n特に注目してほしいのが `prefers-contrast: more` の結果です。with-a11y では Glass カードのコントラスト比が **8.4:1 から 11.3:1 に向上** しました。without-a11y では何も変化しません。ユーザーが OS の設定でコントラストを上げても、対応していなければ意味がないということですね。\n\n#### 差分箇所の補足\n\nスキップリンク\n\nフォーカスリング\n\nコントラストを上げたとき\n\n### スキルに書いたが実装されなかった項目\n\nここも正直に報告します。以下の 3 項目は with-a11y のスキルファイルに明記したにもかかわらず、Claude Code が実装してくれませんでした。\n\n項目 | SKILL.md の指示 | 結果\n---|---|---\nテーブルの `<caption>` / `<th scope=\"col\">` | 「caption でテーブルの目的を示す、scope 属性で見出しセルの関連を明示する」 | 未実装\nバッジのアイコン併用 | 「各バッジにはアイコンも併用し、色だけに依存しない」 | 未実装\nエラー表示のアイコン併用 | 「エラー状態: 色だけでなくアイコンとテキストで伝える」 | 未実装\n\nCSS スタイルの指示（Glass の不透明度、フォーカスリング色、メディアクエリ対応）はほぼ忠実に反映された一方で、HTML のセマンティック構造や UI の細かい要素（アイコン併用）は反映率が低い傾向がありました。スキルに書けば全部やってくれるわけではない、というのは重要な学びです。\n\n### なぜ反映されなかったのか？\n\n原因の一つとして、**SKILL.md のファイルサイズが大きすぎた** ことが考えられます。今回の with-a11y の SKILL.md は約 890 行ありました。Claude Code の公式ドキュメントでは次のように推奨されています。\n\n> Keep SKILL.md under 500 lines. Move detailed reference material to separate files.\n>\n> ― Claude Code Docs: Add supporting files\n\n890 行の中にデザイン定義とアクセシビリティルールが混在していたため、ファイル後半にあった HTML 構造の指示（caption, scope, アイコン併用）が読み飛ばされた可能性があります。CSS の具体値はファイルの前半〜中盤に集中しており、反映率が高かったことと整合します。\n\n対策としては、スキルファイルを以下のように分割する構成が考えられます。\n\n\n .claude/skills/liquid-glass-a11y/ ├── SKILL.md # 原則とルール一覧（500行以内） ├── references/ │ ├── glass-materials.md # Glass CSS 定義 │ ├── bento-grid.md # Bento Grid レイアウト │ ├── components.md # コンポーネントスタイル │ ├── animations.md # アニメーション定義 │ └── a11y-html-templates.md # セマンティック HTML テンプレート └── scripts/ └── contrast-check.sh # コントラスト比チェック用スクリプト\n\nSKILL.md 本体にはデザイン原則、アクセシビリティルール 20 項目、各ファイルの参照指示だけを記述し、CSS やHTML のコードブロックは `references/` 配下に移す形です。これなら Claude Code が必要な参照ファイルだけを段階的に読み込む（Progressive Disclosure）ので、指示の抜け漏れが減ることが期待できます。\n\n## まとめ：アクセシブルなデザインスキルの作り方\n\n### 3 つの結論\n\n**1. Lighthouse スコアだけではアクセシビリティは測れません。**\n\nwithout-a11y の LP は 98 点で、with-a11y の 96 点を上回りました。\nしかし、実際には without-a11y にはコントラスト不合格 4 箇所、メディアクエリ未対応、スキップリンクなし、ARIA 属性なしという問題があります。\n自動チェックツールが検出できるのは問題の 2〜3 割だという事実を、今回の実験データで裏付けることができました。\n\n**2. スキルにアクセシビリティ指示を入れることで、確実に改善する領域があります。**\n\n特に効果が高かったのは以下の項目です。\n\n * **メディアクエリ対応** （`prefers-reduced-motion`, `prefers-contrast`）：CSS レベルの指示なので反映率が高いです\n * **フォーカスリングの色指定** ：具体的な CSS 値を示すと忠実に実装されます\n * **ARIA 属性** （`aria-label`, `aria-current`）：追加するだけなのでコストが低いです\n * **スキップリンク** ：HTML テンプレートを示すと確実に実装されます\n * **コントラスト比の底上げ** ：Glass 不透明度やテキスト不透明度の数値を具体的に指定した効果が出ています\n\n\n\n**3. スキルだけでは完全にはなりません。人のチェックが不可欠です。**\n\nスキルに書いても実装されなかった 3 項目があり、コントラスト不合格も 3 箇所残りました。\n今回参考にしたデジタル庁のガイドラインでも「ウェブアクセシビリティは基本的に人がチェックする必要がある」と述べられている通り、こうしたスキルはベースラインの底上げツールであって、現状は最終的な品質を人が担保する必要があります。\n\n### スキルファイル設計のコツ\n\n実験を通じてわかった、スキルファイルの書き方のポイントをまとめます。\n\n**反映されやすい指示の書き方：**\n\n * **CSS の具体値を示す** ：`rgba(255,255,255, 0.95)` のように数値で指定するとそのまま使われます\n * **メディアクエリの完全なコードブロックを示す** ：`@media (prefers-reduced-motion: reduce) { ... }` のように書くと効果的です\n * **CSS 変数のコメントに理由を書く** ：`/* ★ 0.08 → 0.12 に引き上げ（コントラスト確保） */` のようにすると、Claude が意図を汲み取りやすくなります\n\n\n\n**反映されにくい指示と対策：**\n\n * **HTML の構造指示** （caption, scope, アイコン併用）→ テンプレートの HTML コードブロックだけでなく、ルールセクションにも明示的に列挙しましょう\n * **「〜すべき」のような抽象的な指示** → 具体的なコードに落とし込む必要があります\n * **大量の指示の末尾にある項目** → 重要な指示ほど先頭に配置するのがおすすめです\n\n\n\n### 再現手順\n\n本記事の実験は以下のリポジトリで再現できます。ぜひ試してみてください！\n\n\n git clone https://github.com/tkana-dev/sample-dashboard cd a11y-skill-blog/sample-dashboard npm install # ベースライン git checkout baseline npm run dev # Liquid Glass（アクセシビリティ未考慮） git checkout without-a11y npm run dev # Liquid Glass（アクセシビリティ考慮） git checkout with-a11y npm run dev\n\n### 次にやりたいこと\n\n今回の実験では SKILL.md を 1 ファイルに全部詰め込んだ結果、一部の指示が反映されませんでした。\n実際にスキルを運用する際は、**公式ドキュメントの推奨に従って SKILL.md を 500 行以内に抑え、詳細な定義を`references/` に分割した構成**にすることで、指示の抜け漏れを防げるかもしれません。\nこの点は今後の課題として意識しておきたいと思います。\n\n## 参考リンク\n\n### デジタル庁・WCAG\n\n * デジタル庁「ウェブアクセシビリティ導入ガイドブック」\n * WCAG 2.2\n * WCAG 2.2 日本語訳\n * WAIC（ウェブアクセシビリティ基盤委員会）\n\n\n\n### Liquid Glass\n\n * Apple: Adopting Liquid Glass\n * Meet Liquid Glass - WWDC25\n * NN/g: Liquid Glass Is Cracked, and Usability Suffers in iOS 26\n * Infinum: Apple's iOS 26 Liquid Glass: Sleek, Shiny, and Questionably Accessible\n\n\n\n### Bento Grids\n\n * Bento Grids 事例集\n\n\n\n### Claude Code Skills\n\n * Anthropic: Equipping agents for the real world with Agent Skills\n * Claude Code Skills ドキュメント\n\n\n\n### チェックツール\n\n * Colour Contrast Analyser\n * axe DevTools\n * Chrome Lighthouse\n\n\n\n# 採用情報\n\n虎の穴ラボでは一緒に働く仲間を募集中です！\nこの記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。\ntoranoana-lab.co.jp",
"title": "【検証】AIへの「アクセシビリティ指示」でデザインシステムの実装品質はどう変わるか",
"updatedAt": "2026-02-19T04:00:00.000Z"
}