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

Webサイト制作の基礎をわかっている方が、レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です。
3.4 (39 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.
318 students enrolled
Instructed by NEST online Design / Web Design
$19
$80
76% off
Take This Course
  • Lectures 73
  • Length 5.5 hours
  • Skill Level Intermediate Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 Japanese

Course 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コースを受講の方は、内容が重複することがあるので事前にご確認ください。

What are the requirements?

  • 基本的なPhotoshopの操作ができて、基本的なHTMLとCSSを理解している必要があります

What am I going to get from this course?

  • スマートフォン用サイトが作れるようになります

What is the target audience?

  • PC用のサイトは最低限作れて、スマートフォン用サイトやレスポンシブルサイトに挑戦したい方

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: スマホサイト制作の基礎知識ましょう。
マルチデバイス対応とは?
Preview
04:02
スマートフォンOSのシェアを知る
Preview
05:14
画面サイズの考え方
04:41
スマートフォン独自のジェスチャー操作を知る
04:45
端末の向きのモードを知る
02:51
Viewportについて
03:15
(実践)Viewportを記述してみよう
07:08
マルチデバイス対応方法
03:10
Section 2: スマホサイトデザイン基礎
スマフォサイトの画面設計のポイント
02:50
スマホサイト用ワイヤーフレームの作り方
03:21
使いやすいスマホサイトの考え方
03:08
具体的なスマホサイトデザインのルール
03:48
[実践]CSS3を使って押しやすいボタンをデザインしてみよう
Preview
06:37
具体的なスマホサイトデザインのルール-レイアウト編
04:58
リキッドレイアウトを理解しよう
03:01
スマホサイトで使えるCSS3の装飾表現を知ろう
04:40
Section 3: 実践スマホサイトデザイン
スマホサイト用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
Section 4: スマホサイトコーディング基礎
スマホサイトを作るために必要な環境を知ろう
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
Section 5: スマホサイトのためのコーディングテクニック
タップで発信できる電話ボタンを作成しよう(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
Section 6: 実践スマホサイトコーディング(1)
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
Section 7: 実践スマホサイトコーディング(2)
お知らせ一覧の作成(6):記事一覧のアイコンを表示させよう
04:31
フッターナビゲーションの作成しよう
04:03
フッターの作成:ロゴとコピーライトを記述しよう
02:42
Viewportの設定とエミュレータでの最終確認をしよう
03:04
Section 8: 0から始めるレスポンシブWebデザインの基本
レスポンシブWebデザインとは
02:43
レスポンシブWebデザインをするために必要なスキル
03:44
レスポンシブWebデザインを選択する理由
03:33
レスポンシブWebサイトのデメリット
03:54
レスポンシブWebデザインのレイアウト
03:12
メディアクエリの使い方・書き方
07:44
[実践]フレキシブルレイアウトをつくってみよう(1)
05:17
[実践]フレキシブルレイアウトをつくってみよう(2)
07:52
Section 9: 実践レスポンシブWebサイト制作実践
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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NEST online, ウェブデザイン / プログラミング

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など


Ready to start learning?
Take This Course