COMMUNICATION DESIGN STUDIO - WEB INTERACTION DESIGN DIVISIONWEBインタラクションデザイン総合コース

コース詳細表

• HTML5・CSS3コーディングⅠ

  HTML・CSS基本構造／ HTML・CSSコーディング基礎／マルチデバイス対応／ Dreamweaver基本／ビュー／各種パネル／ HTML5 ／セクショニング／エンベット／CSS3 ／セレクタ／プロパティ／デジタルデバイスとWebブラウザ概要／フレキシブルボックスレイアウト

• Webプロトタイピング

  Webサイト概論（Webサイトの仕組み／サーバー／ドメイン）／Webサイト制作フロー／Adobe XDの基本操作／ワークスペース／レイヤー／オブジェクト／アセット／コンポーネント／プランニングシート／コーディング設計／ワイヤーフレーム／デザインカンプ制作

• レスポンシブWebデザイン

  マルチデバイス対応実践／ブレークポイント設計／ Media Queries ／スマートフォンデバイスの特徴／モバイルファーストのサイト設計／リキッドレイアウト／スマートフォン最適化データ／ SVG実装／ページの高速化／レスポンシブWeb実践

• HTML5・CSS3コーディングⅡ

  リセットCSS ／ノーマライズCSS ／HTML5によるWebサイト構築／CSS3によるWeb編集／HTML5・CSS3コーディング応用／マルチブラウザ対応／デベロッパーツール／バリデーションチェック／ FTP

• Webリッチコンテンツ（jQuery / JavaScript）

  クライアントサイドスクリプト概論／JavaScript概要／ JavaScript基礎／jQuery基礎（実装）／jQuery実践（class変更など）／jQueryプラグイン（lightboxなど）／jQuery応用（Loading ／条件分岐による挙動）／プラグイン

• HTML5・CSS3コーディング実践（HTML5プロフェッショナル認定試験対応）

  HTML5・CSS3コーディング実践／セマンティックWeb ／ CSSアニメーション／CSS transform ／Webフォント概要／グリッドレイアウト／Dreamweaver応用／ Webポートフォリオ／業界最新技術動向

• Webプログラミング（PHP / MySQL）WordPress

  サーバーサイドスクリプト概論／ API 概論／PHP概要／基礎／入力フォーム／データベース／ MySQL概要／CMS（コンテンツマネジメントシステム）概要WordPress概要／インストール／環境設定／管理画面／投稿ページ／固定ページ／カテゴリ／タグ／タクソノミー／WordPress関数／プラグイン／オリジナルテーマ制作

• 作品制作実習

  Webサイトプランニング／企画 ・コンセプト／コンテンツページ構成／コーディング／ページ最適化／ブラウザ互換性／コーディングチェック／トップページ・コンテンツページ制作／スマートフォンサイト制作／プレゼンテーション／作品講評

• WebデザインⅠ（ビジュアルデザイン）

  Webデザイン概論／ Webサイトの種類と役割／サイトレイアウトデザイン／マルチデバイスページデザイン／高度なフォトコンテンツ表現／ Webカラーデザイン／Webタイポグラフィ実践／Webサイトデザイン思考／分析

• WebデザインⅡ（情報設計）

  モーションデザイン／マイクロインタラクション／アクションとレスポンス／映像を用いたサイト表現／インフォグラフィックス／アイコン／ピクトグラム／Webサイトデザイン制作実習／プレゼンテーション／講評

• WebデザインⅢ（インタラクション）

  モーションデザイン／マイクロインタラクション／アクションとレスポンス／映像を用いたサイト表現／インフォグラフィックス／アイコン／ピクトグラム／Webサイトデザイン制作実習／プレゼンテーション／講評

• IA・UI・UXデザイン

  IA・UI・UXデザイン概論／企画・コンセプト立案／情報の組織化とカテゴリ設計／サイトマップの設計／ワイヤーフレーム設計／UXの3大要素／ユーザー行動と画面設計／サイト目的別／デバイス別UI・UX設計／UI・UXの改善手法

• Webマーケティング

  Web解析（Google Analytics）基礎Ⅰ／Web解析（Google Analytics）基礎Ⅱ／普遍的なSEO ／ SEOの課題発見と改善手法／普遍的なWebリスティング広告／リスティング広告の課題発見と改善手法／ランディングページの企画・設計Ⅰ／ランディングページの企画・設計Ⅱ

• Webディレクション

  ユーザー行動の理解と情報収集／定性手法と定量手法／仮説検証とコンテクストリサーチ／カスタマージャーニーマップ／ユーザビリティテストサイトの問題点と改善策の検証／改善提案プロトタイプ作成／プレゼンテーション／講評

• UI / UX基礎Ⅰ（Design・Science・Engineering）

  UI / UXデザイン／ユーザーインタフェースデザイン／ UI / UXデザイン／ ユーザーエクスペリエンスデザイン／ 人間中心設計／Cooperative Design・Participatory Design／行動経済学／Behavioral Economics ／人間工学／Human Factors and Ergonomics ／感性工学／ Affective Engineering ／ デザインガイドライン／ Human Interface Guidelines ／デザインガイドライン／ Material Design

• UI / UX基礎Ⅱ（The Elements of User Experience）

  戦略段階・要求段階／要件定義・Google Design Doc ／構造段階／インタラクション設計・情報設計／骨格段階／インタフェース設計・ナビゲーション設計／表層段階／ワイヤーフレーム・プロトタイピング／予期的UX・一時的UX・エピソード的UX・累積的UX ／ウォーターフロー型開発・アジャイル型開発／ Atomic Design / Design System（デザインシステム構築）／ Complexion Reduction / UIトレンド

• ユーザーリサーチ

  プロトタイピング／ストーリー視点・プロダクト視点／ツール／Prott・ InVision・Zeplin・Figma・Google Gallery ／調査／ユーザーインタビュー・エスノグラフィー・行動観察／評価／ヒューリスティック評価・ユーザビリティーテスト／総括的評価・形成的評価／反証アプローチ・ゼロ仮説／ Design Sprint ／スプリント・イテレーション／ペルソナ手法・シナリオ設計・カスタマージャーニーマップ

• チームビルディング

  Sketch / Exporting・Symbols・Plugins（シンボル設計）／ Figma/ Collaborative Interface Design（共同設計）／Abstract / VersionManagement（履歴管理）／ Google Drive / Docs・Sheets・Slides（情報共有）／デザインレビュー／フィードフォワード／デザインレビュー／フィードバック／コミュニケーション／共通認識確認・傾聴／コミュニケーション／学習機会提供・行動促進

• 認知工学／ Webマーケティング

  インタフェースデザイン心理学／データ分析／Business Intelligence ／データ分析／ Deep Learning ／Webマーケティング／集客施策・回遊施策／SEO・SEM・LPO・EFO ／効果測定／ Analytics ／視線誘導・促進要因・阻害要因／同調現象・認知的不協和・後知恵バイアス

• ヒューマンインタフェース

  UX ５階層モデル／ Task Oriented・Information Oriented ／戦略／要求／構造／骨格／表層／ DesignOps / UX Engineering（合意形成）／ Lean UX / MVP（実用最小限の製品）／ UXライティング・ラベル設計／アクセシビリティ・ユニバーサルデザイン／オブジェクトベースUI / Modeless User Interface ／タスクベースUI / Command Line Interface

• UIデザインⅠ（iOSアプリ・Androidアプリ）

  OS最適化Ⅰ／ Human Interface Guidelines ／OS最適化Ⅱ／ Material Design Guidelines ／審美的整合性／ Aesthetic Integrity ／比喩的要素／ Material isthe metaphor ／マルチデバイス最適化／ Device independent pixel ／人間中心設計／ HCD・UCD ／行動経済学／ Behavioral economics ／ Information Architecture

• UIデザインⅡ（iOSアプリ・Androidアプリ）

  ワイヤーフレーム・プロトタイピング・デザインレビュー／要件定義・画面仕様／ UI設計・制作／ネイティブアプリ／画面レイアウト・トーン&マナー／要素・コンポーネント／ Tab Bars・Navigation Bars ／要素・コンポーネント／ Tabs・Floating Action Button ／プレゼンテーション／検証・評価／改善

• UXリサーチ I（ユーザーリサーチ実践Ⅰ）

  定量調査・定性調査／定量調査・分析／アンケート設計／定性調査・分析／基礎／応用／User Interview / Depth Interview ／Research Plan / Plan-Prep-Work-Analyze ／Research Question 1 / Research Question 2

• UXリサーチ II（ユーザーリサーチ実践Ⅱ）

  Desk Research ／Contextual Inquiry / Flow model / Sequence model ／Contextual Inquiry / Artifact model / Cultural model / Physical model ／行動観察／ Ethnographic Research / User Modeling ／ペルソナ法／ジャーニーマップ／ User Modeling ／価値マップ／シナリオ／仮説思考／ Zero hypothesis ／ MECE / Logical Thinking

• Webグラフィック（Illustrator）

  Illustratorの基本操作（ツール・機能）／図形の描画／オブジェクト／グループ化／レイヤー／変形／整列／パスファインダ／パス／アンカーポイント／アウトライン化／クリッピングマスク／RGBとCMYK／グラデーション／文字の扱い／文字デザイン／ロゴ／マーク／タイポグラフィの基本原則／Web用画像の生成 ・書き出し／SVGデータ編集

• Webグラフィック（Photoshop）

  Photoshopの基本操作（ツール・機能）／画像サイズ／ピクセル／画像解像度／写真の加工・合成・トリミング／色域指定／カラーバランス／色調補正／シェイプ／レイヤー／レイヤースタイル／レイヤー効果／不透明度／クイックマスク／レイヤーマスク／クリッピングマスク／アートボード／レイアウトの基本原則／Web用画像の生成・書き出し

• Webグラフィック制作実習

  デジタルデバイス対応デザイン／Web用画像フォーマット／ Webカラー表現／Webタイポグラフィ／サイトレイアウト／ワイヤーフレーム／デザインカンプ／デザインカンプ制作実習／プレゼンテーション／講評

• カラーイメージ表現

  色彩の基礎知識／色の見え方／トーンのイメージ・色の温度感／対比・同化／色の進出・後退／色の膨張・収縮色／色のサンプリング・グラデーション実習／配色の基本／配色基礎用語／色相・トーンを手がかりにした配色／配色トレーニング／色彩マーケティング／色彩構成 実習／プレゼン／講評

• フォトイメージ表現

  写真の基礎知識／写真の表現力／カメラの仕組み／構図／アングル／光の向き・種類／考察／焦点距離／画角／ホワイトバランス／遠近感（パースペクティブ）／被写界深度／露出／シャッタースピードと絞り値／コンセプトワーク／フォトセレクション／デジタルフォト撮影実習／プレゼン／講評

• タイポグラフィ

  タイポグラフィ概論／ヒストリー／タイプフェイス／字形・字体／書体の構造／書体の選定／複数メディアのタイポグラフィ／書体イメージとバリエーション／欧文書体／欧文組版／ハイフネーション／和文書体／和文組版／約物と禁則処理／実験的和文組版／スペーシング実践／和欧混植／組版ルール／ジャスティファイ

• Web基礎

  Web技術（Webの仕組み／HTTP／静的・動的ページ）／ネットワーク（TCP・IP／URL／ドメイン／DNS）／Webのデータ形式（HTML／CSS／画像形式／Script言語）／Webアプリケーション（MVCモデル／SPA／フレームワーク／API／CGI）／システム基礎（LAMP環境／クライアントサーバシステム）／マインドセット（バックキャスティング／考え方）／リサーチテクニック（Google検索テクニック／質問／情報収集スキル）／コミュニケーションツール（Slack／RSS／IFTTT）

• HTML5プロフェッショナル認定試験レベル1対策（ITSSレベル2相当）

  HTML5.1の基礎知識／要素とカテゴリー／グローバル属性／構造／メタ情報／セクション／CSSの基礎知識／セレクタ／CSS適用の優先順位／色／背景／テキスト／フォント／ボックス／フレキシブルボックス／アニメーション／レスポンシブWebデザイン関連技術／API概要／HTTP・HTTPSプロトコル／Web関連技術／模擬問題演習

• HTML5プロフェッショナル 認定試験レベル2対策 （ITSSレベル3対応）

  JavaScript／WebブラウザにおけるJavaScript API／グラフィックス・アニメーション／マルチメディア／ストレージ／通信／デバイスアクセス／パフォーマンスとオフライン／セキュリティモデル／模擬問題演習

• JavaScript基礎 （基本文法）

  JavaScript概論／ECMAScript／変数／定数／文字列／配列／データ型／演算子／条件分岐／繰り返し／例外処理／関数／引数／戻り値／スコープ／this

• オブジェクト・イベント

  オブジェクト指向概論／オブジェクト／プロパティ／メソッド／コンストラクタ／インスタンス／オブジェクトリテラル／ビルドインオブジェクト／ブラウザオブジェクト／DOM／ノード／イベント／イベントハンドラ／イベントリスナー／イベントの伝播

• UI / 機能の制作実装

  タブ切り替えメニュー／アコーディオンメニュー／カルーセル・スライダー／モーダルウインドウ／ローディング／並べ替え機能／絞り込み機能／スクロール関連機能／フォーム関連機能

• JavaScript応用（実践技術）

  配列操作（map／スプレッド構文）／モジュール（エクスポート／インポート）／非同期処理Ⅰ（Promise）／非同期処理Ⅱ（async／await）／非同期通信（fetch／XMLHttpRequest）／ストレージⅠ（Cookie）／ストレージⅡ（Web Storage）／グラフィック（Canvas）

• 開発環境・フレームワーク

  JSライブラリ（Node.js）／パッケージマネージャー（npm／package.json／npm script）／トランスパイル／ビルドツール／仮想DOM／シングルページアプリケーション／クライアントサイドレンダリング／サーバーサイドレンダリング／JSフレームワーク

• 制作実習

  JavaScriptを用いたUI／機能実装／ライブラリを使用したUI／機能実装／フレームワークを使用したUI／機能実装／Gitを用いたバージョン管理／ブラウザ互換性／Polyfill／テスト／デバッグ／コードレビュー／プレゼンテーション／講評

• デザインシステム Ⅰ

  デザインの定義・事例／デザイン領域／デザインの道具／デザインフローの理解／デザインの前提・要素・原則／黄金比／グリッド／ゲシュタルト原則／デザイン分析／デザインの目的と対象／ビジネスフローとデザインの関係性／ブランドの定義／ブランドアイデンティティ／ブランド認知／ブランド体系／ブランド要素／ブランド体験

• デザインシステム Ⅱ

  ブランド分析／ターゲット／ブランディング事例／ブランド構築ステップ／ブランドとデザインの関係性／ブランドデザインの役割／コンセプト開発／ブランドメッセージ開発／グループワーク形式の理解／8QSを使ったコンセプトメイキング／ブランドキーワードの選定／コンセプト設計／ブランド構築ワーク／グループワーク発表／講評／課題リフレクション

• ブランドデザインⅠ

  ブランドデザイン戦略の理解／デザインの役割／デザインワークフローの理解／アフォーダンスの知識・ブランドイメージ構築／ブランド構築ステップ／自己理解を深めるワーク／五感リサーチ法／共感と反発／課題リフレクション

• ブランドデザインⅡ

  ペルソナを探る／ペルソナ観察・構築／デザイン思考／ブランドデザイン構築Ⅰ・Ⅱ／インタビュー設計／共感マップ作成／フィールドワークⅠ・Ⅱ／フレームワーク分析／ 3C分／ STPマーケティング／セグメンテーション／ターゲティング／ポジショニング開発／ブランドアイデンティティⅠ・Ⅱ／ロゴマークの設計／プロセスの振り返り

• ブランドデザインⅢ

  ブランド戦略構築／ 4Pと4C ／ブランド要素／ブランド体験シナリオ作成／ブランディングプレゼンテーション／発表フィードバック／情報分析／問題定義／市場の情報収集／課題リフレクション／ブランド構築ワークショップ（個人・グループ）／インタビューとアンケート

• ブランドデザインⅣ

  共感ポイント／独自価値の仮説／市場細分化の注意点／見込み客の選定／ネットワーク連想法とポジショニング／ポジショニングマップ作成Ⅰ・Ⅱ／共感課題の見極め／ブランディングテーマの設定／ポジショニングの軸を設定／チーム対話の発想法・収束法／チームコミュニケーション／プロトタイピングⅠ・Ⅱ／プレゼンテーション／講評

• Webクリエイティブ（個別スキルアップ復習）

  HTML5ソース復習／CSS3・CSSソース復習／Dreamweaver操作／復習／Illustrator操作／復習／Photoshop操作／復習／Adobe XD操作／復習／jQuery復習／Javascript・PHP・MySQL復習／WordPress復習／Webデザイン実践復習／レスポンシブWebデザイン復習／作品制作実習／復習

• ポートフォリオ制作実習（Webクリエイティブ／ UI / UX設計 修了制作）

  ポートフォリオ基礎知識／企画／コンセプトメイキング／基本設計／レイアウト／ポートフォリオ情報設計／トップページデザイン制作／差別化／オリジナリティ／ポートフォリオプレゼンテーション／ポートフォリオUI / UX戦略／権利／コピーライト ／講評／フィードバック

• キャリアデザイン

  デザイナー就活のフロー／デザイン業界の就活動向／自己分析（時系列／強み・弱み／カテゴリーなど）／自分のコア・コンピタンスと客観的評価／現状把握とビジョン設計からアクションプランを構築／自己分析をもとに自己PR・志望理由の作成／オリジナル履歴書のプロトタイプと成功事例紹介／自己分析とオリジナル履歴書の最適化／デザイン業界で評価されるオリジナル履歴書の作り方／オリジナル履歴書＆職務経歴書の個別添削Ⅰ／オリジナル履歴書＆職務経歴書の個別添削Ⅱ

• 就活実践テクニック

  デザイナー就活の書類選考・面接試験の採点基準／オリジナル履歴書の最終添削と質疑応答／企業情報の収集と分析／自分に合った会社探しⅠ／企業情報の収集と分析／自分に合った会社探しⅡ／デザイナー選考試験のグループディスカッション必勝法／デザイナー選考試験のグループディスカッション実践／面接試験の実践的対策（デザイナー採用編）／デザイナー採用面接の質問例6類×7パターン分析／ビジュアル対策（面接）／写真の選定（応募書類）／第一志望の最終面接に照準を合わせた準備