Penpotをコードとして掌握せよ：アクセシビリティを「デザイントークン」からCI/CDで完全自動化する極意
世の中の「アクセシビリティ・ガイド」の9割は、デザイナーに「コントラスト比に気をつけましょう」と説教するだけの無意味なマニュアルだ。我々が知りたいのは、「WCAG 2.1/2.2基準を、デザインの初期段階で、かつ人的ミスを完全に排除した状態でいかにCI/CDパイプラインに組み込むか」という一点に尽きる。
Penpotはオープンソースであり、その実体はSVGとCSSの純粋な抽象化だ。このツールをただの「お絵かきソフト」として使うのは、フェラーリで近所のコンビニに行くようなものだ。本稿では、Penpotをパイプラインのソースとして再定義し、アクセシビリティを「品質」ではなく「コードベースの制約」に昇華させる手法を伝授する。
—
1. Penpot内部構造のハック：カラー選定を「制約」に変える
Penpotの強力な武器は、そのデザインデータがJSON形式でエクスポート可能であることだ。GUI上でアクセシビリティをチェックする時代は終わった。我々は、「カラーパレットのバリデーション」をデザインフェーズのフックにする。
コントラスト比の動的検証スクリプト (Node.js/TypeScript)
PenpotのAPIやエクスポートデータから、コントラスト比を計算し、基準を満たさないカラーペアをコミット前に弾くスクリプトの断片を示す。
// デザイナーが定義したトークン（JSON）を読み込み、WCAG基準を自動検証
import { hexToRgb, getContrastRatio } from ‘./a11y-utils’; // 独自実装の計算ロジック
interface ColorToken { name: string; hex: string; }
const palette: ColorToken[] = JSON.parse(fs.readFileSync(‘tokens.json’, ‘utf-8’));
// WCAG AA基準: 通常テキストで4.5:1以上
const MIN_CONTRAST = 4.5;
function validatePalette(background: string, foregrounds: ColorToken[]) {
foregrounds.forEach(fg => {
const ratio = getContrastRatio(background, fg.hex);
if (ratio < MIN_CONTRAST) {
console.error(`[A11y Fail] ${fg.name} on ${background}: ${ratio.toFixed(2)}`);
process.exit(1); // ここでCIを落とすのが「伝説」の流儀
}
});
}
---
2. デザインシステムを「DevOps」の最前線へ
真のエンジニアリングにおいて、アクセシビリティは「後付けのチェック」であってはならない。Penpotのデザインシステムを、CSS変数（Custom Properties）と直接リンクさせるパイプラインを構築せよ。
Penpot → Figma/CSS トークン同期アーキテクチャ
1. Penpot API経由のデータ抽出: WebhookあるいはCLIツールを用いて、Penpotの`colors`および`typography`オブジェクトを抽出する。
2. トークン・トランスパイラ (Style Dictionary) への流し込み: 抽出したデータをJSONとして正規化し、`style-dictionary`で各プラットフォーム向けにビルドする。
3. 静的解析によるコントラスト自動計算: ビルドプロセス中に`postcss-contrast`のようなプラグインを走らせ、生成されたCSS変数のコントラスト比をブラウザのレンダリング前に算出する。
これにより、デザイナーがPenpotで色を変更した瞬間、CI上で「その色はアクセシビリティ基準を満たしていない」と検知されるエコシステムが完成する。
—
3. パフォーマンスとメモリ最適化：大規模デザインシステムの管理術
Penpotを大規模プロジェクトで運用すると、コンポーネント数が増加し、ブラウザのメモリ消費が指数関数的に増大する。これを回避し、かつアクセシビリティ情報を保持し続けるためのハックを記す。
- コンポーネントの「コード化」による軽量化: 複雑なUIパーツはPenpot上で詳細に描き込まず、デザインシステムの一部として「シンボル/コンポーネント」のプロキシ（外枠）のみを配置せよ。中身のロジックとアクセシビリティ（ARIA属性等）は、Storybook側のコンポーネントで管理し、Penpotはあくまで「配置のガイド」として運用する。
- メモリリークの排除: Penpotの重いファイルは、不要なレイヤーを非表示にするだけでなく、API経由で「不要なメタデータを削除した軽量版JSON」を生成し、それを参照用としてGit管理せよ。
—
4. 伝説的アーキテクトからの提言：ツールに支配されるな
多くのチームが「Penpotの機能でアクセシビリティをチェックできないか？」と嘆く。だが、ツールに依存するな。ツールはデータを出力する装置に過ぎない。
「アクセシビリティは、デザインではなく、ビルドの制約である」
このパラダイムシフトを受け入れろ。デザイナーには「アクセシビリティを意識せよ」と言うのではなく、「コントラスト比の低いカラーパレットは、システムがビルドを通さない」という現実を突きつけること。 これが、プロダクトのUXを物理的に担保する唯一の道だ。
実践的チェックリスト
- [ ] PenpotのカラーパレットをJSONで書き出し、CIパイプラインでWCAGチェックを自動化しているか？
- [ ] コンポーネントのアクセシビリティ注釈をPenpotの「Description」フィールドに入れ、それをコード生成時に自動で `aria-` 属性にマッピングしているか？
- [ ] CI/CDで生成された静的サイトに対し、`axe-core` を走らせ、Penpotの設計意図と乖離がないかを確認しているか？
この領域は、単なるデザインスキルではない。システムアーキテクチャそのものだ。Penpotを使いこなすのではない。Penpotを、品質保証のための強力な「入力デバイス」として再構築せよ。
健闘を祈る。貴殿のコードとデザインが、誰にとっても「アクセス可能」であることを信じている。