W-04
あいプリントLab
触れて学ぶ教材を、誰もが読める形で伝える
大学の 3D プリンターサークル公式サイトを全面改修しました。特別支援の現場で使う触察教材を、「読めること」を前提に発信するサイトです。
課題PROBLEM
現場の困りごとに合わせて教材を作る活動が、既成のページビルダーでは「何を・誰のために作っているか」まで伝わる形になっていませんでした。読者には視覚障害の当事者・保護者・特別支援の教員が含まれます。
自分の役割ROLE
情報設計、アクセシビリティ仕様、実装、公開まで担当。
制約CONSTRAINTS
- 読者に視覚障害・特別支援の関係者が含まれる
- 学生サークルの毎年の引き継ぎに耐えること
- サーバーや DB を持たない静的構成が望ましい
解決策SOLUTION
静的生成の公式サイト。文字サイズ切替・ハイコントラスト・スキップリンクを初期仕様にし、教材を「誰のどんな困りごとか」から並べる図鑑構成にしました。
判断の芯 — NARRATIVE
「読めること自体が、このサイトの本題だった。」
触察教材を紹介するサイトが読みにくいなら本末転倒です。読み手の幅を、そのまま設計の制約にしました。
アクセシビリティは後付けの配慮ではなく前提です。教材も「きれいな作品集」ではなく、現場の課題と解決の記録として並べています。
速く・壊れにくく・引き継ぎやすいことが、長く読まれ続ける条件でした。
重要な設計判断DECISIONS
NOTE 01 — 主判断
アクセシビリティを最初の仕様にする
文字サイズ・ハイコントラスト・スキップリンクを初期要件としました。
NOTE 02
教材を「教科 × 対象」で引ける図鑑にする
教員が「うちの授業で使えるか」をすぐ判断できる分類にしました。
NOTE 03
静的生成で壊れにくく
サーバーも DB も持たず、引き継ぎやすくしました。
NOTE 04
活動写真より教材の意図を語る
誰がどう使い、どう学ぶのかを本文で語ります。
体験への効き方FOR WHOM
拡大やハイコントラストで読みやすい形にし、教材の意図まで読めます。
過去事例と作れるものの幅をサイトで見渡せます。
活動の意義が言語化されたページを説明に使えます。
画面SCREENS
結果RESULTS
形態
静的生成の公式サイト
a11y
文字サイズ・コントラスト・スキップを初期実装
振り返りRETROSPECTIVE
見た目の刷新だけに寄せると、教材の「誰の困りごとか」が薄れます。カタログの並びを意図説明優先に戻したことで、サークルの活動とサイトの論点が一致しました。
いまの位置IN OPERATION
公開中。活動更新に合わせて保守しています。
TECH
Next.js ・ TypeScript ・ Tailwind CSS ・ Vercel ・ Claude Code