Buying for a Team? Gift This Course
Wishlisted Wishlist

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

Add to Wishlist

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

Webサイト制作の基礎をわかっている方が、レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です。
4.2 (47 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.
400 students enrolled
Created by NEST online
Last updated 12/2016
Japanese
$10 $80 88% off
5 days 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
Have a coupon?
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
What Will I Learn?
スマートフォン用サイトが作れるようになります
View Curriculum
Requirements
  • 基本的なPhotoshopの操作ができて、基本的なHTMLとCSSを理解している必要があります
Curriculum For This Course
Expand All 73 Lectures Collapse All 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
4.4 Average rating
803 Reviews
6,125 Students
8 Courses
ウェブデザイン / プログラミング

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など


Report Abuse