このページは、愛知淑徳大学創造表現学部メディアプロデュース専攻「ウェブデザインI」（2025年度後期）第1回の授業資料です。
この授業では、HTMLやCSSといった基本的な言語（コード）を用いて、ウェブサイトの制作を進めていきます。
各自でテーマを選定し、調査や素材集めを進めたうえで、ウェブサイトのレイアウトを進め、HTMLとCSSを用いてコーディングを進めて完成させます。
完成したウェブサイトは、授業内でプレゼンテーションしてもらいます。
●ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示されるかどうかを試します。
HTMLの基本構成（テキストp.66-69参照）
<html>○○○○</html> ：HTML文書の開始と終了を示す
<head>○○○○</head> ：主にコンピュータが読み取る部分
<body>○○○○</body> ：ページに表示され、閲覧者が実際に見る部分
手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←各自の学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Google Chrome」などWebブラウザを選択する。
⑧ Google ChromeなどWebブラウザが起動し，今作成したファイルがウェブページとして表示されれば成功です。
ソースコード01 ファイル名「学籍番号.html」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>
<body>
こんにちは！
</body>
</html>
練習課題
ソースコードが完成したら、bodyタグで囲まれた箇所<body>〜</body>に、文章を加えてみましょう。
加える文章：本授業への抱負
●企画書の準備
この授業（主に後半）では、各自でテーマを設定し、ウェブサイトのデザイン制作を進めていきます。
課題
「特定の団体・企業・学校・グループ・イベントなどのテーマをひとつ決めて、それを紹介するためのウェブサイトを制作する」
■制作のテーマ
団体・企業・学校・グループ・イベントごとなど，なにかひとつのテーマを決めて，それを紹介するためのウェブサイトを制作する。テーマとする団体等は，実在のものでも架空のものでもどちらでも構わない。
自分のためだけでなく，他者が見て興味を持つことができるウェブサイトを制作すること。
また，どのような人が見るためのウェブサイトであるのか、ターゲットを明確にすること。
はじめに、制作のテーマについて考えていきましょう。その際、伝えたいメッセージがはっきりしていることや、サイト制作の素材となる文書や画像などをちゃんと準備できるかがポイントになります。
【既存のコンテンツ画像を使いたい場合】
企画の都合上、映画のポスターやCDジャケットの画像などを使いたい場合、小寺まで相談してください。企画内容を確認した上で、使用の可否を判断します。
■企画書制作の準備
ウェブサイト制作を進めていくための企画書を制作していきます。下記の記入例を参考に、企画書を制作していきましょう。
テーマを決める上でのポイントは、どのような目的のウェブサイトを構築するのかを明確にすることです。
【目的の例】
・所属しているサークルの活動内容を1年生に知ってもらい、加入してほしい
・両親が経営している居酒屋に、客として来店してほしい etc…
みなさんが扱う、団体・企業・学校・グループ・イベントごとなどのテーマをもとに、どのようなウェブサイトを制作するのか、制作のテーマを決定しましょう。
また、その際、制作テーマのねらいや、想定する利用者像を明確にしておきましょう。
■課題
制作テーマを絞り込み、上記の記入例も参考にしつつ、ウェブサイトの制作テーマに落とし込みましょう。
また、制作テーマのコンセプトと、想定する利用者についてまとめ、WEBページ全体の構成を図にしましょう。
■まとめ方
・制作テーマを100文字程度でまとめる。
・想定する利用者像を具体的に記述する。（年齢、性別、職業、趣味など）
・実現したいテーマを1つに絞り込み、ページの構成を考えて状態遷移図にする。
■企画書の作成と提出
Teams/ファイル/企画書フォーマット から「ウェブデザインI_企画書フォーマット.pdf」をダウンロードする。
pdfをAdobe IllsutratorやAcrobatで開いて、内容を書き加える。
提出先 ：Teams/ファイル/企画書提出
提出期限：11/17（月）午前0時
ファイル名は「学籍番号_名前_ウェブデザインI企画書.pdf」
■最終課題の制作に関する条件
1.トップページの他に1つ以上のページがあり、相互にリンクで繋がっていること。
2.制作するサイトのデータは、1つのフォルダ（フォルダ名は学籍番号）にまとめること。同フォルダ内に「images」などと名付けたフォルダを作り、使用する画像や図版は全てそこに入れること。
3.サイト内には、文字の他に1点以上の図版や写真を掲載すること。
KOTERA Ryo 