Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
4.0 (125 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,065 students enrolled

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML / CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース
4.0 (125 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,065 students enrolled
Created by Shunsuke Sawada
Last updated 1/2019
Japanese
Current price: $11.99 Original price: $199.99 Discount: 94% off
3 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 19.5 hours on-demand video
  • 4 articles
  • 9 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • ゴール設定や見積もりの作成など、現場で必要なプロジェクトの進め方
  • デザインのルールを使って、効率的に機能的なWebデザインを考える

  • Sketch を使ってワイヤーフレームやデザインを作成する

  • HTMLとCSSを覚えてWebデザインをコードに落とし込む
  • Webサイトのモバイル最適化をレスポンシブレイアウトで実現する
  • 架空のWebサイト制作案件を納品可能な状態まで作り上げる
Requirements
  • 事前知識は必要ありません
  • SketchのレッスンはMacが必要です
  • Sketchを使わないレッスンに関しては開発環境に制限はありません
Description

初学者を対象にしたWebデザイナーになるため講座です。
Webデザイナーになるための取っ掛かりが欲しい、Web制作の全体像を学習したいといった方に向けて、
企画からWebサイトの公開まで一気通貫して学べる講座を作成しました。

デザインセクションでは、Webデザイン制作の現場で実際に使用される Sketch というアプリケーションを使用します。
ツールの使い方はもちろんですが、デザインの考え方やデザインパターンなども解説していきますので、デザインに対するより深い理解が得られます。

またこの講座では、実際に手を動かす作業的な内容だけでなく、制作を始める前に必要な「企画力」を大事にしています。
最終的なゴールを見据えて仕事を始める大切さ、効率的な進め方、見積もりの作り方など、ツールよりも大事なことについて学ぶことによって、本当に必要とされるウェブデザイナーになりましょう!


企画

Webデザイナーに必要なのは、ツールの習得だけではありません。
本当に必要とされているのは、クライアントの立場になって考えられるコンサルティング能力です。

プロジェクトに必要な「ゴール設定」をどう作っていくのか、ヒアリングのポイントを解説します。


Sketch

この講座では、最近のWeb制作現場で大きなシェアを獲得した Sketch というアプリケーションを使用します。

従来は Adobe Photoshop が業界の主流アプリケーションでしたが、軽量で安価、そしてWebに特化した機能を持つ Sketch に人気が集まっています。

Sketch は有料のアプリケーションですが、30日間の無料トライアルがありますので、お金をかけずにレッスンが進められます。


トレース

Sketch をマスターするために、既存ウェブサイトのトレース(写し)を講座に組み込みました。
トレースはツールの習得とデザインの感覚を覚えるのに最適な方法です。
Udemy のウェブサイトを Sketch で再現する方法を学びます。


デザイン

デザインの能力はセンスではありません。
与えられた制限の中で、美しさと機能を両立させる工夫であり、そこには理由があります。

単純化されたデザインパターンを解説し、各種パターンが使われている既存事例を紹介していきます。
「ゼロからデザインを考える必要はない」ということを学びましょう。


コーディング(マークアップ)

HTMLとCSSの基礎を学習して、Webサイト制作に必要なコードの書き方を学びましょう。
HTMLで構造を作り、CSSで装飾を加えていきます。

最初は難しく見えるかもしれませんが、HTML & CSSはとても単純な仕組みであることが理解できると思います。


モバイル対応

最近では、アクセスの大半がスマートフォン等のモバイル端末からということも珍しくありません。
その意味で、スマートフォンに最適化されたWebサイト表示は必須と言って良いと思います。

この講座では、レスポンシブレイアウトという手法を使って、デスクトップ用に作られたWebサイトをモバイルでも適切に表示させる方法を学びます。


実践

実際にWebサイト制作の現場を体験するために、架空のヒアリングメモとペルソナを用意しました。
この資料をもとに、以下の順で実際にWebサイトを制作します。

  • ウェブサイトの企画

  • ワイヤーフレーム

  • デザイン

  • コーディング

  • モバイル最適化

1ページのみのシンプルなウェブサイトですが、
Google Maps の埋め込みや、Instagram へのリンク、実際のモバイル端末でのテスト等、学習する内容は多岐に渡ります。ここで学んだ技術を応用することで、様々なウェブサイトの制作が可能になります。


サーバーにアップロード(おまけ)

実際にインターネットに公開して、自分のスマートフォンで確認する方法を紹介します。

Course images: Design vector created by Freepik

  


Who this course is for:
  • 未経験からWebデザインを学びたい方
  • リアルなWebデザイナーの仕事を知りたい方
  • Webサイト制作の工程を最初から最後まで俯瞰したい方
  • 企画、デザイン、コーディングを学びたい方
Course content
Expand all 236 lectures 19:39:57
+ ウェブサイトの企画 / ヒアリング
14 lectures 34:22
共通認識を持ってもらおう
01:32
誰のためのウェブサイト?
03:21
何のためのウェブサイト?
04:32
制限とクリエイティビティ
03:30
クライアントが本当に欲しいもの(ウェブサイトは必要?)
02:23
クライアントが本当に欲しいもの(代替手段 1)
04:47
クライアントが本当に欲しいもの(代替手段 2)
01:54
それでもウェブサイトが必要なら
00:55
運営方法 / 誰が情報を更新するのか
02:52
運営方法 / いつ情報を更新するのか
01:22
運営方法 / テスト環境の構築は必要か
02:42
ラップアップ
00:27
+ ウェブサイトの企画 / トンマナ
10 lectures 21:46
既存事例を集める 1
01:57
既存事例を集める 2
02:19
既存事例を集める 3
03:31
既存事例の集め方
00:58
グルーピング
02:47
グルーピングの修正
02:28
グルーピングの選択
03:05
ラップアップ
01:30
+ ウェブサイトの企画 / モバイル対応
4 lectures 09:28
モバイル対応とは
02:08
モバイル対応の方法 / レスポンシブレイアウト
02:33
モバイル対応の方法 / モバイル専用レイアウト
03:53
モバイル対応の予算
00:54
+ ウェブサイトの企画 / 予算
5 lectures 13:07
納品型と非納品型
04:08
自分の単価を決めておこう
00:58
見積もりの作成
05:34
見積書の体裁
02:25
ラップアップ
00:02
+ Sketchの基本
22 lectures 01:27:07
Sketchの画面構成
04:19
アートボード
02:27
いろいろな図形を描いてみる
07:23
図形のグループ化
03:48
図形の結合
04:09
立方体を描いてみる
03:17
ベクター画像とビットマップ画像の違い
06:17
【練習】簡単なパスを描いてみる
05:44
【練習】パスの結合を使った応用編
04:03
【練習】パスでロゴをトレースする
03:51
テキストツールの基本
01:07
テキストボックスを理解する
02:17
テキストのオプション
04:19
フォントをインストールして表現力を豊かに
04:05
【練習】ロゴのトレースを完成させる
02:18
【練習】図形 / パス / テキストを使ってカードUIを再現
09:14
+ Sketchの応用
34 lectures 01:51:47
このセクションの説明
00:01
パスのアウトライン化と図形の結合
02:34
テキストのアウトライン化と4つの結合モード
03:34
【実践】アイコンをつくる 1
08:15
補足:線のオプションについて
02:19
【実践】アイコンをつくる 2
04:47
【実践】アイコンをつくる 3
04:00
【実践】アイコンをつくる 4
04:09
【実践】アイコンをつくる 5
02:33
【実践】アイコンをつくる 6
02:39
【実践】アイコンをつくる 7
03:14
【実践】アイコンをつくる 8
01:26

ここまで作成してきたアイコンのSketchファイルを添付しています。

【実践】アイコンをつくる 9
02:07
アイコンのSketchファイル
00:00
画像素材
00:01
画像サイズの確認と縮小
02:34
画像の加工
02:59
画像の色調補正
01:26
塗りや線に使うカラーを登録する
02:11
塗りにグラデーションやノイズを設定する
03:10
【練習】Instagramのような画像をつくってみよう
07:53
アイコンのシンボル化 / ★アイコンの改善
03:40
アイコンのシンボル化<シンボルの改善 1>
04:47
アイコンのシンボル化<シンボルの改善 2>
03:36
画像の書き出し
03:30
複数同時書き出しと透過オプション
03:13
アートボードを画像として書き出す
01:20
ラップアップ
01:08
+ ワイヤーフレームを作成する
9 lectures 40:45
タスクを明確にする
02:16
完成後の確認
00:47
ワイヤーフレームの作成 1
07:08
ワイヤーフレームの作成 2
04:40
ワイヤーフレームの作成 3
15:28
ワイヤーフレームの作成 4
00:56
+ トレースからデザインを始める
22 lectures 02:39:58
ヘッダーのデザインをトレースする 2
08:50
ヘッダーのデザインをトレースする 3
08:21
作成済のアイコンを読み込んでシンボルに登録
11:18
カテゴリーメニューをトレースする 1
05:25
カテゴリーメニューをトレースする 2
07:02
アラートをトレースする
04:50
アイコンの修正
01:18
Sketchでボーダーを引くテクニック
04:32
作成済のシンボルを使ってデザイントレースを効率化する
10:05
レコメンデーションのトレース 1
07:12
レコメンデーションのトレース 2
02:29
レコメンデーションのトレース 3
01:39
レコメンデーションのトレース 4
29:01
レコメンデーションのトレース 5
10:20
ピックアップのトレース 1
10:47
ピックアップのトレース 2
04:14
フッターのトレース 1
09:09
フッターのトレース 2
06:02
デザイントレースの確認
02:31
+ デザインの原則
15 lectures 54:15
直線・波線・ジグザグ
06:48
色とスケールのコントラスト
03:26
スペース
02:54
近接・情報のグループ化
03:02
ヒエラルキー・情報の階層化
04:23
シンメトリー・アシンメトリー
02:40
反復・繰り返しのデザイン
03:32
グリッドレイアウト
02:39
色の選択 1
03:09
色の選択 2
05:51
書体
04:09
書体の事例
02:56
ラップアップ
03:59