Web＆UI/UXデザイナー養成講座

Web＆UI/UXデザイナー養成講座
標準学習時間

講座概要

118.5時間（1.5時間×79回相当）

受講期間

4カ月

デザイン全般で標準となるグラフィックソフト「Photoshop」とWebサイトのUI構築で主流となる「Figma」を用いたUI/UXデザインを習得
するとともに、Webサイトを構築するための言語である「HTML・CSS」や動的コンテンツを作成するプログラミング言語「JavaScript」と「jQuery」を学び、Webサイト構築課題を通してWeb・デザイン業界で活躍できる技術や知識が得られる講座内容です。

受講前提知識Windowsの基本操作ができること。

習得スキル
到達目標

商業利用を前提とするWeｂサイトのUI/UXデザインに必要な画像編集ツール「Photoshop」とUIデザインツール「Figma」の操作スキ
ルを習得するとともに、Webサイト構築に必要な言語である「HTML・CSS」や「JavaScript・jQuery」を習得し、Webマーケティングのノウハウに基づいてWebサイトが構築できる水準を目指す。

授業方法・形態

オンライン学習教材に沿って実習を行い、学習中の質疑応答は専用の質問掲示板システムを使って随時受け付ける。
加えて週2回の個別対面授業により直接指導を受ける。（個別対面授業は教室での受講とオンラインでの受講を選択可）
各科目のカリキュラム履修後にオンライン集合形式の授業で振り返りやグループワークを実施。

評価方法

・各科目のカリキュラム修了後に実施される確認テストによる評価（オンライン実施）
・全科目修了後に実施される修了テストによる評価（オンライン実施）

修了基準

各科目すべてのカリキュラムの履修かつ、修了テストで70点以上（100点満点）の判定による。

科目No.1
科目名

Photoshop CC

標準学習時間22.5時間（1.5時間×15回相当）

学習内容

画像加工ツールである「Photoshop」の基本操作から、写真・画像の加工方法を学び、Webデザイン用素材の製作方法だけでなく印刷物の制作方法までを学習します。

科目No.2
科目名

Figma&UI/UXデザイン

標準学習時間22.5時間（1.5時間×15回相当）

学習内容

WebサイトやモバイルアプリのUI/UXをデザインできるツールである「Figma」の基本操作から、実際にレスポンシブデザイン対応のWebサイトのUIを制作する実習を通して実践的な操作までを学習します。

科目No.3
科目名ホームページ制作（HTML・CSS）

標準学習時間31.5時間（1.5時間×21回相当）

学習内容

Webサイトの制作実習を通してHTML・CSSの文法やサイト制作のノウハウを学びます。また、スマホに対応したサイト（レスポンシブデザイン）の制作方法や集客できるサイト制作ノウハウまで学習します。

科目No.4
科目名

JavaScript＆jQuery

標準学習時間22.5時間（1.5時間×15回相当）

学習内容

JavaScript・jQueryの基本文法から、スライドショーやアニメーションメニュー、モーダルウィンドウなど、ユーザの使い勝手を向上させるコンテンツの作成方法を学習します。

科目No.5
科目名

アクセスアップ＆Webマーケティング

標準学習時間

9時間（1.5時間×6回相当）

学習内容

サイト制作の企画立案・設計から、マーケティング手法、集客効果を高めるためのデザインテクニックやSEO・広告施策までを学習します。

科目No.6
科目名

デザイン制作実習（Webサイト制作）

標準学習時間

9時間（1.5時間×6回相当）

学習内容

実際のデザイン現場に寄せられる制作依頼に基づいた実習に沿ってオリジナルWebサイトを作りながら、作品制作のノウハウとデザイン理論に裏付けられた知識を習得します。

科目No.7
科目名

修了テスト

Winスクール（ピーシーアシスト株式会社）

試験時間

1.5時間（1.5時間×1回）

1/5

Web＆UI/UXデザイナー養成講座

カリキュラム内容
目安の受講回数

節章

No.1 Photoshop CC
1回

第1章：はじめに第2章：設定と基本操作

2回

第3章：描画の練習

3回

第4章：選択範囲

4回

第5章：レイヤーの使用

5回
6回

第6章：写真の修整

7回
8回

第7章：色調補正

9回
10回

第8章：フィルタ

11回

第9章：文字の使用

12回
第10章：レイヤースタイル

13回

第11章：出力

14回
15回[テスト] Photoshop CC

はじめに
フォトショップとは書類設定と環境設定
画面各部の名称
画面操作
ビットマップ画像と解像度色の変更
絵を描くための基本操作1
絵を描くための基本操作2
図形を描画する
練習課題１
選択範囲の使用選択範囲の応用
カンバスの調整
練習課題２
レイヤーの作成
レイヤーの基本操作
レイヤーの応用
練習課題３
スタンプツール
写真の高度な修復
明度・彩度を部分的に変える
特定の色を変更する
合成テクニック
練習課題４
色調補正とは明るさの調整
色の調整
調整レイヤー
練習課題５
フィルタとはフィルタを使ってみる
多彩なフィルタ効果とはスマートフィルタの使用
練習課題６
文字ツールの使用
文字と段落の設定
コントロールパネルの使用
練習課題７
レイヤースタイルとはレイヤースタイルの使用
組み合わせたスタイルの登録と使用
練習課題８
印刷
WEB用に出力するスライスツールの使用
その他の書き出し
スキルチェックテストによる理解度確認

No.2 Figma&UI/UXデザイン
16回[Figma] 第1章：はじめに[Figma] 第2章：Figmaの基本操作

17回[Figma] 第3章 Figmaの基本操作（基本的なプロトタイプの作成）

Winスクール（ピーシーアシスト株式会社）

はじめにFigmaの特徴
Figmaの基本操作
画面各部の名称
オブジェクトの操作
プロトタイプについて制作の準備
デザインタブでの作業
オブジェクトの操作

2/5

Web＆UI/UXデザイナー養成講座

節
インタラクションとアニメーションとはアニメーションを作成する
アニメーションに強弱をつける
アニメーションをサイトに取り入れる[Figma] 第5章 Figmaを使用したWeb制作（デザイン 制作の準備システム）
ワイヤーフレームの確認
デザインシステムの作成
コンポーネントの操作[Figma] 第6章 デザインカンプ～プロトタイプの作成 制作の準備
共通パーツの作成
主要ページのデザインカンプ～プロトタイプ作成
練習問題[Figma] 第7章 レスポンシブデザインの作成
レスポンシブデザインとはデスクトップPC表示のデザインを作成する
練習問題[Figma] 第8章 Figmaのファイルを公開する
デザインカンプを共有する
デザインスペック
デバイスでプレビュー
Figmaから画像を書き出し[Figma] 第9章 便利な機能～機能拡張
Figmaのプラグイン[UI/UXデザイン] 第1章：はじめにはじめに[UI/UXデザイン] 第2章 UI／UXとは体験してみよう
UI／UXとは使用するツール
UI／UXデザインのための法則[UI/UXデザイン] 第3章 UI／UXを知る[UI/UXデザイン] 第4章 UI／UXをデザインする
UI／UXをデザインする[UI/UXデザイン] 第5章 サイトづくりのプラスワン
より良いUXのために[UI/UXデザイン] 第6章 スタートライン
ここがスタートライン[テスト] Figma&UI/UXデザイン
スキルチェックテストによる理解度確認

目安の受講回数
章
18回[Figma] 第4章 インタラクティブアニメーション

19回
20回
21回

22回
23回
24回
25回

26回
27回

28回
29回

30回

No.3 ホームページ制作（HTML・CSS）
31回[基礎編] 第1章 Webページの作成体験

32回[基礎編] 第2章 Webサイトの基本的な仕組み

33回[基礎編] 第3章 HTMLによる文書構造の作成

34回

35回
[基礎編] 第4章 CSSによるデザインの適用
36回

37回

38回

[基礎編] 第5章 Webフォントについて[基礎編] 第6章 ボックスモデルについて[基礎編] 第7章 displayプロパティについて[基礎編] 第8章 疑似クラスと疑似要素[基礎編] 第9章 下層ページの作成

39回
40回

[基礎編] 第10章 フォームの作成

41回
42回

[基礎編] 第11章 レスポンシブWebデザイン43回[基礎編] 第12章 ファイルのアップロードとWebページの公開

Winスクール（ピーシーアシスト株式会社）

はじめにHTMLによるWebページの作成
CSSによるWebページのデザイン
Webサイト制作の概要
Webサイトの仕組み
HTMLの記述ルール
head要素内の記述
文書構造の記述
段落を構成する要素の記述
文字書式を設定する要素の記述
画像の配置
meta要素の記述
CSSの記述ルール
文字書式に関するCSS
文字書式に関するCSS – Webフォント
ボックス（コンテナ）を形成するCSS
レイアウト設定の基本
フレックスボックスの実装
その他の装飾に関するCSSや記述方法
疑似クラスと疑似要素
書式とセクションの設定
タイル状の写真の配置と効果の作成
リンクの設定テーブルの作成
フォームの作成
CSSでフォームを整える
リンクの設定レスポンシブWebデザインとはトップページのスマホ対応
下層ページのスマホ対応
FTPアップロード

3/5

Web＆UI/UXデザイナー養成講座

節
完成例の確認
HTML文書の作成[応用編] 第2章 SVGデータについて
SVGデータを活用するメリット
HTML文書へのSVGの組み込み[応用編] 第3章 CSSのコーディング
サイト全体で使用するCSSの設定
ページの詳細なデザイン
トップページのコーディング
サブページのコーディング[応用編] 第4章 CSSグリッドレイアウト
CSSグリッドレイアウトとは[応用編] 第5章 高度な視覚表現
リッチな視覚表現
動的な表現
ドリンクページのアニメーション
コンタクトフォームでのアラート表示[応用編] 第6章 レスポンシブ対応
レスポンシブ対応の準備
トップページのレスポンシブ対応
下層ページのレスポンシブ対応
動的なメニューのコーディング[応用編] 第7章 ブラウザごとのデザインの差異を減 ブラウザごとのデザインの差異を減らす
らす[応用編] 第8章 Internet Explorerへの対応
Internet Explorerへの対応[応用編] 第9章 ブラウザのデバック
デベロッパーツールでの検証[応用編] 第10章 SEO
SEO[テスト] ホームページ制作（HTML・CSS）
スキルチェックテストによる理解度確認

目安の受講回数章
44回[応用編] 第1章 完成例の確認とHTML文書の作成

45回

46回

47回

48回

49回

50回
51回

No.4 JavaScript＆jQuery
52回[JavaScript] 第1章：はじめに[JavaScript] 第2章：JavaScriptでできること

53回[JavaScript] 第3章：JavaScriptの基本文法

54回
55回
56回

[JavaScript] 第4章：JavaScriptを活用する

57回[jQuery] 第1章 はじめに
[jQuery] 第2章 jQueryを使ってみる

58回[jQuery] 第3章 jQueryの文法

59回[jQuery] 第4章 フェードイン・フェードアウト[jQuery] 第5章 モーダルウィンドウ[jQuery] 第6章 アコーディオンメニュー[jQuery] 第7章 カルーセルスライダー[jQuery] 第8章 スライドイン・スライドアウト[jQuery] 第9章 スムーススクロール[jQuery] 第10章 お問い合わせフォームの作成

60回

61回
62回
63回

[jQuery] 第11章 フィルター機能

64回[jQuery] 第12章 求人サイトの作成

65回
66回

[テスト] JavaScript＆jQuery

Winスクール（ピーシーアシスト株式会社）

はじめに
JavaScriptとはJavaScriptを使ってみる
JavaScriptに触れてみよう
JavaScriptのルール
デバッグ方法
変数
演算子
条件分岐
繰り返し
ユーザー定義関数
ブラウザを操作するHTMLを操作する
はじめに
jQueryを使ってみる
jQueryの文法
セレクターの種類
その他の文法
フェードイン・フェードアウト
モーダルウィンドウ
アコーディオンメニュー
カルーセルスライダー
スライドイン・スライドアウト
スムーススクロール
お問い合わせフォームの概要
入力値のチェック
住所の自動入力
ツールチップを追加
フィルター機能LazyLoad
求人サイトの概要を確認
トップページ
応募条件ページ
お問い合わせフォーム
スキルチェックテストによる理解度確認

4/5

Web＆UI/UXデザイナー養成講座

目安の受講回数

節章

No.5 アクセスアップ＆Webマーケティング
67回

第1章：サイトの企画・設計

68回

69回

第2章：WEBサイトデザインのセオリー

70回

71回

第3章：コーディングとSEO施策

72回

第4章：広告展開

第5章：サイト公開後の運用

集客効果の高いWEBサイトを作るためにはコンセプト立案
現状分析の手法
ターゲット設定
ゴールの設定コンテンツ構成とサイトマップ
課題実習
モバイルファースト
ワイヤーフレームとレイアウト
ユーザビリティを考慮したデザイン
コンセプトに基づく配色
フォントの種類とその効果
サイトデザインフォームの最適化
課題実習
SEOとはサイト構造の最適化
コーディングとSEO
コンテンツとSEO
クローラーへの対処
モバイルSEO
課題実習
プロモーションの方法
リスティング広告
リターゲティング広告
SNSとの連携
その他の広告課題実習
アクセス解析
PDCAサイクル
サイト更新のポイント
課題実習

No.6 デザイン制作実習（Webサイト制作）
73回
74回
75回
76回
77回
78回

デザイン制作実習

発表

課題作品制作 企画
課題作品制作 レイアウト
課題作品制作 デザイン
課題作品制作 コーディング
課題作品制作 公開
課題作品制作 作品発表・プレゼン

修了テスト

全科目の理解度を問う効果測定

No.7 修了テスト
79回

Winスクール（ピーシーアシスト株式会社）

5/5