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