レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!
4.3 (67 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
555 students enrolled
Wishlisted Wishlist

Please confirm that you want to add レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる! to your Wishlist.

Add to Wishlist

レスポンシブル・スマートフォンサイト制作講座 70以上の充実レッスンで作れるようになる!

Webサイト制作の基礎をわかっている方が、レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です。
4.3 (67 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
555 students enrolled
Created by NEST online
Last updated 12/2016
Japanese
Current price: $10 Original price: $80 Discount: 88% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • スマートフォン用サイトが作れるようになります
View Curriculum
Requirements
  • 基本的なPhotoshopの操作ができて、基本的なHTMLとCSSを理解している必要があります
Description

★レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です
スマートフォンの時代の今、スマートフォンに対応したサイトを作れることは必須スキルです!

スマートフォンサイトとレスポンシブルサイトのデザインからコーディングまで、70以上のレッスンで必要な全てを学ぶことができます。

★授業×チャレンジ課題で実践的なスキルが身につく!
スキルを身につける上で、実際作りながら学ぶことはとても大切です。
オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。
こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。

過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム
コースを提供しているNEST Schoolは過去3年間で1200名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間50名近くのWebデザイナーを育成し、自社の高度なWebサービスのデザインを手掛けるまでに成長させています。 実際にWebサービスやWeb制作を実施している企業とプロのデザイナーによるプログラムと、「どうすれば効率よくスキルアップできるか」を 考え続けているプログラムの提供が、他にない価値です

無駄なく、必要なものだけを、必要な順番で学ぶことの大切さ
ネット上や書店にはたくさんの記事や本がありますが、すべてを見ることはできませんし、特に重要でない知識もたくさんあります。
まずは必要な知識だけを必要な順番で学ばないと、そうでない場合と比べて数十倍の非効率な学習になります。こちらのコースでは最も効率的な学習を目指しました


【内容】

  1. スマホサイト制作の基礎知識
  2. スマホサイトデザイン基礎
  3. 実践スマホサイトデザイン
  4. スマホサイトコーディング基礎
  5. スマホサイトのためのコーディングテクニック
  6. 実践スマホサイトコーディング(1)
  7. 実践スマホサイトコーディング(2)
  8. 0から始めるレスポンシブWebデザインの基本
  9. 実践レスポンシブWebサイト制作実践


※他のNESTonlineコースを受講の方は、内容が重複することがあるので事前にご確認ください。

Who is the target audience?
  • PC用のサイトは最低限作れて、スマートフォン用サイトやレスポンシブルサイトに挑戦したい方
Students Who Viewed This Course Also Viewed
Curriculum For This Course
73 Lectures
05:37:32
+
スマホサイト制作の基礎知識ましょう。
8 Lectures 35:06


画面サイズの考え方
04:41

スマートフォン独自のジェスチャー操作を知る
04:45

端末の向きのモードを知る
02:51

Viewportについて
03:15

(実践)Viewportを記述してみよう
07:08

マルチデバイス対応方法
03:10
+
スマホサイトデザイン基礎
8 Lectures 32:23
スマフォサイトの画面設計のポイント
02:50

スマホサイト用ワイヤーフレームの作り方
03:21

使いやすいスマホサイトの考え方
03:08

具体的なスマホサイトデザインのルール
03:48


具体的なスマホサイトデザインのルール-レイアウト編
04:58

リキッドレイアウトを理解しよう
03:01

スマホサイトで使えるCSS3の装飾表現を知ろう
04:40
+
実践スマホサイトデザイン
9 Lectures 49:34
スマホサイト用photoshopファイルの新規作成
03:42

Google Web Fontsをデザインカンプで使用する方法
04:50

トップページデザイン(1)ヘッダーの作成
05:06

トップページデザイン(1)メニューアイコンの配置
05:30

トップページデザイン(2)メイン画像の配置
03:02

トップページデザイン(2)メイン画像 キャッチコピーの作成
07:04

トップページデザイン(3)お知らせ一覧 見出しの作成
04:12

トップページデザイン(3)お知らせ一覧 記事一覧の作成
06:09

トップページデザイン(4)フッターの作成
09:59
+
スマホサイトコーディング基礎
8 Lectures 28:36
スマホサイトを作るために必要な環境を知ろう
03:49

スマホコーディングにおけるHTML5について
02:41

スマホサイト制作で必須のHTML5(1) sectionタグ
03:35

スマホサイト制作のためのHTML5(2) articleタグ
02:51

スマホサイト制作のためのHTML5(3)nav header footerタグ
03:06

スマホ用HTMLファイルの新規作成と、Viewportの指定
06:44

スマホ制作で役立つCSS3について
02:57

ベンダープレフィックスの書き方
02:53
+
スマホサイトのためのコーディングテクニック
8 Lectures 37:14
タップで発信できる電話ボタンを作成しよう(1) href属性の記述
03:32

タップで発信できる電話ボタンを作成しよう(2) CSS3を使ってグラデーションをかける
05:00

CSS3を使ってフォームを使いやすくしてみよう(1) [type=text]属性セレクタ
05:20

CSS3を使ってフォームを使いやすくしてみよう(2) focus擬似クラス
03:03

アイコンをWebフォントで表現する方法
06:28

box-sizingを使った便利なレイアウト
05:58

画像を最適化してサイト表示速度を早くする方法
04:54

JPG画像を圧縮してサイズを減らす方法
02:59
+
実践スマホサイトコーディング(1)
10 Lectures 54:58
HTML5タグを使った全体のマークアップをしよう
07:04

ヘッダーのコーディング(1):基本的なHTMLとCSSの記述しよう
06:02

ヘッダーのコーディング(2):ナビゲーションボタンを作成しよう
04:20

ヘッダーのコーディング(3):CSSを使ってタップ範囲を広げてみよう
04:59

横幅に応じて可変するメイン画像のコーディングをしよう
03:54

お知らせ一覧の作成(1):見出しのコーディングをしよう
04:56

お知らせ一覧の作成(2):floatを使って見出しを横並びさせよう
04:57

お知らせ一覧の作成(3):背景画像を利用したアイコンを表示させよう
03:38

お知らせ一覧の作成(4):記事一覧のHTMLとグラデーションを表示させよう
06:17

お知らせ一覧の作成(5):clearプロパティを使ってフロートを解除しよう
08:51
+
実践スマホサイトコーディング(2)
4 Lectures 14:20
お知らせ一覧の作成(6):記事一覧のアイコンを表示させよう
04:31

フッターナビゲーションの作成しよう
04:03

フッターの作成:ロゴとコピーライトを記述しよう
02:42

Viewportの設定とエミュレータでの最終確認をしよう
03:04
+
0から始めるレスポンシブWebデザインの基本
8 Lectures 37:59
レスポンシブWebデザインとは
02:43

レスポンシブWebデザインをするために必要なスキル
03:44

レスポンシブWebデザインを選択する理由
03:33

レスポンシブWebサイトのデメリット
03:54

レスポンシブWebデザインのレイアウト
03:12

メディアクエリの使い方・書き方
07:44

[実践]フレキシブルレイアウトをつくってみよう(1)
05:17

[実践]フレキシブルレイアウトをつくってみよう(2)
07:52
+
実践レスポンシブWebサイト制作実践
10 Lectures 47:22
Viewportを記述しよう
04:28

ヘッダーのレイアウトをフレキシブルに変更しよう
03:21

メイン画像をフレキシブルに変更しよう
05:17

固定幅の3カラムレイアウトを%に変更しよう
05:17

floatを解除して小さい画面用のレイアウトを作ろう
03:16

media queryを使って2カラムを1カラムに変更しよう
04:31

押しやすいメニュー一覧を作ろう
04:20

ページ全体の周りに余白を作ろう
04:02

jQueryを使ってタップしたら開くメニューを作ろう
06:27

チャレンジ解説
06:23
About the Instructor
NEST online
4.5 Average rating
1,072 Reviews
8,015 Students
8 Courses
ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など