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

現在、Webクリエイティブワークは、Webデザインや、UI/UX設計、Webマーケティング、コンテンツ制作、Webプロデュース、IT(プログラミング/ネットワーク/システム…)など、様々な分野のスペシャリスト達が協働しています。このような現状を踏まえ、「WEBインタラクションデザイン総合コース」では、Webクリエイティブワークの各セクションに精通したWebクリエイターの育成を目指し、Webクリエイティブ教育を中心に置きながらも、「DESIGN」「UI / UX」「ENGINEERING」「BUSINESS」の分野から多角的にアプローチするプログラムを編成しています。その他、ITスキル標準(ITSS)レベル3「HTMLプロフェッショナル能力認定試験level2」に対応。デザインの真髄を学ぶ「プレックスプログラム」や、就活で重要となる「ポートフォリオ制作」「キャリアデザイン」などの独自プログラムも充実しています。講師は分野ごとに業界の第一線で活躍するスペシャリスト達が集結しており、1年間(授業680時間+制作実習)でWebクリエイティブワークの次世代リーダーとなり得る、WebデザイナーやUIデザイナー、Webディレクターを養成します。

授業時間数
680時間(272コマ)
開講月
4月
定 員
18名
レベル
未経験者OK /選考試験あり
対応資格
HTML5プロフェッショナル認定試験レベル1
HTML5プロフェッショナル認定試験レベル2
Webクリエイター能力認定試験エキスパート
Illustratorクリエイター能力認定試験エキスパート
Photoshopクリエイター能力認定試験エキスパート
受講期間
昼間部1年
入学金
100,000円(税込110,000円)
受講料
930,000円(税込1,023,000円)
教材費・実習費
150,000円(税込165,000円)
学費総計
1,180,000円(税込1,298,000円)

※本コースへの入学をご検討される方は、必ず個別カウンセリングにご参加ください。その際に、詳細の資料一式をお渡しします。

コース詳細表

  • 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 5階層モデル/ 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パターン分析/ビジュアル対策(面接)/写真の選定(応募書類)/第一志望の最終面接に照準を合わせた準備