Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add 世界で3万人が受講! レスポンシブWebデザインマスター講座(日本語字幕版) to your Wishlist.

Add to Wishlist

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

Udemyベストセラー講座が日本上陸! 米国の人気ウェブデザイナーがマルチデバイス対応のテクニックを伝授します。どんなスクリーンサイズにも適したウェブサイトを作れるようになりましょう。
5.0 (2 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.
71 students enrolled
Created by Chris Converse
Published 4/2015
Japanese Japanese
$10 $20 50% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
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ファイルの作り方からサイトレイアウトのデザイン、テキスト、グラフィックまで。どんなデバイスでも、想定通りの美しいデザインになります。

Who is the target audience?
  • グラフィックデザイナーのかた
  • ウェブ開発者のかた
  • UIに興味があるかた
Students Who Viewed This Course Also Viewed
What Will I Learn?
CSS3のメディアクエリについて学ぶ
GoogleのHTML5 Shiv JavaScriptを統合する
Internet Explorer用のCSSルールを制作する
Photoshopで画像をスライスし、最適化する
HTMLマークアップを効率的に行う
複数のデバイスに対応するためのデザイン手法を知る
View Curriculum
Requirements
  • 特になし
Curriculum For This Course
Expand All 33 Lectures Collapse All 33 Lectures 03:22:50
+
プロジェクトの準備と画像の作成
7 Lectures 31:30

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

Preview 04:53

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

Preview 01:12

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

Preview 08:45

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

プロジェクトルートの作成
00:56

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.

デザイン構成を確認する
02: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.

バナー画像のスライスと画面サイズへの最適化
09:23

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.

テンプレートと画像コンテンツの最適化
03:58
+
HTMLとCSS でレイアウトを作成
11 Lectures 57:09

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

準備:スターターファイルの追加方法
01:20

Creating links to external CSS files from your HTML file.

HTMLファイルとCSSファイルをリンクする
05:32

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

Preview 02:35

Creating the main HTML content containers for our web layout.

メインのコンテナを作成する
03:13

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

プロモ用コンテナとナビゲーションリンクを追加する
04:53

Adding sample content from our code snippets.

コンテナにコンテンツを追加する
02:49

Adding CSS styles for the background and page container

背景とページコンテナをデザインする
07:51

Adding style to our typography with CSS.

フォントのスタイルを決める
05:37

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

CSSルールの合成
10:49

Creating CSS rules specifically for web layout.

CSSでレイアウトを作成する
05:40

Setting up CSS layout rules for the promos and navigation.

プロモ用コンテナのCSSルール
06:50
+
CSSメディアクエリの使い方
4 Lectures 21:52

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

Preview 02:15

Creating CSS rules to optimize the layout for medium screens.

中サイズスクリーン(タブレット)のCSSルール
05:26

Creating CSS rules to optimize the layout for small screens.

小サイズスクリーン(スマートフォン)のCSSルール
06:51

Repositioning the navigation for small screens.

スマートフォン用ナビゲーションメニューの作成
07:20
+
【参考:旧コース】はじめに
3 Lectures 05:15

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

イントロダクション
04:23

A quick walkthrough of the files provided with this course.

Preview 00:52

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

プロジェクトファイル
8.3 MB
+
【参考:旧コース】ウェブ画像の最適化
1 Lecture 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.

画像のスライスと最適化
08:00
+
【参考:旧コース】Adding HTML for Structure and Content
2 Lectures 13:48

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

コンテナの実装
07:19

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

サンプルコンテンツの追加
06:29
+
【参考:旧コース】マルチデバイス対応のためのCSSルール
3 Lectures 43:14

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.

CSSファイルの作成
05:27

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

テキストのためのCSS
14:34

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

レイアウトのためのCSS
23:13
+
【参考:旧コース】モバイルスクリーンのためのCSSルール
2 Lectures 22:02
Use CSS3 Media Queries to alter the layout based on medium-sized screens.
中サイズスクリーン(タブレット)のためのCSS
07:53

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

小サイズスクリーン(スマートフォン)のためのCSS
14:09
About the Instructor
4.3 Average rating
688 Reviews
42,899 Students
8 Courses
Designer and Developer at Codify Design Studio

Chris has over 25 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.

Report Abuse