デザスタロゴ

パソコンやスマホが並ぶ画像
Webデザイナーコース
Webデザイナーコース

大人気のカリキュラムその理由は?

パソコンやスマホが並ぶ画像

Course Contents

どんな内容?

どんな内容?

Course Contents

Online Lecture

現役プロの技術が
詰まったカリキュラム

Webデザイナーコース

デザインカリキュラム

  • WEBデザイン基礎
    • デザインとは
    • WEBデザインのワークフロー
    • アプリケーションについて
    • WEBデザイン用語基礎
    • レイアウト基礎
    • データ作りの基礎

    使用するツール

    • Illustratorのアイコン Photoshopのアイコン
  • デザイン4原則
    • 近接、整列、強弱、反復
    • デザイン4原則の使う順番
    • デザイン4原則実践

    使用するツール

    • Illustratorのアイコン Photoshopのアイコン
  • フォント・文字組・配色
    • フォント(書体)について
    • 文字組について
    • 配色について
    • 色の機能について
    • 色の印象について

    使用するツール

    • Illustratorのアイコン
  • LPデザインの流れを掴む
    • LP構成要素確認
    • LP作成実践
    • ワイヤーフレーム作成
    • レイアウトの調整・デザイン

    使用するツール

    • Illustratorのアイコン Figmaのアイコン
  • レイアウト基礎
    • ターゲットの設定や確認
    • 目的や世界観の設定
    • ターゲットが興味を持つ情報の選定
    • デザインレイアウトの方向性
    • ワイヤーフレームを作成

    使用するツール

    • Illustratorのアイコン Photoshopのアイコン
  • レイアウト応用
    • 視線・行動の誘導
    • Zの法則、Fの法則
    • メリハリのつけ方
    • ジャンプ率の3つのポイント
    • 業種別デザイン

    使用するツール

    • Illustratorのアイコン Photoshopのアイコン

コーディングカリキュラム

  • HTML,CSSとは?
    • コーディングするための準備
    • HTMLを理解する
    • CSSを理解する
    • HTMLを簡単にかいてみる
    • CSSを簡単にかいてみる

    学習スキル

    • HTMLのアイコン CSSのアイコン
  • HTML,CSS応用
    • 横並びレイアウトを実装しよう
    • CSSリセット
    • レスポンシブ基礎
    • Chromeデベロッパーツール使い方
    • Git Hubの使い方

    学習スキル

    • HTMLのアイコン CSSのアイコン GitHubのアイコン
  • サイトに動きをつけよう
    • Javascript基礎
    • Javascriptをかいてみる
    • Javascriptの記述注意点
    • 配列、条件分岐、繰り返し処理

    学習スキル

    • HTMLのアイコン CSSのアイコン JavaScriptのアイコン GitHubのアイコン
  • 実際に
    コーディングしてみよう
    • デザインカンプからコーディングする方法
    • 地図の入れ方
    • ページ内リンクの方法
    • PC版「header」をコーディング

    学習スキル

    • HTMLのアイコン CSSのアイコン JavaScriptのアイコン GitHubのアイコン
  • 実際に
    コーディングしてみよう
    • jQuery基礎
    • ハンバーガーメニューを実装してみよう
    • スマホ版「header」をコーディングしよう

    学習スキル

    • HTMLのアイコン CSSのアイコン JavaScriptのアイコン GitHubのアイコン
  • サイトに動きをつけよう
    • jQueryプラグイン「slick」
    • 「Sass」について

    学習スキル

    • HTMLのアイコン CSSのアイコン JavaScriptのアイコン GitHubのアイコン Sassのアイコン

現役プロの技術が詰まったカリキュラム

Online Lecture

Webデザイナーコース

デザインカリキュラム

  • WEBデザイン基礎
    • デザインとは
    • WEBデザインのワークフロー
    • アプリケーションについて
    • WEBデザイン用語基礎
    • レイアウト基礎
    • データ作りの基礎
  • デザイン4原則
    • 近接、整列、強弱、反復
    • デザイン4原則の使う順番
    • デザイン4原則実践
  • フォント・文字組・配色
    • フォント(書体)について
    • 文字組について
    • 配色について
    • 色の機能について
    • 色の印象について
  • LPデザインの流れを掴む
    • LP構成要素確認
    • LP作成実践
    • ワイヤーフレーム作成
    • レイアウトの調整・デザイン
  • レイアウト基礎
    • ターゲットの設定や確認
    • 目的や世界観の設定
    • ターゲットが興味を持つ情報の選定
    • デザインレイアウトの方向性
    • ワイヤーフレームを作成
  • レイアウト応用
    • 視線・行動の誘導
    • Zの法則、Fの法則
    • メリハリのつけ方
    • ジャンプ率の3つのポイント
    • 業種別デザイン

使用するツール

  • Illustratorのアイコン

    Illustrator

  • Photoshopのアイコン

    Photoshop

  • Figmaのアイコン

    Figma

コーディングカリキュラム

  • HTML,CSSとは?
    • コーディングするための準備
    • HTMLを理解する
    • CSSを理解する
    • HTMLを簡単にかいてみる
    • CSSを簡単にかいてみる
  • HTML,CSS応用
    • 横並びレイアウトを実装しよう
    • CSSリセット
    • レスポンシブ基礎
    • Chromeデベロッパーツール使い方
    • Git Hubの使い方
  • サイトに動きをつけよう
    • Javascript基礎
    • Javascriptをかいてみる
    • Javascriptの記述注意点
    • 配列、条件分岐、繰り返し処理
  • 実際に
    コーディングしてみよう
    • デザインカンプからコーディングする方法
    • 地図の入れ方
    • ページ内リンクの方法
    • PC版「header」をコーディング
  • 実際に
    コーディングしてみよう
    • jQuery基礎
    • ハンバーガーメニューを実装してみよう
    • スマホ版「header」をコーディングしよう
  • サイトに動きをつけよう
    • jQueryプラグイン「slick」
    • 「Sass」について

学習スキル

  • HTMLのアイコン

    HTML

  • CSSのアイコン

    CSS

  • JavaScriptのアイコン

    JavaScript

  • GitHubのアイコン

    GitHub

  • Sassのアイコン

    Sass

Career Support

キャリアサポート

キャリアサポート

Career Support

Works

受講生の実績

Webデザイナーコース卒業生

受講生の実績

Works

Webデザイナーコース卒業生

  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績
  • 生徒の実績

Skill

学べるスキル

学べるスキル

Skill

Lecturer Profiles

デザスタ講師紹介

デザスタ講師紹介

Lecturer Profiles

マウスの画像

Webデザイナーコース
説明会に予約

Class Flow

受講の流れ

受講の流れ

Class Flow

マウスの画像

Webデザイナーコース
説明会に予約