WEBデザイン講座 Level1《初級者レベル》WEBデザイン・HTML・CSS・公開までを【150分】で速習する
What you'll learn
- WEB制作に必要な知識と技術を基礎から学習します。
- WEBページの作成から公開までの全工程を学習します。
- 架空のカフェ「OUCHI CAFE」のWEBページを完成させます。
- AdobeXDの基本操作を学習します。
- AdobeXDでアイコン(手紙・ハート・虫眼鏡・家)を作成します。
- AdobeXDで「OUCHI CAFE」のオリジナルロゴを作成します。
- HTMLの基礎を学習します。
- CSSの基礎を学習します。
- CSSのセレクタは「子孫セレクタ」のみを学習します。※入れ子構造の概念を身に着ける。
- flexboxの基礎を学習します。※横並びにする・縦方向で中央揃えにするなどで使用。
- レスポンシブWEBデザインの作成方法(flexbox使用)を学習します。
Requirements
- 【必須】講座で使用するAdobeXDやエディタなどのアプリケーションソフトは、受講前にインストールを済ませておいてください。
- ※ソフトやアプリなどのインストールに関するサポートは行っておりません。
- 【必須】基本的なパソコンの操作ができる方
- ※OSはWindowsとMacのどちらでもOKですが、動画はWindowsを使用しています。予めご了承ください。
- 【必須】基本的なエディタの使用方法を習得済みの方
- ※動画の操作画面ではBracketsを使用し、使用を推奨しておりますが、エディタに関しては受講者様の方でお好きなものをご使用いただいても結構です。
- 【必須】HTMLおよびCSSの基礎を学習済みの方
- ※HTMLやCSSの知識がまったくゼロの初心者の方にとっては、少しレベルが高いと思われます。
- 【推奨】WEBデザイン入門講座を修了された方。もしくは同等以上のレベルの方
- ※ご自身でWEB制作ができる方にとっては物足りないレベルになるかと思いますので、ご受講をされる前に「学習内容」や「コースの内容」などを事前にチェックされた上で、ご検討いただければ幸いです。
Description
▼ご注意ください
storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。
レスポンシブ対応のWEBページ(Cafe店用)を作ろう!
AdobeXD (体験版・無料プラン) でデザインカンプ(完成イメージ)を作成し、HTML と CSS を作成(コーディング)してインターネットに公開するまでの流れを学習します。
動画の通りに手を動かしていけば HTML や CSS などについて多少理解できなかったとしても「受講者様ご自身の手で WEBページ を完成」させることができるコースです。
なお、本講座は短時間(約2.5時間)でWEB制作の全工程を総合的に学習することを目的としているため、基礎知識の学習においては、初心者向けの「WEBデザイン入門講座」をご受講いただくことをお勧めいたします。
新着情報
[new] 特典動画を追加しました!※シリーズWEBデザイン講座共通の特典動画となります。
WEBデザイナーの仕事は将来、AIに奪われるのか?について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください!
[new] AdobeXDのスタータープラン(無料版)の提供が終了についてのお知らせを追加しました。Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。テキストレクチャーを追加しました。
ワイヤーフレームの作成について
特典動画の内容をアップデートおよび追加しました。
Bracketsのインストールと起動
Bracketsの画面構成とテーマ
テーマの追加・変更・削除
拡張機能の追加
拡張機能の説明
エディタソフトの Brackets が復活!
※詳細については、0.エディタの基本 のレクチャーをご確認ください。本講座のサポートについてのレクチャーを追加しました。
特典セクションに以下のレクチャーを追加しました。
Visual Studio Code のインストール
テーマの変更
ファイルの保存と設定
リアルタイムプレビュー
本講座の特徴
最新のカリキュラムを導入
WEB制作業界は今大きな変革期を迎えているため、これから先の未来にも通用するWEB制作の技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座は、これからWEBデザイン(制作)を学ぼうとする初心者の方を対象に、最新の学習カリキュラムをご用意しました。
AdobeXDの基本操作を学習する
AdobeXDでデザインカンプ(完成イメージ)を作成する
HTML (HTML文書)と CSS (スタイルシート)を作成(コーディング)する
無料サーバ(XFREE)を申し込む
インターネットで公開する
WEB制作に必要なスキルをトータルで速習する
WEBデザイン(完成イメージ)ができても、WEBページは完成いたしません。HTMLやCSSと言った特殊な言語を使って、ブラウザ上で表示されるように変換(記述・コーディング)する必要があるからです。
さらに、自分以外の誰かに見てもらうためには、インターネットに接続されているサーバを借りて必要なファイルをアップロードし、WEBページを公開する必要があります。無料ブログなどを使えばこのような作業は必要ありませんが、一般的なWEBページを公開するにはこれらの作業は必須です。
本講座では約150分の短時間で、WEBデザインをし、完成させたデザインカンプをもとにWEBページをコーディングし、インターネットに公開させるまでの一連の流れと、各作業に必要な技術を体系的に学びます。
対象と目標
本講座は、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使用)を作成したい方
Instructors
storeG スタッフのプロフィール
K.Nakamura
▼WEB制作
本業はWEBディレクターですが、案件によっては、WEBデザインやHTML&CSSのコーディングも担当しています。HTML&CSSのコーディングはエディタを使っての手打ちにこだわり、Validation Service(構文チェック)では、できる限り100点を目指すのをポリシーとしています。
▼パソコン教室講師・インストラクター
回を追うごとに評判となり、最後にはキャンセル待ちが出るほどの講座を担当したことがあります。
※某市主催:パソコン初心者講座、ワープロ講座(初級・中級・上級)、表計算ソフト講座(初級・中級・上級)、親子パソコン教室。
パソコン初心者講座に参加された方たちが、全講座に参加され、修了時には即戦力になるほどの実力を培われた時は講師冥利に尽きました。
▼コーチ・カウンセラー
・コーチングの書籍出版(重版あり)
・看護師新人研修(コーチング講師、開催地:大阪)
・看護師長セミナー(コーチング講師、開催地:名古屋)
・コーチングセミナー(開催地:京都)
・産業カウンセラー資格試験合格
・携帯キャリア公式サービスの悩み相談カウンセラー
2018年7月より、Udemyでオンライン動画講座を制作・運営しています。
これまでの受講者総数は、約15,000名です。
コース(講座)ごとに、チームを結成し最高のコースづくりを目指しています。
※本アカウントはstoreGのチームアカウントです。これまでスタッフの個人アカウントで運営してきましたが、コースが増えてきたこともあり、コースごとに運営方針を決め、アカウントを分けて運営していきます。ご不便をおかけしますが、ご了承のほどよろしくお願い致します。
▼WEB制作
大手企業や中小企業、個人の方など、様々なクライアントとお取引をさせていただいております。
業務内容は、WEBデザイン、バナー制作、ネットショップの制作と運営サポート、コンサルティング、メールマガジンの執筆、Flash(アニメーション)など、幅広く多数の実績があります。
また、クラウドソーシングサービスでの受注実績は200以上あり、総合評価も4.9の高評価をいただいております。