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

シラバス

Webデザイン科 2024年度入学生

科目名 UI・UX実習 作成日 2024/02/28
区分 必修 講義/実習
開催時期 1年次 通年
講義・演習駒数/週 0駒
実習・実験駒数/週 2駒
合計駒数/週 2駒
総時間数 120時間
総単位数 4単位
企業連携
授業の目的 Webデザイン制作に必要なアプリケーションの操作と、デザインに関する基礎知識と表現力を身につける。
到達目標 Adobe Photoshop、Illustrator、Figmaを使い分けWebサイトのデザインを制作することが出来る。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合  %  %  % 30% 60%  %  % 10%
評価基準
①デザイン制作にあたって各アプリケーションの基本操作を習得していること ②上流工程に基づいたデザインを制作、説明出来ること
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 萬両 小夜子
テキスト・参考文献 オリジナルスライド教材
実務経験有無  
Webデザイナーとして、さまざまなWebサイト制作の実務経験がある。 その経験から取得した知識とスキルを活かして、本科目のWebデザインに対する実践的な教育を行う。 
関連科目 色彩演習、写真撮影・映像制作技法、Webライティング技法、イラストレーション、情報デザインⅠ、情報デザインⅡ  履修前提   

授業計画

回数 学習目標 学習項目
1 Web制作の全体的な流れを理解し、Webデザイナーの役割を説明できる。  デザイナーに必要な基礎知識を学ぶ。 ①ガイダンス ②デザイナーの役割 ③デザインで使用するアプリケーションの種類と使い分け ④Photoshopの画面の見方 ⑤Meetのオリジナル背景のデザイン 
【理解度確認】課題
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秒ルールとは? ⑤バナーデザインから学べること 
【理解度確認】課題