BUSINESS DESIGN STUDIO - UX / UI DIVISIONUX / UI 総合+Webサイト制作コース
UX / UI設計とWebサイト制作を基礎から実務レベルまで学ぶプログラムです。授業では国内最先端のUX / UI設計スキル(調査・要件定義・情報設計・検証など)を実務レベルまで網羅。「人間中心設計・行動経済学・人間工学・感性工学」についても理解を深めます。Webサイト制作の授業では、Web標準「HTML Living Standard・CSS3」やWeb制作ソフト「Visual Studio Code / Figma/ Photoshop / Illustrator」のほか、レスポンシブWebデザインやCMS、Webプログラミングにも対応。将来的には、UX / UIデザイナーとしてクリエイティブ部門の中核を担う人材を育成します。
- 授業時間数
- 295時間(118コマ)+α※
- 開講月
- 1月/ 2月/ 4月/ 5月/ 7月/ 8月/ 10月/ 11月
- 定 員
- 16名~18名
- レベル
- 未経験者OK /適性審査あり
- 対応資格
- HCD-Net認定人間中心設計専門家/Webクリエイター能力認定試験エキスパート
アドビ認定アソシエイト/HTML5プロフェッショナル認定試験レベル1
- 目指す職業
- UIデザイナー/ UXデザイナー/ Webディレクター/ Webデザイナー/プロダクトマネージャー
- 時間/期間(週回数)
- 夜間部19:15-21:45 / 6ヵ月-1 年間(週2-3回)、土or日/ 6ヵ月-1 年間(週1-2回)
- 入学金
- 30,000円(税込33,000円)
- 受講料
- 780,000円(税込858,000円)
- 教材費・実習費
- 80,000円(税込88,000円)
- 学費総計
- 890,000円(税込979,000円)
- 受講特典
- α※=「プレックスプログラム(80プログラム/ 200時間/ 2年間)」を無料で受講できます。
※詳細の授業日程は、個別カウンセリングなど学校イベントにてご確認ください。受講時間・期間・週回数はコースにより変更となる場合がございますので、入学前に必ずご確認をお願い致します。
コース詳細表
-
- AUX / UI基礎Ⅰ (Design・Science・Engineering)
-
UX / UIデザイン/ユーザーインタフェースデザイン
UX / UIデザイン/ユーザーエクスペリエンスデザイン
Lean UX・Scrum Project Management
Design Sprint・Design Studio
人間中心設計/ Cooperative Design・Participatory Design
行動経済学/ Behavioral Economics
人間工学/ Human Factors and Ergonomics
感性工学/ Affective Engineering
- AUX / UI基礎Ⅰ (Design・Science・Engineering)
-
- BUX / UI基礎Ⅱ (The Elements of User Experience)
-
戦略段階・要求段階/要件定義・Google Design Doc
構造段階/インタラクション設計・情報設計
骨格段階/インタフェース設計・ナビゲーション設計
表層段階/ワイヤーフレーム・プロトタイピング
予期的UX・一時的UX・エピソード的UX・累積的UX
ウォーターフロー型開発・アジャイル型開発
デザインガイドライン/ Human Interface Guidelines
デザインガイドライン/ Material Design
- BUX / UI基礎Ⅱ (The Elements of User Experience)
-
- Cユーザーリサーチ
-
プロトタイピング/ストーリー視点・プロダクト視点
ツール/ Prott・ InVision・Zeplin・Figma・Google Gallery
ペルソナ手法・シナリオ設計・カスタマージャーニーマップ
Design Sprint /スプリント・イテレーション
調査/ユーザーインタビュー・エスノグラフィー・行動観察
評価/ヒューリスティック評価・ユーザビリティーテスト
総括的評価・形成的評価
反証アプローチ・ゼロ仮説
- Cユーザーリサーチ
-
- Dデザインツール
-
Sketch / Exporting・Symbols・Plugins
Sketch mirror / Previewing
Figma / Collaborative Interface Design
Adobe XD / Layout Illustration
Abstract / Version Management
Google Drive / Docs・Sheets・Slides
人間工学/ Human Factors and Ergonomics
感性工学/ Affective Engineering
- Dデザインツール
-
- Eチームビルディング
-
情報共有/ Slack・Workplace
経験学習サイクル
1on1 /共通認識確認・傾聴
1on1 /学習機会提供・行動促進
人間中心設計/ HCD・UCD
行動経済学/ Behavioral Economics
デザインレビュー/フィードフォワード
デザインレビュー/フィードバック
- Eチームビルディング
-
- F認知工学
-
インタフェースデザイン心理学 Ⅰ
インタフェースデザイン心理学 Ⅱ
データ分析/ Business Intelligence
データ分析/ Deep Learning
人間中心設計/ Cooperative Design・Participatory Design
行動経済学/ Behavioral Economics
人間工学/ Human Factors and Ergonomics
感性工学/ Affective Engineering
- F認知工学
-
- Gインターフェースデザイン
-
アプリアイコン/ App Icons・Screen Shots
スプラッシュ画面/ Transition・Animation
サインアップ・ログイン/Forms・Radio Buttons・Check Buttons
チュートリアル設計/ Communication
ホーム画面/ Cards・Section Headers
コレクション・シングル/ Table Views・Fields
評価・検証/ユーザビリティテスト
分析/問題点リスト・インパクトレビュー
- Gインターフェースデザイン
-
- Hナビゲーションデザイン
-
NPS・アンケートフォーム
Empty Statement
プッシュ通知/ Notification
プッシュ/階層型遷移
モーダル/分岐型遷移
タブ/並列型遷移
人間中心設計/ Cooperative Design・Participatory Design
行動経済学/ Behavioral Economics
- Hナビゲーションデザイン
-
- IUIデザイン/iOSアプリ・Androidアプリ Ⅰ
-
OS最適化Ⅰ/ Human Interface Guidelines
OS最適化Ⅱ/ Material Design Guidelines
審美的整合性/ Aesthetic Integrity
比喩的要素/ Material is the metaphor
マルチデバイス最適化/Device independent pixel
人間中心設計/ HCD・UCD
行動経済学/ Behavioral economics
Information Architecture
- IUIデザイン/iOSアプリ・Androidアプリ Ⅰ
-
- JUIデザイン/iOSアプリ・Androidアプリ Ⅱ
-
ワイヤーフレーム・プロトタイピング・デザインレビュー
要件定義・画面仕様
UI設計・制作/ネイティブアプリ
画面レイアウト・トーン&マナー
要素・コンポーネント/ Tab Bars・Navigation Bars
要素・コンポーネント/ Tabs・Floating Action Button
プレゼンテーション
検証・評価/改善
- JUIデザイン/iOSアプリ・Androidアプリ Ⅱ
-
- KWebマーケティング
-
Webマーケティング/集客施策
Webマーケティング/回遊施策
SEO・SEM・LPO・EFO
オウンドメディア・クロスチャネル・オムニチャネル
効果測定/ Analytics
視線誘導・促進要因・阻害要因
アンカリング効果・フレーミング効果
同調現象・認知的不協和・後知恵バイアス
- KWebマーケティング
-
- LUX / UIデザインシステム
-
Atomic Design Methodology / Design System
Complexion Reduction / UIトレンド
Level 1 Atoms /ラベル・インプット・ボタン
Level 2 Molecules /カード・リスト・フィールド
Level 3 Organisms /ナビゲーションバー
Level 4 Templates /ページレイアウト・コンテキスト
Level 5 Pages /ページレイアウト・コンテンツ
Github・ZenHub /バージョン管理
- LUX / UIデザインシステム
-
- Mヒューマンインタフェース Ⅰ
-
UX 5階層モデル/ Task Oriented・Information Oriented
戦略/ User Needs・Site Objectives
要求/ Functional Specifications
構造/ Interaction Design
骨格/ Interface Design・Information Design
表層/ Visual Design
人間工学/ Human Factors and Ergonomics
感性工学/ Affective Engineering
- Mヒューマンインタフェース Ⅰ
-
- Nヒューマンインタフェース Ⅱ
-
DesignOps / UX Engineering
Lean UX / Minimum Viable Product
UXライティング・ラベル設計
アクセシビリティ・ユニバーサルデザイン
オブジェクトベースUI / Modeless User Interface
タスクベースUI / Command Line Interface
人間中心設計/ Cooperative Design・Participatory Design
行動経済学/ Behavioral Economics
- Nヒューマンインタフェース Ⅱ
-
- OUXデザイン実践Ⅰ
-
Brand Framework(ブランディングの原則)
Brand Proposition(中核概念)
Brand Experience(構造構築)
Brand Engagement(浸透活動)
Brand Measure(効果測定)
Brand Strategy(ブランド戦略)
OuterBrand / InnerBrand(アウターブランディングとインナーブランディング)
Brand Department(ブランド組織の作り方)
- OUXデザイン実践Ⅰ
-
- PUXデザイン実践Ⅱ
-
Design Philosophy / Brand Logo(デザイン哲学/ブランドロゴ)
Brand Motif / Brand Color(ブランドモチーフ/ブランドカラー)
Brand Guidelines(ブランドガイドラインの策定と実装)
Brand × UX / UI Design(UX / UIデザインへの応用)
組織設計と人的資本(ISO30414の理解)
インセンティブ設計(金銭報酬/体験報酬/感情報酬)
ビジネスSNSと時代性(依存先分散と自立)
VUCA時代における「複業」の思考法
- PUXデザイン実践Ⅱ
-
- αプレックスプログラムⅠ
-
デザインプロセス
デザインシステム
デザイントレンド
企画アイデアの発想方法
着眼点と発想法の成功事例
ストーリー構築
コンセプトメーキング
プラスデザイン
- αプレックスプログラムⅠ
-
- βプレックスプログラムⅡ
-
ボーダレスデザイン(国/分野)
ソーシャルデザイン
コミュニケーションデザイン
デザインストラテジーⅠ(ブランディング)
デザインストラテジーⅡ(マーケティング・MD)
クリエイティブワークショップ
グループディスカッション
デザインプレゼンテーション
- βプレックスプログラムⅡ
上記に加えてWEBクリエイティブ専攻の以下のカリキュラムを設置
-
- DHTML Living Standard CSS3コーディングⅠ
-
HTML・CSS基本構造
HTML・CSSコーディング基礎
マルチデバイス対応
Visual Studio Code基本/ビュー/各種パネル
HTML Living Standard/セクショニング/エンベット
CSS3/セレクタ/プロパティ
デジタルデバイスとWebブラウザ概要
フレキシブルボックスレイアウト
- DHTML Living Standard CSS3コーディングⅠ
-
- EWebプロトタイピング (Figma)
-
Webサイト概論(Webサイトの仕組み/サーバー/ドメイン)
Webサイト制作フロー
Figmaの基本操作
プロジェクト/モード切替
レイヤー/アセット
コンポーネント
プランニングシート/コーディング設計
ワイヤーフレーム/デザインカンプ制作
- EWebプロトタイピング (Figma)
-
- FレスポンシブWebデザイン
-
マルチデバイス対応実践
ブレークポイント設計
Media Queries
スマートフォンデバイスの特徴
モバイルファーストのサイト設計
リキッドレイアウト
スマートフォン最適化データ/ SVG実装
ページの高速化/レスポンシブWeb実践
- FレスポンシブWebデザイン
-
- GHTML Living Standard CSS3コーディングⅡ
-
リセットCSS
ノーマライズCSS
HTML Living StandardによるWebサイト構築
CSS3によるWeb編集
HTML Living Standard・CSS3コーディング応用
マルチブラウザ対応
デベロッパーツール
バリデーションチェック/ FTP
- GHTML Living Standard CSS3コーディングⅡ
-
- HWebリッチコンテンツ (jQuery / JavaScript)
-
クライアントサイドスクリプト概論
JavaScript概要
JavaScript基礎
jQuery基礎(実装)
jQuery実践(class変更など)
jQueryプラグイン(lightboxなど)
jQuery応用(Loading /条件分岐による挙動)
プラグイン
- HWebリッチコンテンツ (jQuery / JavaScript)
-
- IHTML Living Standard CSS3コーディング実践 (HTML5プロフェッショナル認定試験対応)
-
HTML Living Standard・CSS3コーディング実践
セマンティックWeb
CSSアニメーション
CSS transform
Webフォント概要
グリッドレイアウト
Visual Studio Code応用
Webポートフォリオ/業界最新技術動向
- IHTML Living Standard CSS3コーディング実践 (HTML5プロフェッショナル認定試験対応)
-
- JWebプログラミング (PHP / MySQL / WordPress)
-
サーバーサイドスクリプト概論/ API 概論
PHP概要/基礎/入力フォーム
データベース/ MySQL概要
CMS(コンテンツマネジメントシステム)概要
WordPress概要/インストール/環境設定
管理画面/投稿ページ/固定ページ
カテゴリ/タグ/タクソノミー/ WordPress関数
プラグイン/オリジナルテーマ制作
- JWebプログラミング (PHP / MySQL / WordPress)
-
- K作品制作実習
-
Webサイトプランニング
企画 ・コンセプト
コンテンツページ構成
コーディング/ページ最適化
ブラウザ互換性/コーディングチェック
トップページ・コンテンツページ制作
スマートフォンサイト制作
プレゼンテーション/作品講評
- K作品制作実習
-
- LWebグラフィック (Illustrator)
-
Illustratorの基本操作(ツール・機能)
図形の描画/オブジェクト/グループ化/レイヤー
変形/整列/パスファインダ/パス/アンカーポイント
アウトライン化/クリッピングマスク
RGBとCMYK /グラデーション
文字の扱い/文字デザイン/ロゴ/マーク
タイポグラフィの基本原則
Web用画像の生成 ・書き出し/ SVGデータ編集
- LWebグラフィック (Illustrator)
-
- MWebグラフィック (Photoshop)
-
Photoshopの基本操作(ツール・機能)
画像サイズ/ピクセル/画像解像度
写真の加工・合成・トリミング
色域指定/カラーバランス/色調補正/シェイプ
レイヤー/レイヤースタイル/レイヤー効果/不透明度
クイックマスク/レイヤーマスク/クリッピングマスク
アートボード/レイアウトの基本原則
Web用画像の生成・書き出し
- MWebグラフィック (Photoshop)
-
- NWeb グラフィック制作実習
-
デジタルデバイス対応デザイン
Web用画像フォーマット
Webカラー表現
Webタイポグラフィ
サイトレイアウト
ワイヤーフレーム/デザインカンプ
デザインカンプ制作実習
プレゼンテーション/講評
- NWeb グラフィック制作実習
その他のコース
必修コース
- UX / UI 設計コース
- UX / UI 総合コース
- サービスデザインDXコース
- UX / UI 総合+Webサイト制作コース