Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

WEBデザイナーになりたい人のための【WEBデザイン入門講座】初心者を対象に基礎知識を入門レベルで幅広く学べる講座です!

via Udemy

Overview

WEBデザイナーってどんな仕事をするのだろう?仕事をする上で必要な知識とは?どんなソフトやツールを使えるようになればいい?など、現場では「知っていて当然」であることを概論としてまとめたコースです。詳細についてはカリキュラムをご確認ください。

What you'll learn:
  • WEBデザイナーの仕事やその概要について
  • WEBデザイナーに関するQ&A(よくある質問)
  • 1) Photoshopの基本と画像修正チュートリアル
  • 2) Adobe XDの概要と基本操作チュートリアル
  • 3) HTMLとCSSの基本
  • 4)レスポンシブWEBデザイン(メディアクエリ)の基礎
  • 5) ライティングの基礎
  • 6) WordPressの設置と記事投稿の基本操作
  • 7)インターネットの仕組み・ドメインの取得・サーバ設定ほか

▼ご注意ください

storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです


新着情報

  • [new] 特典動画を追加しました!

    ※シリーズWEBデザイン講座共通の特典動画となります。

    WEBデザイナーの仕事は将来、AIに奪われるのか?について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください!

  • [new] AdobeXDのスタータープラン(無料版)の提供が終了についてのお知らせを追加しました。

  • Photoshopチュートリアルに「顔を加工する」を追加しました。
    1.顔の形状編 2.目編 3.鼻編 4.口編

  • 【ちょこっとアドバイス】ディスプレイの画面比率(アスペクト比) のテキストレクチャーを追加しました。

  • FileZillaの設定方法に変更がありましたので、動画レクチャーの前に【最新情報】FileZillaの設定というテキストレクチャーで変更内容をご案内しましたので、ご確認のほどよろしくお願いします。

  • Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
    ※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。

  • 以下の動画内容をアップデートしました。

    • GoogleChromeのインストールと起動

    • Bracketsのインストールと起動

    • Bracketsの画面構成とテーマ

    • テーマの追加・変更・削除

    • 拡張機能の追加

  • エディタソフトの Brackets が復活!
    ※詳細については、 【追加】エディタの基本 のレクチャーをご確認ください。

  • 本講座のサポートについてのレクチャーを追加しました。

  • Adobe XDのインストールのレクチャーを更新しました。


  • 特典セクションに以下のレクチャーを追加しました。

    • Visual Studio Code のインストール

    • テーマの変更

    • ファイルの保存と設定

    • リアルタイムプレビュー

  • サムネイル画像や、コースタイトルやサブタイトルを変更しました。
    【旧タイトルとサブタイトル】

    • WEBデザイナーになりたい人のための【WEBデザイン入門講座】対象:WEB制作について基礎から学びたい方・業界未経験者

    • ウェブデザイナーに必要な知識や技術(スキルレベル)とは?新人WEBデザイナーの仕事とは? Photoshop,Adobe XD,HTML,CSS,WordPress,ライティング,レスポンシブWEBデザイン等を入門レベルで幅広く学習します。

  • 動画アップデートのお知らせ
    3.トレースの準備④ ※プラグインのインストール
    ※XDのプラグインダウンロードの画面が変更されていたこともあり、上記の動画レクチャーを撮り直しました。


  • Bracketsがインストールできなくなったため、かわりのエディタについての説明を追加しました。
    詳細は、カリキュラムの「【追加】エディタの基本」をご確認ください。


  • AdobeXDチュートリアルアップデートに関するお知らせ

    ※公式サイトより「公式チュートリアルファイル」がダウンロードできなくなったため、本講座用のオリジナル教材を作成し、動画レクチャーを公開しました

    追加したレクチャーは以下になります。

    1. AdobeXDの起動とワークスペースの説明

    2. ツールの基本操作

    3. ワークスペースと機能名

    4. チュートリアル1

    5. チュートリアル2

    6. チュートリアル3

    7. チュートリアル4

    8. チュートリアル5

  • 新規レクチャーを追加しました!

    • AdobeXDのインストールができない場合の対策方法
      受講生からXDがインストールできないとのご相談がありましたので、調べた内容をテキストレクチャーとしてまとめました。

  • 新規レクチャーを追加しました!

    • HTML&CSS入門

      • WEBページの作成 4.よく使う要素とCSS【1】

      • WEBページの作成 5.よく使う要素とCSS【2】

      • WEBページの作成 6.marginとpadding

      • WEBページの作成 7.marginとpaddingの指定方法

      • WEBページの作成 8.よく使う要素とCSS【3】

      • WEBページの作成 9.よく使う要素とCSS【4】

  • 新規セクションを追加しました!

    • デザインの基礎

      • デザインとは

      • WEBデザイン

      • ファーストビュー

      • 構図

      • デザインの「4つの基本原則」


  • 新規レクチャーを追加しました!

    • Adobe XD入門【WEBページのトレース(模写)】

      • Adobe XD入門【WEBページのトレース(模写)】で学ぶこと

      • トレース①※シェイプの作成とマスク

      • トレース② ※テキストの入力

      • トレース③ ※画像の追加

      • トレース④ ※アートボードの整理

      • トレース⑤ ※背景とフッター

      • トレース⑥ ※仕上げと完成

  • 新規レクチャーを追加しました!

    • (業界)用語について

  • 新規レクチャーを追加しました!

    • Udemyの動画視聴画面の説明

  • 新規セクションを追加しました!

    • Adobe XD入門【WEBページのトレース(模写)】

      • トレースの準備① ※トレースするWEBページを選ぶ

      • トレースの準備② ※画像を保存する

      • トレースの準備③ ※スクリーンショットを撮る

      • トレースの準備④ ※プラグインのインストール

      • トレースの準備⑤ ※フォントのダウンロード

      • トレースの準備⑥ ※アートボード・アセット

      • 教材のダウンロード

      • 今後のアップデートについて

  • 新規レクチャーを追加しました!

    • Photoshop入門【チュートリアル】

      • 色調補正の基本1【レベル補正】

      • 色調補正の基本2【トーンカーブ】

      • 色調補正の基本3【色相・彩度】

  • 新規レクチャーを追加しました!

    • Photoshop入門【環境構築・基本操作編】

      • グリッドの設定

      • 定規の設定

      • ガイドの設定

      • 画像のサイズを変更する「画像のリサイズ」

  • 新規レクチャーを追加しました!

    • レスポンシブWEBデザイン入門【基礎(概論)編】

      • スマートフォンの普及

      • レスポンシブWEBデザインとは

      • 【復習】CSSの基本

      • メディアクエリ【前編】

      • メディアクエリ【後編】

      • メディアクエリ【画像サイズの指定】

      • 今後のアップデートについて


本講座では主に、WEBデザイナーの仕事やその概要や、WEBデザイナーに必要なスキルである Photoshop,Adobe XD,HTML,CSS,WordPress,ライティング,レスポンシブWEBデザイン等を入門レベルで幅広く学習します。

ご購入から30日以内であれば、「期待通りではなかった」、「思っていたようなコースではなかった」など、理由を問わず返金可能となっていますので、Udemyのサポートまでご連絡いただくか、受講画面にある返金リクエストにて申請をお願いします。
ただし、受講率が高いなど、一部の場合においてUdemyより返金されないこともあるそうですので、ご受講前に無料サンプル動画にてご判断をいただくことをお勧め致します。


WEBデザイナーになるのが夢

WEBデザイナーを目指す最初の一歩として、知っておくべき知識を身につけておこう。

  • WEBデザイナーとは、実際のところどんな仕事をする職業なの?

  • ハードな職場環境だったり、残業続きで大変だと聞くけれど、それって本当?

  • どのような知識や技術を身につければ、WEBデザイナーとして通用できる?

  • 独学未経験でもWEBデザイナーになれる?

  • WEB制作に必要な環境は?

などについて、詳しくレクチャーします。


環境構築・設定編

自宅でもスクールと同じような環境を構築するために、ソフトのインストール方法などについて学習します。

  • 【ブラウザ】GoogleChromeのインストールと設定

  • 【エディタ】Bracketsのインストールと設定

  • 【画像編集ソフト】Photoshopの購入とインストール

  • 【プロトタイピングツール】Adobe XDのインストール

  • 【FTP】FileZillaのインストール

  • 【特典】Creative Cloud デスクトップアプリケーションのインストール

  • ドメインの取得

  • レンタルサーバの申し込みと設定 ※各有料・無料レンタルサーバー

  • WordPressのインストールと初期設定


WEBデザイナーに関するQ&A

ほかにも以下のような、よくある疑問・質問に答えます!

  • WEBデザイナーになる為の必須スキルは何ですか?

  • どのようなパソコンを買えばいいのかわかりません。

    WindowsとMacでは、どちらの方がお勧めでしょうか?

  • WEBデザイナーの仕事は多岐にわたるようですが、全部できないとダメですか?

  • おすすめの勉強法はありますか?

  • どのくらいのスキル(技術)があれば、WEB制作会社で働く事ができますか?

  • どのくらいのスキル(技術)レベルになれば、フリーランスとして独立できますか?

  • WEBデザイナーに必要なのはズバリ、デザインセンスですか?

  • 未経験からでもWEBデザイナーとして転職※できますか?※30歳前後の方からの質問

  • HTMLやCSSなどは学習中ですが、WEBデザインのポートフォリオがありません。
    ポートフォリオがなければ就職活動はできませんか?

  • 未経験からWEBデザイナーになるために、スクールへ通う計画を立てています。
    どのようなスクールがおすすめですか?

  • 独学でもWEBデザインスキルは身に付きますか?


ナレーション・BGMほか

  • ナレーション 竹中 さやか

  • BGM YOU (storeG)

イラストなど

  • designed by freepik .com

    • dooder

    • pikisuperstar

    • quinky

    • slidesgo

    • Macrovector

  • Image by rawpixel .com

  • いらすとや

  • イラストAC

Taught by

K.Nakamura (storeG) and storeG -web.com

Reviews

4 rating at Udemy based on 597 ratings

Start your review of WEBデザイナーになりたい人のための【WEBデザイン入門講座】初心者を対象に基礎知識を入門レベルで幅広く学べる講座です!

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.