女子学生が中学生にホームページのつくり方をレクチャー JCD「Webデザインスクール」を初開催

2020年01月22日

本学の女子学生のキャリアアップや就職支援を図る女子学生キャリアデザインセンター(通称:JCDセンター)では、地域活性化への取り組みや新商品開発、子ども向けの理科実験教室など、さまざまなプロジェクト活動を行っています。今年度、新しく立ち上がったプロジェクトが「Webデザインスクール」。子どもたちにホームページづくりを通してデザインやプログラミングの楽しさを伝えようとはじまりました。12月7日、中学生を対象としたWebデザインスクールを初めて開催。その様子をお伝えします。

午前10時、パソコン教室に参加者が集まってきました。

午前10時、パソコン教室に参加者が集まってきました。

ホームページはどうやって表示されているの?
まず、ホームページの画像や文章が表示される仕組みの説明からはじまりました。女子学生が「普段、皆さんがスマートフォンやパソコンで見ているウェブサイトは、すべて文字(言語)で作られてます。今日はその文字(言語)を使ってホームページをつくってみましょう」と解説。そして今日のために準備したオリジナル教材を使って、参加者と一緒にホームページを制作していきました。

女子学生が準備した教材は、パンケーキ屋さんを想定したホームページ。お手本を参加者に見せながら完成を目指します。

女子学生が準備した教材は、パンケーキ屋さんを想定したホームページ。お手本を参加者に見せながら完成を目指します。

「できるようになったら、色やフォントを変えて自分なりのデザインに変えてみましょう」と説明する女子学生。

「できるようになったら、色やフォントを変えて自分なりのデザインに変えてみましょう」と説明する女子学生。

HTMLやCSSを駆使して、コードをつくってみよう
ホームページ制作に使う言語はHTMLやCSS。これらを「Brackets(ブラケッツ)」というアプリケーションソフトを使ってコード制作をしていきました。まるで呪文のようなコードは中学生にとって難しいもの。しかし、みんなお手本を見ながら懸命にコードを打ち込んでいました。女子学生たちは傍に寄り添い、付きっきりでサポート。「この暗号が文字を表示するのに必要なんだよ」など、専門用語をわかりやすい言葉に置き換えてコードの意味を教えていました。

スクリーンに映し出されたお手本のコード。参加者は見様見真似で打ち込んでいきます。

スクリーンに映し出されたお手本のコード。参加者は見様見真似で打ち込んでいきます。

女子学生の指導はマンツーマン。便利なショートカットキーの使い方なども教えていきます。

女子学生の指導はマンツーマン。便利なショートカットキーの使い方なども教えていきます。

コードができたらプレビューで確認。間違っていたら修正してまた確認。これを繰り返して完成を目指しました。

コードができたらプレビューで確認。間違っていたら修正してまた確認。これを繰り返して完成を目指しました。

自分だけのオリジナルデザインに
お手本通りにできたら、今度は応用編。自分なりに工夫を加えていきます。色を変更したり、文字のフォントや大きさを変えたり、写真を変えたり...自分のアイデアを自由に反映できるのが、ホームページ制作の魅力です。時間いっぱいまで夢中になってコードを打ち込む参加者たち。この姿こそ、女子学生たちが目指していたWebデザインスクールの形だったのではないのでしょうか。

すっかり没頭する参加者。キーボードをたたく手が止まりません。

すっかり没頭する参加者。キーボードをたたく手が止まりません。

難しいことが上手くできたときの喜びはひとしお。自然と笑顔もあふれてきます。

難しいことが上手くできたときの喜びはひとしお。自然と笑顔もあふれてきます。

トラブルが起きるとすぐに解決方法を調べて対処する女子学生たち。チームワークでスムーズな進行を支えていました。

トラブルが起きるとすぐに解決方法を調べて対処する女子学生たち。チームワークでスムーズな進行を支えていました。

参加者に話を聞きました

三宅栞緒里さん(中学2年生)
「小学生の時に参加したJCDプログラミング教室が楽しかったので、ホームページ制作にも挑戦してみたいと思い参加しました。ホームページの裏側であんなに複雑なことが行われていることにびっくりです。大学生のお姉さんたちとおしゃべりしながら楽しく学ぶことができました。機会があればまた参加して、今度は他のページにリンクが張れるようになりたいです」

「色など自分の好きなように変えられるのがとても楽しかったです」と三宅さん。

「色など自分の好きなように変えられるのがとても楽しかったです」と三宅さん。

プロジェクトリーダーの学生にも話を聞きました

池田涼乃さん(知的情報システム学科2年)
以前、JCDプログラミング教室に所属し、子どもたちにプログラミングを教えていた池田さん。「プログラミング教室は小学生が対象。中学生向けにも何かできないかと思い、考えついたのがホームページづくりでした」と創設のきっかけを話してくれました。10人で活動をスタートしましたが、ほとんどのメンバーがホームページ制作未経験。「まず自分たちが理解することからはじめた」と、教材づくりは苦労の連続だったそうです。池田さんは「中学生に理解してもらえるか不安でしたが、みんな時間内にホームページを完成させることができたので、ほっとしています」と、安堵の表情を浮かべていました。

「「今後はアニメーションなどの動的技術も教えていき、より楽しいスクールにていきたい」と池田さん。

「今後はアニメーションなどの動的技術も教えていき、より楽しいスクールにていきたい」と池田さん。

大成功で終えたWebデザインスクール。新しい挑戦を通して彼女たちも成長を感じられたのではないでしょうか。今後さらなる活躍を期待しています。

JCDセンター