筑波学院大学紀要第篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践
7 集 165 ～ 175ページ

2012年＜研究ノート＞

工業高校における全国産業教育フェア
公認ホームページの作成とその実践
篠崎

健一＊

Development of a National Industrial Education Fair
Official Website and its Practice in a Technical High School
Kenichi SHINOZAKI ＊Abstract
Recently, the baby-boom generation who supported our country’s industry has begun massretirement, and human resources to support industry are decreasing sharply.
MEXT (Ministry of Education, Culture, Sports, Science and Technology) has been organizing
a national convention for the National Industrial Education Fair annually. Through its websites andother materials, MEXT has widely publicized the activities of specialized upper secondary school
students and the importance of industrial education. The official Fair websites for PR were usually
outsourced to web development companies or developed by each Board of Education. However, forthe 20th National Industrial Education Fair, public relations were done through a website developedby students from a specialized upper secondary school.
This is a first for a nationwide event hosted by MEXT, and has never happened before.
Therefore, in this article, the features and structure of the website and its practical activities
will be reported.
Keywords: National Industrial Education Fair, industrial education, information education, website

1 ． はじめに化するなど、ものづくり技術を継承できる人2）

材が激減している 。
近年、IT 技術やバイオテクノロジーが発

これらを踏まえ、文部科学省は毎年、「全展するなど、急速に科学技術が高度化してい国産業教育フェア（以下、さんフェアと示る 。その反面、我が国の産業界を支えてきす。）」を実施している。さんフェアとは、文た団塊世代が一斉に退職を迎えるとともに、部科学省が行う専門高校生向けの唯一の全国アジア諸国の急速な発展に伴い国際競争が激的なイベントであり、「専門高校の甲子園」

1）＊

情報コミュニケーション学部非常勤講師、Tsukuba Gakuin University

─ 165 ─

筑波学院大学紀要 720123）と言われている（図 1 ） 。この催事は、将2 ． 研究内容

来の産業を担う「スペシャリスト」の育成と、産業界と産業教育の一層の振興、発展を目指（ 1 ）平成21年度の活動

し、平成 3 年に第 1 回がスタートし、平成22①運営組織年で20回目になる。この第20回全国大会は茨平成21年 4 月、さんフェア茨城開催に向け城県が担当し、平成22年10月16日（土）からて実行委員会が組織された（図 2 ）。名誉会

17日（日）の 2 日間、茨城県つくば市、水戸長に茨城県知事、名誉副会長にはつくば市長、市、日立市、土浦市の 4 都市で開催した。こ実行委員長には茨城県産業教育振興会会長がの第20回全国大会の PR 用の Web サイトは就任した。実行委員会の事務局には、県教育高校生が作成したものである。

庁高校教育課内に事務局本部を設置した。ま

文部科学省は過去、様々な教育活動に繋がた、参加する県内50校の校長で構成する運営るイベントを主催してきたが、その PR 用の委員会を設置し、事務局本部と連携して、準ホームページを高校生が自ら作成し、大会の備事業を実施した。さらに、運営委員会の下広報用として活用したケースは、さんフェアには、参加する学校の教員で構成する幹事会

史上初の出来事であり、勿論、その他のイベが設置され、開催内容などの具体的な連絡調ントでも過去一度も行っていない（平成22年整を行った。運営委員会及び幹事会は、総務

10月21日、現在）。

部、広報記録部など11の大会運営部、農業、そこで、本論文では , 高校生が作成した工業、商業などの専門分野に関する催事の企Web サイトの仕組みや構成及びその実践を画・運営を担当する 9 つの専門部及び生徒実論じる。

行委員会で構成した。この幹事会を経て県内の専門高校50校へ参加・運営協力の依頼が来

図1さんフェア茨城ポスター

図2

─ 166 ─運営組織図

篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践た。

ミングやソフトウェアの概念もまったく知ら我々は大会運営部の広報記録部と専門部になかった。

所属して活動することになった。
主な担当内容は、大会ホームページの作成、③開発計画

大会当日のライブ配信等、広報活動全般を担

Web サイトを作成するための手順は、シ当する。この中でも大会ホームページは、「さステム設計技法の 1 つであるスパイラルモデ

んフェアは専門高校生の大会である」というルを適用して実践した。従来、新規にシステ趣旨から、「高校生に技術指導して作成する」ム開発を行う場合、「ウォーターフォールモということになった。

デル」が多く採用されている。しかし、各工程が完了する際に、前の工程へ逆戻りして再②作成メンバーの選出度確認することができない。これでは、もし本研究で対象としている ｢さんフェアサイ途中で論理ミスに気付かず、作業を進めてしトの作成｣ であるが、このような一大イベまった場合、最終的に依頼者の考えと全く異ントの Web サイトを高校生に技術指導して、なるものができてしまうなどと、作成サイト生徒自ら作成させて行くことは、かなり負担の不具合が出てしまうことも考えられる。こが大きい。また、これらを授業の題材としてれを、防止するため、「スパイラルモデル」取り入れながら作成していくという考え方もと ｢プロトタイプモデル」を導入して実践しあるが、本科の年間学習計画を大幅に変更すた（図 3 、図 4 ）。

る必要があり現実的ではない。そこで、特別活動の一環でもある部活動で Web サイトを④ホームページ作成研修会作成して行くことになり、筆者が所属する工（a）基礎的な知識や技術の習得

業技術部のメンバーに依頼した。工業技術部

1 年生は、Web ページ作成に必要な知識とは、工業全般に関する様々な競技会、コンや技術を学習する前に、コンピュータ操作全テストなどへ積極的にチャレンジして、知識般についてマスターすることを第一目的としや技術を高めることを目的とした工業高校なた。 2 年生は Web ページを構成するためにらではの文化部である。活動場所は、情報技術科のコンピュータ室で週 4 の月・火・水・木（17：00 ～ 19：00）に活動している。後日、部員に「ホームページ作成研修会」を実施することを伝えると、 6 人の生徒が参加を申し出てきた。ちなみに、この段階で ｢さんフェアサイトの作成｣ のことは生徒には伝えていなかった。彼らのプロフィールであるが、 2年生は全員、C 言語、ワープロ、表計算等を経験している。この中の 2 人はプログラミン
グを得意とし、ネットワーク技術やインターネット等に興味関心が高かった。他の 2 人は、CG に関するコンテンツ制作に興味はあるものの、パソコン操作全般的に不得意な生徒であった。残りの 1 年生 2 人は、プログラ─ 167 ─

図3

スパイラル・プロトタイプ計画（1年生）

筑波学院大学紀要 7

図42012

基本的な作業の流れ（例）
図5

HP 検定

図7

立志舎 FLASH 講習会（東京・錦糸町）

図6

情報処理選手権必要な技術的な知識（ホームページ作成能力検定 2 級程度の内容）の指導を行った。実践
期間は、平成21年 5 ～ 6 月の 2 ヶ月間とした。
（b）実践的な知識・技術の習得
8 月上旬から、1 年生に対しても Web ペー
ジ作成に関する指導を行った。指導内容はHTML、ホームページビルダー、画像編集、Java スクリプト等の習得とし、毎週月曜日に開講し、次の日（火曜日）から演習を行うという流れで進めた。 2 年生は 1 年生が演習を行うときのサポート役として活動した。その他、全員、ホームページ作成検定の受験（図5 ）、情報処理選手権（図 6 ）への参加、外部の FLASH 作成講習会などへ参加し、幅広く学習した（図 7 ）。実践期間は平成21年 7

APPL：ホームページビルダー 12月～ 8 月の 2 ヵ月間とした。

IrfanView ver．3．97（画像変換）
JTrim ver．1．53c（画像編集）、⑤ Web サイトの構成

GIMP ver．2．6．7（a）構成の検討

Picture Trim ver．4．24（同上）FFFTP ver．1．96d（FTP）

県教育委員会と構成について検討（図 8 ）し、作成期間は平成21年 9 月～ 12月の 4 ヵ月とした。

4）（C）さんフェアサイトの機能ア）FLASH 動画（地名アピール用）｢波崎ウインドファーム｣ →「茨城県庁」（b）開発環境〔情報技術科のコンピュータ仕様〕→「袋田の滝」→「帆引き船」→「海門橋」

機種：ThinkPad R51→「筑波山」→「偕楽園」→「つくばエクス

OS：Windows XP Professional SP3プレス」→ ｢Welcome to Ibaraki! さんフェア

─ 168 ─

篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践

図8さんフェア・サイト構成図

茨城2010｣ と画像が変化する（図 9 の（a））。

がイラストで表示される。

イ）FLASH 動画（県特産品アピール用）

基本部分は、12月 4 日に完成し、教育委員会これらのア）～オ）を含む Web サイトのトップページの右下部に配置した。左からに提出して県サーバにアップした。この後、右へシフトさせ、癒しの効果を表現した。テ

翌年10月の大会当日まで、メンテナンス作業

キスト形式で、茨城県の代表する ｢県の花 :や修正・追加作業を継続して行った。

バラ｣、｢県の木：ウメ｣、｢県の鳥：ヒバリ｣、｢県の魚：ヒラメ｣ などの説明文を流し本県（ 2 ）平成22年度の活動の豊かな自然を全面に出した（図 9 の（b））。

①更新・追加作業
平成22年 4 月～ 10月大会当日まで、アクウ）Java スクリプトによる Web 制御

セスマップ、生徒実行委員会ページ、開催要

カウントダウン Java スクリプト（図 9 の（c））、・ボタンポイント動作 Java スクリプト

項・募集要項ページ、主催・後援・協賛ページなどの修正・追加を継続した（図12）。

（図 9 の（d））、バックカラー制御 Java スクリプト（図 9 の（e））などを組み込んだ。そ②大会終了後の活動の一部を以下に記載する（図10）。

全国の専門高校生の活躍を PR するため、※サイトの背景色は朝 : 黄、昼 : 水色、夕方 :「さんフェア茨城2010デジタル写真館」（大会記録ページ）も作成した（図13）。

オレンジ、夜 : 黒へと変化する。
エ）英語版サイトの作成
図 9 （f）ボタンを押すと表示される（図11）。
オ）開発メンバーメニュー
図 9 （g）をクリックすると開発メンバー─ 169 ─

筑波学院大学紀要 72012

図9さんフェア・サイト トップページ

─ 170 ─

篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践

図 10

図 11

図 12

Java スクリプト一部

英語サイト

図 13 さんフェア茨城 2010デジタル写真館

更新・追加作業─ 171 ─

筑波学院大学紀要 72012（ 3 ）実践結果たる部分を抽出し、それらを KJ 法で分類し①統計的検定による分析た。まず、理解（表 2 ）に関して「ホームホームページ作成研修会の実践的な知識・ページの構造や仕組みを理解することができ技術の習得の段階前までは、「さんフェアサた」や「Java スクリプトや FLASH が理解（操イト作成」の依頼は伝えずに漠然と、Web作を覚えた）できた」と分類できる文章が 6

サイト作成に関する講義・演習を行ってき人であった。その他、｢PDCA サイクルの大た。今回、「さんフェアサイトの作成」とい切さを理解できた｣、「働いてないけど、何とう具体的な目標を示す前とその後に Web サなく就職してからの業務の進め方を理解できイトに関する確認テスト（日本情報処検定協た」などという Web サイトの技術的な内容会ホームページ作成検定 2 級程度レベル）をだけではなく、キャリア教育に関する内容に実施した。勿論、難易度的には同レベルのもついて理解できたと答える生徒がいた。次に、のである。その結果、表 1 が得られた。

疑問点（表 3 ）では、「このホームページをこれより、「作成の趣旨を伝えた後の講義閲覧している人たちは、どんな感想をもっての方が学習効果が低い。」という帰無仮説をいるのだろうか」、「どんな人がアクセスして立 て、 有 意 水 準0．05と0．01の 両 方 で ｢ 対 応いるのだろうか」などと、本サイトに対するある t 検定｣ を適用した結果、 2 p（両側確表2率）＝2.02536×10－ 3 となった。有意水準が0．05と0．01い ず れ よ り、 小 さ く（2p ≤0.01,2p ≤0.05）、帰無仮説を棄却できた。この結果
より、ただ漠然と進める授業（抽象的な目的）よりも具体的な目標を明確に示す方が , 学習効果が高く , 基礎基本の定着を図れることが分かった。
②感想文による分析
さんフェア終了後、参加生徒に「これまでの活動に関する感想文」を書いてもらい全国産業教育フェア茨城大会実行委員会事務局に提出した。この感想文をもとに「Web サイ

理解できたこと（感想文から抽出）

内容
ホームページの構造や仕組みを理解することができた。
Java スクリプトや FLASH が理解（操作を覚えた）できた
多くの資格等がとれたものづくりは、ただ作るだけじゃない。PDCA サイクルの大切さを理解できた。
働いてないけど、何となく就職してからの業務の進め方を理解できた。
デバック作業の手順や確認方法を覚えることができた
全国には頑張っている高校生が多いことがわかった

人数
66544
1
1

ト作成に関する事項」を洗い出し分析した。
感想内容から①理解、②疑問点、③感想にあ表1
人数
合計
平均
標準偏差
標本平均－9ｔ検定による分析結果

確認テスト（事前）確認テスト（事後）66269402
44.83
6713.3516.38
標本標準偏差9.23

統計量 T
5.88

表3

疑問点（感想文から抽出）

内容
このホームページを閲覧している人たちは、どんな感想をもっているのだろうか。
どんな人がアクセスしているのだろうかHTML はわかるが XML は何だろうか
このような期間で、このような仕事をしたらいったい給料はどのくらいもらえるのだろうか─ 172 ─

人数6511篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践評価を気にする生徒もいた。感想（表 4 ）で県勢では初受賞となった（図15）。

は ｢進路選択の前に、実践的な活動ができて良かった｣ と回答する生徒が 6 人、「この経（c）長崎総合科学大学主催デジタル・メディ

験を進路先に生かしたい」が 4 人であり、いアコンテスト

ずれも進路選択において、これまでの活動を平成22年11月にさんフェアトを客観的に評活かしたいと考えている。その他、｢サイト価して頂きたく、長崎総合科学大学が主催すが客観的に良いサイトなのか分析したい｣ とるデジタル・メディアコンテストへも出品し考える生徒もおり、さらなる課題に取り組みた。このコンテストは「デジタルメディアコたいという意見もあった。

ンテスト（デジタルアート部門、ホームページ部門）」（情報学部主催）と「設計アイデア③コンテスト等による評価コンテスト」（環境・建築学部主催）の 2 つ（a）全国高校生ホームページコンテストの部門で毎年開催される。結果は、最優秀賞

さんフェアサイトの完成度を確認するたを受賞した（図16）。

め、高校生ホームページコンテストへ出展した。このコンテストの審査基準は、コンテンツのオリジナリティ・デザイン性より評価される。結果は128作品中10作品が決勝大会に進み、さんフェアサイトは特別賞を受賞することができた（図14）。
（b）北関東三県工業高校生徒研究発表大会
毎年、足利工業大学で開催される北関東三県工業高校生徒研究発表大会で発表した。この大会は茨城県、栃木県、群馬県の各工業高校で行われている研究活動の優秀高を決定する大会である。結果は最優秀賞となり、茨城
図 14
表4

ホームページコンテスト（特別賞）

感想（感想文から抽出）

内容
進路選択の前に，実践的な活動ができて良かった。
Web サイトのカウントダウンの Java
スクリプトが、あと1日という表記から、0日と変わったとき感動した。
疑問点は何度も何度もみんなで確認するという活動ができて良かった。
この経験を進路先に生かしたい。
これからも何らかのホームページを作りたい
サイトが客観的に良いサイトなのか分
析したい
疲れた

人数
6
433333図 15

─ 173 ─北関東研究大会（最優秀賞）

筑波学院大学紀要 72012（d）第14回いばらきデジタルコンテンツ・ソ（図18）が最優秀賞を受賞した。

フトウェア大賞
高校生ホームページコンテストとデジタ

3 ． 評価と課題ル・メディアコンテストの両コンテストで入賞したが、これらのコンテストは高校生だけ

平成23年 3 月、全国産業教育フェアに関すを対象としている。さんフェアサイトが一般る全ての業務が終了し、その大役を果たすこ募集の作品と比べてどうなのかを確認するたとができた。統計的検定による分析と感想文

めに、第14回いばらきデジタルコンテンツ・による分析から、学習意欲の高揚だけではな

ソフトウェア大賞へ出品した。結果は、いばく、進路指導やキャリア教育等へも好影響をらき特別賞を受賞した（図17）。

与える可能性があることも示唆した。コンテ
スト等による評価では、作成者側からみた評（e）全国産業教育フェア茨城大会表彰式

価を得るため、様々なコンテストに出展した

平成22年10月16日（土）、17日（日）、つくがそれぞれ入賞という結果から、サイトのコ

ば市のつくば国際会議場をメイン会場としンテンツやデザインは高い評価を与えることて、「第20回全国産業教育フェア茨城大会」（さができる。さらに、この取組みは、文部科学

んフェア茨城2010）が開催された。大会当日、

省産業教育担当者、県知事、教育長など多く大会の広報活動の要として活躍した生徒たちの関係者からも、高い評価を頂いた。しかし、本稿の位置は高校生の作成した Web サイトの具体的な機能や構成及びその実践活動を報告するとともに開発にあたっての設計思想を論じることである。
今後の課題として、各コンテストの入賞暦から、外面的な部分においては高評価を与えることができる。しかし、内部的な構造や閲覧者側から見た場合は果たして良いサイトなのか客観的に評価する必要がある。そこで、
平成22年 1 月 5 日、Web システム研究の専門家である筑波学院大学の山島一浩準教授に

図 16

デジタルコンテスト（最優秀賞）

図 17 いばらきデジタルコンテンツ（特別賞）

図 18

─ 174 ─さんフェア表彰式（最優秀賞）

篠崎健一：工業高校における全国産業教育フェア公認ホームページの作成とその実践

図 19

アクセス履歴に関する講義

アクセス履歴を利用した分析法について講義

ン技術を連携した工業高校における情報技術頂いた（図19）。今後、これらのデータを用教育の提案、日本工学教育協会論文誌 工学教

いて、定量的評価や定性的評価を加味し、そ育．の有効性も検証する必要がある。

3 ）産業教育の振興：文部科学省：
http://www.mext.go.jp/a_menu/shotou/

参考文献・関係資料

shinkou/main19_a 2 .htm

1 ）篠崎健一：工業高校におけるサーバサイド4 ）第20回全国産業教育フェア茨城大会：

Java による制御学習 Web システムの開発、日

http://www.edu.pref.ibaraki.jp/board/sanfair/

本産業技術教育学会論文誌第48巻第 3 ．

index.html

2 ）篠崎健一：Web プログラミング技術とマイコ─ 175 ─