授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
Web制作の全体的な流れを理解し、Webデザイナーの役割を説明できる。 |
デザイナーに必要な基礎知識を学ぶ。
①ガイダンス ②デザイナーの役割 ③Web制作で使用するアプリケーションの種類と使い分け ④Adobe製品の説明 ⑤Photoshopの画面の見方 ⑥Google用アイコンのデザイン制作 |
| 【理解度確認】課題 |
| 2 |
画像・写真の仕組みを理解し、目的に応じた適切な画像の取り扱いができる。 |
Photoshopを用いた「写真の加工」を学ぶ。
①画像の種類 ②スマートオブジェクトとは？ ③マスクの使い方 ④色調補正について ⑤写真の修正加工 |
| 【理解度確認】 課題 |
| 3 |
デザインに欠かせないパスの役割と使い方を理解し、パスを自在に扱うことができる。 |
「パス」と「切り抜き」を学ぶ。
①切り抜き画像とは？ ②自動選択ツールの使い方 ③クイック選択ツールの使い方 ④ペンツールの使い方 ⑤パスファインダーとは |
| 【理解度確認】課題 |
| 4 |
情報整理の必要性を理解し、人に伝えるためのワイヤーフレームを作ることができる① |
「ワイヤーフレーム」を学ぶ。
①Web制作の流れ ②ワイヤーフレームとは？ ③ワイヤーフレーム制作のポイント ④ワイヤーフレームの良い例、悪い例 ⑤Figmaを用いたワイヤーフレームの作り方 |
| 【理解度確認】課題 |
| 5 |
情報整理の必要性を理解し、人に伝えるためのワイヤーフレームを作ることができる② |
「レイアウトのルール」を学ぶ。
①レイアウトの5つのルール ②5つのルールを意識したWebサイトの例 ③色彩設計のルール ④ワイヤーフレーム制作試験 |
| 【理解度確認】課題 |
| 6 |
デザインにおける文字の役割と種類を理解し、目的にあわせた文字の表現ができる。 |
「フォントの基礎」と「文字詰め」を学ぶ。
①文字詰めとは？ ②和文フォントの構造 ③文字詰めの基本 ④Photoshopを用いた文字詰めの手法 ⑤欧文フォントの構造 ⑥文字デザインのコツ ⑦文字だけでデザインを表現する |
| 【理解度確認】課題 |
| 7 |
レイアウトと色彩設計のルールを理解し、ワイヤーフレームを基にデザインを作ることができる。 |
「Webデザインの作り方」を学ぶ。
①Webデザイン制作試験 |
| 【理解度確認】課題 |
| 8 |
実践的なWebサイト制作①
クライアントとユーザーが求めるものを理解し、自身が考えた企画をワイヤーフレームに落とし込むことができる。 |
「デザインコンセプト」について学ぶ。
①デザインに必要なカンバスサイズについて ②フォントの選び方 ③デザインコンセプトの考え方 |
| 【理解度確認】課題 |
| 9 |
実践的なWebサイト制作② |
ワイヤーフレームとコンセプトをデザインに落とし込む手法を学ぶ。 |
| 【理解度確認】課題 |
| 10 |
践的なWebサイト制作③
ワイヤーフレームとデザインコンセプトを基にしたデザイン制作ができる。 |
ワイヤーフレームとコンセプトをデザインに落とし込む手法を学ぶ。 |
| 【理解度確認】課題 |
| 11 |
実践的なWebサイト制作③
ワイヤーフレームとデザインコンセプトを基にしたデザイン制作ができる。 |
ワイヤーフレームとコンセプトをデザインに落とし込む手法を学ぶ。 |
| 【理解度確認】課題 |
| 12 |
WebデザインとDTPデザインの違いを理解し、印刷に適したデザインを作ることができる。 |
「DTPデザインの基礎」と「Webデザインとの違い」を学ぶ。
①カラーモードの違い ②トリムマークについて ③解像度の違い ④Illustratorの設定 ⑤インクの扱い ⑥DTPデザインの注意点 |
| 【理解度確認】課題 |
| 13 |
これまで学んだデザインの基礎とDTPの知識を活かし、自分を表現する名刺を作ることができる。 |
「名刺の作り方」と「入稿用データの作り方」を学ぶ。
①アウトラインとは？ ②アウトライン化の手順 ③画像の埋め込みについて ④ラスタライズとは？ ⑤入稿用データの作り方 |
| 【理解度確認】課題 |
| 14 |
デザイン制作における自身の問題点を知り、デザインの効率化の手法を知る。また、レイヤースタイルを用いた表現ができる。 |
「デザインの効率化」と「レイヤースタイル」を学ぶ。
①デザインを早く仕上げるには？ ②よくある原因4つ ③レイヤースタイルとは？ ④ドロップシャドウ ⑤光彩 ⑥境界線 ⑦テクスチャ・パターンの使い方 |
| 【理解度確認】課題 |
| 15 |
バナーデザインを通して、情報の整理、優先度を決めることができる。 |
バナーデザインから「情報の優先順位」を学ぶ。
①バナーとは？ ②バナーデザインのポイント ③ZとFの法則 ④バナーの2秒ルールとは？ ⑤バナーデザインから学べること |
| 【理解度確認】課題 |
