子どもの作ったゲームで、「赤い丸は敵、緑の丸は取っていい物」と説明されても、遊んでいる途中に迷ってしまうことはありませんか。好きな色を変える前に、取る物と避ける物へ、それぞれ違う形や模様を足す方法を試してみましょう。
この記事では、敵とアイテムの見た目を決めるための「見分け方の設計表」を紹介します。以下は家庭で取り組むための編集部の提案で、ゲームや会話は説明用の架空例です。受講生の実例や、効果を検証した教材ではありません。
最初に分けるのは、色ではなく「遊ぶ人にしてほしいこと」
まず、画面に出る物を「取る」「避ける」などの役割で分けます。色選びから始めず、遊ぶ人が何を判断するのかを書き出してください。
例えば、お菓子を集めるゲームなら、キャンディーは取る物、岩は避ける物です。ここで考えるのは点数ではなく、触れる前に両者を区別する手がかりです。
次に、その違いが色以外にもあるかを見ます。「赤い丸と緑の丸」なら、違いは色だけ。「包み紙の付いたキャンディーと角張った岩」なら、外形も違います。
W3Cのウェブアクセシビリティに関する解説では、情報の区別を色だけに任せず、形や文字なども使う考え方が示されています。詳しくはWCAG 2.2の「色の使用」の解説を参照できます。
ここでは、その考え方を家庭のゲーム制作の参考にします。この記事の手順を行うだけで、作品がアクセシビリティ基準全体に適合すると判断できるわけではありません。
好きな配色を残し、別の目印を足す
「敵は赤でないと嫌」「全部同じ色の世界にしたい」という作品でも、配色をやめる必要はありません。色とは別に、何を手がかりにしてもらうかを選びましょう。
| 目印の候補 | 作り方の例 | 選ぶときの注意 |
|---|---|---|
| 外形 | 取る物は星形、避ける物は岩形にする | 小さく表示した状態でも、輪郭の違いを確認する |
| 内側の模様 | 同じ丸でも、取る物には花、避ける物には斜線を描く | 細かい描き込みではなく、残したい目印を大きくする |
| 短い言葉 | 見本に「とる」「よける」と添える | 文字を読むことだけに任せず、絵の違いも用意する |
最初から全部を加えるのではなく、作品に合う目印を選んでください。例えば「宝石も敵も丸い形がいい」なら、外形を変えず、宝石には大きなひし形の模様、敵には太い斜線を入れる案があります。
ただし、斜線があるから敵だと自然に分かる、と決めつけないようにします。模様は区別する手がかりであり、役割の説明とは別です。最初の画面などに、実物と同じ絵を使った見本も置く設計にしましょう。
色を選び直す場合も、「この組み合わせなら誰にでも分かる」とは言い切れません。特定の配色を正解にするより、色が手がかりにならなくても残る違いを考えます。
書き写して使える「見分け方の設計表」
紙に次の項目を書き、変えたい物だけ埋めてみてください。すべてのキャラクターを描き直す表ではありません。
| 記入項目 | 取る物の例 | 避ける物の例 |
|---|---|---|
| 物の名前・役割 | キャンディー/取る | 岩/避ける |
| 今の見た目 | 緑の丸 | 赤い丸 |
| 残したい特徴 | 緑色と丸い中心 | 赤色 |
| 足す目印 | 両側に大きな包み紙を描く | 輪郭を角張らせる |
| 説明用の見本 | 同じ絵に「とる」を添える | 同じ絵に「よける」を添える |
| 別の場面でも守ること | 色違いでも包み紙を残す | 別の背景でも角張った形を残す |
最後の行は、途中で見た目を増やすときの約束です。最初の場面では包み紙のある物を取るのに、次の場面では同じ形の物を避ける、という変更を意図せず入れないようにします。
役割を逆転させる仕掛けを作りたいなら、その変更も別途伝える必要があります。初めての設計では、同じ目印に同じ意味を持たせる案から検討してください。
表を書き終えたら、「全部の色を同じ鉛筆で描くなら、何を残す?」と考えてみましょう。色の名前を使わずに目印を説明できれば、次の下描きへ進めます。
紙の下描きから、実際のゲーム画面へ移す手順
背景を描いた紙に、目印を置いてみる
キャラクターだけを白い紙に描くのではなく、ゲームで使う背景も簡単に描きます。その上へ、取る物と避ける物を置いてください。
例えば、森の背景に葉の形のアイテムを置く案なら、背景の葉と区別する特徴が必要かを検討します。アイテムだけ包み紙のある形にする、背景の細かな模様を減らすなど、対象と背景の両方から変更案を選べます。
実際に遊ぶ大きさで、残った目印を見る
描いているときの拡大表示だけで決めず、ゲーム画面に戻して確認します。見るのは「絵が上手か」ではなく、「包み紙や斜線が目印として残っているか」です。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
小さな模様が分からなくなった場合は、模様をさらに描き込む前に、太くする、外形の違いに替える、対象を大きくする、といった選択肢を比べてください。
説明用の見本も、新しい絵へそろえる
ゲーム中の絵を変えたら、遊び方を説明する画面の見本も更新します。説明には古い丸、ゲームには包み紙付きのキャンディーが出る、といった食い違いを残さないためです。
動いている間だけ模様が隠れるなら、目印を出す位置や向きを見直しましょう。色以外の違いを追加しても、判断が必要な場面で見えなければ、別の設計が必要です。
目印を増やしすぎたら、役割に関係する違いを残す
敵に斜線、王冠、文字、光る飾りを付けたところ、何を見ればよいか決めにくくなった。そんな場合は、装飾と役割を伝える目印を分けて整理します。
例えば、王冠が物語上の大切な特徴なら残し、避ける物を区別する目印は角張った輪郭にまとめる案があります。「王冠がある物は全部避ける」のか、「王冠は役割と関係のない飾り」なのかを、作る側で決めておきましょう。
また、音を足したい場合も、画面上の目印は残す方針にします。今回は、音を出さずに遊ぶ場面も想定した設計にしておくと、音の種類まで同時に作り込まずに進められます。
目標は、画面のすべてを説明することではありません。まずは「これは取る物か、避ける物か」という判断に必要な違いへ絞ってください。
よくある質問(FAQ)
敵もアイテムも、子どもが同じ色にしたがります
同じ色を残す案で構いません。例えば紫色で統一した世界なら、取る物には花形、避ける物には角張った外形を使うなど、色以外の違いを設計表に書いてみてください。
文字がまだ読めない幼児と作る場合は?
文字の説明を必須にせず、実物と同じ絵を使った見本を用意する案があります。紙の上で「こっちは集める物、こっちは避ける物」と役割を共有してから、絵の違いを決めてもよいでしょう。文字は保護者が補助的に添える程度から試せます。
白黒にして見分けられれば、誰でも遊べますか?
そうとは言えません。白黒の下描きは、色以外の手がかりを考えるための作業です。遊ぶ人それぞれの見え方を再現する検査ではなく、文字の読みやすさや操作のしやすさまで確認できる方法でもありません。
形を変えるプログラムが難しいときは、どこまで作ればよいですか?
まずは静止した絵と設計表までで構いません。使っている教材で外形を編集できるか、模様を追加する方が取り組みやすいかを確認してから選びます。ここではプログラムの動作変更まで必須にしません。
教室で、この見た目の工夫を相談できますか?
CotoMiraiは、子どもの興味・関心やレベルに合わせて目標を設定する個別指導を案内しています。プログラミング、ロボット、デジタルものづくりの取り組みについては、スクール利用・個別指導の案内で確認できます。
相談する場合は、「色は残したいが、敵とアイテムの形を変えたい」と設計表を使って伝える案があります。ただし、家庭の作品を体験中に編集できるか、この課題を当日扱えるかは公開情報では不明です。希望する場合は事前に確認してください。
作りたい見た目と、伝えたい役割を一緒に考える
家庭では、まず取る物と避ける物を並べ、好きな色を残したまま足せる目印を選んでみてください。作品全体を作り直さず、対象を絞って設計するところから始められます。
CotoMiraiの入会案内では、年中以上は無料体験、年中未満はプログラミングトイスポットへの参加が案内されています。対象年齢に応じた入口は、入会方法・体験申し込みの案内をご確認ください。
無料体験は公式LINEから申し込み、個別に日程を調整する流れです。家庭で考えた目印の案を相談したい場合も、申し込み時に希望を伝えられます。CotoMiraiの無料体験・入会方法を見る
参考にした情報
- W3C WAI:Understanding Success Criterion 1.4.1: Use of Color
- CotoMirai:スクール利用・個別指導
- CotoMirai:入会方法・体験申し込み
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。