Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
WEBデザイナーになりたい人のための【WEBデザイン入門講座】初心者を対象に基礎知識を入門レベルで幅広く学べる講座です！
Highest Rated
Rating: 4.0 out of 5(1,007 ratings)
9,329 students

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

WEBデザイナーってどんな仕事をするのだろう？仕事をする上で必要な知識とは？どんなソフトやツールを使えるようになればいい？など、現場では「知っていて当然」であることを概論としてまとめたコースです。詳細についてはカリキュラムをご確認ください。
Highest Rated
Created byK.Nakamura (storeG), storeG -web.com
Last updated 7/2025
Japanese

What you'll learn

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

Course content

26 sections • 172 lectures • 12h 19m total length

  • コース紹介動画（無料サンプル動画）4:09

    【無料公開中】

    コース概要の紹介動画（無料サンプル動画）です。

    1. 対象と目標

    2. 4つのレベル

    について説明しています。

    受講前にご視聴いただき、学習レベル(対象者)と講座の目標をご確認いただければ幸いです。

  • 【重要】AdobeXD スタータープラン(XD無料版)の提供が終了しました1:35
  • シリーズ WEBデザイン講座 ※オススメの受講方法について2:41

    本レクチャーでは、シリーズ「WEBデザイン講座」について、「学習の流れ」や「各講座の概要」についてご説明いたします。

    なお、本レクチャーはスキップしていただいても結構です。

  • 【動画編】シリーズ WEBデザイン講座 ※オススメの受講方法について14:47

    本動画レクチャーでは、本講座が含まれているシリーズ「WEBデザイン講座」について、「学習の順番」や「各講座の概要」について、詳しくご説明しています。

    ※シリーズ講座共通の動画となります。

  • Udemyの動画視聴画面の説明 【PC編】7:08

    【無料公開中】

    はじめてUdemyをご利用になる方や、Udemyの動画視聴方法について、まだよくご存知ない受講生のために、PC用の動画視聴画面の見方、使い方についてご説明いたします。
    ※storeGが公開している全講座(コース)共通のレクチャーとなります。

    なお、動画視聴方法についてご存じの場合は、本レクチャーをスキップしていただいても問題ありません。

  • 字幕について※システムによる自動生成0:52

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

    なお、字幕は受講者さまの方で、表示のオン・オフ、表示位置、フォントサイズなどを設定していただけますので、お好みに応じて設定していただければ幸いです。

  • 講座内容と学習の進め方3:46

    【無料公開中】

    こちらの動画では、本コースにおける「講座内容と学習の進め方」についてご説明いたします。

  • 【重要】本講座のQ&Aサポートについて6:36

    本講座のQ&Aサポートをご利用になる前には、必ずご確認のほどよろしくお願いします。
    ※サポート対象などについて説明しております。

  • (業界)用語・専門用語について1:53
  • 【補助教材※PDF】URLリスト0:25

    動画で紹介するサイトのURLリストです。

Requirements

  • WindowsかMacのパソコンをもっている方※推奨：最新のOSを搭載
  • ※OSはWindowsとMacのどちらでもOKですが、動画はWindowsを使用しています。予めご了承ください。
  • パソコンの基本操作ができる方
  • 講座で使用するPhotoshopやAdobeXDなどのアプリケーションソフトは、受講前にインストールを済ませておいてください。

Description

▼ご注意ください

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


新着情報

  • [NEW] 【確認テスト】コースの理解度をチェックしよう を追加しました。
    ※全部で15問です。全問正解を目指してがんばってください！

  • 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で

    • 9.最新のテスト結果  (GPT-4V) 2023/10/10 を追加しました。

      ※ChatGPTのコーディングレベルがかなりアップしています！
      【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版

  • 無料レンタルサーバ「XFREE」が新サービス『シン・クラウド for Free』へと変更されました。
    テキストレクチャー「お知らせ」にてご案内を追加しました。


  • 特典動画を追加しました！

    ※シリーズ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

Who this course is for:

  • WEBデザイナーの仕事やその内容について知りたい方
  • WEBデザインを学ぶため、スクールやオンライン講座の受講を検討中の方
  • 新卒でWEBデザイナーを目指している方
  • WEB業界未経験者でWEBデザイナーを目指している方
  • WEBデザイナーとして転職を考えている方

Report abuse