プロになる基礎から実践まで!WebデザインからHTML5・CSS3(Sass)でのコーディングを全て学べる講座
3.1 (76 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
594 students enrolled

プロになる基礎から実践まで!WebデザインからHTML5・CSS3(Sass)でのコーディングを全て学べる講座

Webサイト作成の思考方法、PhotoshopとAdobeXDを用いたデザイン作成・プロトタイプ作成、HTML5とSass(SCSS)・jQueryを用いたレスポンシブ対応のコーディングを爆速で学べるコース。
3.1 (76 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
594 students enrolled
Created by 浅本 侑樹
Last updated 6/2018
Japanese
Current price: $9.99 Original price: $199.99 Discount: 95% off
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 23 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • デザインからコーディングまで一貫してWebサイトを作成できるようになり、実務でも通用する制作の流れを習得できます。
  • Adobe XDを用いてWebデザインが出来るようになります。

  • HTML5、CSS3、Sass(SCSS)に関する知識・よく使うタグを身につけることができます。

  • パソコンにもスマートフォンにも対応したレスポンシブのWebページの作り方を身につけることができます。
  • Webフォントやアイコンフォントが使えるようになります。
Requirements
  • 初歩的なPC操作の知識
  • MacもしくはWindows
  • デザイン編ではAdobe Photoshop、実践編ではAdobe XDが必要です。(コーディングだけを学習したい方は不要です)
Description

サイト作成にあたって考えるべきことを学べ、成果物としてワイヤーフレーム作成まで行う思考編

Photoshopを用いてワイヤーフレームからデザインをし、成果物としてはデザイン作成まで行う デザイン編

HTML5やSass(SCSS)を用いてコーディングを行い、自己紹介ページの作成まで行う コーディング編

実際の私の仕事の流れを再現し、思考編・デザイン編・コーディング編を網羅した実践編。デザインのツールはPhotoshopではなくAdobe XDを使用。プロトタイプ作成からデザインフィードバックをもらう方法に加えて、Webフォントの使用やよく目にするアニメーションなど、全面的にトレンドを取り入れています。成果物としてはブログのトップページ、記事一覧ページ、記事詳細ページとなります。

一連の流れを学びたい方はもちろん、コーディングやデザインだけ学びたい方にもオススメの講座です。
コーディングするものは全てレスポンシブデザインで作成します。

---

使用する言語
HTML5、CSS3、Sass、jQuery

使用するツール
Photoshop、AdobeXD、Atom、Google Chrome

使用する外部サービス
Google Fonts、Google Fonts + 日本語早期アクセス、Font Awesome、ress

使用しているマシン
前半はMac(macOS High Sierra)ですが、動作が重いため、途中からWindows(Windows10)に切り替わります。
インターフェイスに違いはそれほどないので、Macユーザーの方でも問題ありません。

Who this course is for:
  • Webデザインもコーディングも学びたい方
  • プライベートや仕事でホームページ(Webページ)の作成が必要な方
  • Webデザイナーになりたい方
  • 爆速でPhotoshop、Adobe XD、HTML、CSS3、Sass(SCSS)を学習したい方
Course content
Expand all 37 lectures 08:17:28
+ はじめに
1 lecture 01:19

講師の自己紹介とこの講座の目的を説明します。

Preview 01:19
+ 思考編
6 lectures 17:07

なぜ思考編を作成しようと思ったのか、その理由など、思考編を始める前に確認していただきたいことについてのレクチャーです。

Preview 01:00

Webサイト(ホームページ)を作成することで叶えたいゴールを考えるレクチャーです。今回はプロフィールページを作成する前提で、どんなゴールを実現したいのか考えます。

Webサイト作成で実現したいゴールを考える
01:26

プロフィールページをどんな人に見てもらいたいか、ターゲットを考えるレクチャーになります。

ターゲットを考える
02:00

プロフィールページをどんな風にしたいか想像するレクチャーになります。

Webサイトのイメージを想像する
01:29

プロフィールページにどんなコンテンツが必要か考えるレクチャーになります。

どんなコンテンツが必要か考える
03:57

ワイヤーフレームを作成するレクチャーです。思考編で考えたことを元に作成していきます。

ワイヤーフレームを書こう
07:15
+ Webデザイン編(Photoshopが必要)
4 lectures 01:19:05

Photoshopの導入方法についてご紹介するレクチャーになります。

Preview 02:43

Photoshopの使い方についてご紹介するレクチャーになります。網羅的ではなく、よく使うものをご紹介しています。

Photoshopの使い方
25:18

作成したワイヤーフレームからデザインをするレクチャーです。デバイスはパソコン向けを作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

作成したワイヤーフレームからデザインする(PC編)
29:45

作成したワイヤーフレームからデザインをするレクチャーです。デバイスはスマートフォン向けを作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

作成したワイヤーフレームからデザインする(SP編)
21:19
+ コーディング編
7 lectures 01:38:26

このレクチャーで使用するテキストエディタ、Atomの導入方法と入れておくと便利なプラグイン(パッケージ)についてご紹介するレクチャーになります。

Preview 03:51

HTMLの基礎についてのレクチャーになります。HTMLとは何なのか、HTMLでよく使うタグの使い方と意味などを合わせてご紹介しています。

初めてHTMLを書くという方にオススメのレクチャーです。

HTMLについて
20:25

CSSの基礎についてのレクチャーになります。CSSとは何なのか、CSSでよく使う記述の使い方と意味などを合わせてご紹介しています。

CSSについて
13:52

Sass(SCSS)についてのレクチャーになります。Sassとは何なのか、使用するための環境準備(Node.jsのインストールとAtomへのプラグイン追加)、Sassの記述方法などをご紹介しています。

Sassを使ってコーディングをより簡単に
05:54

デザイン編で作成したプロフィールページのデザインをHTMLでコーディング(マークアップ)していくレクチャーです。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください!使用する画像についても添付しています。

デザインからコーディング(HTML編)
16:25

デザイン編で作成したプロフィールページのデザインをSass(SCSS)でコーディングしていくレクチャーです。まずはパソコン向けから。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください!

デザインからコーディング PC向け(Sass編)
20:00

デザイン編で作成したプロフィールページのデザインをSass(SCSS)でコーディングしていくレクチャーです。こちらはスマートフォン向けです。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください!

デザインからコーディング SP向け(Sass編)
17:59
+ 実践編(Adobe XDが必要)
18 lectures 05:00:42

Adobe XDの導入方法についてのレクチャーになります。

Preview 01:38

Adobe XDの使い方についてのレクチャーです。基礎的な使い方の説明になります。

Adobe XDの使い方
13:07

ブログの要件定義についてのレクチャーになります。作る目的、作るのが有効な理由、コンセプト、コンセプトを叶えるために必要なこと、作る必要があるページ、どんな機能が必要かを考えていくレクチャーになります。ワイヤーフレームを作る上で前提条件として必要なことを考えるレクチャーとなっています。



要件定義
02:03

トップページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

ワイヤーフレーム(トップページ)
28:36

記事一覧ページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

ワイヤーフレーム(記事一覧)
04:32

記事詳細ページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

ワイヤーフレーム(記事詳細)
25:17

Adobe XDを使用してトップページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

デザイン(トップページ)
32:07

Adobe XDを使用してブログ記事一覧ページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

デザイン(記事一覧)
04:34

Adobe XDを使用してブログ記事詳細ページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

デザイン(記事詳細)
26:35

Adobe XDを使用してプロトタイプ作成をするレクチャーです。難しいことなくサクッと作成出来てしまうのが特徴です。

プロトタイプを作成
05:43

Adobe XDを使用してデザインのフィードバックをもらう方法をご紹介するレクチャーです。Adobe XDでデザインを公開する方法とそこでフィードバックを記述する方法などがこのレクチャーに含まれています。

Adobe XDを用いたフィードバックのもらい方
04:06

ブログのトップページをコーディング(マークアップ)するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(HTML編・トップページ)
21:22

ブログの記事一覧をコーディング(マークアップ)するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(HTML編・記事一覧)
03:19

ブログの記事詳細をコーディング(マークアップ)するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(HTML編・記事詳細)
28:21

ブログのトップページをSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(Sass編・トップページ)
49:57

ブログの記事一覧をSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(Sass編・記事一覧)
05:10

ブログの記事詳細をSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

コーディング(Sass編・記事詳細)
38:39

ページトップに戻るボタンに対してjQueryを用いてアニメーションでスムーズに動くようにするレクチャーです。デバイスはスマートフォンでもパソコンでも動作します。サクッと作成できて、印象が大きく変わります。今回はjsファイルを作成せず、HTMLファイル内に書く形でレクチャーします。このレクチャーで使用したHTMLは教材として添付していますので、必要に応じてご利用ください。

コーディング(動きをつけてみる編)
05:36
+ まとめ
1 lecture 00:49

講義を終えてのご挨拶になります。

講義を終えてのごあいさつ
00:49