Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
WEBデザイン講座 Level1《初級者レベル》CanvaでデザインしHTMLxCSSでコーディング＋公開までを速習する
Rating: 3.9 out of 5(551 ratings)
5,061 students

WEBデザイン講座 Level1《初級者レベル》CanvaでデザインしHTMLxCSSでコーディング＋公開までを速習する

初級者からのステップアップ！WebデザインとHTML＆CSSを短時間で学習します【注意】以前はAdobeXDでWebデザインを学習する講座でしたがCanva用に変更して講座内容をアップデートしました※XD用も特典レクチャーとして視聴できます
Created byK.Nakamura (storeG), storeG -web.com
Last updated 7/2025
Japanese

What you'll learn

  • WEB制作に必要な知識と技術を基礎から学習します。
  • WEBページの作成から公開までの全工程を学習します。
  • 架空のカフェ「OUCHI CAFE」のWEBページを完成させます。
  • Canvaの基本操作を学習します。
  • Canvaを使ってWebデザイン(ワイヤーフレーム・デザインカンプ)を作成します。
  • Canvaを使って簡単なロゴを作成します。
  • AdobeXDの基本操作を学習します。
  • AdobeXDでアイコン（手紙・ハート・虫眼鏡・家）を作成します。
  • AdobeXDで「OUCHI CAFE」のオリジナルロゴを作成します。
  • HTMLの基礎を学習します。
  • CSSの基礎を学習します。
  • CSSのセレクタは「子孫セレクタ」のみを学習します。※入れ子構造の概念を身に着ける。
  • flexboxの基礎を学習します。※横並びにする・縦方向で中央揃えにするなどで使用。
  • レスポンシブWEBデザインの作成方法(flexbox使用)を学習します。

Course content

11 sections • 81 lectures • 5h 4m total length

  • 【PV】本講座のレベルと学習内容がわかる！※シリーズ講座の紹介2:10

    「WEBデザイン講座」は、レベル別で展開しているシリーズ講座のため、各レベルのコースについてご紹介しています。本講座はレベル1です。受講者様ご自身のレベルにあわせてご受講いただければ幸いです。

  • シリーズ WEBデザイン講座 ※オススメの受講方法について2:40

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

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

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

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

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

  • 【重要】AdobeXD スタータープラン(XD無料版)の提供が終了しました1:35
  • 【旧】本講座の概要 ※受講前にご視聴ください3:34
  • 【重要】本講座のQ&Aサポートについて6:36

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

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

    Udemyの動画視聴画面の説明レクチャーです。

    【対象】

    • はじめてUdemyをご利用になる方

    • 動画視聴方法についてまだよくご存知ない受講生の方

    ※storeGが公開している全講座(コース)共通のレクチャーとなりますので、不要な場合はスキップしていただいてOKです。

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

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

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

Requirements

  • 【必須】講座で使用するAdobeXDやエディタなどのアプリケーションソフトは、受講前にインストールを済ませておいてください。
  • ※ソフトやアプリなどのインストールに関するサポートは行っておりません。
  • 【必須】基本的なパソコンの操作ができる方
  • ※OSはWindowsとMacのどちらでもOKですが、動画はWindowsを使用しています。予めご了承ください。
  • 【必須】基本的なエディタの使用方法を習得済みの方
  • ※動画の操作画面ではBracketsを使用し、使用を推奨しておりますが、エディタに関しては受講者様の方でお好きなものをご使用いただいても結構です。
  • 【必須】HTMLおよびCSSの基礎を学習済みの方
  • ※HTMLやCSSの知識がまったくゼロの初心者の方にとっては、少しレベルが高いと思われます。
  • 【推奨】WEBデザイン講座 Level0 を修了された方。もしくは同等以上のレベルの方
  • ※ご自身でWEB制作ができる方にとっては物足りないレベルになるかと思いますので、ご受講をされる前に「学習内容」や「コースの内容」などを事前にチェックされた上で、ご検討いただければ幸いです。

Description

▼ご注意ください

  • 以前はAdobeXDでWebデザインを学習する講座でしたがCanva用に変更して講座内容をアップデートしました※XD用も特典レクチャーとして視聴できます

  • AdobeXDのスタータープラン(無料版)の提供が終了しました。※有料プランでのみ使用できます。

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



レスポンシブ対応のWEBページ(Cafe店用)を作ろう！

AdobeXD (【注意】無料プランはなくなり、Adobe Creative Cloud に統合されました) でデザインカンプ(完成イメージ)を作成し、HTML と CSS を作成(コーディング)してインターネットに公開するまでの流れを学習します。

動画の通りに手を動かしていけば HTML や CSS などについて多少理解できなかったとしても「受講者様ご自身の手で WEBページ を完成」させることができるコースです。

なお、本講座は短時間(約2.5時間)でWEB制作の全工程を総合的に学習することを目的としているため、基礎知識の学習においては、初心者向けの「WEBデザイン入門講座」をご受講いただくことをお勧めいたします。


  • 新着情報

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

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

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

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

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

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

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

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

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

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


    テキストレクチャーを追加しました。

    • ワイヤーフレームの作成について


    特典動画の内容をアップデートおよび追加しました。

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

    • Bracketsの画面構成とテーマ

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

    • 拡張機能の追加

    • 拡張機能の説明


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


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

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

    • Visual Studio Code のインストール

    • テーマの変更

    • ファイルの保存と設定

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


  • 本講座の特徴

  1. 最新のカリキュラムを導入

    WEB制作業界は今大きな変革期を迎えているため、これから先の未来にも通用するWEB制作の技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座は、これからWEBデザイン(制作)を学ぼうとする初心者の方を対象に、最新の学習カリキュラムをご用意しました。

    • AdobeXDの基本操作を学習する

    • AdobeXDでデザインカンプ(完成イメージ)を作成する

    • HTML (HTML文書)と CSS (スタイルシート)を作成(コーディング)する

    • 無料サーバ(XFREE)を申し込む

    • インターネットで公開する

  2. WEB制作に必要なスキルをトータルで速習する

    WEBデザイン(完成イメージ)ができても、WEBページは完成いたしません。HTMLやCSSと言った特殊な言語を使って、ブラウザ上で表示されるように変換(記述・コーディング)する必要があるからです。
    さらに、自分以外の誰かに見てもらうためには、インターネットに接続されているサーバを借りて必要なファイルをアップロードし、WEBページを公開する必要があります。

    無料ブログなどを使えばこのような作業は必要ありませんが、一般的なWEBページを公開するにはこれらの作業は必須です。

    本講座では約150分の短時間で、WEBデザインをし、完成させたデザインカンプをもとにWEBページをコーディングし、インターネットに公開させるまでの一連の流れと、各作業に必要な技術を体系的に学びます。


  3. 対象と目標

    本講座は、WEB制作をゼロから学びたい初心者を対象に、WEBデザイン→コーディング→公開までの全工程をひとつずつ丁寧に解説しています。

    • WEB制作に必要な技術を基礎からしっかりと学びたい方。

    • ソフトやツールに頼らず、自分の力でWEBページを作成したい方。

    • これまでWEBページの作成にチャレンジしてきたけれど、完成まで到らなかった方。

    • WEBページがどのような技術で作られ、表示されるのかを知りたい方。

    などにとっては、役に立つ講座になるかと思いますので、ご自身にあてはまると思われる方は是非ご受講ください。


    なお、ご自身でWEBページを作成されたことがある（作成できる実力がある）方とってには優しすぎる内容のため、ご受講はお勧めいたしません。ご受講様ご自身のレベルに合わせて講座の選定をお願いします。


  • ナレーション・BGMほか

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

    • BGM YOU (storeG)

  • イラストなど

    • Designed by Freepik

      • freepik

      • Macrovector

    • pixabay

    • prezi

    • canva

Who this course is for:

  • WEB制作に必要な技術を総合的に学びたい方 (初級者レベル)
  • 【推奨】WEBデザイン入門講座、もしくはWEBデザイン講座 Level0を受講された方
  • ※HTMLやCSSの知識がまったくゼロの初心者の方にとっては、少しレベルが高いと思われます。
  • AdobeXDの基本操作を身につけたい方
  • HTMLの基礎を学びたい方
  • CSSの基礎を学びたい方
  • 無料ブログを卒業し、自分の力でWEBページを公開したい方
  • これまでWEBページの作成にチャレンジしてきたけれど、完成まで到らなかった方
  • WEBページの作成から公開までを体験し、学びたい方
  • WEBページがどのような技術で作られ、公開されているのかを知りたい方
  • HTMLやCSSの知識を深めるよりも、とにかく自力でWEBページを完成させたい方
  • シンプルなレスポンシブWEBデザインページ(flexbox使用)を作成したい方

Report abuse