1. トップ
  2. 学校紹介
  3. 情報公開
  4. 学科情報
  5. シラバス - 科目一覧

シラバス

グラフィックデザイン科 2023年度入学生

科目名 Webデザイン制作Ⅱ 作成日 2024/04/09
区分 必修 実習
開催時期 1年次 後期
講義・演習駒数/週 0駒
実習・実験駒数/週 1駒
合計駒数/週 1駒
総時間数 30時間
総単位数 1単位
企業連携
授業の目的 PCサイトとスマホサイトは何が違うの?という基本的な疑問を、実際にスマホサイトを作ることで解決し、理解を深めていく。スマホサイトの特性と、作成上必須な知識を身につけ、自身で考えたデザインを自身のコーディングで再現していく。
到達目標 1)スマホサイト制作における基本的な必須知識・技術の習得。 2)レスポンシブWebデザインのしくみを学ぶ。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合  %  %  % 40% 60%  %  %  %
評価基準
出席率80%以上。 課題(提出物の状況と出来具合)、授業への取り組む姿勢。
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 小高 恭子 佐藤 輝幸
テキスト・参考文献 オリジナルテキスト
実務経験有無  
小高 恭子 Webコーダーを経てマークアップエンジニアとしてWebサイト構築に従事した実務経験がある。ユーザーに配慮したデザインの最適化知識と経験を生かして、本科目に対する職業実践的な教育を行う。 佐藤 輝幸 グラフィックデザイナーとして、10年以上の経験を持ち、カタログ、広告全般を主に手掛け、ディレクター経験も豊富。 
関連科目 webデザイン制作Ⅰ  履修前提   

授業計画

回数 学習目標 学習項目
1 webサイトに適したファイル容量の感覚を身につける。  印刷向きの大きなファイルをPhotoshopのweb用に保存モードで適切にリサイズ&圧縮してweb用ファイルを生成し、webサイトに適したファイル容量の感覚を身につける。 
【理解度確認】画面共有による進捗確認。
2 階層構造(ディレクトリ)のしくみを身につける。  ブラウザ上でエラーを起こしているwebサイトを、リンクを正しく繋げて修正し、ディレクトリのしくみを身につける。絶対パスと相対パスについて学ぶ。  
【理解度確認】画面共有による進捗確認。
3 主要なデバイスのブラウザ画面サイズを把握する。  スマートフォンの普及状況から、スマホサイトの必要性を理解する。PCサイトと比較して、スマートフォン向けサイトの特徴を知る。PCブラウザに標準搭載されているウェブ開発者向けツール(デベロッパーツール)の使用方法を学ぶ。 
【理解度確認】画面共有による進捗確認。
4 ボックスモデルを理解する。  HTML文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成しており、そのボックスモデルについて、小課題を通して理解を深める。  
【理解度確認】画面共有による進捗確認。課題の提出。
5 レスポンシブWebサイトを組む際に必要な基本を理解する。   モバイルファーストで作成したページをレスポンシブにして、大きい画面ではPC版のレイアウトで表示するように設定する。レスポンシブの基本、ビューポート(viewport)とメディアクエリ(@media)を理解する。フロート(float)でレイアウトする。  
【理解度確認】画面共有による進捗確認。
6 自分の得意分野(作品)をより良く伝える「コンセプト」を生かせるレイアウトを選ぶ。  当授業の制作課題となるポートフォリオサイトのデザインコンセプトを決定し、それを生かせるレイアウトを選ぶ。ポートフォリオサイトに組み込む写真素材と文言を準備&作成。  
【理解度確認】画面共有による進捗確認。
7 CMSを導入し自身のポートフォリオサイトを作成開始する。  CMSの管理画面を操作し、編集する箇所を把握する。 
【理解度確認】画面共有による進捗確認。
8 ポートフォリオサイトにヘッダーとフッターを作成する。  個人制作課題「ポートフォリオサイト」をコーディングする① 
【理解度確認】画面共有による進捗確認。
9 ポートフォリオサイトに必須のページを新規作成する。   個人制作課題「ポートフォリオサイト」をコーディングする②  
【理解度確認】画面共有による進捗確認。
10 自身のポートフォリオサイトにグローバルナビゲーションを挿入する。   個人制作課題「ポートフォリオサイト」をコーディングする③  
【理解度確認】画面共有による進捗確認。
11 自身のポートフォリオサイトをレスポンシブにする。   個人制作課題「ポートフォリオサイト」をコーディングする④  
【理解度確認】画面共有による進捗確認。
12 自身のポートフォリオサイトのレイアウトをCSSで調整する。  個人制作課題「ポートフォリオサイト」をコーディングする⑤ 
【理解度確認】画面共有による進捗確認。
13 アイコン画像とアイコンフォントの違いを理解し、アイコンフォントの導入方法を学ぶ。   webフォント、アイコンフォントの導入方法を学ぶ。 
【理解度確認】画面共有による進捗確認。
14 サイトを公開する。  文字のヌケや画像の入れ忘れでレイアウトが崩れていないか等、すべてのページをPCとスマホからチェックする。 
【理解度確認】画面共有による進捗確認。
15 完成サイトについて自身のデバイスを通して客観的視点を持ち、改善の余地がある点を自ら発見・補完し、サイトをよりよいものに仕上げられるようになる。  個人制作課題「ポートフォリオサイト」の適宜ブラッシュアップを行う。 
【理解度確認】課題の提出。