事例135
中学生向け学校紹介RPGの製作～生徒の個性に合わせたプロジェクト活動～
福岡県立鞍手高等学校 藤本直樹先生
「課題研究」としての生徒たちの取り組み～RPGを作ろう!
本校は、文部科学省からSSH(スーパーサイエンスハイスクール)とSGH(スーパーグローバルハイスクール)の両方の指定を受けている、普通科と理数科からなる高校です。この指定により、「総合的な学習の時間」を学校設定科目で代替し、3年間で普通科は3単位、理数科は4単位の「課題研究」を行っています。
教科「情報」は、１年生で「社会と情報」の2単位を履修しており、課題研究と連携して、問題解決の手法や情報の処理・表現等を学習しています。また、次期学習指導要領に向けて、プログラミング教育も取り入れています。
本校「社会と情報」の学習内容
| 1学期 | 社会と情報の関わり |
| 1学期末 | VBA演習（3～5時間） |
| 2学期 | ソフトウェアの活用（画像処理等） |
| 3学期 | ネットワーク、情報社会の未来 |
| 3学期末 | JavaScript演習（3時間） |
2年生では、普通科文系および人文コースは社会科学、普通科理系および理数科は自然科学をテーマにした課題研究が行われます。理系は理科、数学、情報などの多くのグループに分かれ、それぞれ課題を設定して研究することになります。昨年、情報系のあるグループの提案に「学校のwebサイトをRPG(Role Playing Game)形式で作りたい」というものがありました。
生徒ひとりひとりの得意分野を生かした、主体的な探究活動を目指す
そのグループには、情報系の大学進学希望や、ゲームクリエイター志望、美術部在籍の生徒など、それぞれ得意な分野を持つメンバーが集まっていました。課題研究のテーマを決める話し合いの中で、当時の学校紹介Webページは、活動や特色などの記載はあるものの、面白さが伝わってこないという意見が出てきました。そこで、今よりもっと親しみやすく、入学を検討している中学生に、本校のよさをアピールできるページを作りたい、という方向性が決まりました。各メンバーの強みを生かし、何ができるかを検討したところ、RPG形式で学校紹介ページを作ろう、ということになりました。
RPGとは、プレイヤーがそれぞれに割り当てられたキャラクターを操作し、与えられる試練(難題や冒険など)を乗り越え、目的の達成を目指すゲームのことです。そこで、プレイヤー(中学生)が、鞍手高校に入学したという設定で、教師から出される問題を解いたり、鞍手高校の行事や部活動を体験したりするという作品作りに取り組みました。
【開発コンセプト】
(1) サイトを訪れた中学生に、わかりやすく想像しやすいように、3年間の流れに沿ってシナリオを作成する。鞍手高校の行事の要点を短くまとめることで読みやすくする。
(2) RPGの特性を生かし、返答の選択肢を分けることで中学生が主体的に鞍手高校のことを学べるようにする。選択肢にも個性を持たせ、その人に合った返答をできるようにする。
(3) 案内役としてプラタナスの精を作り、みんなから愛され、今後、鞍手高校のイメージキャラクターとしても活躍できるようにする。
それぞれの得意分野で、シナリオ班・イラスト班・プログラム班に分かれて作業
グループのメンバー（16名）は、シナリオ班・イラスト班・プログラム班の3つの班に分かれ、さらにシナリオ班とイラスト班はルートや対象ごとに細かく担当を決めて活動を行いました。
■シナリオ班
最初にグループ全員で話し合ったストーリーの大枠に沿って、下記の4つのルートを設定し、ルートごとのシナリオをEXCELで作成しました。生徒たち自身が考えたストーリーに沿って台詞や分岐先などをセルに入力するとともに、指定された書式の「JSON形式」に変換する式や関数を書いて、差し込み用のテキストファイルを作成しました。
【ルート設定】
A）オープニング・エンディング
新入生として校門をくぐるところから始まり、校章の由来などを紹介します。
B）学習（教科）ルート
教室棟の各階で先生から出された問題を解いて1年、2年、3年の校章を手に入れます。各教科のユニークな指導方法などを紹介します。
C）学校行事ルート
案内役であるプラタナスの精に尋ねる形式で、文化祭、運動会、修学旅行などの行事を紹介します。
D）部活動ルート
本校の部活動について、活動場所や実績など、部の特徴を紹介します。
シナリオデータの一部
※クリックすると拡大します
■プログラム班
プログラミングが好きな生徒は、JavaScriptを用いて、RPGの動きを実現するプログラムを組みました。RPGには、次の場面に進む順次処理と、ボタンによってルートを選択する分岐処理があり、さらに、この2つの画面を切り替える機能が必要です。生徒たちはそれぞれインターネット上の情報などを参考に、プログラムを組んでいきました。今回、生徒たちが作成したプログラムそのものは、比較的単純なものですが、自分たちで試行錯誤しながら作成したことは、生徒たちの自信になりました。
【プログラム例：シーン番号で画面を切り替え，画像と文字を表示するプログラム】
function ChangeDisp(){
if (A[SceneNum][0] == 0){
document.getElementById("disp0").style.display="block";
document.getElementById("disp1").style.display="none";
document.area0.src = "image/"+A[SceneNum][1];
document.getElementById("textline0").innerText = A[SceneNum][5];
} else {
document.getElementById("disp0").style.display="none";
document.getElementById("disp1").style.display="block";
document.area1.src = "image/"+A[SceneNum][1];
document.getElementById("textline1").innerText = A[SceneNum][5];
}
}
なお、あらかじめプログラム班の生徒には、Include文を使ってシナリオデータをプログラムに取り込む方式にすることと、背景等の画像はスマートフォンの画面サイズを参考に指定することを指示しておきました。これは、プログラム班がダミーのシナリオと画像を使ってプログラムできるようにし、各班が独立で作業できるようにするためです。
■イラスト班
イラスト班は、キャラクター担当と背景担当に分かれ、シナリオに沿って、必要なキャラクター画像や背景写真を製作しました。出来上がったものを画像処理ソフト(Adobe Photoshop) で、キャラクターと写真の合成や、サイズの調整、圧縮等を行いました。途中で、プラタナスの精のデザインが、近隣の他校のキャラクターに似ていることが判明してデザインを変更するなど、権利関係を考えさせる機会にもなりました。
自分の得意分野を生かし、チームで作った成果物が出来上がる喜び
RPGによる学校紹介のサイトの完成後、生徒たちがどんな感想を持ったか聞くと、「プログラミングを組むのが難しかった」「チームでプロジェクトを進める大切さがわかった」「RPGでの学校紹介は日本で初めてだと思う」「将来必要とされる能力の重要性がわかった」など、概ね満足感が得られたという感想が得られました。
これらの言葉から、情報の授業で培った技術を活用し、自分の得意な分野を生かしてチームに貢献できたことが、生徒たちの自主性につながったことがわかります。また、チームで作業を進めるためには他の担当との打ち合わせが必要であり、コミュニケーション力が自然に身につきました。さらに、外部の人を招いた文化祭での制作発表後、作品が本校サイトで公開されたことで、自分たちが１つの新しい価値を創造したことを実感でき、大きな達成感につながりました。このことは、生徒たちの今後のキャリアを考える上でも、よい経験になったようです。
「探究活動」は、教員にとって多くの労力を要する活動ですが、うまく機能した場合に得られるものも非常に大きいと実感しています。大切なことは、どうすれば生徒が自主的・主体的に活動に取り組めるか、そして、その成果に価値を感じられるかです。それは、プロジェクトの設計段階で、教員によって綿密に組み立てられた仕掛けや配慮によるところが大きいと思います。私はこれからも、どの学校でも取り組める効果的な教材の開発に努めたいと思います。
第12回全国高等学校情報教育研究会全国大会(和歌山大会)より