Khan Academy、AI活用のアクセシブルなデザインシステムを構築
- •Khan Academyが、グローバルなアクセシビリティと規模拡大に最適化した新しい「Wonder Blocks」カラーシステムを発表。
- •新しいセマンティックアーキテクチャにより、Intensity Scalesを用いてデジタルインターフェース全体で一貫したコントラスト比を確保。
- •デザインチームがClaudeを活用し、トークンの自動生成を行うカスタムパレットジェネレーターを開発。
Khan Academyは、従来の硬直化し限定的だったカラーパレットを刷新し、高度なセマンティックアーキテクチャへと移行した「Wonder Blocks」デザインシステムを公開した。この再構築は、厳格なアクセシビリティ基準を維持しつつ、世界中の学区にいる多様な学習者をサポートする必要性から生まれたものである。色の名前を具体的な外見ではなく、機能的な役割に基づいて定義するSemantic Tokensを採用したことで、異なるテーマやインターフェースの要件にシームレスに適応できる柔軟なフレームワークが完成した。
新システムの核となるのは、色をSubtle（控えめ）、Default（標準）、Strong（強調）の3段階に分類する「Intensity Scale」だ。この階層構造により、背景や文脈に関わらず、視覚的な重みとコントラストが一貫して保たれる仕組みである。また、テキストのコントラスト比を最低4.5:1以上に保つよう、アクセシビリティ基準に照らした厳格なストレステストも実施された。こうした数学的なアプローチにより、視覚障害を持つ学生や、教室で低品質のディスプレイを使用するユーザーに対しても、確実な視認性を保証している。
デザインとAIの融合という点において、エンジニアリングチームがClaudeを活用して独自のジェネレーターツールを開発したことは特筆に値する。このツールは新しいスキーマに基づいてプリミティブパレットやSemantic Tokensの作成を自動化し、迅速な反復試行とエクスポート可能なコード生成を可能にした。HSL Spaceにおける色間隔の複雑な計算をAIに任せることで、ビジュアルデザインから実装レベルのソフトウェア開発への橋渡しを効率化し、プラットフォームの成長に合わせた拡張性を確保したのである。