ベネッセコーポレーション

教科「情報」教育最前線！

Vol.

6

ノーコードツールの活用で、時数不足解消と想像力の育成を実現

ープログラミングと情報デザインの融合ー
東京都立墨田川高等学校

市川淳尉 先生

いちかわ・じゅんい 民間企業勤務を経て教職歴 7 年、同校に赴任して３年目。情報科教諭。

学校概要◎東京都教育委員会より「進学指導推進校」に指定された単位制高校の特長を生かして、習熟度別授業や少人数授業が充実するほか、約 100 講座の夏期講習を設定するなど多様な学びを通して人間形成や志望進路の実現をサポートする。体育祭、文化祭、合唱祭の三大行事や部活動も伝統的に活発に行われている。
設立 1922（大正 11）年 形態 全日制／普通科／共学 生徒数 １学年約 300 人
２０２２年度入試合格実績（現浪計） 主な進路状況：国公立大は、茨城大、筑波大、埼玉大、千葉大、東京学芸大、東京都立大などに 27人が合格。私立大は、慶應義塾大、上智大、東京理科大、早稲田大などに多数合格者あり。

東京都立墨田川高等学校では、「情報Ⅰ」の指導の充実を図るため、ベネッセの学習プログラム「Ｐスタディ」を導入。
「Ｐスタディ」の制作実習用の教材である Web サイト制作ツール「STUDIO」を活用して、Python のプログラミング教育と、情報デザインの Web サイト制作を融合させた実習を展開した。実習の内容や狙いとともに、どのような学びの姿が見られたのかを聞いた。
（2022 年 12 月 1 日、12 月 21 日取材）
取り組みの背景「Ｐスタディ」の学習教材を授業の補足や個別学習に活用

広い視野と柔軟な思考力で課題を解決する力を育てたい

2022 年度より、「情報 I」に対応するベネッセのデジタル・2022 年に創立 100 周年を迎えた東京都立墨田川高等学校

情報活用力学習プログラム「Ｐスタディ」を導入している。

は、都立高校では３校ある進学重視型単位制高校のうちの理解を深めたり補ったりしたいところについて、授業中に１校で、学校行事や部活動が活発な自由な校風でも知られ「Ｐスタディ」の動画やスライドを生徒に見せたり、各単元ている。の理解度を確認するため確認問題に取り組ませたりしている。

同校では、「情報Ⅰ」は１年次の履修としており、専任の情報科教諭である市川淳尉先生が全学級の指導を担当して「生徒によって学習進度の差は大きいのですが、授業内でいる。市川先生は、「情報Ⅰ」で大切にする学びについて、一人ひとりの質問に答える時間は限られています。
『Ｐスタ

次のように述べる。

ディ』はどのレベルの生徒も自分で学び進めることができ「課題解決のプロセスや社会の仕組みを学び、実習を通しるため、家庭での予習や復習として取り組ませることも多て自分なりに思考をして表現をすることを重視しています。

いです。生徒の取り組みの進捗を一覧でチェックできます

そうして、従来の枠組みにとらわれずボーダレスの広い視し、確認問題の採点も不要なので時間や労力の大きな節減野を持ち、柔軟に考えて実行する力を伸ばすことで、このにもなっています」（市川先生）

先の人生で様々な課題を乗り越えられるようになると思いますし、他教科の学びをより豊かなものにすることができると考えています」（市川先生）1

図１

プログラミング実習（クラスの進行状況により、1、2 コマの増減あり）

そのうちの１つを選んで、想定するユーザーやコンセプト、時数「教科書の問題は解けるけれど、新たなアイデアを発想す

1
2
3
4

5

今回見学した授業

6
7
8
9
10

機能、動作などを記入させた。

目的るとなると苦労する生徒が多いため、できるだけ多くの案• Python でプログラムを組んで実行•プログラミングの基本操作に慣れる• Python のプログラミングで、どのようなアプリを作りたいか、個人プリントに書き込む課題を出す（授業中に Python で説明してプリントを配布）を出させるようにしました。なお、生徒にはアイデア出しのヒントとして先輩が制作したアプリの例を紹介しています。単元に入る直前まで廊下に掲示していました」（市川先生）•１～４名のチームを編成し、どのようなアプリを作るかを決定• チームプリントにアプリの内容や機能などを書き込み、役割分担を決定

アプリ制作を通じて、Python の基礎や思考力を育成

アプリの制作「STUDIO」•アプリの内容や制作の意図を伝える発を使用
表資料の作成• 開発したアプリの実行・改修

11
12

チーム発表

13

アプリ改善・最終提出

14「プログラミング実習」振り返り

アプリの制作は、原則２〜４人の任意のチームで取り組ませた。チーム内で互いの案を精査し、時には組み合わせながら制作するアプリを決定した。あえて１人で取り組みたいと希望する生徒の要望も受け入れ、柔軟にチームを編成した。生徒たちからは、「英単語学習アプリ」「ファッションアイテムのコーディネートアプリ」「心理テストアプリ」「ストレスチェックアプリ」「課題管理アプリ」「時間割管理アプリ」など、生活や学習を便利にしたり、日常に楽しさ取り組みの内容をプラスしたりする様々なアイデアが出された。

単元を融合させた実習を展開して、生徒の発想を刺激し、時数不足にも対応

チームで制作を進める場合は、各生徒が異なる作業を担当し、それぞれ別のプログラムを作成するように指示をし「情報Ⅰ」で生徒に学んでほしい内容に対して時数が足りた。例えば３人でクイズアプリを作る場合、クイズの問題ないという課題に対して、市川先生は一部の単元をほかのごとに担当を割り振ると、クイズの形式が同じだと１人が単元と融合して圧縮するなどして対応している。例えば、考えたコードをほかの２人が写してしまいかねず、プログ後期には、プログラミングの単元に、情報デザインの要素ラミングで自ら考えるという思考力が育ちにくくなる。そである Web サイト制作を結びつけた「プログラミング実習」のため、トップページの作成、クイズを出題する機能、ポを展開した。プログラミングと情報デザインという異なるイントを集計する機能など、全く異なるプログラムを担当領域を融合することで、どのような学びが生み出されるのさせて、それぞれの生徒に試行錯誤をさせるようにした。

か、この実習の要素や流れ、さらに生徒の学びの姿を通しまた、インターネット上に公開されたプログラミングのて紹介していく。

サンプルコードを参考にすることも認めたが、その際は、「プログラミング実習」は全 14 コマで構成（図１）され、コピーをしただけで完成としないようにと生徒に伝えた。

１～８コマ目まででは Python の学習とアプリケーション「社会に出て仕事をするようになってからも、完全に白紙（以下、アプリ）の制作を行い、残りのコマで各チームが作っの状態から始めるケースは少なく、詳しい人を見つけて相たアプリの紹介を目的とした Web サイトの制作と発表、ア談したり、自分のイメージに似たものを探してアレンジしプリの改修を行う。

たりしながら作業を進めます。サンプルコードを探すこと

Python の基礎的な学習では、基本構造を打ち込んで実行自体も課題解決のプロセスの１つと位置づけ、そこから自するなどの作業を通して、徐々にプログラミングに慣れる分なりにアレンジしてもらうことにしました」（市川先生）
Python については基礎知識しか持たない中での実習ではように指導した。
「『情報Ⅰ』では、高度なプログラミングスキルの習得をあったが、市川先生に相談したり、自分たちでサンプルコー求められているわけではありません。限られた授業時数でドを探し出してアレンジの仕方を話し合ったりしながら、は、プログラミング的思考に慣れるとともに課題解決のプアプリ制作を進めていった。

ロセスを経験させたいと考え、簡単なアプリ制作に取り組ませることにしました」（市川先生）「STUDIO」で Web サイト制作の指導時間を圧縮し、問題解決力育成の時間を拡充

市川先生は、Python を使ってどのようなアプリを作ってみたいかを個別に考えてワークシートにまとめる課題を出

例年、アプリの完成後は、アプリの内容や制作意図を説した。ワークシートには、５つのアプリの案を考えてから、2

明するスライドを校内に掲示していたが、2022 年度は、
「PWebサイトの制作から発表を通じて基礎知識から思考力までを育成

スタディ」に付属した「STUDIO」を使った Web サイト制作に切り換え、実社会での情報発信と同じ経験をさせるこ

全 14 コマで予定している「プログラミング実習」のなかとにした。
「これからの社会で求められる情報発信力を身につけるたで、Web サイト制作に充当したのは２コマだ。最初の授業

めに、Web サイト制作を経験させたいと考えました。前期

では、冒頭の 20 分程度を使って本時の目標を説明した後、の情報デザインの授業では、Web サイトに関しては教科書残り時間を使って「STUDIO」にログインし、基本的な操の内容に簡単に触れた程度だったため、実際に制作をする作方法を説明した。画面を構成する箱の配置や色の変え方、ことで改めて理解を深め、Web 制作を通じて問題解決力を画像の貼りつけ方、スクリーンショットの撮り方、リンク育成することを目的としました」（市川先生）の貼り方、プレビューの方法などを一通り説明すると、ほ市川先生が使用する「STUDIO」は、「P スタディ」に付とんどの生徒はすぐに理解してスムーズに作業を開始した

属して使える Web サイト作成ツールで、HTML や CSS と（写真１、２、３）。次の授業も Web 制作に充て、時間が足いった Web サイト制作に必要な知識やスキルがなくても本りない生徒は授業外の時間を使って、１人１ページ以上の格的な Web サイトの制作ができるノーコードツールだ。作

Web 制作を進めた。

成したサイトは一般に公開することも可能で、既に数多く「Web サイトの公開は校内にとどめることにしていたもの一般企業のコーポレートサイトで使われており、手軽にのの、生徒には『社会に発信をするつもりで内容を考えて』完成度の高いサイトが作成できるのが特長だ。と繰り返し伝えました。不特定多数の人に対して、どのよ「『情報Ⅰ』では高度なプログラミングを習得させるよりうな発信をすると自分たちの考えが伝わるかを考えながら、も、誰に対して、どのような目的で、どういった方法で自実際に Web サイトを作成することで、情報デザインや情報分の考えを伝えるかといった、問題解決のプロセスを考えセキュリティの観点を当事者として理解することができまることに重点を置いています。その点で、HTML コーディす」（市川先生）

ングに時間をかける必要がなく、Web サイト制作を通じて実際に制作したアプリの画面を Web サイトに連携するな問題解決を経験できる『STUDIO』を活用した学びは狙い

ど、生徒は多様な機能を生かしながら、よりよい Web サイにぴったりだと思っています」（市川先生）

トを追求して試行錯誤を続けた。
「STUDIO」には、各チームの制作過程の画面をリアルタイムに共有できる機能があり、市川先生は生徒の制作の進捗を都度確認していたが、生徒たちもこの機能を使ってほかの生徒の制作状況を確認し、互いに質問をし合うなど、生徒間で学び合う様子が見られたという。
Web サイトの完成後は、各チームからプレゼンテーションを行う時間を２コマ設定した。各チームの Web 画面をスクリーンに映し出し、アプリの説明を聞いたうえで、生徒同士で評価した（写真４、５）。発表後は、生徒からの評価に加えて市川先生からのフィードバックを踏まえ、冬休み中にアプリの改善を行い、最終完成版を提出する予定とし写真１ 「STUDIO」では、「ボックス」を自由に配置して画像の場所を決めるなど、感覚的にレイアウトを組むことができる。ている。

写真２ フリーで使えるデザインテンプレートや画像素材が大量に用意されているため、手軽にデザイン性の高い画面が作成できる。生徒にとって Webサイト制作に対する心理的なハードルが低い様子が見えた。

写真３ 市川先生は、「STUDIO」のプレビュー機能を使って生徒の進捗状況を確認し、個別にサポートを行った。

3

『あのツールを使って Web サイトを作ってみよう』『アプリを作れば解決できるかもしれない』などと発想する生徒も出てくると思います」（市川先生）
今後の展望「STUDIO」の活用を通じて、実生活につながる学びを目指す
市川先生は今後の検討課題として挙げるのが、「STUDIO」のより効果的な活用方法だ。例えば、「STUDIO」の操作方

写真４ 発表時間では、チームごとに「STUDIO」で作った画面を映して、持法を４月に生徒に教えて、「情報Ⅰ」で学ぶ内容を整理し保ち時間５分程度でアプリの企画や内容を発表した。

管していく Web サイトを作成し、ポートフォリオとして活用することも検討している。また、校内だけでなく、広く社会に発信するコンテンツを制作することで、より実践的な学びにつなげたいという思いもある。
市川先生は、これからも「情報Ⅰ」を通して、能動的な姿勢で柔軟に情報を扱える生徒を育てていく考えだ。
「以前、ある生徒が『情報科の内容がわかるようになると、ほかの教科もできるようになる』と話すのを聞き、うれしく思ったことがありました。そのように、『情報Ⅰ』の学びを自分なりに活用して、実生活の課題を解決したり、他教科の学びに応用したりする力にしっかりとつなげたいと思

写真５ 各チームのプレゼンテーションに対して、感想や気になった点などを評価シートに記入。後日、各班にフィードバックされて改善に生かされる。

います」（市川先生）

デジタル技術を使って課題解決を試みる素地を養う
プログラミングに、情報デザインの要素である Web サイト制作を結びつけた「プログラミング実習」という試みは、「STUDIO」を使って生徒が制作した Web サイトの例

生徒の情報に対する姿勢が変化するきっかけになったと市川先生は考えている。
「授業時数の関係で、細かく作り込めませんでしたが、自分の手でアプリを制作して、他者の目を意識して作成した
Web サイトでそれを公開するという経験は大きいと思います。日常的にスマホなどの端末を使用する中で情報の受け手としての意識は持っていますが、『プログラミング実習』によって作り手の工夫や苦労を体験を通じて理解し、情報を発信する側の意識も持つことができたと思います」（市川先生）
こうした生徒の意識の変化は、今後、問題解決が求められる様々な場面に直面した際、アプリや Web サイトなどを活用して解決する素地につながっていくと、市川先生は考えている。
「この先、学校生活や社会生活を通じて、『文化祭の内容を地域に伝えたい』『探究活動の成果を発表したい』『自分の作品を多くの人に発信したい』『研究に必要なアンケートを取りたい』など、課題の解決や表現・発信を求められる状況が多くあるでしょう。その時に今回の授業を思い出し、
4

©2023

株式会社ベネッセコーポレーション