研究ノート

Web サービスを利用したマルチメディア授業の利点と注意点
運営堂： 森野誠之 （非常勤）1．はじめに
筆 者 は 2007 年 か ら マ ル チ メ デ ィ ア 表
現の科目を担当しており，当時はデスクトップ PC にソフトをインストールし授業を行っていた。現在も GIMP などのフリーソフトを利用することはあるものの，ブラウザで完結する Web サービスを用いることも多くなっている。2010 年前
図1

後と2015年を比較し，Web サービスを利HTML 演習用データ用したマルチメディア授業の利点と注意点について述べる。

いて表示されることに驚く学生も多かったのも事実である。スマートフォンもな

2．授業の内容とその変化

くネット環境も整備されていない頃であるのでこれで問題はなかった。

2-1

2000 年代後半の Web サイト制作
2-2

2015 年の Web サイト制作

2007～2009 年 ま で の Web サ イ ト の 制
作 は テ キ ス ト エ デ ィ タ に HTML を 記 述2010 年 代 に な る と ビ ジ ネ ス で のし，学内サーバにデータをアップロード

Web サ イ ト 制 作 は WordPress やする流れで行っていた。タグの説明，大Movable Type な ど の CMS（Content

文字小文字・半角全角の説明，ハイパー

Management System） 中 心 に 移 行 し，リンクの説明が主なもので見た目や内容

HTML フ ァ イ ル を 量 産 す る こ と が 減 り

よりも学生にとってはプログラミングに

始 め て い る。CMS で 作 成 す る 場 合 は レ近い内容であった。演習時に作成していン タ ル サ ー バ ー の 準 備 が 必 要 と な り，た HTML の例を図 1 に示す。

HTML で は な く て PHP や Javascript な時代を感じさせるものであるが，当時どのプログラミング言語を用いることもは こ の HTML フ ァ イ ル を ブ ラ ウ ザ で 開求められるためにレベルも高く，学生に愛知大学情報メディアセンター

－ 91 －vol.26, No.1, 2016

図2

ペライチトップページ

説 明 す る の は 不 可 能 で あ っ た。 従 来 のと で Web サ イ ト も 対 応 せ ざ る を 得 な くHTML を 教 え る こ と も 可 能 で は あ っ たなったが，ペライチでは自動で対応するが，学生が日頃見ている Web サイトとはた め に HTML な ど を 知 ら な く て も 問 題程遠い完成となるために意欲もわかないなく作成が可能である。学生は 95 ％以上問題もあった。

がスマートフォンを所持しているので，2015 年は CMS よりもさらに手軽に作ス マ ー ト フ ォ ン に 対 応 し た Web サ イ ト

成したいというユーザーニーズの現れかを作成し閲覧することで実感も得やすい

ら，Web サ ー ビ ス で Web サ イ ト を 制 作ようである。

できるようになった。その主なものがペ図 3 にペライチの管理画面を示す。

ライチというサービスである（図 2）。縦

画面を見てわかるようにテキストはそ長でページ遷移のないランディングペーの ま ま 入 力 す れ ば 反 映 さ れ， パ ー ツ はジ と 言 わ れ る Web サ イ ト 制 作 で き る も「＋」を押すことで追加される。パーツのの で，HTML や PHP な ど 知 識 も 必 要 な

上下は右上の矢印で調整し，削除は「×」くパーツを組み合わせるだけ完成してしボタンを押せば反映される。直感的に操まう。

作が分かる管理画面となっており，学生

ま た， ス マ ー ト フ ォ ン が 普 及 し た こ
愛知大学情報メディアセンター

への細かい説明なしで操作させても問題－ 92 －vol.26, No.1, 2016

図3

ペライチ管理画面なく作成ができていた。

るために実習室での利用には向いていな

学生の評価に関しては，2010 年ごろのかった。事前のテストの動作は問題がな

よ う に HTML の 記 述 を 中 心 に 評 価 す る

いが，授業当日にならないと現象が発生

授業から，デザインや構成を中心に評価

し な い た め Web サ ー ビ ス を 利 用 す る 場するものに変更している。このためプロ合は万が一に備えた準備も必要になる。

並 み の Web サ イ ト を 作 成 す る 学 生 も おり，授業後のアンケートでもペライチよ2-3

W eb サイト制作サービス利用時の注意点

りもレベルの高いものを使いたいという意見も見られた。HTML の頃は難しかったとい意見が大半だったのと比較すると

Web サ イ ト 制 作 時 に 注 意 す る の は 個ツールの進化が学生の意識を変えたとも人情報である。事前に学籍番号や電話番いえる。

号などの個人情報を入力しないことを徹利用時のアカウント作成に関しては特底するとともにシステム面でも注意を払に説明をしていない。スマホアプリなど

う こ と が 必 要 で あ る。Google の 情 報 収で登録を求められることも多いため，学集ロボットである Googlebot に情報収集生も慣れているのであろう。

をされてしまうと Google や Yahoo! など

2015 年 以 前 に も Jimdo な ど の Webの検索の結果に表示されてしまう可能サービスも存在しているが，同一 IP アド

性 が あ る た め に， 授 業 で 使 う 際 は 事 前

レスで同時にアクセスすると制限がかかに Googlebot を除外することが求められ愛知大学情報メディアセンター

－ 93 －

vol.26, No.1, 2016

図4

Googlebot 除外の設定

る。ペライチでの Googlebot 除外の設定

存し忘れると自宅で作業ができないといは以下のようになっている。（図 4）

う デ メ リ ッ ト が あ っ た。USB メ モ リ 自Web サ ー ビ ス 側 で 除 外 の 設 定 が な い体の破損やデータ破損も多く，作成した場合でも，公開・非公開の設定ができる

HTML を 作 り 直 す 場 合 も 少 な か ら ず 発

こともあるが，除外できない場合は授業生していた。

では用いてはいけない。また，サービス

昨今ではクラウド上にデータを保存で自体の退会方法も学生に周知しておき，きるオンラインストレージが広まってお成績確定後に希望者には退会させることり，ここにデータを保存することで場所も必要である。

を選ばずにデータの出し入れができるよ
う に な っ て い る。 主 な Web サ ー ビ ス は

3．画像・動画ファイルの取り扱い

DropBox，OneDrive である。これらは無料でも数ギガのデータ容量があるため

3-1

画像や動画ファイルの持ち運びに，動画を保存することもあるマルチメ
ディア系の授業でも容量を気にすること

こ ち ら も Web サ ー ビ ス の 普 及 に よ りは全くない。安心して作業をできる環境

恩 恵 を 受 け た 部 分 で あ る。2010 年 ご ろを提供することも重要であるので，マルは USB メ モ リ が 主 な 保 存 媒 体 で あ っ た

チメディアの授業ではなくてはならないために，授業に持ってくるのを忘れてくサービスとなっている。

ると何もできず，学内 PC のデータを保愛知大学情報メディアセンター

－ 94 －vol.26, No.1, 2016

3-2

オ ン ラ イ ン ス ト レ ー ジ 利 用 時 の 注

4．フリー素材

意点
4-1

フリー素材の利用

オンラインストレージという名の通り
インターネットに接続していない使うこWeb サ イ ト の 制 作 な ど に は 画 像 素 材とができない点には注意を払う必要があが必要であり，自分で撮影した画像を加る。課題提出期限が近くなって自宅での工することも可能であるが，クオリティ作業中にネット接続ができなくなることの 高 い も の と な る と 2010 年 ご ろ に は 有があり，必要な画像ファイルなどがダウ料の画像素材を購入せざるを得なかっ

ン ロ ー ド で き な い 場 合 が あ る。PC 内 のた。現在では無料の素材サイトでもクオローカルフォルダとの同期機能を利用リティの高いものを配布しており，それし，不測の事態に備えること周知するこを 使 う だ け で プ ロ 並 み の Web サ イ ト をとで回避できる。

作成することが可能である。主な素材サ
イトはぱくたそである（図 5）。
ぱくたその特徴は個性的な画像がそ

図5
愛知大学情報メディアセンター

ぱくたそトップページ－ 95 －vol.26, No.1, 2016

図6

男性の素材

図8

赤ちゃんの素材

約によってはトラブルになることがある。トラブルになりやすいのは人物で，
図7

女性の素材

事前に許諾を取っておらずに当事者同士で許諾を取ることが書かれている場合もろっていることに加え，高解像度の素材ある。授業で利用する際は利用規約を熟も提供されていることである。ペライチ

読し不明点がある場合は管理者に問い合を利用する場合は背景に画像を使用する

わせるとともに，回答がない場合は授業こともあるために，高解像度の素材はとでの利用を控えるべきであろう。ても重宝する。個性的な画像素材も紹介
5．まとめする。（図 6～8）
4-2

フリー素材全般の利用時の注意点

Web サ ー ビ ス の 進 化 に よ り 見 栄 え の良 い Web サ イ ト を 簡 単 に 作 成 す る こ と

フリー素材全般の利用上の注意点は利ができ，インターネットに接続できれば用 規 約 で あ る。 フ リ ー で あ る と 自 由 に作業場所も問わなくなってきている。し使ってよいように捉えがちだが，利用規かし，Google の情報収集能力やフリー，

愛知大学情報メディアセンター

－ 96 －

vol.26, No.1, 2016

無料という言葉を鵜呑みにすると個人情報の漏えいや法的なトラブルになる可能性もあるので細心の注意を払う必要がある。実際にサービスをした後に，著作権やプライバシーの漏えいに関する座学により学生の理解も深まることが期待される。
謝辞
本 稿 を ま と め る に あ た り， 株 式 会 社
ホットスタートアップ

橋田一秀氏，山下翔一氏，香月雄介氏，並びにぱくたそすしぱく氏に多大なご助力いただきましたことを，心より感謝申し上げます。

愛知大学情報メディアセンター

－ 97 －

vol.26, No.1, 2016