WebデザインのためのPhotoshop実践講座

Webサイト制作における、Photoshopを使用したグラフィックを実践的に学びます。ワイヤーフレームの作成、合計3つの実践的なサイトを作成するなど、全100レッスンの充実した内容です。
4.4 (23 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.
284 students enrolled
Instructed by NEST online Design / Web Design
$19
$35
46% off
Take This Course
  • Lectures 100
  • Length 11 hours
  • Skill Level Intermediate Level
  • Languages Japanese
  • 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 10/2015 Japanese

Course Description

Photoshopを使用した、Webサイトのグラフィックデザインができるようになるコースです。

ワイヤーフレームの作成や、実際のWebサイトを初級・中級・上級の3つ作成するなど、100レッスンの充実したコースです。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • Photoshopを使用したWebデザインができるようになりたい人
  • Photoshopは最低限使えるが、できることの幅を広げたい人


★特徴★

  • 実際のサイト制作を行うので、とても実践的なスキルが身につく
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が100レッスン 充実した内容ですが、無理せず学べる


★内容★

実際のグラフィックデザインをする前に行う、ワイヤーフレームのデザインを学び、基礎的なWebデザインのテクニックを学んだ後、初級・中級・上級に分けて実際のWebサイト制作を学びます。


(1)ワイヤーフレーム制作

Webサイトをデザインする前に行うべきサイトの設計図、「ワイヤーフレーム」の制作方法を学びます。 ヒアリングの段階からどのようにワイヤーフレームを制作すれば良いかを学ぶ事が出来ます。 実用的で、目的を達成するためのWebサイトのレイアウト方法を知ることができるので、初めてワイヤーフレームを作成する初心者の方はもちろん、もう一度基礎を学びたい上級者の方にもオススメです。


(2)初心者のためのウェブデザインテクニック

photoshopを利用して、実際のウェブサイトのパーツをデザインしていきます。 いきなりウェブサイトを全てデザインするのは難しいと感じる方は、まずこの章の動画から始めてみてください。 簡単な練習課題を通して、どのようにWebサイトデザインを行うのか、といったコツを掴み、本番のWebサイト制作に役立てることができます。


(3)【初級】クリニックのWebサイト〜トップページ編〜

Photoshopを使って、仮想のクリニックを紹介するWebサイトをデザインします。 複雑なPhotoshopの機能はあまり使わなくても出来る、シンプルなデザインのWebサイトですので、初心者の方でも気軽に取り組んでいただけます。 この章の目的は、「Photoshopを使ったWebサイトデザインの流れを掴む」ことです。


(4)【中級】美容院のWebサイト制作〜トップページ編1〜

Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。 Webサイト用のファイル新規作成方法から、ガイドを利用したレイアウトを作成まで、 この章をマスターすることで次回からは「簡単なサイトを自分で作れるように」なります。 作成していただく課題制作は、少し複雑な機能やツールを利用することもありますので、やや中級者向けです。完成版のファイルを一度ご覧頂き、不安な方はまず「初心者向け」の章を受けて頂くことをオススメします。


(5)【中級者向け】美容院のWebサイト制作〜トップページ編2〜

Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。 レイヤースタイル等を利用したデザインになるため、やや中級者向けです。 4.【中級者向け】美容院のWebサイト制作〜トップページ編〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。


(6)【中級者向け】美容院のWebサイト制作〜下層ページ編1〜

Photoshopを利用して、仮想を美容院を紹介するWebサイトをデザインします。 トップページのデザインファイルを複製し、下層ページを作成していきます。 5.【中級者向け】美容院のWebサイト制作〜トップページ編2〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。


(7)【中級者向け】美容院のWebサイト制作〜下層ページ編2〜

Photoshopを利用して、下層の美容院を紹介するWebサイトをデザインします。 シェイプツールを利用した、ご予約フォームのデザインを行っていきます。 7.【中級者向け】美容院のWebサイト制作〜下層ページ編1〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。


(8)【上級者向け】Webメディア〜トップページ編1〜

Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 たくさんのPhotoshopのツールを駆使してデザイン制作を行っていきますので、上級者向けの章です。 完成版のファイルを一度ご覧頂き、制作に不安のある方は、まず「初心者向け」もしくは「中級者向け」の動画をご覧になってから、この章に挑んで下さい。


(9)【上級者向け】Webメディア〜トップページ編2〜

Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 さまざまなPhotoshopのツールを駆使して、デザイン制作を行っていきますので、上級者向けの章です。 8.【上級者向け】Webメディア〜トップページ編1〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。


(10)【上級者向け】Webメディア〜トップページ編3〜

Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 さまざまなPhotoshopのツールを駆使して、デザイン制作を行っていきますので、上級者向けの章です。 9.【上級者向け】Webメディア〜トップページ編2〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。


(11)【上級者向け】Webメディア〜記事ページ編1〜

photoshopを使って、様々なコンテンツを提供する、Webメディアサイトを実際にデザインしていきます。 ここでは、記事本文ページを作成します。 10.【上級者向け】Webメディア〜トップページ編3〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。


What are the requirements?

  • Photoshopの基本的な操作を習得(udemyのPhotoshopの基礎コースを受けてからこのコースを受けるのがおすすめです)

What am I going to get from this course?

  • Webサイト制作のグラフィックデザインができるようになる

What is the target audience?

  • Photoshopを使用して、Webデザインができるようになりたい人

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: ワイヤーフレーム制作
05:31

ワイヤーフレームとはなにか、なんのために作るのかを理解し、ワイヤーフレーム制作で大事なポイントについて学びます。

05:48
ワイヤーフレームをどのような手順で作成すれば良いかを知り、ワイヤーフレームを作成するためのツールをレクチャーします。
04:37
そもそもヒアリングとはなにかを知り、ヒアリングすることの目的を知ります。失敗しないためにどのようにヒアリングしていけばよいのかなどをお伝えします。
05:06
クライアントの状況に応じたヒアリングを行うことができるように、ワイヤーフレームを作成するために、何を聞けば良いのかを知ります。
05:59

Webサイトの一般的なレイアウトを知り、各パーツがそれぞれどんな役割を果たしているのかを知ることで、ワイヤーフレームを作れるようになります。

03:37
実際のワイヤーフレームの作成手順を知り、どんなツールを使用してワイヤーフレームを作成するのかをお話します。
05:46

実際のワイヤーフレームを見て、どんなものを作れば良いのかお話します。

Section 2: 初心者のためのウェブデザインテクニック
05:00

Webサイトデザインの勉強方法を知り、独学でWebサイトデザインができるようになるようレクチャーします。

18:19

四角形ツールを使って背景を作成し、テキストツールやペンツールを利用してパンくずリストをデザインします。ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。

25:00
四角形ツールを使って基盤のボタンを作成し、グラデーションにします。レイヤースタイルで浮いたようにエフェクトをかけ、無料でダウンロードしたアイコンを使って「押したくなるダウンロードボタン」を作成します。
14:33

四角形ツールでバナーの背景を作成し、テキストツールで文字の入力とスタイルの変更を行い、よくある「セールのバナー」を作成します。

11:06

四角形ツールで基盤の背景を作成し、写真を配置し、クリッピングマスクをかけて、綺麗なウェブサイトのメインビジュアルを作成します。デザインにあった無料のフォントをダウンロードして使用します。

09:58
ペンツールでシェイプを作成し、レイヤーのグループ化で作業を効率化しつつ、ウェブサイトのナビゲーションを作成していきます。
18:47

ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法についてお話します。

03:20
参考にするウェブサイトのデザインギャラリーの紹介と、実際にWebサイトを制作していく際、どのように活用していくのか、お話します。
07:37
Webサイト制作でよく利用する、便利なChromeの拡張機能についてお話します。
Section 3: 【初級】クリニックのWebサイト〜トップページ編〜
05:43
Webサイト制作でよく利用する、便利なChromeの拡張機能についてお話します。
16:16

まずはWebサイトのベースとなるレイアウトを、シェイプツールの四角形を使って作成します。この時、ガイドやものさしツールを利用して1px単位で綺麗にレイアウトするのがポイントです。

09:28

外部ウェブサービスよりアイコンを取得し、カラーオーバーレイをかけて色を変更する事で、そのアイコンを利用した簡単なロゴを作成します。

10:05

テキストツールを使ってテキストを入力し、整列ツールやガイドを利用して位置調整し、綺麗なナビゲーションを作成します。

07:42
あらかじめ用意していた画像をクリッピングマスクで切り抜きをし、色調補正パネルを使って画像の明るさやコントラストを変え、綺麗なメイン画像を作成します。
15:48
外部ウェブサービスより無料のアイコンをダウンロードし、カラーオーバーレイで色の変更をし、デザインに合うようなバナーを作成します。
13:48
テキストツールを使って文字を入力し、文字の大きさなどのスタイルを変更し、レイヤーをコピーして再利用することで即座に記事一覧を作成します。
06:58

すでにあるレイヤーを複製し、再利用することで、即座にフッターのデザインを完成させます。

05:12
シェイプツールを使って、ボタンの背景を作成し、その上にテキストを入力し、シンプルな「ページトップへ」ボタンを作成します。
10:41

スライスツールを使って、画像をスライスし、適切な形式で画像をパーツ毎に書き出します。

Section 4: 【中級】美容院のWebサイト制作〜トップページ編1〜
02:07
Webサイトを作成するために必要な新規ファイル作成の設定を行います。
08:24
ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。ここでは、黄金比を使った2カラムのレイアウトを作成していきます。
06:26

ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。ここでは、スマートガイドを利用して簡単に要素を整列させる方法も解説します。

05:30
クロスのテクスチャをパターン化して、Webサイトの背景画像として設定します。
06:16

無料のアイコンをインターネットから取得し、カラーオーバーレイをかけ、ロゴとしてデザインしなおします。

04:58
取得したロゴに合わせて、整列させた状態でテキストを入力し、ロゴを完成させます。
04:52
シェイプツールとテキストツールで、必要な背景のボックスやテキストをまずは作成していく方法について、解説しています。
03:57
作成したシェイプやテキストを、より見やすくなるように配置しなおし、デザインする方法について解説しています。
04:13

テキストツールを使って、文字のナビゲーションを作成し、ものさしツール等を利用して均等に綺麗に配置する方法について解説します。

Section 5: 【中級者向け】美容院のWebサイト制作〜トップページ編2〜
05:38

テキストで作成した文字ナビゲーションの下に、「現在のページの位置」がわかるようなデザインを施していきます。

06:38

画像を配置し、レイヤースタイルを使って白い枠線をつけ、ドロップシャドウのついたメイン画像を作成します。

08:44
テキストボックスを利用し、新着情報一覧を作成します。もともとあるレイヤーを再利用します。
10:03
入力したテキストボックスのスタイルを変更する方法を解説しています。ここでは、一つのテキストボックスの中で、複数のスタイルをかけています。
04:29
サイドバーにあるバナーを作成する方法を解説しています。 ここでは、写真を配置し、バナーの中に収まるようにクリッピングマスクを使って画像を切り抜きます。
05:54

サイドバーにあるバナーを作成する方法を解説しています。 ここでは、配置した画像にグラデーションマスクをかけ、テキストを入力します。

04:19
サイドバーにあるバナーを作成する方法を解説しています。 ここでは、すでにあるレイヤーを複製し、2つ目のバナーを作成しています。
02:38
フッターを作成する方法を解説しています。 ここでは、シェイプツールで背景を作成し、テキストツールで文字を入力し、整列ツールでテキストを中央に揃えます。
Section 6: 【中級者向け】美容院のWebサイト制作〜下層ページ編1〜
04:16

記事ページを新規で作成します。 ここでは、既存のトップページのpsdファイルを複製し、ナビゲーションの修正を行います。

07:55
メニュー紹介ページの見出しを作成する方法を解説しています。 ここでは、すでにあるメイン画像の大きさを変え、テキストを入力・グラデーションマスクをかけています。
05:12
メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、すでにある「新着情報」のレイヤーを自動選択ツールで探し当て、再利用します。
05:56
メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、メニュー一覧をテキストで入力していきます。
06:08
メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、メニュー一覧をテキストで入力し、ガイドを使って位置を調整します。
04:58
メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、メニュー一覧をテキストで入力し、ガイドを使って位置を調整します。
03:02

ご予約ページを作成する方法を解説しています。 この動画では、フッターの調整の仕方を学びましょう。

04:02

ご予約ページを作成する方法を解説しています。 デザインを行うために、既存の「メニュー一覧ページ」のpsdファイルを複製し、見出しの修正を行います。

03:20
ご予約ページを作成する方法を解説しています。 ここでは、ナビゲーションの修正と、小見出しを修正します。
Section 7: 【中級者向け】美容院のWebサイト制作〜下層ページ編2〜
07:13
ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールとテキストツールで、ご予約に関する注意文を作成していきます。
06:39
ご予約ページの注意文を作成する方法を解説しています。 ここでは、作成した背景と文字を綺麗に見えるよう整列させます。
05:06

ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールにドロップシャドウをかけて、入力するためのボックスをデザインしていきます。

04:58

ご予約ページのフォームを作成する方法を解説しています。 ここでは、作成した入力ボックスを複製し、文字を入力するための基準であるガイドを作成していきます。

04:04
ご予約ページのフォームを作成する方法を解説しています。 ここでは、入力ボックスのラベルを、テキストツールを使って作成していきます。
06:38

ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールを使って作成したシェイプツールを、ラベルに合わせて大きさを変えていきます。

12:09

ご予約ページのフォームを作成する方法を解説しています。 ここでは、入力ボックスに必要なテキストを入力していきます。

06:19
ご予約ページのフォームを作成する方法を解説しています。 ここでは、「送信ボタン」をシェイプツールとテキストツールで作成していきます。
Section 8: 【上級者向け】Webメディア〜トップページ編1〜
04:22
Webメディアのトップページを作成します。 デザインするためのPhotoshop新規ファイルを作成し、基盤となるサイト横幅を示すガイドを作成します。
04:42
Webメディアのトップページを作成します。 ここでは、全体のレイアウトをシェイプツールとガイドを使って組んでいきましょう。
03:02

Webメディアのトップページを作成します。 ここでは、ガイドを使って全体のレイアウト組みを行った後、切り抜きツールを使ってカンバスサイズを変更します。

05:20
Webメディアのトップページを作成します。 ここでは、シェイプツールを利用して、ヘッダーの背景を作成していきます。
04:58

Webメディアのトップページを作成します。 ここでは、無料のアイコンをウェブサービスよりダウンロードして、カラーオーバーレイをかけて、サイトのテイストに合うロゴを作成します。テキストツールで、綺麗に整列させたナビゲーションを作成します。

05:44

Webメディアのトップページを作成します。 ここでは、鉛筆ツールを使って点線の区切りを作成し、テキストの中央に配置しナビゲーションを完成させます。

03:18

Webメディアのトップページを作成します。 ここでは、黄金比を使ってレイアウトを組み、基盤となる背景の長方形を作成します。

04:43
Webメディアのトップページを作成します。 ここでは、画像を配置し、ガイドを上手く利用してタイトルを入力していきます。
03:51
Webメディアのトップページを作成します。 ここでは、記事のカテゴリーを示すタグを、シェイプツールとテキストツールを使って作成していきます。
04:17
WEBペディアのトップページを作成します。 ここでは、人気記事ランキングの見出しを、無料のアイコンにカラーオーバーレイをかけて作成していきます。
Section 9: 【上級者向け】Webメディア〜トップページ編2〜
06:23

WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のサムネイル部分を作成していきます。

04:07

WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のタイトルとタグを、テキストツールを使って作成していきます。

03:38
WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧の順位を示す数字を、シェイプツールとテキストツールで作成し、レイヤーを整理します。
04:42
WEBペディアのトップページを作成します。 ここでは、作成したレイヤーをグループ毎複製し、中の写真やテキストを修正していきます。
03:08

WEBペディアのトップページを作成します。 ここでは、記事と記事の間の区切り線を、ブラシツールを使って直線(点線)をつけていきます。

05:10
Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、シェイプツールで背景を作成し、テキストツールを使って、見出しを作成します。
04:19
Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、見出しのアイコンをテキストを使って作成し、ブラシツールで点線の区切りをつけます。
04:42
Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、カテゴリー一覧のテキストを、テキストツールを使って作成し、行間の調整を行います。
04:07

Webメディアのトップページの新着記事一覧を作成します。 ここでは、無料のアイコンとテキストを使って、見出しを作成していきまし。

02:44

Webメディアのトップページの新着記事一覧を作成します。 ここでは、シェイプツールを使って、記事一覧の背景を作成していきます。

Section 10: 【上級者向け】Webメディア〜トップページ編3〜
05:43
Webメディアのトップページの新着記事一覧を作成します。 ここでは、アイキャッチとなる画像を配置し、クリッピングマスクで切り抜きます。また、テキストツールでタイトル部分を作成します。
05:33

Webメディアのトップページの新着記事一覧を作成します。 ここでは、記事の投稿日とタグをデザインするため、無料のアイコンを配置し、カラーオーバーレイでデザインテイストに合うようにカスタマイズします。

05:04
Webメディアのトップページの新着記事一覧を作成します。 ここでは、テキストボックスを使って記事本文の抜粋を表示させます。
04:22
Webメディアのトップページの新着記事一覧を作成します。 ここでは、作成したレイヤーをグループ毎複製して、記事一覧を完成させます。
07:33
Webメディアのトップページのページネーションを作成します。 テキストツールやシェイプツールを利用して、ページネーションを作成します。
04:19

Webメディアのトップページのフッターを作成します。 ここでは、フッターに配置するロゴの複製を行います。

03:47

Webメディアのトップページのフッターを作成します。 ここでは、テキストツールとシェイプツールを使って、お問い合わせフォームを作成します。

05:14
Webメディアのトップページのフッターを作成します。 ここでは、テキストツールとシェイプツールを使って、お問い合わせフォームの送信ボタンを作成します。
03:00

Webメディアの記事ページを作成します。 ここでは、記事ページのためのpsdファイルを複製し、いらないレイヤーを削除していきます。

04:39
Webメディアの記事ページのパンくずリストを作成する方法を解説しています。

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NEST online, ウェブデザイン / プログラミング

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など


Ready to start learning?
Take This Course