授業の目的
- 現在主流となっているxhtml+CSSを実習によって体験することによる、文書構造とデザインの理解
- タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
- 自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習
授業概要
今日のweb制作に携わる人間は非常に多岐にわたる知識が求められている。思いつくものを挙げただけでも、最低限以下の知識が必須になるだろう。
- xhtml/CSS
- JavaScript
- Flash（ActionScript）
- グラフィックデザイン（Photoshop、Illustratorの知識含む）
- CGI（Perl）/PHPなどのサーバプログラミング
- 情報アーキテクチャ
- ユーザビリティ/アクセシビリティ
- SEO/SEM
など。
この授業は、そういった需要に応えられる事を前提に、webデザインにおける基本的な知識やプロセスを幅広く習得する。
成績評価
出席→50％ 小課題→20% 最終課題→30％
スケジュール
1. xhtml基礎 (9/16)
現代のコミュニケーションメディア
スマートフォン
クラウドサービス
リアルタイムブロードキャスティング USTREAM
電子書籍
Skype
ソーシャルメディア
まずは、ウェブサイトの構造を確認してみる。
xhtmlの構造
DOCTYPE宣言と使用言語
ヘッダと文字コード
タグ
コメント
ウェブグラフィック（gif, jpeg, png）
画像の書き出し
ハイパーリンク
htmlファイルのファイル名
2. xhtml基礎 (9/30)
ハイパーリンクの復習
メディアファイル（サウンド／動画）
サーバへのデータアップロード
パーミッション
メールのリンク
サイトマップ
○課題1 自己紹介サイトのサイトマップ作成
サンプルのサイトマップを参考にして、自身の自己紹介サイトのサイトマップを作成する。サイズはA4、フォーマットはpdf。サイボウズにアップロードする。
最低10ページ以上の項目になるようにサイトマップを作ってくること。
一般的には、趣味や略歴、作品を載せることが多いがそういったものにとらわれる必要はない。独自性の高いアイデアを期待している。
提出期限：10/7（金）15:00まで
3. webデザイン基礎(10/7)
課題2の講評
レイアウト
カラーカンプの作成（グリッド）
画像の加工（Photoshop）
著作権
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間
実習用ファイル-トップページ（教員用）
実習用ファイル-タイポグラフィ（教員用）
課題2 自身のサイトのトップページ作成（photoshop, illustrator）
幅950 x 高さ上限950ピクセルのトップページを制作する。
作った画面に上下左右に10ピクセルずつの余白を取ってjpegファイルとして出力すること。
よって、提出するファイルは、「学籍番号.jpg」になる。
注： 個人情報なので、自身の氏名は出さずにニックネームなどにする、もしくは名字は出さない、住所なども書かないように気をつけること。
提出期限：
4. スタイルシート基礎1 (10/14)
実習用ファイル（教員用）css_sample
実習用ファイル（教員用）absolute_sample
5. スタイルシート基礎2 (10/28)
スタイルシート（レイアウト）
ブラウザによる違い
参考：リンク画像の枠線を消す
自分自身を紹介するウェブサイトを作成する。
作成したウェブサイトを使用して、自分自身をプレゼンテーションする。必ず、htmlとCSSを使うこと。
■評価
評価の対象として
1. ウェブサイトのデザイン及び内容の独自性／洗練度
2. 正しくhtml+CSSが記述されているか
3. プレゼンテーション能力
を採点する。
■条件
・最低10ページ以上作成する。
・一人1分30秒以内で、自身のサイトを見せながらプレゼンを行なう。時間は非常に短いので、全部見せることはできないので、ポイントになるページを選んでおくこと。
・Flashは使わないこと。
■提出期限