ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ．平成２１年度成果報告書

Ⅰ－１ 事業概要

社会人の学び直しニーズ対応教育推進プログラム委託事業

１．１ 事業名称

e ビジネスで活躍するための Web デザイン学びサポートプログラム

１．２ 事業の趣旨

近年の尐子化等の余波を受け、本学でも低学力対策等を含めて教育改善に積極

的に取り組んできた。特に進路に直結した実践的な知識と技術を習得するための

プロジェクト学習は、数年の実施実績がある。

一昨年来のサブプライムローン問題に端を発した世界的景気低迷により、就職

環境が急激に悪化している中、本学の教育力を活かした教育プログラムを実施す

ることによって、微力ながらも受講生のスキル向上を目指した社会貢献を担う。

１．３ 事業の内容

情報系教育を強みとする本学では、進路に直結した実践的な知識と技術を習得

するための全 9 コースからなる“プロジェクト学習”を正課で実施し、その 1

つとして Web デザインコースを設定している。本事業では当該コースをベース

に、Web プログラミング基礎を加えた教育プログラムを実施し、修了者には、就

職機会の提供等就職支援を行う。

また、今回募集する受講者に対し、Web デザイナー等への興味喚起、e ビジネ

ス分野への参画意識醸成を図り、さらには同業界への人材輩出を目指した就職

支援活動を展開する。

１．４ 受講対象者(条件)

受講対象は、短大・専門学校卒以上の 20 歳代から 30 歳代の社会人に絞り、特

に「就職氷河期世代」の社会人の募集に力点をおく。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－２． 受講者募集活動について

２．１ 受講者募集方法

募集方法について、教務部長、

学科長、短大事務長を中心に検

討し法人広報課等関係部署と

の協働により、次の方法にて実

施することを決定した。

また、平成１９年度、２０年

度では、電話や窓口での受付も

行っていたが、受講生情報の誤

入力を避けるため、平成２１年

度は、申込み方法をホームペー

ジでの「申込み受付サイト」の

みとした。

① ポスター（Ｂ３版）１００部、

リーフレット１０００部を

作成した。

ア） ７月３日 ( 金曜日 )

福岡県「若年者仕事サポ

ートセンター」に募集の

ポスターの掲示とリー

フレット設置依頼

イ） 同日、福岡労働局経由

にて、福岡地区及び近郊

のハローワークに募集

のポスターの掲示とリ

ーフレット設置依頼

ウ） ＪＲ福工大前駅にポ

スターの掲示を依頼

エ） 学内にある学生の資

格取得支援、地域の方々

を対象にした情報関連講座、文化教養講座を行っている｢エクステンシ

ョンセンター｣へのポスターの掲示、リーフレット設置依頼

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

② ７月８日(火曜日) 本学ホームページにプログラム内容、募集広告、受講申

込みサイトを開設した。

ア） ７月１３日(月曜日)受講申込みサイトを開き受付開始した。

③ 新聞での受講者募集広告

７月１１日(土曜日) ７月１９日(日曜日)

西日本新聞朝刊 朝日新聞朝刊

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

２．２ 受講者募集状況

① 定員３０名。

② 福岡県「若年者仕事サポートセンター」や福岡地区及び近郊のハローワーク

に募集のポスターの掲示とリーフレット設置を皮切りに、７月１３日より募

集を開始した。受付は、先着順に受講対象条件であることを確認した。

③ 一週間後の７月２１日午前中には、定員の３０名以上の受講申込みや

問合せがあり、ホームページの申込み受付サイトを閉めた。

④ 受講開始までの申込み、問い合わせ者は４２名あり、平均年齢は、３

３.５歳であった。ほとんどが福岡県内からの申込みであったが、長崎

県、佐賀県、大分県からの申込み者もあった。

⑤ 後にキャンセルが６件有り、キャンセル待ちの方に連絡を取り、８月

１1 日に受講定員の３０名が確定した。

⑥ 受講生３０名については、男性８名女性２２名、平均年齢３２歳であ

った。

⑦ 受講生の受講開始時の就職状況は、就業している者１７名、就業して

ない者１３名であった。

就業して

いる者

１７名

正規(職)社員９名 就業してい

ない者

１３名

無職 ９名

非正規社員 ６名 子育て,結婚３名

フリーター １名 その他 １名

その他(自営)１名

Ⅰ－３． 教育プログラムの準備

３．１ 設備整備、備品について

① 受講者作品管理用サーバー、Web 制作用ソフトウェアは、一昨年度整

えていたので問題はなかった。また、デジタルカメラとホームページ

制作素材についても同様であった。

② 受講生用教材として、「これからはじめる Photoshop の本 改訂新版 」、

「これからはじめる Dreamweaver の本 ＣＳ３対応版 」及び

「Dreamweaver逆引きクイックリファレンス CS3＆8対応 For Windows &

Mac」の３冊を受講生、講師、演習補助員分として発注手配した。

③ 受講生が自宅でも予習、復習が出来るようにＵＳＢメモリーを購入準

備した。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－４． 教育プログラム実施

４．１ 日程及びプログラム内容

月／日 内 容 備 考

第１回 ８月２２日㊏ 概要説明、サイト企画、

ページデザイン商品の写真撮影

受講開始時アン

ケート実施

第２回 ８月２９日㊏ Photoshop の基本操作と画像編集

パーツデザイン

第３回 ９月 ５日㊏ ＨＴＭＬの基礎、Dreamweaver

(ホームページソフト)の基本操作

第４回 ９月１２日㊏ Dreamweaver によるネットショ

ップサイトの制作

第５回 ９月１９日㊏ 注文ページおよび注文プログラム

(ＰＨＰ)の制作

第６回 ９月２６日㊏

最終仕上げ

ＣＳＳ(スタイルシート)の基礎

作品講評会

受講終了時アン

ケート実施

修了証書授与

４．２ 担当講師

第１回、第２回・・・・西村 靖司（福岡工業大学短期大学部教授）

第３回、第４回・・・・平岡 茂夫（ 同上 教授）

第５回・・・・・・・・曽 超 （ 同上 教授）

第６回・・・・・・・・西村 靖司、平岡 茂夫、曽 超

招聘講師 山口 有由希（Ｗｅｂデザイナー）

４．３ 講座の時間帯と講座形態

講座の時間帯は、毎回１０：００から１６：００。（休憩時間１２：００から

１３：００まで）合計６回、総学習時間３０時間の講議、演習、実技指導を行

った。

また、自習時間を毎回、１６：００から１７：００まで設け、ＴＡによるサ

ポートを行った。

講座開始日に、受講の動機、現在の就業状況、雇用形態、パソコンソフトや

プログラミングの使用経験などについて記載した「講座開始時アンケート」を

実施した。また、講座最終日には、教育プログラムの内容、時間帯、回数、理

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

解度、受講料設定、今後に役立つか、要望、意見などを盛り込んだ「講座修了

時アンケート」を実施した。

（その他参考資料参照）

４．４ その他

講座前日に、毎回、ミーティングを行い、予定していた教育プログラムの内

容と併せて、学科長、担当教員、ＴＡの学生で、受講生の作品制作の進み具合

の点検、チェックを行い、講座の内容についての微調整を行なった。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－５． 教育プログラムの内容

第 1 回 8 月 22 日㊏ 概要説明、サイトの企画、ページデザイン

商品の写真撮影 担当教員：西村 靖司

【内 容】

（受講者・・・・出席者 ３０名 欠席者 ０名）

最初に全体説明とパソコンスキル等の講座前アンケートを実施した。次に下記の内容に

沿って説明した後、コンセプトシートの作成とサイトの基本デザインを行った。

１．課題説明

「商品販売のＷｅｂサイトを制作する」

・商品（雑貨）を販売するサイト。

・商品説明や価格は自由に創作する。

・商品説明では、商品の特徴およびその使用法や利用場面などを提案する。

２．Ｗｅｂ業界の職種

・Ｗｅｂディレクター： 企画書・仕様書の作成、スケジュール管理、調整係

・Ｗｅｂデザイナー： サイトデザイン、ページデザイン、ナビゲーション

・マークアップエンジニア： デザイナーが仕上げたデザインを html でコーディング

・システムエンジニア： 仕様書・プログラム設計書の作成

・Ｗｅｂプログラマー： プログラム仕様書に基づき PHPなどでプログラミング

３．サイトの構成

・トップページ

・商品一覧

・商品紹介

・店舗紹介

・注文受付

４．コンセプトシートの作成

・店名

・ロゴマーク

・店舗紹介

・取扱商品

・ターゲット

・イメージカラー

・コンセプト

１． サイトの基本デザイン

今回制作する Web サイトの全体構成

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

第 2 回 8 月 29 日㊏

Photoshop の基本操作と画像編集、パーツデザイン 担当教員：西村 靖司

【内 容】

（受講者・・・・出席者 ３０名 欠席者 ０名）

１．Photoshopによるページのデザイン

２．商品の写真撮影とパソコンへの転送

・撮影者と撮影アシスタントに分かれ

協力して撮影

・商品毎に、正面以外にも、必要に応

じて斜め横やクローズアップのカッ

トを撮影

・写りの良い物を選別し、imagesとい

うフォルダを作成し、そこに画像を

移動する

・画像形式について

３．Photoshopの基本操作

・レベル補正

・カラー補正

４．商品紹介画像とサムネイル画像の作成

・500px × 375px にトリミングして商

品紹介画像用に保存

・画像解像度で 150px〜300px に縮小

し、サムネイル画像用に保存

５．トップページ用のイメージ画像の作成

・小物で演出、クローズアップ等

６．タイトル画像の作成

・横幅は 700px 〜 900pxで設定

・店名、ロゴマーク、キャッチコピー

が基本。写真やイラスト等を添える。

７．ボタン作成（ロールオーバーイメージ）

・名称は、”btn1.gif”～”btn5.gif”

・スタイルを使いボタンベースを作成

・ベースができたら文字を載せる

トップページの作成例

商品一覧ページのサムネイル画像

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

第 3 回 9 月 5 日㊏ ＨＴＭＬの基礎、Dreamweaver(ホームページ制作ソフト)

の基本操作 担当教員：平岡 茂夫

【内 容】

（受講者・・・・出席者 ３０名 欠席者 ０名）

教科書「これからはじめる Dreamweaverの本」「Dreamweaver CS3 レッスンブック」を

利用して、Dreamweaver CS3（ホームページ制作ソフト）の基本操作を学ぶ。

１．サイトの定義

・ローカルサイト、サーバの設定

２．ファイルの開き方と画面表示の切り替え

３．Webページの作成

・タイトル、背景の設定

・テキストの挿入、編集

・リスト

・画像の挿入

・表の作成および各種設定、表を使った文字と画像のレイアウト

・リンクの設定

・ロールオーバーボタン

・ブラウザでの確認

作成した練習課題

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

第 4 回 9 月 12 日㊏

Dreamweaver によるネットショップサイト制作 担当教員：平岡 茂夫

【内 容】

（受講者・・・・出席者 ２９名 欠席者 １名）

第 2回までに各自が Photoshopで制作した画面デザインをパーツごとに画像分割し、

第 3回で学んだ Dreamweaver の表機能を使って画像と文字をレイアウトする。ボタンに

は、複数の画像を利用してロールオーバーの機能を付ける。データを Webサーバにアッ

プロードし、ブラウザで確認を行いながらページを作成する。

サイトは、以下の構成を標準とした。

・トップページ（index.html）

・お店紹介（shop.html）

・商品一覧（list.html）

・各商品の詳細ページ（item1.html～item8.html）

・注文ページ（order.html）

受講生の作品例

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

第 5 回 9 月 19 日㊏

注文ページおよび注文プログラム(ＰＨＰ)の制作 担当教員：曽 超

【内 容】

（受講者・・・出席者 ２９名 欠席者 １名）

第 5 回で作成する商品注文処理の内容は、第 4 回までに作成した商品紹介ページに利用

者が注文できるよう注文ボタンを付け加え、実際に注文したい商品と注文個数を入力して、

注文の詳細データは利用者が入力した電子メールアドレスに電子メールで送信する構成と

なっている。この回で、クライアント側プログラミングでは、XHTML、JavaScript と CSS

（Cascading Style Sheet）を、サーバ側プログラミングでは、PHP をそれぞれ利用した。

プログラミングが主な内容となるので、今年もほとんどプログラミング経験がない受講者

の皆さんにとっては非常にハードな内容だったが、個々の技術の役割から、それらの技術

がどのように連携しているかを分かりやすく説明し、短い時間だが、理解してもらうこと

ができた。昨年の経験を生かすことができたこともあり、ほぼ受講者全員が予定した内容

についての課題を完成できた。一部の受講者は、追加課題として尐し発展した注文ページ

の作成も完成した。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

上記の画面は注文受付のトップ画面となる。こ

こで、注文者の名前、メールアドレス、商品と購

入数量を入力してもらう。4 つのすべての項目に入

力が必須となるが、未入力がないかについて【発

注処理>>】ボタンを押した際に JavaScript のスク

リプトがチェックするようになっている。未入力

があった場合は、次のステップに行けず、データ

を入力するように促され、サーバとの通信もとめ

られる。このようなクライアント側での入力デー

タに対するチェックがサーバとの無駄な通信を減

らすことができる。

データ入力が終わり、【発注処理>>】ボタンを押

すと、Web サーバにある PHP のプログラムがユ

ーザの発注処理を行い、左図のように注文確認の

画面が表示される。確認の画面には、商品の単価と注文個数に基づき、消費税や合計金額

が計算され、表示されている。ここで、PHP プログラムでも、再度利用者の入力の有無に

ついてのチェックを行っている。これは、

クライアント側での JavaScript によるチェ

ックだけでは簡単にごまかされることがで

きるからである。この画面で注文内容を確

認し、【商品注文確定>>】ボタンで次のステ

ップ処理に移す。

最後は、右図のように注文処理が確定さ

れ、利用者が Web 画面上で注文内容を確認

するとともに、同じ注文内容が電子メール

で利用者に送られる。

受講者がプログラミングの経験をほとん

ど持っていないことを考慮して JavaScript

と PHP のテンプレートを用意し、それらの

注文処理における役割を解説したうえ、実

習を行った。テンプレートのソースプログ

ラムに対して受講者各自が作成したショッ

ピングサイトの内容に合わせて修正を行っ

てもらった。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

第 6 回 9 月 26 日㊏

最終仕上げ、ＣＳＳ(スタイルシート)の基礎、作品講評会 担当教員：全員

招聘講師 作品講評会 山口 有由希 （Web デザイナー）

【内 容】

（受講者・・・出席者 ２９名 欠席者 １名）

最終回となる第６回では、午前の部で受講者がこれまでに制作してきたＨＰの最終仕上

げを行った。その際、講座を担当した講師全員が個別指導にあたった。午後からは、山口

氏によるＣＳＳ講座を開講した。その間、学内講師が受講者全員の作品をチェック、修了

レベルに達しているかどうかを確認した。その上で、作品講評会では受講者全員が順番に

前に出て、自分の作成したＨＰについて２分間以内でプレゼンしてもらった後、講師がア

ドバイスを行った。その後、山口氏より総評とＷｅｂ業界の現状についての講演が行われ、

最後に修了証書を授与した。

１．スケジュール

① 最終仕上げと補足説明（テンプレート機能について）

② 山口氏によるＣＳＳ講座

③ 山口氏および学内講師による作品講評会（個別コメント）

④ 山口氏による総評と講演

⑤ 各種案内

２．ＣＳＳ講座の概要

① ＣＳＳとは

② Id と class、html タグに直接反映させる方法

③ ＣＳＳファイルの作成とリンク方法

④ ＣＳＳの演習

ＣＳＳの演習課題

３．山口氏の講演概要

① 総評

② 福岡のＷｅｂ業界の現状求職活動に関してのアドバイス

③ 企業側からみた採用時のポイント

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

講座の様子

(第１回、２回、６回講座講師：西村教授)

（商品の写真撮影の様子１） （第３回、４回、６回講座講師：平岡教授）

（商品の写真撮影の様子２） （第５回、６回講座講師：曽教授）

（講座中の全体光景） （山口氏によるＣＳＳ講座）

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－６． 教育プログラムの修了式

９月２６日の最終日に、現役Ｗｅｂデザイナーである山口有由希さんを招いて、

講座にかかわった先生方と共に、受講生の作品を教材提示モニターに公開して講

評会を行った。

受講生３０名全員の作品が講評会にかけられた後、３回欠席をし、一定のレベ

ルに達していない１名を除いた、２９名の作品が認定され、学長名の修了証を発

行した。

（講評会の様子…山口氏(写真左側)

を中心に、受講生ひとりひとりの作

品を丁寧にアドバイスや評価をされ

ていて、受講生からも好評だった。）

（学科長より修了証を授与される。）

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

修了生からのメール

期間中はいろいろとお世話になりありがとうございました、遅くなりましたが御礼を申し上

げます。

また、先日はご多忙にもかかわらず親睦会にまで参加してくださった皆様、本当にお疲れ様

でした。

講義も終わり、今後は皆様それぞれで Web デザイン、ホームページ構築について自己研鑽さ

れることと思います。

ただ、私としては一期一会を大事にしたいと思っており、相互連絡・交流のしくみを構築し

たいと考えています。また、それらを自己研鑽の一助としていただければ幸いです。

そこで、勝手ではありますが「Web 学び直しの会」というＧｏｏｇｌｅグループを作成しま

した。

※このグループはクローズドでメンバー以外には完全に非公開です。

また、グループの目的は、相互の連絡や交流です。

登録を希望される方は、下記 URLにアクセスし、

「 *ログインしてメンバーに申し込む

<https://www.google.com/accounts/ServiceLogin?passive=true&hl=ja&service=groups2&

continue=http%3A%2F%2Fgroups.google.co.jp％

2Fgroup%2FWebmanabi%2Fsubscribe%3Fnote%3D1&cd=JP&ssip=g3>」*

メンバー登録をお願いしたいと思います。

※登録の際は Gmail アカウントが必要になりますのでご了承ください。

「Ｗeb学び直しの会 <http://groups.google.co.jp/group/Webmanabi>」

URL：http://groups.google.co.jp/group/Webmanabi

また、登録手続きに関しまして、手順がわからない場合は、

メンバー招待を行うことも可能ですので、登録を希望される方は、

その旨をメール下さい。

ご希望や質問その他がありましたら、同様にお願いします。

学び直し第３回修了生のコミュニティを作成してくださった

Ｉ・Ｔさん（男性 ２８歳）

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

修了生からのメール

こんにちは。

楽しみにしていた６回の講座、昨日で終了となりました。

初めて使うソフトにとまどったり、プログラミングの世界に驚いたり、毎週毎週とても勉強

になりました。

最終日の山口さんのお話も現場の雰囲気を感じることができてためになりました。

こまやかなところまでお心遣いに感激です。

講座はこれで終了ですが、これをきっかけとして、スタートラインに立った気持ちで、これ

からも webについて学んでいこうと思います。

丁寧に教えてくださった講師の西村先生、平岡先生、曽先生、親身になってサポートしてく

ださったＴＡの皆様がた、どんなにお礼を言っても言い足りないくらいです。

どうぞよろしくお伝えください。

Ｔ・Ｔさん(女性 ３６歳)

おはようございます。

パスワードを送ってくださりありがとうございました！

授業で教わったとおり、FTP 情報を入れて接続してみたのですが、自宅から接続することは

できませんでした…。

ですので、プロバイダと WEB スペース契約をしているので、そちらの URL へコピーしました

^^

ずっと個人サイトを持つのが夢でしたので、これで一歩踏み出すことができました。

これからもっとコンテンツを増やして、少しでも充実したページを作れたら…と思っていま

す！

まだ授業で作ったページしかありませんが、がんばった成果を見ていただけたらと思ってい

ます(*^^*)

お忙しいところ、お手数をおかけしました。

これからも学生の皆様方のために、がんばってくださいね！

本当にありがとうございました。

Ｈ・Ｈさん（女性 ３７歳）

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－７． 就職支援活動の実施

９月２６日の修了式後に、「e ビジネスで活躍するための社会人学び直しプログ

ラム」の一環である、本校主催の合同企業セミナーへの参加者を募ったところ、

男性５名、女性１４名の参加希望の申し出があった。

平成２２年２月１７日、１８日、１９日の３日間に亘って、「学内合同企業セミ

ナー」が、３１１社の参加を得て、開催されるにともない、参加希望者１９名に

対し事前に、メール及び合同企業セミナーのパンフレットを郵送し案内を行った。

Ⅰ－８． 修了者の就職状況

① 教育プログラム最終日の９月２６日に、社会人学び直しプログラムの一環で

ある就職支援活動「学内合同企業セミナー」への参加者を募ったところ、男性

５名、女性１４名の合計１９名の参加希望の申込みがあった。合同企業セミナ

ーは、２月１７日、１８日、１９日の３日間行われた。開催日が平日という事

もあり参加者は、１名であった。

② 講座修了者に対して就職状況アンケートを行った結果（修了者２９名中回答２

３名、無回答６名）講座修了時は、フリーターだった女性は、ホームページ制

作会社に非正規社員として就職した。また、今回の講座を契機に、就業先のホ

ームページ制作担当に任命されたとの報告があった。ボランティア活動を行っ

ている修了者は、受講内容を活かし、その活動のホームページを制作している

など自己啓発の報告が、最も多かった。

ⅠⅠ．．平平成成２２１１年年度度成成果果報報告告書書

Ⅰ－９． 平成２１年度修了者の作品