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

初級者からのステップアップ!WebデザインとHTML&CSSを短時間で学習します【注意】以前はAdobeXDでWebデザインを学習する講座でしたがCanva用に変更して講座内容をアップデートしました※XD用も特典レクチャーとして視聴できます

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

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

初級者からのステップアップ!WebデザインとHTML&CSSを短時間で学習します【注意】以前はAdobeXDでWebデザインを学習する講座でしたがCanva用に変更して講座内容をアップデートしました※XD用も特典レクチャーとして視聴できます

▼ご注意ください

  • 以前は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