【検証】AIへの「アクセシビリティ指示」でデザインシステムの実装品質はどう変わるか

概要

Claude CodeのSkills機能を用い、AIへのアクセシビリティ指示がデザインの実装品質に与える影響を、Lighthouseスコアや実測コントラスト比で定量的に検証したレポート。

詳細内容

この記事では、Claude Codeを使用してモダンなLiquid Glass風デザインシステムを構築する際、「アクセシビリティ指示」の有無によって成果物がどう変化するかを実験しています。デジタル庁のガイドブックをベースにした具体的な指示を加えることで、メディアクエリ（prefers-reduced-motion等）への対応やフォーカスリングの視認性は向上しましたが、一方でLighthouseスコアだけでは検出できないコントラスト比の不足や、HTMLセマンティクスの実装漏れといった課題も明らかになりました。特に、AIへの指示ファイル（SKILL.md）が長すぎると後半の指示が読み飛ばされる傾向があり、ファイルを分割・構造化する運用の重要性を指摘しています。AIによる自動生成の限界と、最終的な「人の目によるチェック」の必要性を実証する内容です。

元記事を読む他のサマリーを見る