Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
世界で３万人が受講！ レスポンシブWebデザインマスター講座（日本語字幕版）
Rating: 4.0 out of 5(34 ratings)
338 students

世界で３万人が受講！ レスポンシブWebデザインマスター講座（日本語字幕版）

Udemyベストセラー講座が日本上陸！ 米国の人気ウェブデザイナーがマルチデバイス対応のテクニックを伝授します。どんなスクリーンサイズにも適したウェブサイトを作れるようになりましょう。
Created byChris Converse
Last updated 10/2020
Japanese
Japanese

What you'll learn

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

Explore related topics

Course content

8 sections • 33 lectures • 3h 22m total length

  • このコースについて4:53

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

  • 準備：必要なツールの説明1:12

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

  • 入門編：HTMLとCSSとは？8:45

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

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

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

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

  • バナー画像のスライスと画面サイズへの最適化9: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.

  • テンプレートと画像コンテンツの最適化3: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.

Requirements

  • 特になし

Description

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

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

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

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

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

◆◆講師より◆◆

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

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

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

このコースでできること

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

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

コースの全体像

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

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

Who this course is for:

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

Report abuse