卒業研究「ソフトウェア情報学部紹介サイトの制作」

平成 30 年度
青森大学 ソフトウェア情報学部

緑川研究室
3115012 工藤 結女

共同研究者
3115005 太田 奈那

1目次
第1章

序論 ...........................................................................................................................1

1.1

はじめに ....................................................................................................................3

1.2

開発環境 ....................................................................................................................4

1.3

HTML について............................................................................................................4

1.4

CSS について .............................................................................................................5

1.5

JavaScript について.................................................................................................5

1.6

jQuery について ........................................................................................................5

第2章

HP 制作 ......................................................................................................................6

2.1

構想段階 ....................................................................................................................6

2.2

項目「ホーム」について ..........................................................................................7

2.3

項目「5 分で分かる青森大学の利点」について .......................................................8

2.4

項目「教員」について ..............................................................................................92.5 項目「研究室」について ............................................................................................10
2.6

項目「資格」について ............................................................................................11

2.7

項目「教員免許」について.......................................................................................12

第3章

情報収集・撮影 .......................................................................................................13

3.1

取材・撮影 ................................................................................................................13

3.2

取材対象者 ................................................................................................................13

3.3

質問内容....................................................................................................................13第4章

調査の概要 ..............................................................................................................14

4.1

アンケート調査.........................................................................................................144.2

調査内容....................................................................................................................144.3

調査結果....................................................................................................................14第5章

結論 .........................................................................................................................22

参考資料 ................................................................................................................................22
謝辞 ........................................................................................................................................232

/第 1 章序論

1.1 はじめにこの論文を手に取った方はまず「なぜ大学の公式サイト[1]が存在しているのに新たに紹介ページを作成する必要があるのか」と考えると思う。日々インターネット利用者の増え続ける現代において、情報収集に使用される HP は重要だ。青森大学に入学する以前の私も、少しでも何をしているのか具体的な情報がないかと探し回っていた。しかし、最も上に表示される大学の公式を見た際に「情報量の不足」や「関連する情報への距離」を感じた。研究室の内容も教員ページに先生方の半数が個人的に設置した URL が疎らに存在するだけで、入学してからのプレゼンテーションで初めて実態を知ることができる現状なのだ。本大学に関心のある方へ更に魅力を伝える為には少し物足りない。４年間を過ごしてきた我々が学生の目線から紹介すれば、また違ったものが生まれるのではないだろうか。そこで、この問題を払拭した分かりやすく親しみやすさを感じて貰える「ソフトウェア情報学部の紹介サイト」を制作することにした。役割としては、主に私がCSS、画面構成や文章校正、画像や動画の編集。共同研究者の太田が HTML、JavaScript 、jQuery、取材内容や調査結果のデータ化を担当した。なお、手の空いた側が相手の作業を手伝う事も多かったためこの限りではない。

図 1.1-1：公式サイトの教員紹介

図 2.1-1：公式サイトの取得できる資格紹介3

1.2 開発環境
本研究では主に HTML5・CSS3・JavaScript を使用していく。メモ帳で拡張子をそれぞれに合わせて保存し、その後は作業効率向上の為にフリーテキストエディタである
TeraPad[2] を採用した。画像編集の為にペイント、動画編集の為にフリーソフトのAviutl[3]、アンケート結果をまとめる為に表計算ソフトである Excel なども使用した。
また、本研究室卒業生の富岡新さんと宮崎広大さんの共同研究である「一緒に学ぶ！HP制作」というサイト[4]を参考にして jQuery を取り入れた。その後、GitHub[5]というソースコードをインターネット上で管理するサービスを使用して Web 上に公開した。

図 3.1-2：TeraPad 使用時の作業画面

1.3 HTML についてHTML とは、HyperText Markup Language の略でサイトを作成する際に骨組みとなる最も基本的な開発言語の事である。日々閲覧されている様々なサイトは HTML を元にして作られている。

4

1.4 CSS について
CSS とは、Cascading Stype Sheets の略でサイトの見た目を装飾する言語のことである。大概のサイトは、HTML と CSS を組み合わせて使われている。サイトの背景色やレイアウト、文字の大きさなど表示に関してのスタイルを指定することができる。

1.5 JavaScript について
JavaScript とは、アプリの開発で使用される人気な言語で動きのあるサイトを作る為など幅広く利用されている。本研究では、スライドショーを導入する為に上記で語った「一緒に学ぶ！HP 制作」[12]から jQuery も組み込むことで効率良くしている。

1.6 jQuery について
jQuery とは、JavaScript 用のライブラリの事である。私たちが普段目にしているページの見た目を再現しようとすれば相当な量のプログラムが必要となるが、jQuery の使用でそれらを数行で実装する事も可能となる。

図 4.1-6：富岡さんと宮崎さんの作成したホームページ

5

第2章

HP 制作

2.1 構想段階
最初に「どのような情報が求められているのか」という点について話し合った。その結果、載せるべきだと判断した項目が青森大学の利点紹介(2-3)・教員(2-4)・研究室(2-5)・資格(2-6)・教員免許(2-7)の 5 つである。その後、それぞれのページの画像やリンクの配置に統一性を持たせるためにペイントソフトで構図を書きながら議論していった。まず、画面上部にメニューバーを常に表示することで、好きな時にホーム画面や他の項目へ行けるようにした。ページ自体は常に左側にテーブルを置くことで本文の内容とは差別化している。中には関連のあるページへのリンクなどを設置して、上側がこのサイト内に飛ぶもの、下側が外部のサイトに飛ぶものと分けた。下の画像(図 5)は初期段階、実際に作成していた際の構成図である。また、その後も変更を重ねたため、現在の完成したサイトとは細かい仕様が異なっている。

図 5.2-1：作成初期段階の研究室紹介ページ構成図6

2.2 項目「ホーム」について
ホーム画面では「どうしたら堅苦しさを感じずに見て貰えるか」を考えた。初期段階では必用な情報をそれぞれ縦に並べて掲載する事を考えて構成図を書いたが、文章量が増えるばかりでどうしても堅苦しさが消えなかった。そこで、配置を大幅に変えてよりシンプルな見た目にする事を心掛けた。右側には常に動く動画を組み込んでホーム画面から動きを感じて貰えるようにした。また、本来は初期段階である下の画像(図 6)のピックアップ欄に 5 分で分かる青森大学の利点(2-3)の情報を入れる予定だったが、他のページに飛ぶボタンを配置して完全にホーム画面とは区別して考えられるようにした。
これらの行動で文章量や見た目の煩雑さを大幅に軽減する事ができた。

図 6.2-2：初期段階のホーム画面構成図

図 7.2-2：ホーム画面

7

2.3 項目「5 分で分かる青森大学の利点」について
この項目の目的は、青森大学独自の取り組みや入学する利点を知って貰うことである。
中には、このサイト自体を見る時間があまり取れない方、長い文章を読むのは疲れる方もいる。その為に「5 分で分かる青森大学の利点」と題を付け、jQuery で作成したスラ
イドショーで簡単に説明している。画像は MicrosoftOffice の PowerPoint で作成した。
内容は 4 年間この学校に在学して感じた意見をまとめたもので「独自の支援制度」「アクティブ・ラーニング」「多彩な資格講座」という 3 つの内容である。

図 8.2-3：5 分で分かる表紙ページ

図 9.2-3：５分で分かる３ページ目
82.4 項目「教員」について
この項目の目的は、先生方に親しみやすさを持って貰うことである。まず一覧ページ（図 10）では、文章ではなく笑顔の写真を並べることで堅苦しさを払拭しようとした。
気になった先生の写真にマウスカーソルを重ねることで「名前」「専門分野」「受け持つ授業」が簡易的に表示される仕組みだ。教員個人ページ(図 11)には取材で聞くことのできた先生自身の情報や、学生に聞いて得た内容から記述した紹介文、青森大学が気になっている方へのメッセージ動画などを掲載した。これで外部の先生にお会いしたことのない方でも、どんな人物か想像しやすいのではないかと思う。また、クリックすると研究室のページへいける画像も左に設置している。

図 10.2-4：教員一覧ページ

図 2.1-2：富岡さんと宮崎さんの卒業研究で作成されたホームページ
2.5 項目「研究室」について

図 11.2-4：緑川先生ページ
92.5 項目「研究室」について
この項目の目的は、各研究室の雰囲気や現在行っている研究を知って貰うことである。
一覧ページ(図 12)では、それぞれの研究室で先生方が学生に教えている最中の写真を載せる事で実際の雰囲気を伝えられるようにした。また、一目でどんな内容をしているのか分かるように三つの研究内容をまとめている。紹介ページ(図 13)では、取材の際にお聞きした「どんな学生を募集しているか」「どんな学生が向いているか」「研究室全体の雰囲気」などを文にした。また、現在主だって取り組んでいる研究内容を画像をつけて紹介している。左下の「研究室風景」の画像は別ページへのリンクになっており、取材で撮影した内部の写真 9 枚を掲載することで実際の雰囲気を掴めるようにした。

図 12.2-5：研究室一覧ページ

図 13.2-5： 緑川研究室ページ10

2.6 項目「資格」について
この項目の目的は、ソフトウェア情報学部で取れる資格の内容について知って貰う事である。公式サイトのように取得できる資格名を載せるだけではなく、このサイトを見る事でどんなものか確認できるようにしたいと考えた。一覧ページ(図 14)では、それぞれのボタンに「主催企業」「試験の実施期間」「どんな能力を問われるか」を簡単に記載している。紹介ページ(図 15)では、青森大学学生生活ガイド [6]や Wikipedia[6]から抜粋した文章と、受ける際に必要となるだろう具体的な内容を書いた表を掲載した。左側にはリンクを設置しており、関連する教員の紹介ページや授業の公式ページ、資格の公式サイト[7] [8] [9][10]などにすぐ移動できる。

図 14.2-6：資格一覧ページ

図 15.2-6：基本情報技術者試験ページ
11

2.7 項目「教員免許」について
この項目の目的は、ソフトウェア情報学部で取れる教員免許の内容を知って貰う事である。まず、教員免許ページ(図 16)では青森大学スタンダードテキスト*1 から抜粋した文章と表を載せて、東北や青森大学における教員免許取得の難しさや楽しさを知って貰おうと考えた。次にそれぞれの紹介ページ(図 17)では、2015 年大学案内*2 から抜粋した実際に卒業後教員として働いている方の声、2013 年学生生活ガイド*3 から抜粋した必用となる講義の表を掲載している。また、講義名には全てリンクをつけているのでクリックで公式サイトの授業詳細に飛ぶことができる。この項目は緑川先生からの打診で作成したため、教員免許取得に興味がある方の背中を押す紹介になれば良いと思う。

図 16.2-7：教員免許についてのページ

図 17.2-7：高等学校教諭一種免許状「数学」ページ
12

第3章

情報収集・撮影

3.1

取材・撮影

ソフトウェア情報学部を紹介するサイトを作るにあたって、先生方や研究室についての具体的な情報を得る為に取材と撮影を行った。事前に卒業研究ご協力のお願いとして質問内容など書いた紙を配布し、日程の調整を行っている。

3.2

取材対象者

取材対象者は、本大学ソフトウェア情報学部の所属となっており専門教科を受け持っている先生方 9 人だ。また、日程は以下の通りである。
図表 1. 3-2：取材スケジュール
角田 均：2018/07/09(月)黒田 茂：2018/07/11(水)李 考烈：2018/07/11(水) 追加撮影：11/6(火)堀端 孝俊：2018/07/13(金) 追加撮影：11/9(金)坂井 雄介：2018/07/18(水) 撮影：07/27(金)藤澤 日明：2018/07/18(水) 撮影：07/27(金)橋本 恭能：2018/07/20(金) 撮影：07/25(水)和島 茂：2018/07/30(月) 撮影：11/20(火)緑川 章一：初回日不明

追加撮影：2018/11/30(金)

3.3

質問内容

下記の表(図表 2)に先生方へ質問した大まかな内容を記載する。
図表 2. 3-3：質問内容
問 1 ）教員の年齢。
問 2 ）教員の趣味。
問 3 ）教員の何か自慢できることや最近努力している事。
問 4 ）青森大学の良いと思うところ。
問 5 ）研究室ではどんな学生を募集しているか。
問 6 ）研究室自体の雰囲気。
問 7 ）現在行われている研究内容。
13

第 4 章 調査の概要
4.1

アンケート調査

私たちの作成したサイトは実際に見て貰ったとき良い影響を与えるか調査するために、学生・生徒を対象とするアンケート調査を実施した。調査は青森山田高等学校情報処理科の３年生 17 人と青森大学ソフトウェア情報学部 2 年生 35 人を対象として、15分程度でサイトを閲覧して貰いアンケート配布と回収を行った。調査日は青森山田高等学校が平成 30 年 12 月 5 日、青森大学が平成 30 年 12 月 20 日である。

4.2

調査内容

調査内容は下の表(図表 3)の通りである。なお、無回答者もいたため、アンケートの回収数と内訳の数が異なる。
図表 3. 4-2：調査内容
問 1 ）あなたの性別を教えてください。
問 2 ）このサイトは役に立ちましたか。また、その理由は何ですか。
問 3 ）印象に残ったページはどこですか。また、その理由は何ですか。
問 4 ）このサイトに対して思った意見やアイデアを自由に書いてください。
問 5 ）サンプルから、このホームページに適していると思うものを選んでください。

4.3
問1 )

調査結果

あなたの性別を教えてください。

図表4. 4-3：性別（人数）8
男性女性4414問2 )このサイトは役に立ちましたか。

図表5. 4-3：問2 山田高校

図表6. 4-3：問2 青森大学
ふつう
6人

はい 28 人はい 17 人図表 7. 4-3：問 2 を選んだ理由
青森山田高等学校
はいホームページだけでは手に入らない情報も詳しく書かれていていいと思います。
とても分かりやすく、内容が細かく書かれていたので役に立っています。
研究室の内容や細かいところも紹介されていてとても詳しかった。
先生方の情報や、資格などの詳しいことを知れたので、役に立ちました。
研究室の情報がどのサイトでも詳しく書かれていなかったので役に立った。
教員の性格など細かく書かれていて、親しみやすく接することが出来そうだと思った。
ソフトウェア情報学部について分かりやすくまとめてあった。
ソフトウェア情報学部について詳しく知れたから。
教師の名前と顔が見れたりしたから。
教員紹介では年齢、趣味が書いているので、みんなが知りたいことが書いているのが、役にたつと思います。いろいろな資格や教員免許について書いているので、役に立ちました。
とてもシンプルでわかりやすいデザインだけれど、決して質素ではなく見やすかった。
一人一人の教員紹介が分かりやすく見てて普通に面白かった。
青森大学に入るので少しでも先生のことを知れてよかった。
15

どんな研究をしているか、一目で分かるから見やすい.
教師のプロフィールのところ専門分野も書いてくれるところが親切です。
青森大学
はい

青森大学で出されているサイトより見やすいと感じたから。
全体的に見やすく動画も貼ってあったので good。
細かい情報まであり、分かりやすかった。
自分の知らないことや知りたかったことが記載されていて、手軽に詳しく調べることが出来るので凄いと思った。
今後の研究室選びの参考になる。
必要とする情報が分かりやすい位置に置かれていたが、情報量が少なかった為。
それぞれの研究室について詳しく書いていて、分かりやすかった。
いろいろな研究室の情報を知れたから。
従来のサイトよりもコンパクトで、かつ見やすく作られていると思います。
青森大学の公式ホームページよりも何をやっているのか分かりやすかった。
見やすいという印象が一番。大学について「知りたい」が良くまとまっていると思う。
ソフトウェア情報学部が知りたい情報(特に研究室の内容)が載っているから。
サイトの全体的に見やすい。
このサイトを見ていろいろな研究があっていいと思いました。
資格のことや研究室に関わることがこれから多くなると思うので、こういった詳細が記載されているサイトがあるのは便利に思いました。
来年の研究室の情報があるため分かりやすかった。
研究室の内容など、実際に見に行く手間が省けるし、見てから実際に訪問にも行けると思うから。
研究室の一覧がすごくわかりやすくて見やすかったです。
分かりやすく情報も収集しやすい。
各研究室の内容が分かりやすく書かれている。
先生の情報がわかりやすい。
研究室の説明が個人的には役に立った。
各研究室で何をやってるかわかるから。
青森大学のサイトだと印象があまりよくないけど、こういうサイトがあるととてもいい。
16

見やすくて、探しやすかった
それぞれの先生方がどんな研究をしているのか分かりやすい。
研究室の情報がある
ふつう問3 )

研究室について特色など分かりやすかった。

印象に残ったページはどこですか。

図表8. 4-3：問3 山田高校（人数）2

図表9. 4-3：問３ 青森大学（人数）11 21126198

ホーム

教員

研究室

資格

教員免許

図表 10. 4-3：印象に残ったページを選んだ理由
青森山田高等学校
ホーム

5 分でわかる青森大学の利点が読みやすかった。
カーソルを画像の上に乗せただけで情報が出てくるのはすごいと思った。
その人の専門分野が分かりやすく、紹介文も見やすくなっていて良かった。
教員の所では、年齢、趣味、学歴など、みんなが知りたいことがたくさん書いているのが印象に残ります。

教員

教師の方々一人一人の説明が面白かった。
見たことある先生がいて改めてこういう研究をしているんだなと知りました。
教師の紹介ページで教師方の顔の写真が貼られており、カーソルを合わせると何の授業を担当しているか分野は何かを知ることが出来たのでとてもいいと思いました。
17

それぞれの研究室で３つの目的があり、どの研究室もすごく楽しそうでした。その研究風景などもあってとてもわかりやすいです。
先生方の研究室でどのような研究をしているのかがわかり、印象に残りました。
研究室

どういう研究をしているのか細かく知れて面白かった。
画像をスライドできるスライドショーが簡単に作れるという点。
興味のある研究があったから。
各先生の授業でどんなことやっているのか分かりました。
それぞれの研究のさらに詳しいところまで、説明をされているから.
生き物の仕組みにちょっと興味わきました。

資格

この大学でどんな資格がとれるかが分かったから。
具体的な内容が書いていて凄くわかりやすく、ためになった。
青森大学

ホーム

.mp4 ファイルを適切に表示している
カーソルを当てるとその教員に関することで簡単なものが分かるということが、扱い易いと感じたから。
写真撮影と画像加工。
デザインがしっかりしていて見やすかった。
先生方の一人一人の動画が良いと思いました。

教員

見やすい。
それぞれの写真があって、名前や授業などの説明があって分かりやすくて良い。
一目で教員を見れた。
先生方の画像にカーソルを合わせた時に、下から専門分野や担当している授業が出てくるのが良いなと思った。
これから研究室を決めるので注目した。
リンクが多く関連した情報が見れたから。
研究室について迷っていた時期なので、とても参考になりました。各研究室で行われていることが詳細に記載されていたので熟読したいです。

研究室

どの研究室がどんな研究をしているかが分かりやすく、印象に残った。
これから研究室に入っての行動が増えると思うから。
3 年生からの研究先に興味を持てたから。
自分が進学する学部ではどのようなことをしているのか知ることが出来るのは、嬉しいことだと感じた。

18

研究室の特徴が分かりやすくまとまっていて良かった。見る人にとって何を研究しているのかが分かる点、何を目標としているのかが分かる点が良い。
見やすいような作りと、各研究室の主なテーマが表示されていて、一目で分かるようなデザインだったから。
分かりやすかったから。
テーマがバーンと出ていて見やすい！
近いうちに所属したい研究室を決める必要があるため。
配属したい研究室について調べられる。
研究室の説明が分かりやすいから。
各研究室内容が明らかで、2 年生や新入生にとって、とてもいい。
資格
教員免許

やはり資格を取りたいと思っている人が多いと思うので詳細があると便利に感じました。
必要な授業なども載っていて、一目で見て分かりやすい。

問 4 ）このサイトに対して思った意見やアイデアを自由に書いてください。
図表 11. 4-3：自由記述
青森山田高等学校
9 つの研究室から自分でやりたいことを選べるのが良いと思います。
ソフトウェア情報学部の授業に教員、研究室について分かりやすく、書かれているので、良いと思いました。
サイトのデザインが凝っていていいと思った。
このサイトだけで、ソフトウェア情報学部の詳しいことを知れたしリンクを飛んでいろいろ分かったのでとてもよかったです。
教師のページで、名前を出すなら、顔の横にしたほうが良いと思う。
ホーム画面の所をスクロール出来るようにして、ホームから各ジャンルにジャンプできるようにしたら、操作を少なく出来ると考えました。
研究室や資格の説明をもう少し詳しくしても良いと思う。学生の欄をつくって、学生でやっていることなどを、紹介したらいいと思う。
Microsft office Specialist が見れませんでした。
青森大学ソフトウェア情報学部の web で、資格をとったりするもので、この機会あったら体験してみたいです。
よくまとめられていて、とてもわかりやすいサイトだと思った。
19

研究室一覧で、画像だけでは無く、研究しているのを実際に動画で見たいと思いました。
在校生の声等もあったらいいかもしれない。
よくまとめられていて、とてもわかりやすいサイトだと思った。
研究室一覧で、画像だけでは無く、研究しているのを実際に動画で見たいと思った。
在校生の声等もあったらいいかもしれない。
とても面白かったです。これから青森大学のソフトウェア情報学部に入る人は見るべきだと思いました。
それぞれの研究室の人数を知りたかったから、そこを記載してほしかった。
短くてもいいから Pick Up を作るべきだと思いました。
青森大学
教職の科目のみ担当ではあるが情報教育センターの雪田先生を含めたほうが良いかと感じます。
教員の背景は同じほうが良かった。見やすいと思いました。
image を新しいタブで開くところが多く、タブが増えて消すのがダルい。教員と研究室で同じ部分があってメニューバーに教員がある必要がないと思った。
先生たちの笑顔がかわいい。
サイトにアクセスしてからのレスポンスが早い点は良かった。PC で見た場合はあまり気にならなかったが、モバイル版で確認したところレイアウトがかなり崩れていたので、改善する必要があると考える。
ヘッダー部分の「サンプル」の部分が縮小した所文字が欠けていたので修正したほうが良いと思います。
全面的に分かりやすく書かれており、雰囲気をつかんでもらいやすいと思う。個人的には 5 分でわかる青森大学の利点のテキストをもう少し見やすくしてほしい。文字が横広がりで見辛かった。デザイン A が良いと書いたが華やかさが欲しいと思った。デザイン B にすれば華やかさは出るが色に統一感がない。落ち着いてはいるが綺麗なデザインを目指してほしい。研究室の内容をもっと細かく体験アプリなどを用意して見てる人が、その研究をしたいと思えるようにしたら良いのでは？ホーム以外画像が動くというのがないのがもったいない。もっと堅苦しさをなくしてほしい。
ホームにある動く画面が少し目に悪い。
とても見やすくて助かった。
教員だけでなく在校生のページがあっても面白いと思います。在校生の活動など。
ソフトのイメージカラーだけだと、少し見えにくいかも…
凄くわかりやすく見やすくまとめられていたので良かったと思いました。
このサイトに直接、意見を書けるようにしてほしい。緑川先生の年齢を表示してほしい。
20

問い合わせフォームをつくるといいかもしれない。学内の掲示板の内容もあるといいかもしれない。
背景にソフトウェア感のある画像やデザインがあったらいいと思った。
画面サイズが固定されていて、環境によって不自然な余白が発生してしまう。Width
を 100%にするか、margin 0 autoで中央寄せにするとよいと思う。

問 5 ）サンプルから、このホームページに適していると思うものを選んでください。
なお、この設問は青森大学で実施したアンケートでのみ調査したものである。

図 18.4-3：デザイン候補

図表12. 4-3：デザイン（人数）
デザインA
1415

デザインB
デザインC

621

第5章

結論

アンケートの結果から、私たちは公式サイトとは違った視点からソフトウェア情報学部について知る事のできる紹介サイトを作成できたという結論に至った。これから研究室の配属希望を出す学生たちからも役立ったという声を頂けて満足のいく結果である。
本研究で作成したサイトは「パソコンから見る方向け」に仕上がった。各デバイスの画面サイズに合わせてレイアウトを調整するレスポンシブデザインというものがあるが、この作成方法は画面構成の時点から視野に入れなければならない。今回、初めてサイトを制作するに当たり知識不足だった事が、この問題に目を向けるのが遅れた原因と考えている。学部に興味をもつ方にこそパソコンで見て頂きたいが、スマートフォンの所有率を考えると配慮が足りなかったかもしれない。更に、卒業研究であり今後更新のできないサイトである事を考えると、問い合わせページや研究室の人数など現在の情報をあまり入れられなかった事は無念である。最終的には今回の研究を通して、閲覧者がどのような情報が求めるのかを考えるいい機会になり、青森大学ソフトウェア情報学部の魅力も再認識できたので良かったと思う。

参考資料
サイト
[1]. 青森大学
http://www.aomori-u.ac.jp/[2]. TeraPad
https://tera-net.com/library/tpad.html[3]. Aviutl
http://spring-fragrance.mints.ne.jp/aviutl/[4]. 一緒に学ぶ！HP 制作
https://shoichimidorikawa.github.io/Lab/H28/tomi/Page1/Page1.html[5]. GitHub
https://github.co.jp/[6].フリー百科事典『Wikipedia（Wikipedia）』
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%
BC%E3%82%B8[7]. 独立行政法人 情報処理推進機構
https://www.jitec.ipa.go.jp/22[8].公益財団法人 画像情報教育振興協会
https://www.cgarts.or.jp/kentei/about/cg_engineer/index.html[9]. 一般社団法人 コンピュータ教育振興協会
http://www.acsp.jp/cad/[10]. Microsoft Office Specialist
https://mos.odyssey-com.co.jp/index.html[11]. 色の名前とカラーコードが一目でわかる WEB 色
https://www.colordic.org/[12]. CSS Lecture
http://www.css-lecture.com/log/convenience/001.html[13].サルワカ|サルでも分かる図解説明マガジン
https://saruwakakun.com/html-css/reference/buttons[14].フリーテクスチャ素材館
https://free-texture.net/
文献*1. 青森大学（2016）『平成 28 年度 青森大学基礎スタンダードテキスト
第二版 必携 学びの道しるべ』 青森大学.
*2. 青森大学（2015）『青森大学 2015 大学案内』 青森大学.
*3. 青森大学（2013）『2013 青森大学 学生生活ガイド』 青森大学.
*4. 狩野祐東（2017）『HTML5&CSS3 デザインレシピ集』 技術評論社.
*5. 狩野祐東（2016）『いちばんよくわかる HTML5&CSS3 デザインきちんと入門』

SB クリイティブ.

*6. 伊藤庄平・益子貴寛・久保知己・宮田優希・伊藤由暁（2017）『いちばんよくわかる Web デザインの基本きちんと入門－
レイアウト／配色／写真／タイポグラフィ／最新テクニック』 SB クリイティブ.

謝辞
この研究を卒業論文として形にすることが出来たのは、ひとえに、取材撮影させて頂いた先生方とその研究室の学生たち、アンケート調査を実施させて頂いた山田高校情報処理科３年生と青森大学ソフトウェア情報学部２年生の皆様のおかげです。協力していただいた皆様に心から感謝の気持ちと御礼を申し上げます。

23