Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design Web Design Mobile Web Sites

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

Webサイト制作の基礎をわかっている方が、レスポンシブルサイトとスマートフォンサイトを作れるようになる講座です。
Bestseller
Rating: 4.1 out of 54.1 (390 ratings)
2,738 students
Created by NEST online
Last updated 12/2016
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • スマートフォン用サイトが作れるようになります
Curated for the Udemy for Business collection

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 this course is for:

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

Course content

9 sections • 73 lectures • 5h 37m total length

  • Preview04:02
  • Preview05:14
  • 画面サイズの考え方
    04:41
  • スマートフォン独自のジェスチャー操作を知る
    04:45
  • 端末の向きのモードを知る
    02:51
  • Viewportについて
    03:15
  • (実践)Viewportを記述してみよう
    07:08
  • マルチデバイス対応方法
    03:10

  • スマフォサイトの画面設計のポイント
    02:50
  • スマホサイト用ワイヤーフレームの作り方
    03:21
  • 使いやすいスマホサイトの考え方
    03:08
  • 具体的なスマホサイトデザインのルール
    03:48
  • Preview06:37
  • 具体的なスマホサイトデザインのルール-レイアウト編
    04:58
  • リキッドレイアウトを理解しよう
    03:01
  • スマホサイトで使えるCSS3の装飾表現を知ろう
    04:40

  • スマホサイト用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

  • スマホサイトを作るために必要な環境を知ろう
    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

  • タップで発信できる電話ボタンを作成しよう(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

  • 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

  • お知らせ一覧の作成(6):記事一覧のアイコンを表示させよう
    04:31
  • フッターナビゲーションの作成しよう
    04:03
  • フッターの作成:ロゴとコピーライトを記述しよう
    02:42
  • Viewportの設定とエミュレータでの最終確認をしよう
    03:04

  • レスポンシブWebデザインとは
    02:43
  • レスポンシブWebデザインをするために必要なスキル
    03:44
  • レスポンシブWebデザインを選択する理由
    03:33
  • レスポンシブWebサイトのデメリット
    03:54
  • レスポンシブWebデザインのレイアウト
    03:12
  • メディアクエリの使い方・書き方
    07:44
  • [実践]フレキシブルレイアウトをつくってみよう(1)
    05:17
  • [実践]フレキシブルレイアウトをつくってみよう(2)
    07:52

  • 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

Instructor

NEST online
ウェブデザイン / プログラミング
NEST online
  • 4.3 Instructor Rating
  • 11,828 Reviews
  • 62,231 Students
  • 8 Courses

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.