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

シラバス

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

科目名 UX・UIデザイン 作成日 2024/04/04
区分 必修 実習
開催時期 2年次 前期
講義・演習駒数/週 0駒
実習・実験駒数/週 2駒
合計駒数/週 2駒
総時間数 60時間
総単位数 2単位
企業連携
授業の目的 スマートデバイス向けコンテンツのデザインにおけるユーザインターフェースの概念とプロセスについて学習し、仮想アプリを企画しユーザインターフェースのデザインを提案する。
到達目標 アプリデザインにおいてグラフィックデザイナーが理解すべきワークフローを学習し、アプリUIデザインの代表的ソフトであるXDを活用してUIデザインが出来るようになる。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合  %  %  % 10% 40% 30% 20%  %
評価基準
制作物のクオリティに関して、実用性を基にしたクオリティを評価材料とする。
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 小高 恭子 
テキスト・参考文献 オリジナルテキスト
実務経験有無  
小高恭子 Webコーダーを経てマークアップエンジニアとしてWebサイト構築に従事した実務経験がある。ユーザーに配慮したデザインの最適化知識と経験を生かして、本科目に対する職業実践的な教育を行う。 
関連科目 電子書籍制作実習  履修前提   

授業計画

回数 学習目標 学習項目
1 半期で学ぶ内容について理解し、アプリ制作においてグラフィックデザイナーが担う作業内容について説明出来るようになる。   AdobeXDの基本操作(アートボードの基本と、ワークスペース操作の基本)について解説する。アプリ制作についてグラフィックデザイナーが担う作業内容について「UXUI」事例を示し、解説する。  
【理解度確認】画面共有による進捗確認。
2 Webアプリの開発、インターフェイスデザインに関わる基礎的・基本的原則について理解する。選択したオブジェクトの設定が出来るようになる。   AdobeXDでオブジェクトを作る。「図形を描く」「オブジェクトの設定」「丸や四角の編集」「オブジェクトの効果」について学ぶ。  
【理解度確認】画面共有による進捗確認。
3 Webアプリの開発、インターフェイスデザインに関わる基礎的・基本的原則について理解する。選択したテキストや画像の設定が出来るようになる。   テキストや画像の扱いについて理解を深める。「テキストの入力」「テキストの流し込み」「テキストのパス化」「ビットマップ画像の読み込み」「ベクターデータの読み込み」について学ぶ。  
【理解度確認】画面共有による進捗確認。
4 AdobeXDの基本的な操作方法が一通り出来るようになる。   曲線やアイコンの作成。「ペンツールで線を描く」「パスの編集」「オブジェクトの合成」について学ぶ。ロゴ作りを通してAdobeXDの基本操作のおさらいをする。  
【理解度確認】画面共有による進捗確認。
5 AdobeXDの基本的な操作を踏まえて、アプリ画面を作成できるようになる。   個人制作課題「クイズアプリをデザインしよう」UIデザイン  
【理解度確認】小課題の提出。
6 アプリデザインのプロセスにおけるリサーチ活動について理解し、実際に競合他社のデザイン事例が分析できるようになる。グループ内において互いの個性を理解し合い、生かし合える分担をし、取り組めるようになる。リサーチを元に、ターゲットに合わせたアプリのブランディングを設定出来るようになる。チームのメンバー同士で知識を共有し、物事を見る角度を増やす。   グループ制作課題「睡眠アプリをデザインしよう」リサーチ・ブランディング 既存のクイズアプリを調査し、競合他社の機能やデザインを把握する。ペルソナ設計 睡眠アプリの名前、カラー、ロゴを決定する。 
【理解度確認】企画書の提出。
7 クイズアプリのブランディングを反映したワイヤーフレームが制作できる。コミュニケーションを通してお互いの知識と技術を相互補完し合う。   グループ制作課題「睡眠アプリをデザインしよう」ワイヤーフレーム ワイヤーフレームを検討する。 
【理解度確認】画面共有による進捗確認。
8 ワイヤーフレームを元にUIデザインを制作できる。クラウドでドキュメントを共有し、誤って上書きをしないように気をつけながら、グループ内で共同作業を出来るようになる。   グループ制作課題「睡眠アプリをデザインしよう」UIデザイン UIデザインの制作。  
【理解度確認】画面共有による進捗確認。
9 ワイヤーフレームを元にUIデザインを制作できる。クラウドでドキュメントを共有し、誤って上書きをしないように気をつけながら、グループ内で共同作業を出来るようになる。  グループ制作課題「睡眠アプリをデザインしよう」UIデザイン UIデザインの制作。 
【理解度確認】画面共有による進捗確認。
10 制作したアプリのブランディングやUIデザインの概要をプレゼン用スライドにまとめられるようになる。   グループ制作課題「睡眠アプリをデザインしよう」プレゼン資料の作成  
【理解度確認】スライドの提出。
11 完成作品についてUIの工夫点や特徴について解説出来るようになる。   グループ制作課題「睡眠アプリをデザインしよう」プレゼンテーション 
【理解度確認】プレゼンテーションの内容。
12 アプリデザインのプロセスにおけるリサーチ活動について理解し、実際に競合他社のデザイン事例が分析できるようになる。レシピアプリのリサーチを元に、ターゲットに合わせたアプリのブランディングを設定出来るようになる。レシピアプリのブランディングを反映したワイヤーフレームが制作出来る。  個人制作課題「レシピアプリをデザインしよう」リサーチとブランディング 既存のレシピアプリを調査し、競合他社の機能やデザインを把握する。ペルソナ設計。 レシピアプリの名前、カラー、ロゴを決定する。ワイヤーフレームを検討する。  
【理解度確認】画面共有による進捗確認。
13 ワイヤーフレームを元にUIデザインを制作出来る。  個人制作課題「レシピアプリをデザインしよう」UIデザイン UIデザインの制作。 
【理解度確認】画面共有による進捗確認。
14 ワイヤーフレームを元にUIデザインを制作出来る。制作したアプリのブランディングやUIデザインの概要をプレゼン用スライドにまとめられるようになる。  個人制作課題「レシピアプリをデザインしよう」UIデザイン 個人制作課題「レシピアプリをデザインしよう」プレゼン資料の作成  
【理解度確認】スライドの提出。
15 完成作品についてUIの工夫点や特徴について解説出来るようになる。  個人制作課題「レシピアプリをデザインしよう」プレゼンテーション 
【理解度確認】プレゼンテーションの内容。