世界で3万人が受講! レスポンシブWebデザインマスター講座(日本語字幕版)

Udemyベストセラー講座が日本上陸! 米国の人気ウェブデザイナーがマルチデバイス対応のテクニックを伝授します。どんなスクリーンサイズにも適したウェブサイトを作れるようになりましょう。
54 students enrolled
Instructed by Chris Converse Design / Web Design
$20
Take This Course
  • Lectures 33
  • Contents Video: 3.5 hours
  • Skill Level All Levels
  • Languages Japanese, captions
  • 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 4/2015 Japanese Closed captions available

Course Description

マルチデバイス対応しているWebサイトを作りたいが、ハードルが高い。

モバイル・タブレット・デスクトップのデザインを同時に考えるのが苦手…。

そんなかたにおすすめの、世界190カ国3万人が受講したUdemy人気講座、レスポンシブWebデザインの基礎がわかるコースです。20年以上の経験を持つ米国のベテランWebデザイナーが、様々なデバイスで利用できるウェブデザインのコツを伝授します。

このコースは、Udemy人気講座"Creating Responsive Web Design"の日本語字幕版です。コースの第1部では、90分でレスポンシブWebデザインの基礎基本を解説します。より上級者向けの第2部も加えた、計4時間のコースです。

※字幕を表示するには、視聴画面下部にある「CC」ボタンをクリックしてください。

◆◆講師より◆◆

マルチデバイス対応の重要性

近年、ユーザーのウェブ環境は多様化する一途で、様々なデバイスからアクセスがあります。ウェブデザイナーとして、どんなスクリーンサイズにも対応できるデザインスキルを身につけることがとても重要です。強いサイト作りのためには、世界中どこからでも、どのデバイスからのアクセスであっても快適に使えるデザインが必要です。また、バージョンが異なる様々なブラウザへの対応も重要です。

全てのウェブデザイナーがこのようなスキルを持っているわけではありません。レスポンシブデザインの技術を身につけることで、他のデザイナーの一歩先を行く、クライアントにアピールできるスキルを磨いていきましょう。

このコースでできること

ダウンロード速度を上げながら、マルチデバイス対応のwebサイト制作をするコツを身に付けられます。

  • HTML5, CSS3, Media Queries
  • HTML5Shiv for Internet Explorer
  • Photoshop画像の最適化とスライス
  • マルチデバイス対応ウェブデザインのコツ

コースの全体像

90分、11の短い映像レクチャーで、CSS3とHTML5を使った素晴らしいウェブサイトを作れるようになります。また、バージョンが古いブラウザにも対応する方法、ダウンロード速度を上げながらマルチデバイス対応をするためのCSSルールを理解できます。ウェブ開発者、グラフィックデザイナー、UXの専門家におすすめです。ご自身のサイト作りに役立つCSS, HTML, and Photoshopのテンプレートつきです。

このコースを修了すると、どんなデバイスでも快適に使えるウェブサイトを作る力が身に付きます。CSSファイルの作り方からサイトレイアウトのデザイン、テキスト、グラフィックまで。どんなデバイスでも、想定通りの美しいデザインになります。

What are the requirements?

  • 特になし

What am I going to get from this course?

  • CSS3のメディアクエリについて学ぶ
  • GoogleのHTML5 Shiv JavaScriptを統合する
  • Internet Explorer用のCSSルールを制作する
  • Photoshopで画像をスライスし、最適化する
  • HTMLマークアップを効率的に行う
  • 複数のデバイスに対応するためのデザイン手法を知る

What is the target audience?

  • グラフィックデザイナーのかた
  • ウェブ開発者のかた
  • UIに興味があるかた

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: プロジェクトの準備と画像の作成
04:53

このコースで制作するウェブページについてご紹介します。様々なデバイスに対応可能なレスポンシブデザイン、スモールスクリーン用のダウンロードサイズ、ユーザビリティを画面サイズごとに適応させるテクニックについて学習します。

01:12

このコースを受講するのに便利な、様々なテキストエディタについて解説します。

08:45

今までHTML、CSSを使ったことがない方向けの入門編ビデオです。HTMLとCSSの関係性について解説します。HTMLとCSSを既に使ったことがあるかたは、次のレクチャーに進んでください。

00:56

Download the Project Files (link above) and begin our project by creating a root directory for our web page.

02:23

Based on the design, we'll formulate a plan for converting the design composition to HTML and CSS. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

09:23

Finally, we'll save the various banner graphics for our responsive design. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

03:58

Now we'll save out the graphics for the template and content graphics. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

Section 2: HTMLとCSS でレイアウトを作成
01:20

Adding the starter files from the Project Files. Be sure to download the project files form Section 1, Lecture 4.

05:32

Creating links to external CSS files from your HTML file.

02:35

Adding a meta tag for the viewport and the Google HTML5 Shiv for IE 8 and below.

03:13

Creating the main HTML content containers for our web layout.

04:53

Adding HTML containers for our promo boxes and the navigation links.

02:49

Adding sample content from our code snippets.

07:51

Adding CSS styles for the background and page container

05:37

Adding style to our typography with CSS.

10:49

Creating compound CSS rules to target more specific elements in the HTML page.

05:40

Creating CSS rules specifically for web layout.

06:50

Setting up CSS layout rules for the promos and navigation.

Section 3: CSSメディアクエリの使い方
02:15

Writing an inline CSS3 media query to target the copyright text.

05:26

Creating CSS rules to optimize the layout for medium screens.

06:51

Creating CSS rules to optimize the layout for small screens.

07:20

Repositioning the navigation for small screens.

Section 4: 【参考:旧コース】はじめに
04:23

This introducion shows this web design final project adapting to various browsers, platforms, and screen sizes.

00:52

A quick walkthrough of the files provided with this course.

8.3 MB

Contains the final HTML and CSS project files, as well as the pre-slices native Adobe Photoshop templates.

Section 5: 【参考:旧コース】ウェブ画像の最適化
08:00

Learn to save individual graphics from a larger canvas in Adobe Photoshop. In addition, learn how the graphics are prepared and optimized for multiple screens and bandwidth considerations.

Section 6: 【参考:旧コース】Adding HTML for Structure and Content
07:19

After creating our HTML5 document, we'll add the necessary markup for the outter-most content containers of our web design.

06:29

We'll add sample content into or content containers, including headings, sidebar container, lists, and anchor links for the navigation.

Section 7: 【参考:旧コース】マルチデバイス対応のためのCSSルール
05:27

Create two new CSS files and link them into the HTML file. Next, we'll link the CSS file, and then link in the Google HTML5 Shiv JavaScript using a conditional statement that is only targeted to IE 7 and 8.

14:34

We'll start by creating the CSS rules that willbe used for styling the text and design elements.

23:13

Create CSS Rules that manipulate the content containers to replicate the desired layout.

Section 8: 【参考:旧コース】モバイルスクリーンのためのCSSルール
07:53
Use CSS3 Media Queries to alter the layout based on medium-sized screens.
14:09

Use CSS3 Media Queries to alter the layout based on small-sized screens.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Converse, Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Ready to start learning?
Take This Course