AIを使って、授業で使うアプリやプリントを自分で作る先生が増えてきました。そのとき、「どのくらいの文字の大きさなら読みやすい？」「この色の組み合わせで見えにくい子はいない？」と迷ったことはありませんか。
そんなときの目安になるのが、デジタル庁が公開している「デジタル庁デザインシステム」です。この記事では、先生がアプリやプリントを作るときに役立つ「見やすさの決まり」を、やさしくご紹介します。わくわく・多聞での取り入れ方もあわせてお伝えします。
この記事の要点
① デジタル庁デザインシステムは、ウェブサイトやサービスを誰にとっても使いやすく作るための決まりと部品の集まりです。だれでも無料で使えます
② 文字と背景の色の差は4.5:1以上、文字は16px以上、押す所は44px以上などの目安があります
③ わくわく・多聞では、これをもとに子ども向けに大きくした「工房の基本スタイル」を作り、授業アプリ工房に取り入れました
④ AIにアプリを頼むときは、「文字は18px以上」「○×の印も」などと一言添えるだけで、見やすさが変わります
1. デジタル庁デザインシステムとは
デジタル庁デザインシステムは、デジタル庁が公開している、ウェブサイトやサービスを「誰にとっても使いやすく」作るための決まりと部品の集まりです。色や文字などの基本の考え方、ボタンなどの画面の部品、使いやすさ・アクセシビリティのガイドラインでできています。
- アクセシビリティ（見えにくさや操作のしにくさがあっても使えること）を大切にしています
- 行政機関や公共性の高い組織のウェブサイトなどで使うことを念頭に作られていますが、だれでも無料で使えます
- 公式サイト：https://design.digital.go.jp/dads/（2026年11月時点で「β版 v2.18.2」）
自分たちに合わせて編集できる「ローカルデザインシステム」
デジタル庁デザインシステムには、各団体が自分たちのサイトやサービスに合わせて編集して使う「ローカルデザインシステム」の作り方が示されています。色や文字の大きさなどは変えてよい一方で、使いやすさの骨組みを守るために、変えてはいけない要件も決められています。
2. 先生にも役立つ「見やすさの決まり」
ローカルデザインシステムで守るべきとされている要件のうち、授業のアプリやプリントにも役立つものを選んでご紹介します。
| 決まり | 目安 | どうして大切か |
|---|---|---|
| 文字と背景の色の差（コントラスト比） | 文字は 4.5:1 以上、枠線など文字以外は 3:1 以上 | 薄い色の文字は、見えにくさのある人や、明るい教室では読みにくくなります |
| 文字の大きさ | 本文やボタンの文字は 16px 以上が基準 | 小さすぎる文字は、読むこと自体が負担になります |
| 行の高さ | 読み物の本文は、文字の大きさの 1.5倍以上 | 行と行がつまっていると、どこを読んでいるか分からなくなります |
| 押す所（ボタン）の大きさ | ボタンは 44×44px 以上 | 小さなボタンは、指先の操作がむずかしい人には押しにくくなります |
| キーボードで選んでいる場所の見せ方 | 外側が黒、内側が黄色の二重線。変えてはいけない | マウスを使わずにキーボードで操作する人が、今どこにいるかを見失わないため |
| 色だけで意味を伝えない | 色に、印や文字を添える | 色の見え方は人によってちがいます。赤と緑だけでは、区別できない人がいます |
出典：デジタル庁デザインシステムウェブサイト（https://design.digital.go.jp/dads/）のコンテンツをもとに、わくわくサイトが要約・編集して作成
3. わくわく・多聞での取り入れ方
わくわく・多聞では、デジタル庁デザインシステムをもとに、独自に編集して、次のように取り入れました。
授業アプリ工房：「工房の基本スタイル」
多聞の授業アプリ工房（12月1日から個人のPRO会員の特典）で作るアプリには、「工房の基本スタイル」が自動で入ります。
- 文字と背景の色の差は 4.5:1 以上（枠などは 3:1 以上）
- 使うのが子どもなので、文字は18px以上、押す所は48px以上と、基準（16px・44px）より大きくしました
- キーボードで選んでいる場所を、黄色と黒の二重の枠で必ず見せます
- 正解・まちがいは、色だけでなく ○・× の印でも伝えます
- 「🌱 やさしさ点検」で、色の差や文字・押す所の大きさを測れます
- 見た目を「ふつう」「やわらか」（刺激に敏感な子に）「はっきり」（見えにくさがある子に）から選べます
※授業アプリ工房で作ったアプリの見本です。左から「ふつう」「やわらか」「はっきり」。
くわしくは「【特集】AIと相談して授業アプリを作る「授業アプリ工房」が12月1日スタート」をご覧ください。
授業アプリライブラリ：「🌱 工房の基本スタイルを使用」の札
授業アプリライブラリでは、工房の基本スタイルを使ったアプリに「🌱 工房の基本スタイルを使用」の札が付くことがあります（審査する人が承認のときに決めます）。
4. 先生が自分で作るときのコツ（AIへの頼み方の例）
ChatGPT や Gemini などのAIでアプリを作るときも、頼み方に一言添えるだけで、見やすさが大きく変わります。
- 「文字は18px以上、ボタンは指で押しやすく48px以上にしてください」
- 「正解・まちがいは、色だけでなく○×の印でも表示してください」
- 「背景と文字の色の差をはっきりさせてください」
- 「キーボードでも操作できるようにしてください」
プリントやスライドを作るときも、「文字の大きさ」「色の差」「色だけで伝えない」の3つを意識するだけで、読みやすさが変わります。
5. おわりに
見やすさ・使いやすさの工夫は、特別な支援が必要な子だけでなく、クラスのみんなにとって読みやすく、使いやすい教材につながります。デジタル庁デザインシステムは、そのための頼れる目安です。アプリやプリントを作るとき、ぜひ思い出してみてください。
※この記事は、デジタル庁デザインシステムを参考に、わくわくサイトが独自にまとめたものです。デジタル庁が作成・確認したものではありません。
関連記事・リンク
わくわくサイト｜本吉研究室
お問い合わせは、サイト内のフォームよりお願いいたします。
コメント