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

コース詳細表

• HTML Living Standard CSS3コーディングⅠ

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

• Webプロトタイピング（Figma）

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

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

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

• HTML Living Standard CSS3コーディングⅡ

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

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

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

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

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

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

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

• 作品制作実習

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

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

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

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

  アイコンフォント／ユーザビリティ設計／Webアクセシビリティ／デザインガイドライン／UI パーツデザイン／コンポーネント設計／情報構造／ HTML・CSS設計／CSS命名規則／ CSSプリプロセッサ

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

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

• UIデザイン（IA・UX・UIデザイン）

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

• Webマーケティング

  Web解析(Google Analytics)基礎／ CV / CVR / インテント／サイトコンセプトに基づいたSEO設計／SEOの課題発見と改善手法／ Webリスティング広告／リスティング広告の課題発見と改善手法／ランディングページの企画・設計／SNSマーケティング

• Webディレクション

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

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

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

• UX / UI基礎Ⅱ（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 / Version Management（履歴管理）／ 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 is the metaphor ／マルチデバイス最適化／ Device independent
  pixel ／人間中心設計／ HCD・UCD ／行動経済学／ Behavioral economics ／ Information Architecture

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

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

• UXデザイン実践Ⅰ

  Brand Framework（ブランディングの原則）／ Brand Proposition（中核概念）／ Brand Experience（構造構築）／ Brand Engagement（浸透活動）／ Brand Mesaure（効果測定）／ Brand Strategy（ブランド戦略）／Outer Brand / InnerBrand（アウターブランディングとインナーブランディング）／ Brand Department（ブランド組織の作り方）

• UXデザイン実践Ⅱ

  Design Philosophy / Brand Logo（デザイン哲学／ブランドロゴ）／ Brand Motif / Brand Color （ブランドモチーフ／ブランドカラー）／Brand Guidelines（ブランドガイドラインの策定と実装）／ Brand × UX / UI Design（UX / UIデザインへの応用）／組織設計と人的資本（ISO30414の理解）／インセンティブ設計（金銭報酬／体験報酬／感情報酬）／ビジネスSNSと時代性（依存先分散と自立）／ VUCA時代における「複業」の思考法

• Webグラフィック（Photoshop / Illustrator）

  Photoshopの操作（ツール・機能）／選択範囲／レイヤー／写真の加工・合成／トリミング／色域指定／カラーバランス／色調補正／クイックマスク／レイヤーマスク／文字マスク／フィルタ／Illustratorの操作（ツール・機能）／オブジェクト／パスファインダ／文字の扱い／アウトライン化／クリッピングマスク／Webグラフィック実践Ⅰ／ 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）

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

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

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

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

• JavaScript 実践Ⅰ（基本文法・実践技術）

  JavaScript概論／ ECMAScript ／変数／定数／文字列／配列／データ型／演算子／条件分岐／繰り返し／例外処理／関数／引数／戻り値／スコープ／ this ／配列操作（map ／スプレッド構文）／モジュール（エクスポート／インポート）／非同期処理Ⅰ（Promise）／非同期処理Ⅱ（async／ await）／非同期通信（fetch ／ XMLHttpRequest）／ストレージⅠ（Cookie）／ストレージⅡ（Web Storage）／グラフィック（Canvas）

• JavaScript 実践Ⅱ （オブジェクト・イベント）

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

• JavaScript 実践Ⅲ （開発環境・フレームワーク）

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

• JavaScript 実践Ⅳ（UI / 機能の制作実装・制作実習）

  タブ切り替えメニュー／アコーディオンメニュー／カルーセル・スライダー／モーダルウインドウ／ローディング／並べ替え機能／絞り込み機能／スクロール関連機能／フォーム関連機能／ JavaScriptを用いたUI ／機能実装／ライブラリを使用したUI ／機能実装／フレームワークを使用したUI ／機能実装／ Gitを用いたバージョン管理／ブラウザ互換性／ Polyfill ／テスト／デバッグ／コードレビュー／プレゼンテーション／講評

• デザインシステムⅠ

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

• デザインシステムⅡ

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

• ブランドデザインⅠ

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

• ブランドデザインⅡ

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

• ブランドデザインⅢ

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

• ブランドデザインⅣ

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

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

  HTML Living Standard / CSS3コーディング復習／Figma操作／復習／ Visual Studio Code操作／復習／Photoshop操作／復習／ Illustrator 操作／復習／JavaScript / jQuery復習／ PHP・MySQL・WordPress復習／Webデザイン実践復習／レスポンシブWebデザイン復習／作品制作実習／復習

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

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

• デザイナー就活の実践テクニックⅠ（キャリアデザイン）

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

• デザイナー就活の実践テクニックⅡ（就活実践テクニック）

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

• プレックスプログラムⅠ

  デザインプロセス／デザインシステム／デザイントレンドⅠ（現在）／デザイントレンドⅡ（未来）／企画アイデアの発想方法／着眼点と発想法の成功事例Ⅰ／着眼点と発想法の成功事例Ⅱ／ストーリー構築／コンセプトメーキングⅠ／コンセプトメーキングⅡ

• プレックスプログラムⅡ

  ボーダレスデザイン（国／分野）／プラスデザイン／ソーシャルデザイン／コミュニケーションデザインⅠ／コミュニケーションデザインⅡ／デザインストラテジーⅠ（ブランディング）／デザインストラテジーⅡ（マーケティング・MD）／クリエイティブワークショップ／グループディスカッション／デザインプレゼンテーション