ホームページ制作レポート - 愛知淑徳大学

ホームページ制作レポート
1. 企画コンセプト「just fit」
ホームページを作るにあたって、私が大事にしていたことは「見る人をイメージして作
るデザイン」である。見る人をイメージしてデザインするといっても、人物の印象をデザ
インするわけではなく、見る人がどんな人なのかを考え、その人がホームページに求める
ことをデザインすることを大事にした。
制作するホームページは人間情報学部のＰＲを含めたものであり、見る対象者は大きく
分けて二種類、高校生と保護者の方々である。現代の高校生はほとんどがパソコンという
モノに慣れており説明などいらず、どちらかというと「面白いもの・楽しいもの」に興味
を引かれる傾向にある。また、保護者の方はパソコンに対して若干親しみがなく、大学の
ホームページに求めるものも高校生と違って、「安心・信頼」といったものである。
そこで今回は、コンテンツの内容をほとんど変えることなく、ホームページを閲覧した
ときの印象テーマとして保護者に「安心・信頼」、高校生に「面白い・楽しい」のように、
印象をデザインの中に組み込むことを目標に制作する。
2. 制作に使用した機器・ソフト
≪機器≫
パソコン１台・デジタルカメラ１台(FUJIFILM 社製 FinePix JX420)
≪使用ソフト≫
メモ帳・Adobe Photoshop(CS2,CS4)・Adobe Illustrator(CS2,CS4)・Adobe Dreamweaver(CS4)
なお、制作には HTML と CSS を使用して制作した。
3. 展示イメージ
① 展示する環境・場所
パソコンが多数設置されている場所であり、使用する台数は２～３台以上。
② 使用する機材
パソコン
③ レイアウト
パソコンには常にホームページのＴＯＰを表示し、そこからテーマ別のホームページ
に移動できるようにする。また、完成までの経過や説明資料を閲覧するパソコンの傍
に設置する。
④ 体験・説明
実際に二つのホームページを見てもらい、中身の印象について比べて実感してもらう
ように展示する。
1
4. 制作スケジュール
週目／月日
１週目／６月７日
作業内容
・表現するテーマ、要素決定
・参考資料を探索
２週目／６月１４日
・コンテンツの決定
３週目／６月２１日
・レイアウト構成の決定
４週目／６月２８日
・コーディング作業(＊)の開始
５週目／７月５日
・コーディング作業
６週目／７月１２日
７週目／７月１９日
・コーディング作業
・制作資料（パネル）作り
・コーディング作業
・制作資料（パネル）作り
＊コーディング…ＨＴＭＬ・ＣＳＳなどのプログラミング言語をプログラミングする作業
5. 制作過程
① 保護者用ホームページ（図１）
図 1
保護者向けデザイン
安心と信頼をデザインテーマとする保護者の方用ホームページを制作する際には、同
2
じく安心と信頼を求められる保険系・教育系などのサイトを参考に制作した。メインカラ
ーは、学部カラーの紫を主とすると少しキツイ印象になってしまうことを考慮し、赤紫寄
りの色をメインとして使用した。また、レイアウトはスッキリとさせるために１カラムの
みとし、同じテーマのコンテンツはバラバラに配置するのではなく、まとめて配置した（図
２）
。また、文章においては対象が保護者なので丁寧語を用いて真面目な印象が持てるよ
うに記述した。
図 2 保護者向けホームページコンテンツ構成
② 高校生用ホームページ（図３）
図 3
高校生向けデザイン
面白いと楽しいをデザインテーマとする高校生用のホームページを制作する際には、
3
若年層向けのコミュニティサイトやポップな印象を受けるサイトなどを参考に制作した。
メインカラーは保護者用と同じく紫ではあるが、色のトーンを明るくし、全体が紫で暗く
ならない様に配慮し、またにぎやかな印象になるようになるべく他の色も取り入れた。
また視覚的にも楽しめるようにするために、ＴＯＰには画像加工したバナーボタンを
用意し、マウスを乗せると画像が切り替わり画像の正体が表示されるクイズボタンを設置
した。さらに各プロジェクトページには上から順に「ページ紹介と＋αの仕掛け（ページ
によって異なる）
」
（図４－①）
、
「企画紹介」
（図４－②）、
「制作日記」
（図４－③）をそれ
ぞれ１ページにまとめ、流れるように配置することで、コンテンツをスムーズな流れで楽
しめるよう配置した。コンテンツの構成は、保護者向けと違って Twitter やリンクなどを
必ずページ内に配置し、企画ごとにコンテンツをまとめて配置した（図５）
。また、文章
においては対象が高校生なので硬い文章にはせず、顔文字を入れることや語りかけるよう
に文を記述することで、親しみやすさを表現した。
①
②
③
図 4 高校生向けホームページ企画紹介ページ
4
図 5 高校生向けホームページコンテンツ構成
③ デザインのまとめ
表１に、デザインに関して簡単にまとめた。
表 1
デザインに関するまとめ
対象者
印象
色
保護者
安心・信頼
赤紫
高校生
面白い・楽しい
明るい紫
その他
デザインやコンテンツは、なるべくシンプルに
構成する
よく見る Twitter などはいつも表示させ、ゼミ
生企画ごとに内容のコンテンツはまとめる
④ デザインの参考サイト
≪保護者向けデザイン≫
ボルトエンジニア㈱：http://www.bolt-engineer.net/
西村あさひ法律事務所：http://www.jurists.co.jp/ja/
聖徳大学：http://www.seitoku.jp/univ/
ＡＩＵ保険会社：http://www.aiu.co.jp/
≪高校生向けデザイン≫
mixi：http://mixi.jp/
日々是えだまめ：http://www.edamame.me/
Pepe：http://pepe.x0.com/pepe/
※これは参考にした一部であり、全てではありません
6. 所感・反省
制作を終えて、今回制作した２作品は、まだまだ改良の余地が多いと感じた。HTML と CSS
を学びながら制作をしていたので進行が遅かったというのも１つの理由だが、制作した後
に評価をしてフィードバックをする回数が足りなかった。また、与える印象についての分
析自体についても研究が足りなかったので、次回はその点に力を注いで制作したい。
5
7. 付録
今回制作したホームページの HTML・CSS ソースを以下に示す。
① a_style.css（保護者向けホームページ）
/* 基本設定 */
* {
margin: 0px;
padding: 0px; }
body {
font-family: "ＭＳゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono,
monospace;
font-size: 14pt;
font-style: normal;
background-color: #FFFACD; }
#page {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFACD; }
#name {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ
", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
height: 22px;
width: 720px;
margin: 20px 0px 0px 0px;
padding: 5px 20px 0px 0px;
background-color: #C6538C;
color:#ffffff;
font-size: 12pt;
text-align:right;
position: fixed; }
#all {
width: 720px;
margin: 0px auto;
padding: 0px;
color: #000000;
6
background-color: #ffffff;
border-right: dotted #000 1px;
border-left: dotted #000 1px; }
#top {
width: 720px;
height: 360px;
padding-top: 55px;
background-image: url(img/top08.jpg);
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto; }
.title {
float: right;
margin: 270px 10px 0px 0px; }
#about {
width: 480px;
margin-left: 10px;
font-size: 100%; }
#twitter {
width: 200px;
height: 400px;
margin:10px 10px 0px 0px;
float: right; }
#menu {
width: 196px;
height: 160px;
background-image: url(img/title4.png);
margin: 10px 0px 0px 10px;
padding: 80px 10px 0px 20px;
font-size: 16pt; }
#all #top #menu ul {
margin: 0px;
padding: 0px;
text-align: center;
line-height: 40px; }
7
#all #top #menu li {
margin: 5px 0px 5px 0px;
padding: 0px;
list-style: none;
list-style-image: none;
background-image: url(img/menuback2.png); }
#all #top #menu li a{
display:block;
color: #B22222;
font-weight: bold; }
#all #top #menu li a:hover {
background-color: #FFFFF0;
color: #ffbb00; }
#main {
width: 700px;
margin-left: 10px; }
#select li {
list-style-image: url(img/clip.gif);
list-style-position: inside;
font-weight: bold;
color: #808080; }
#select li a {
color: #FF69B4; }
#select li a:hover {
text-decoration: underline; }
#diarys {
width: 600px;
margin: 0px auto 30px auto;
font-size: 11pt;
line-height: 18px;
color: #696969;
background-color: #FFDAB9;
border: double #fff; }
.text {
font-size: 11pt;
line-height: 18px; }
8
.text2 {
margin-bottom: 20px;
font-size: 11pt;
text-indent: 1em; }
.text3 {
padding: 0px 20px 0px 20px;
font-size: 11pt; }
ul,li{
list-style-image: url(img/list04.gif);
list-style-position: outside; }
#about li {
line-height: 25px; }
a {
color: #C09;
text-decoration: none;
cursor: help; }
h1 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ
", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
font-size: 14pt;
font-style: normal;
font-color: ;
line-height: 30px;
padding-left: 7px;
text-align: center;
letter-spacing: 20px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
color: #FFF;
background-color: #C6538C;
9
border-right-width: 2px;
border-left-width: 2px;
border-right-style: dashed;
border-left-style: dashed; }
h2 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ
", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
font-size: 12pt;
padding-left: 5px;
border-bottom-width: 1px;
border-left-width: 30px;
border-bottom-style: dashed;
border-left-style: solid;
border-bottom-color: #C6538C;
border-left-color: #C6538C; }
h3 {
font-size: 16pt;
color: #fff;
font-weight: normal;
text-align: center;
line-height: 30px;
margin: 0px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
letter-spacing: 15px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ
", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
background-image: url(img/black.png); }
h4 {
color: #FA8072;
10
margin: 0px;
padding-right: 50px;
text-align: right; }
h5 {
font-size: 12pt;
margin: 10px 310px 5px 10px;
padding: 0px;
border-bottom: dotted #000 1px; }
#topback_1 {
width: 150px;
margin-top:34px; }
#topback_1 ul {
margin: 0px;
padding: 0px;
font-size: 12pt;
font-weight: bold;
list-style: none; }
#topback_1 li {
padding-left: 10px;
border-left: solid #F08080 12px;
margin-bottom: 10px;
list-style: none;
list-style-image: none; }
#topback_1 li a {
color: #FF69B4; }
#topback_1 li a:hover {
text-decoration: underline; }
#topback_2 {
width: 200px;
margin-top:280px; }
#topback_2 ul {
margin: 0px;
padding: 0px;
font-size: 12pt;
font-weight: bold;
list-style: none; }
11
#topback_2 li {
padding-left: 10px;
border-left: solid #F08080 30px;
margin-bottom: 10px;
list-style: none;
list-style-image: none; }
#topback_2 li a {
color: #FF69B4; }
#topback_2 li a:hover {
text-decoration: underline; }
#main img {
float: right; }
#back {
font-size: 12pt;
padding-bottom: 30px;
text-align: center;
color: #FB8AB7; }
#main1 {
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main2 {
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main3 {
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main4 {
12
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main5 {
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main6 {
font-size: 12pt;
padding-right: 30px;
padding-bottom: 30px;
text-align: right;
color: #FB8AB7; }
#main a {
color: #FB8AB7; }
#plus {
width: 650px;
padding: 10px;
background-color: #FFE4B5; }
#copyright {
margin-top: 50px;
padding-bottom: 20px;
text-align: center;
font-size: 10pt;
color: #F08080; }
② top.html（保護者向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
13
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="a_style.css" type="text/css">
</head>
<body>
<div id="page">
<div id="all">
<div id="name">
愛知淑徳大学人間情報学部    
</div>
<div id="top">
<div id="menu">
<ul>
<li><a href="project.html">國分ゼミとは？</a></li>
<li><a href="main.html">ゼミ生の企画紹介</a></li>
<li><a href="diary.html">活動日記</a></li>
</ul>
</div>
</div>
<div id="twitter">
<h2>Twitter</h2>

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"f
fffff","twitterwind_twit_link_color":"FFA500","twitterwind_twit_scroll_color":"E
E82EE","twitterwind_twit_scroll_bg_color":"FFFACD","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"200","twitte
rwind_frame_height":"330","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":200,"eusn"
14
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
<div id="about">
<h1>新着情報</h1>
<div style="
width:440px;
height:120px;
margin:15px;
padding:5px;
text-align:left;
line-height:1.5em;
background-color:#FFF0F5;
color:#000000;
font-size:11pt;
border-right:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
overflow:auto;
scrollbar-face-color:#ffffff;
scrollbar-track-color:#FFF0F5;
scrollbar-arrow-color:#000000;
scrollbar-highlight-color:#c0c0c0;
scrollbar-shadow-color:#c0c0c0;
scrollbar-3dlight-color:#FFF0F5;
scrollbar-darkshadow-color:#FFF0F5;">
2012/09/16 ＨＰ公開予定日<br>
2012/09/12 ＣＳＳ設定ほぼ終了<br>
15
2012/09/06 保護者向けＨＰ作成開始<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
↓<br>
</div>
<h1>関連サイト</h1>
<div class="text">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/c/top.html">高校生向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
</div>
<div id="copyright">Copyright(c) Chie Kawase. All rights reserved.</div>
</div>
</div>
</body>
16
</html>
③ project.html（保護者向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="a_style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="name">
愛知淑徳大学人間情報学部 
</div>
<div id="top">
<div class="title">
<img src="img/title2.png" height="80" width="216">
</div>
<div id="topback_2">
<ul>
<li><a href="top.html">ＴＯＰ</a></li>
<li><a href="main.html">ゼミ生の企画紹介</a></li>
<li><a href="diary.html">活動日記</a></li>
</ul>
</div>
</div>
<div id="main">
<h1>國分ゼミとは</h1>
<h2>ゼミ内容「感性を活かしたワクワクするモノづくり」</h2>
<div class="text3">
<p>高性能で便利だけどいまいち馴染めないモノ、少し不便だし必要でもないけれどなんだ
か楽しくてワクワクするモノ、日常生活の中で私たちは、むしろ後者のようなモノに愛着
を持ち、長く大切に使っています。</p>
17
<p>本プロジェクトでは、性能や便利さだけでは説明できない人間の感性を測定・モデル化
した上で、実際に試作品を作り、評価実験を通して、モノに対する好き嫌いの謎に迫りま
す。</p>
<p>対象は、クルマ、ロボット、ケータイ、ゲーム、Ｗｅｂ、マルチメディア・コンテン
ツ、電子玩具など、生活に密着した様々な情報システムです。</p>
<div id="main1"><a href="#top">▲Page top</a></div>
</div>
<div class="text">
<h2>担当教諭</h2>
<img src="img/kkb_photo5.jpg" height="250" width="300">
<h5>名前</h5>
<div class="text2">國分光輝（こくぶんみつてる）准教授</div>
<h5>専門分野</h5>
<div class="text2">感性工学・人間工学・認知心理学</div>
<h5>主な担当科目</h5>
<div class="text2">感性工学・ヒューマンインタフェース・調査法演習</div>
<h5>卒業プロジェクト</h5>
<div class="text2">「感性を活かしたワクワクするモノづくり」</div>
<div id="main1"><a href="#top">▲Page top</a></div>
</div>
</div>
<div id="copyright">Copyright(c) Chie Kawase. All rights reserved.</div>
</div>
</body>
</html>
④ main.html（保護者向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="a_style.css" type="text/css">
</head>
18
<body>
<div id="all">
<div id="name">
愛知淑徳大学人間情報学部 
</div>
<div id="top">
<div class="title">
<img src="img/title2.png" height="80" width="216">
</div>
<div id="topback_2">
<ul>
<li><a href="top.html">ＴＯＰ</a></li>
<li><a href="project.html">國分ゼミとは</a></li>
<li><a href="diary.html">活動日記</a></li>
</ul>
</div>
</div>
<div id="main">
<h1>ゼミ生企画「わくわくするモノづくり」</h1>
<div id="select">
<ul>
<li><a href="#main">Home Page</a>：見る人が求める“何か”をデザインする</li>
<li><a href="#main1">Twitter</a>：学部キャラクターと話せるプログラム</li>
<li><a href="#main2">Graphic&AR</a>：非日常の世界を現実に織り込む</li>
<li><a href="#main3">Movie</a>：思わず目を奪われる映像作り</li>
<li><a href="#main4">Character</a>：学部をキャラクター化する</li>
<li><a href="#main5">Game</a>：
「もしもの世界」を知る適正診断</li>
</ul>
</div>
<div class="text">
<h2>ホームページ</h2>
<img src="img/hp_02.gif" width="320" height="240" alt="HP 作成作業中">
<p>ホームページ班では、その名の通り皆さんが普段よく使うインターネットの中にある、
ホームページを作っています。特に対象者を「高校生」の方と「保護者」の皆さまに絞り、
２種類のホームページを作成しました。</p>
<p>ホームページは、見てもらう人がどんな人なのかを考えて作られています。相手が大人
19
なのか子供なのか。はたまたデザインに「安心」を求めているのか、
「面白さ」を求めてい
るのか。
</p>
<p>私達は毎日の中で、デザインによってコントロールされた印象を受けて、会社やファッ
ションブランド、飲食店のイメージを決めていることが少なからずあります。</p>
<p>例えば、まだ行ったことのないカフェやレストランの印象は、ホームページから決まっ
たりはしませんか？<br>
ぜひ「高校生」向けと「保護者」向けの２種類を、見比べてみて下さい。</p>
<div id="main1"><a href="#top">▲Page top</a></div>
<h2>ツイッター</h2>
<img src="img/twitter_01.gif" width="320" height="240" alt="Twitter 編集作業">
<p>Twitter bot 班では、人間情報学部の受験生を対象に、役に立つ情報や学部に関するつ
ぶやきを自動で投稿する「ヒューちゃん bot」を制作しています。</p>
<p>
ただ一方的に情報を流すだけじゃなく、受験生からの質問等を受け、その返信をするとこ
ろがこのヒューちゃん bot の魅力です。オープンキャンパスの相談会や大学展だけでは知
ることができなかった実際の情報も知ることができます。</p>
<p>使ってみたいと思った方は、ぜひヒューちゃん bot 宛てに質問や相談、悩みを送ってみ
てください。また、Twitter bot は、パソコンとインターネットに接続できる環境とやる気
さえあれば、プログラミングが全くわからないという高校生でも今すぐに作ることができ
ます。</p>
<p>もちろん人間情報学部に入れば bot がどのような仕組みで動いてるのか、その裏側も１
からしっかり学ぶことができます。</p>
<div id="main2"><a href="#top">▲Page top</a></div>
<h2>画像処理＆AR</h2>
<img src="img/ar_03.jpg" width="320" height="240" alt="ヒューちゃんがカメラに！？
＆画像編集">
<p>AR 画像処理班班では、１つの班で AR と画像処理という２つの分野の作品制作をしてい
ます。
AR(※１)においては、人間情報学部のキャラクターである「ヒューちゃん」の 3DCG モデル
を制作し、カメラで写したモデルをコンピュータの画面に表示させています。</p>
<p>AR に関しては、技術面において詳しく習う授業は本学にはありません。しかし、授業で
プログラミングについて学ぶことで、AR に必要な Processing というプログラムに授業の知
識を応用することができます。</p>
<p>画像処理(※2)においては、被写体の人物を加工する編集作業をしています。
本学では主に Photoshop という画像編集ソフトウェアを使い、授業で画像の変形や変換の
20
仕方を学びコラージュ作品などの制作をします。ゼミでは授業で学んだ技術を応用し、さ
らに高度な加工技術を磨いています。</p>
<p>愛知淑徳大学ではこのように最新機器や技術を扱いながら、自分の本当にやりたい研究
や制作ができる環境が整っていることが実感できます。</p>
<div id="plus">
<p>※1
ＡＲ(拡張現実)<br>
現実世界にデジタルの情報を重ね合わせることによって、実際には現実にないものをその
場にあるように見せる、または体験させることができる技術のこと。
「マーカー」と呼ばれ
る紙に描かれたマークをカメラで映し読み取ることで、あらかじめ用意したプログラムが
動き、コンピュータの画面上に現実の風景とＣＧを合成させて表示することができる。
</p><p>
※2 画像処理<br>
コンピュータを用いて画像を目的に合わせて加工などの処理をすること。画像処理ソフト
ウェアには有償から無償のものまで様々なものがある。本学の授業ではプロのデザイナー
も使用する、有償の Photoshop や Illustrator を扱う。</p>
</div>
<div id="main3"><a href="#top">▲Page top</a></div>
<h2>動画制作</h2>
<img src="img/movie_01.jpg" width="320" height="240" alt="動画材料集め中">
<p>動画班は、個性的なメンバーによる、個性を生かした作品作りをしています。</p>
<p>今回は、それぞれの持ち合わせている技術＋自ら学んだ知識を元に、私たちにしかでき
ない感性を取り込んだ「人間情報学部 PR 動画」を作りました。とりあえずぶつかってみる
精神で、試行錯誤し、様々な機器やソフト、学びを盛り込みました。テレビでみるような
ステキ動画が誰でも楽しく作れます。</p>
<p>「心理学系」
、
「工学系」
、
「図書館情報系」の３つの分野に分けて、それぞれのイメージ
にあった動画を撮影、編集しました。家のパソコンにあるような簡単なソフトから、プロ
も使う本格的ソフトまで、
「使ってみよう！」を詰め込んだ作品です。</p>
<p>ぜひ、一度ご覧ください。</p>
<div id="main4"><a href="#top">▲Page top</a></div>
<h2>キャラクター制作</h2>
<img src="img/chara_04.gif" width="320" height="240" alt="キャラクターのビフォー
アフター">
<p>キャラクター班では、分かりにくいと評判の人間情報学部の三系列（心理学系、人間工
学系、図書館情報系）を見ただけでわかるよう視覚化しています。</p>
<p>したがって、普通のキャラクター製作とは作成方法が異なります。私たちはまず初めに
学部生に三系列のイメージに関するアンケートをとり、その結果を元にキャラクターを作
21
成しました。</p>
<p>しかし、アンケートのみだと突出した個性がなかったため、キャラクターとしての個性
を織り込みました。現在、キャラクター案をイメージから書き出し、ラフ画、キャラクタ
ー確定まで行いました。今後はミニキャラクターで３D 化を行い、動かせるようにしたいと
思います。</p>
<div id="main5"><a href="#top">▲Page top</a></div>
<h2>ゲーム</h2>
<img src="img/game_01.gif" width="320" height="240" alt="ゲーム画面">
<p>人間情報学部には 3 つの系列がありますが、それぞれよく「何をしているのかわからな
い」
「具体的にどんな授業があるの？」という質問をいただきます。そんな受験生の方のた
めに、今『人間情報への招待状』と題した適性診断を制作しています。</p>
<p>
最初に名前を入力し、24 の質問項目に回答することで、オススメの系列と授業が紹介され
ます。そして、
「プレイヤーの名前」
「オススメの系列」
「授業」が入った、その人だけの「世
界にひとつしかない招待状」をお土産として渡せる機能を付けました。</p>
<p>また、同時に Flash を利用した大学シュミレーションゲームも作成しています。適性診
断によって出されたオススメの授業から、気になった授業の内容を見てもらうこともでき、
簡単な模擬授業、先輩からの裏話、先生の楽しい紹介などを見ることができます。隠しコ
ンテンツも入っているので是非探してみてください。
</p>
<div id="main6"><a href="#top">▲Page top</a></div>
</div>
</div>
<div id="copyright">Copyright(c) Chie Kawase. All rights reserved.</div>
</div>
</body>
</html>
⑤ diary.html（保護者向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
22
<link rel=stylesheet href="a_style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="name">
愛知淑徳大学人間情報学部 
</div>
<div id="top">
<div class="title">
<img src="img/title2.png" height="80" width="216">
</div>
<div id="topback_2">
<ul>
<li><a href="top.html">ＴＯＰ</a></li>
<li><a href="project.html">國分ゼミとは</a></li>
<li><a href="main.html">ゼミ生の企画紹介</a></li>
</ul>
</div>
</div>
<div id="main">
<h1>ゼミ生活動日記</h1>
<h4>１週目：６月７日</h4>
<div id="diarys">
今日、ゼミの制作活動が始まりました！<br>
ＨＰ担当が１人で寂しいですが、全力で頑張ります！と、意気込んだはいいんですが、な
んと初日からＵＳＢのデータが壊れて全部消えてしまいました…。<br>
でもバックアップがあったので、何とか無事復活！<br>
バックアップのありがたみを知った初日でした。<br>
（ＨＰ担当Ｃ．Ｋ）
</div>
<div id="back"><a href="#top">▲Page top</a></div>
<h4>２週目：６月１４日</h4>
<div id="diarys">
テキスト通りに進めても、思った通りにはプログラムが動作しないので、直しの作業が大
変です。<br>
インターネットで原因を調べてコードを書き換えても、なかなか解決しない問題もあり前
23
途多難です。<br>
自宅サーバを立てるのも PHP というプログラミング言語を使うのも初めてなので手探り状
態ですが、精一杯がんばります！<br>
（Twitter bot 担当Ｍ．Ｔ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
<h4>３週目：６月２１日</h4>
<div id="diarys">
昨日も制作活動に没頭しました。<br>
オープンキャンパスで来場された高校生に体験してもらう予定の画像処理では、実際に髪
の毛の色や目の色を加工したり、ペンタブを利用してのらくがきを行うなど試行錯誤して
います。<br>
ゼミ担当の國分先生からも斬新なアドバイスを頂き、学生よりも流行に敏感な先生に学生
も驚いています！（笑）<br>
（画像処理担当Ｙ．Ｗ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
<h4>４週目：６月２８日</h4>
<div id="diarys">
本日は各班の制作状況報告会でした。<br>
どの班も少しずつ制作物が形になってきたようで、完成が楽しみです。<br>
ゲーム・ＦＬＡＳＨ・アプリ制作班では、授業を疑似体験できるＦＬＡＳＨゲームや、人
情のどの系列に向いているかを診断するテストを制作中です。<br>
國分先生から「もっと砕けた感じだと良い」とアドバイスを頂いたので、現在のものから
もう少し遊び心のある文や絵に差し替えていきたいと思います。<br>
（ゲーム・ＦＬＡＳＨ・アプリ担当Ａ．Ｋ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
<h4>５週目：７月５日</h4>
<div id="diarys">
本日はキャラの作り直しをしました。<br>
先週ゼミメンバーから聞いた意見を参考に練り直しをしました。<br>
練り直したキャラに一部のゼミメンバーから意見を聞き、まだ練り直しをしています…。
<br>
本当に今日は練り直しの嵐でした。果たしてオープンキャンパスまでに間に合うのか不安
です。<br>
24
（キャラクター・擬人化担当Ｙ．Ｈ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
<h4>６週目：７月１２日</h4>
<div id="diarys">
先週で全ての撮影が終了したので、今日は動画の編集をしました。<br>
３つの系列のプロモーションビデオを作り、後からその３つを組み合わせて完成です。<br>
初心者も多く、うまくいかないことも多々ありますが、みんなで知恵を出し合って頑張っ
ています。<br>
完成品を楽しみにしていて下さい。<br>
（動画担当Ｓ．Ａ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
<h4>７週目：７月１９日</h4>
<div id="diarys">
オープンキャンパスまで残り少なくなりました。<br>
ＡＲ班は基本であるモデルの表示まで完成し、残すは当日展示する３ＤＣＧ、オリジナル
のマーカーの作成に取り掛かっています。<br>
当日の３ＤＣＧ展示は「お腹がすくような」展示になる予定です。<br>
（ＡＲ担当Ｓ．Ｓ＆Ｙ．Ｈ）
</div><div id="back"><a href="#top">▲Page top</a>
</div>
</div>
<div id="copyright">Copyright(c) Chie Kawase.All rights reserved.</div>
</div>
</body>
</html>
⑥ style.css（高校生向けホームページ）
/* 基本設定 */
body { margin: 0px;
padding: 0px;
font-family: "ＭＳゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono,
monospace;
font-size: 70%;
font-style: normal;
25
color: #000; }
#all {
width: 920px;
margin: 10px auto;
background-image: url(img/line4.png);
background-repeat: repeat-y;
background-position: 240px 0px; }
#side {
width: 195px;
margin-left: 10px;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
background-image: url(img/bg01.png); }
#menu {
margin-left: 10px;
padding: 1px;
padding-left: 5px;
color: #FFF;
border-left: solid 2px #C9F; }
.text1 {
padding-left: 5px;
color: #FFF;
font-size: 12px; }
.twitter {
width: 153px;
26
height: 280px;
margin-left: 7px; }
#message {
width: 825px;
height: 210px;
font-size: 22pt;
background-image: url(img/header3.jpg);
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 65px; }
#main {
width: 670px;
margin: 0px 10px 0px 0px;
padding: 10px 5px 5px 0px;
font-size: 22pt;
color: #000033;
float: right; }
.text2 {
margin-left: 0 px;
font-size: 14px;
text-indent: 10px;
padding-left: 25px; }
.choice {
padding-left: 25px;
font-size: 16pt;
float: none; }
.diary {
background-color: #FFF;
font-size: 14px;
padding: 10px;
color: #F60;
27
margin-bottom: 10px;
background-image: url(img/bg01.png);
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 1px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed;
border-top-color: #F99;
border-right-color: #F99;
border-bottom-color: #F99;
border-left-color: #F99; }
.fe {
clear: both; }
/* メニュー */
#all #side #menu ul {
font-size: 14px;
margin: 0px;
padding: 0px;
letter-spacing: 1px;
list-style: none;
text-align: left;
display: inline;
line-height: 16px; }
#menu li a{
color:#ffffff;
padding:0px 5px; }
#all #side #menu li a:hover{
color:#93C;
text-align: right;
letter-spacing:5px; }
#all #side ul {
margin: 0px;
padding: 0px;
28
line-height: 18px; }
/* リンク */
a {
color: #C09;
text-decoration: none;
cursor: help; }
a:hover {
text-decoration: none;
color: #CCF; }
#all #main a:hover{
position : relative;
top: 1px;
left: 1px; }
/* リスト */
ul,li{
list-style-position: inside; }
/* 見出し */
h1 {
font-size: 24px;
border-bottom-style: solid;
border-bottom-width: 6px;
border-bottom-color: #CCB1FE;
color: #909;
font-family: "ＭＳＰ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino
Mincho Pro", serif;
line-height: 5px; }
h1:first-letter{
font-weight: bold;
font-size: 46px; }
h2 {
text-align: right;
color: #909;
background-color: #FFF;
margin: 10px 10px 10px 0px;
border-left-style: ridge;
border-left-color: #C9F;
29
border-left-width: 5px;
display: block; }
h2:first-letter{
color: #C9F;
font-weight: bold; }
h3 {
color: #F90;
font-size: 16px;
display: inline;
margin-bottom: -10px; }
/* 画像 */
img {
margin: 5px;
float: right; }
small {
font-size: 22px;
font-weight: bold; }
#x {
width: 800px;
height: 630px;
margin: auto;
background-image: url(img/background_1.png);
background-repeat: no-repeat;
background-position: auto; }
#y {
width: 800px;
height: 630px;
margin: 10px auto;
padding: 0px; }
⑦ top.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
30
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
ようこそ！<br>
國分ゼミプロジェクトへ！<br>
皆さんを楽しませるモノ作り☆<br>
気になるボタンを触ってみよう！
</div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
31
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">

</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>welcome to Kokubun project</h1>
<div class="text2">
32
<p>
國分ゼミへようこそ！<br>
気になる企画ページをのぞいてみよう！新たな世界と出会えるかも！？
</p>
</div>
<h1>select your choice</h1>
<div class="choice">
<p>
<div align=center>画像の正体は一体何！？<br>
触る前に Let's シンキングタイム！</div>
</p>
<a href="03_ar.html"><img src="img/b_ar.gif" border="0" width="300" height="60"
onMouseOver="this.src='img/b_ar_a.gif'" onmouseout="this.src='img/b_ar.gif'"></a>
<a href="01_hp.html"><img src="img/b_hp.gif" border="0" width="300" height="60"
onMouseOver="this.src='img/b_hp_a.gif'" onmouseout="this.src='img/b_hp.gif'"><br>
<a href="05_character.html"><img src="img/b_chara2.gif" border="0" width="300"
height="60" onMouseOver="this.src='img/b_chara2_a.gif'"
onmouseout="this.src='img/b_chara2.gif'">
<a href="02_twitter.html"><img src="img/b_twitter.gif" border="0" width="300"
height="60" onMouseOver="this.src='img/b_twitter_a.gif'"
onmouseout="this.src='img/b_twitter.gif'"><br>
<a href="04_game.html"><img src="img/b_game.gif" border="0" width="300" height="60"
onMouseOver="this.src='img/b_game_a.gif'" onmouseout="this.src='img/b_game.gif'">
<a href="06_movie.html"><img src="img/b_movie.gif" border="0" width="300"
height="60" onMouseOver="this.src='img/b_movie_a.jpg'"
onmouseout="this.src='img/b_movie.gif'">
</div></div>
<br class="fe">
</div>
</body>
</html>
⑧ 01_hp.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
33
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
正解は「ホームページ」<br>
<small>
ホームページもやり方によっては<br>
人を驚かせる悪戯も仕込めちゃう☆<br>
すっごく面白いものなんです(^o^)<br>
ではさっそくＧＯ→
<input type="button" name="yuki" style="BACKGROUND: pink; COLOR: navy"value="何
かが起こる！"
onClick="for(j=0;j<60;j++){for(i=0;i<10;i++){window.parent.moveBy(0,-i)}for(i=0;
i<10;i++){window.parent.moveBy(i,0)};for(i=0;i<10;i++){window.parent.moveBy(0,i)
};for(i=0;i<10;i++){window.parent.moveBy(-i,0)}}">
</small>
</div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
34
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
35
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>homepage project</h1>
<div class="text2">
<img src="img/hp_02.gif" width="320" height="240" alt="HP 作成作業中">
<p>皆さんが普段よく使うインターネットの中にある、ホームページを作ってみました！今
回は特に高校生の方向けに、次は保護者の皆さま向けに作成する予定です。</p>
<p>ホームページには、見てもらう人がどんな人なのかを考えて作られています。相手が大
人なのか子供なのか。はたまたデザインに「安心」を求めているのか、「面白さ」を求めて
いるのか。</p>
<p>私達は毎日の中で、デザインによってコントロールされた印象を受けて、会社やファッ
ションブランド、飲食店のイメージを決めているんですよ！(＾o＾)</p>
<p>大学祭では保護者の方向けのホームページを公開するので、ぜひ来て見比べてみて下さ
い！</p>
</div>
<h1>weekly Diary No.1</h1>
<div class="text2">
<p>１週目（６月７日）ＨＰ担当Ｃ．Ｋ<br>
今日、ゼミの制作活動が始まりました！ＨＰ担当が１人で寂しいですが頑張ります！と、
意気込んだはいいものの、なんとＵＳＢのデータが吹っ飛びました…orz
でもバックアップがあったので、何とか無事復活！！
バックアップのありがたみを知った初日でした（^ｖ^*）
</p>
</div>
</div>
<br class="fe">
</div>
</body>
36
</html>
⑨ 02_twitter.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
正解は「Ｔｗｉｔｔｅｒ」<br>
<small>
人間情報学部の可愛いマスコットキャラ<br>
名前は「ヒューちゃん」！<br>
ヒューちゃんの日常をのぞいちゃおう！<br>
もしかしたら、呟き返してくれるかも？<br>
さぁ、<a href="http://twitter.com/hyuchan_bot" target=_blank>のぞいてみよう！
</a>
</small></div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
37
</div>
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
38
</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>twitter project</h1>
<div class="text2">
<img src="img/twitter_01.gif" width="320" height="240" alt="Twitter 編集作業">
<p>こんにちは、Twitter bot 班です！この班では、人間情報学部の受験生を対象に、役に
立つ情報や学部に関するつぶやきを自動で投稿する「ヒューちゃん bot」を作っています。
</p>
<p>ただ一方的に情報を流すだけじゃなくて、受験生からの質問などを受けて、その返信を
するところがこの Twitter bot の魅力！オープンキャンパスの相談会だけでは知ることが
できなかった「生」の情報も知ることができるよ(^^)</p>
<p>使ってみたい！というキミは、ぜひヒューちゃん bot 宛てに質問や相談、悩みを送って
みてね。自分でも作ってみたいというキミ！Twitter bot は、パソコンとインターネットに
接続できる環境とやる気さえあれば、プログラミングが全くわからない人でも作れちゃい
ます！</p>
<p>もちろん人間情報学部に入れば bot がどういうしくみで動いてるのか、その裏側もしっ
かり学べます！しくみが気になるキミは、ぜひ人間情報学部へ！</p>
</div>
<h1>weekly Diary No.2</h1>
<div class="text2">
<p>２週目（６月１４日） Twitter bot 担当Ｍ．Ｔ<br>
本どおりに進めてもなかなかプログラムが動かない…こういうとき１人の班だとちょっと
寂しいです(笑)<br>
ネットでいろいろ原因を調べてコード書き換えても動かなくてとてもつらい(´・ω・
｀)<br>
自宅サーバ立てるのも PHP 使うのも初めてなので手探り状態ですが、がんばります(^O^)
</p>
39
</div>
</div>
<br class="fe">
</div>
</body>
</html>
⑩ 03_ar.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
正解は「画像処理＆ＡＲ」<br>
<small>
プリクラよりもすごく変身できたり、<br>
本当は無いものをバーチャルで触って<br>
みたり？それは夢じゃないんです！<br>
画像処理は意外と簡単！<br>
ぜひ１度チャレンジしてみてね。</small>
</div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
40
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
41
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>graphics processing & AR project</h1>
<div class="text2">
<img src="img/ar_03.jpg" width="320" height="240" alt="ヒューちゃんがカメラに！？
＆画像編集">
<p>こんにちは！ＡＲ画像処理班です！私たちは１つの班で２つのチームに分かれて制作
をしています。
</p>
<p>
ＡＲや画像処理なんて言われても具体的に何をしているのかわからないと思います。これ
から私たちが何をしているのか、ちょっぴりご紹介しましょう。
</p>
<p>
ＡＲ(エー・アール)では、現実にはない３ＤＣＧのデータをカメラで読み込み、コンピュ
ータの画面上でその場にあるように見せるというバーチャル作品を作っています！画像処
理では、専用の画像処理ソフトを使い、まるで高度なプリクラのように写真の中の人を加
工する技術を磨いています！
</p>
<p>オープンキャンパスでは、ＡＲによる人間情報学部のキャラクター「ヒューちゃん」と
会えたり、自分の写真を加工する画像処理の体験ができますよ♪あなたも人間情報学部に
来て、未知の領域にダイブしてみては？最新の科学技術を身に付けて、新しい自分の世界
を描いてみよう！
42
</p>
</div>
<h1>weekly Diary No.3</h1>
<div class="text2">
<p>３週目（６月２１日）画像処理担当Ｙ．Ｗ<br>
昨日も制作活動に没頭しました！。<br>
オープンキャンパスで体験してもらう予定の画像処理では、実際に髪の毛の色や目の色を
加工したり、ペンタブを使ってデコったりと実践中です（>ω<)！<br>
國分先生から「つけまとかどう？」というお声も…どうやら K・○みゅ○みゅさんがマイブ
ーム（？）なようですｗｗ
</p>
</div>
<h1>weekly Diary No.7</h1>
<div class="text2">
<p>７週目（７月１９日）ＡＲ担当Ｓ．Ｓ＆Ｙ．Ｈ<br>
いよいよオープンキャンパスまで残り少なくなってきました！<br>
AR 班はなんとか基本は出来上がったので、あとは表示させる３ＤＣＧやマーカーの作成な
どの当日の展示物の作成に取り掛かりました！<br>
私が作る３ＤＣＧは「お腹が空く」予定です、みなさんお楽しみに( *｀ω´)
</p>
</div>
</div>
<br class="fe">
</div>
</body>
</html>
⑪ 04_game.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
43
</head>
<body>
<div id="all">
<div id="message">
正解は「ゲーム」<br>
<small>
人間情報学部がよく分からないあなたの<br>
ために作っちゃいました「招待状」！！<br>
これから始まるあなただけの物語を<br>
ぜひ人間情報学部で始めませんか？
</small></div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
44
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>game project</h1>
<div class="text2">
45
<img src="img/game_01.gif" width="320" height="240" alt="ゲーム画面">
<p>人間情報学部には 3 つの系列がありますが、「それぞれ何をしているのかよくわからな
い。
」
「どんな授業があるの？」というあなたのために『人間情報への招待状』と題した適
性診断を制作しています。
</p>
<p>
最初に名前を入力し、24 の質問項目に回答してもらい、最後にオススメの系列と授業を紹
介しています。</p>
<p>そして、
「あなたの名前」
「オススメの系列」「授業」が入った、あなただけの「世界に
ひとつしかない招待状」を渡せる機能を付けました。（この招待状があっても入学試験がパ
スできるわけではないので悪しからず…）
</p>
<p>また、同時に Flash を利用した大学シュミレーションゲームを作成しています。適性診
断によって出されたオススメの授業から気になった授業の内容を見てもらうこともでき、
簡単な模擬授業、先輩からの裏話、先生の楽しい紹介などを見ることができます。隠しコ
ンテンツも入っているので是非探してみてください。</p>
<p></p>
</div>
<h1>weekly Diary No.4</h1>
<div class="text2">
<p>４週目（６月２８日）ゲーム・Ｆｌａｓｈ・アプリ担当Ａ．Ｋ<br>
今日は各班の制作状況報告会でした。<br>
どこの班も、じわじわと形になってきたようで完成が楽しみです！<br>
ゲーム・Ｆｌａｓｈ・アプリ制作班では、授業を疑似体験できる FLASH ゲームや、人情の
どの系列に向いているかを診断するテストを制作中です(｀・ω・´）<br>
國分先生から「もっと砕けた感じで！」とのお言葉をいただいたので、もう少し遊び心の
ある文や絵に差し替えていきたいと思いますｖ
</p>
</div>
</div>
<br class="fe">
</div>
</body>
</html>
⑫ 05_character.html（高校生向けホームページ）
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
正解は「キャラクター・擬人化」<br>
<small>
学部を構成する３つの柱を面白可笑しく<br>
キャラクター化してみました(>ω<)<br>
考える中で変わりまくるキャラクター達。<br>
完成したとき、何が残るのか…！<br>
</small></div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
47
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
48
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>character project</h1>
<div class="text2">
<img src="img/chara_04.gif" width="320" height="240" alt="キャラクターのビフォー
アフター">
<p>キャラクター班では、わかりにくいと評判の人間情報学部の三系列（ヒューマンアナラ
イジング、コンテンツデザイニング、リソースマネージング）をぱっ！と見ただけでわか
るようにキャラクター化しています☆</p>
<p>なので普通のキャラクター製作とは違います！まず学部生に三系列のイメージに関
するアンケートをとりました。そのアンケートの結果を元にキャラクターを作成！</p>
<p>しかし、アンケートのみだと、突出した個性がなかったため、キャラクターとしての個
性を織り込みました^^ 現在、キャラクター案をイメージから書き出し、ラフ、キャラク
ター確定まで行っています。今後は３Ｄ化を行い、躍らせたり動かせたりできるようにし
たいと思います(*^o^*)</p>
<p>淑楓祭（学祭）の展示では、とーっても楽しい淑楓祭恒例の淑楓ダンスを躍らせ、展示
したいと考えています。興味のある方は、是非来てください^^</p>
</div>
<h1>weekly Diary No.5</h1>
<div class="text2">
<p>５週目（７月５日）キャラクター・擬人化担当Ｙ．Ｈ<br>
キャラの作り直しをしました(^o^)<br>
先週ゼミメンバーから聞いた意見を参考に練り直し。<br>
練り直したキャラに一部のゼミメンバーから意見を聞いて、まだ練り直し…。<br>
本当に今日は練り直しの嵐でしたΣ(･ω･ﾉ)ﾉ果たしてＯＣまで間に合うのでしょうか！？
笑
</p>
</div>
</div>
<br class="fe">
</div>
</body>
49
</html>
⑬ 06_movie.html（高校生向けホームページ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>國分ゼミ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<div id="all">
<div id="message">
正解は「動画」<br>
<small>
動画なんて撮影してハイ終了！とか<br>
思ってませんか？いえいえそんなんじゃ<br>
終わらないのが國分ゼミ！<br>
ぜひ現在放送中の人間情報学部紹介ＰＶを<br>
見てから帰ってね！
</small></div>
<div id="side">
<h2>Menu</h2>
<div id="menu">
<ul>
<li><a href="top.html">Top</a></li>
<li>―<a href="01_hp.html">HomePage</a></li>
<li>―<a href="02_twitter.html">Twitter</a></li>
<li>―<a href="03_ar.html">Graphic&AR</a></li>
<li>―<a href="04_game.html">Game</a></li>
<li>―<a href="05_character.html">Character</a></li>
<li>―<a href="06_movie.html">Movie</a></li>
</ul>
</div>
50
<h2>Link</h2>
<div class="text1">
<ul>
<li><a href="http://kkblab2012.web.fc2.com/index.html">國分ゼミ分岐ページ
</a></li>
<li><a href="http://kkblab2012.web.fc2.com/a/top.html">保護者向けＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/" target=_blank>愛知淑徳大学公式ＨＰ</a></li>
<li><a href="http://www2.aasa.ac.jp/faculty/human_info/index.html" target=_blank>
人間情報学部ＨＰ</a></li>
<li><a href="http://www.aasa.ac.jp/human/" target=_blank>ヒューちゃんの部屋
</a></li>
<li><a href="http://www2.aasa.ac.jp/people/mkoku/index.html" target=_blank>國分ゼ
ミ公式ＨＰ</a></li>
</ul>
</div>
<h2>Twitter</h2>
<div class="twitter">

<script type="text/javascript">
<!-var twitterwind_option
=
'{"isOnlyMe":"true","twitterwind_logo":"none","twitterwind_logo_bgcolor":"FFFFFF
","twitterwind_logo_color":"333303","followers_color":"000000","followers_bgcolo
r":"FFFFFF","twitterwind_max_length":"39","twitterwind_username":"none","twitter
wind_username_color":"333333","twitterwind_username_bgcolor":"FFFFFF","twitterwi
nd_twit":"block","twitterwind_twit_color":"333333","twitterwind_twit_bgcolor":"C
F97CF","twitterwind_twit_link_color":"FFFFFF","twitterwind_twit_scroll_color":"F
A3FAF","twitterwind_twit_scroll_bg_color":"F5ABDF","twitterwind_follower":"none"
,"twitterwind_follower_bgcolor":"FFFFFF","twitterwind_frame_width":"153","twitte
rwind_frame_height":"250","twitterwind_frame_border":"false","twitterwind_frame_
border_color":"C0DEED","twitterwind_base_font_size":"12","twitterwind_me_font_si
ze":14,"twitterwind_caption_font_size":16,"twitterwind_scroll_height":250,"eusn"
:"H0hj8+8F9MM="}';
var twitterwind_url
= 'http://www.tweetswind.com/twitterwind.php';
//-->
</script>
51
<script type="text/javascript"
src="http://www.tweetswind.com/js/twitterwind.js"></script>

<div style="font-size:12px; text-align:right; width:153px"><a target="_blank"
href="http://www.tweetswind.com">By Twitter ブログパーツ</a></div>


</div>
</div>
<div id="main">
<h1>movie project</h1>
<div class="text2">
<img src="img/movie_01.jpg" width="320" height="240" alt="動画材料集め中">
<p>どうも！動画班です！動画班は、個性を生かした作品作りをしています！メンバーはと
ても個性的です。笑
</p>
<p>今回は、それぞれの持ち合わせている技術＋自ら学んだ知識を元に、私たちにしかでき
ない感性を取り込んだ「人間情報学部 PR 動画」を作りました。とりあえずぶつかってみる
精神で、試行錯誤し、様々な機器やソフト、学びを盛り込みました！テレビでみるような
ステキ動画が誰でも楽しく作れます。</p>
<p>「心理学系」
、
「工学系」
、
「図書館情報系」の３つの分野に分けて、それぞれのイメージ
にあった動画を撮影、編集しました。家のパソコンにあるような簡単なソフトから、プロ
も使う本格的ソフトまで、
「使ってみよう！」を詰め込んだ作品です。</p>
<p>この動画を見たあなたは、
「なにこれ？」
「どうなってるの？」とひきつけられて、きっ
と人間情報学部に入りたくなること間違いなし！！
新しいあなたがとびだす扉は、この動画の中にあるのです。</p>
</div>
<h1>weekly Diary No.6</h1>
<div class="text2">
<p>６週目（７月１２日）動画担当Ｓ．Ａ<br>
こんにちは！今回の担当は動画班です！<br>
先週で撮影が全て終わったので、今日は動画の編集をしました(^^)<br>
3 系列の PV をそれぞれ作って、後から 3 つを組み合わせます♪<br>
初心者も多いので上手くいかないこともありますが、みんなで知恵を出し合って頑張って
います！<br>
完成品を楽しみにしていてくださいね(*^_^*)
52
</p>
</div>
</div>
<br class="fe">
</div>
</body>
</html>
53

Download Report