【WebDesign】Photoshopでプロになる!オシャレ&クールなウェブデザイン作成講座
4.0 (76 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.
696 students enrolled

【WebDesign】Photoshopでプロになる!オシャレ&クールなウェブデザイン作成講座

現役デザイナーの操作を見て学ぶ!ウェブ制作の現場で主流の「フォトショップ」を使ったウェブデザインカンプの作成に必要な知識を3つの課題を通じて学習します。
4.0 (76 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.
696 students enrolled
Last updated 1/2018
Japanese
Japanese [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 13 articles
  • 18 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Photoshopでのウェブデザインカンプの作成~psd納品までの実際のひととおりの作業の流れを掴むことができます。
  • レクチャーを目で追い、手で作業することで、実際の現場で使用されている技術を学び、身につけることができます。
Requirements
  • 初歩的なPC操作の知識
  • Mac,もしくはWindows(※作業はMacで行っています)
  • Adobe Photoshop(必須),Illustrator(ビデオのバージョンはCC2017です、Illustratorがなくても進めることができます)
Description

Photoshopを使って、「ポートフォリオサイト」「コーポレートサイト」「ECサイト」の3つのテーマのウェブデザインカンプの作成を行います。

Photoshopでのウェブデザインの基礎を、実際に手を動かしながら学びましょう。

ウェブサイト制作の現場でフリーランスで活躍している講師が、デザイン作成の手順を解説。「移動・選択・揃え」を駆使して、デザインを組み立てる方法を解説します。

仕上がりPSDサンプルも完全収録!

Who this course is for:
  • ウェブサイトのデザインカンプをPhotoshopで作成したい全ての方
  • 家事をしながら、自宅でウェブデザインの仕事がしたい方
  • 将来ウェブデザイナーとして活躍したい方
Course content
Expand all 173 lectures 05:08:20
+ はじめに
4 lectures 13:18

この講座の紹介、この講座で学ぶこと、講座のゴールを確認します。

Preview 01:14

制作課題となる、3つのウェブサイトのデザインの要素や特徴などの概要を確認します。

Preview 02:49

ワイヤーフレーム作成アプリ「Cacoo」のサインイン方法・基本動作・操作方法を確認します。

Preview 04:25

この講座で中心として使用する「Photoshop」と、補助的に使用する「Illustrator」の基本動作・基本操作方法を確認します。

Preview 04:50
+ PC:ポートフォリオページを作成する
9 lectures 27:38

これから作成する、ポートフォリオページのデザインのテーマと構成を確認します。

Preview 02:42

Cacooでワイヤーフレームの作成を開始します。ヘッダー部分のお問い合わせボタン・グローバルナビゲーションを作成します。

TOPワイヤーフレームの作成(1)
02:58

アイキャッチエリア、最近の事例エリアを作成します。

TOPワイヤーフレームの作成(2)
03:58

サービスエリア、自己紹介エリアを作成します。

TOPワイヤーフレームの作成(3)
03:42

お問い合わせ(コンタクト)エリア、ページトップボタンを作成します。

TOPワイヤーフレームの作成(4)
03:15

フッターエリア、ソーシャルボタンを作成します。(TOPワイヤーフレーム完成まで)

TOPワイヤーフレームの作成(5)
03:28

ポートフォリオの下層ページのワイヤーフレームを作成します。TOPワイヤーフレームの要素のコピー、サイドメニューの事例タイトル・説明・カテゴリー表示・参照ボタンを作成します。

下層ワイヤーフレームの作成(1)
04:02

メインコンテンツ・事例本文・最近の事例の作成と、フッターを配置します。(下層ワイヤーフレーム完成まで)

下層ワイヤーフレームの作成(2)
03:15
【課題】ポートフォリオのワイヤーフレームを完成させましょう
00:18
+ Photoshopの準備
2 lectures 05:00

追加フォントのインストール、フォントの動作確認をします。

※Macの場合のみ。windowsの方は適宜windowsの方法でインストールをお願いします。

photoshopの準備(1)
02:39

Photoshopの環境設定を行います。Webデザインで最低限必要な設定です。必ず設定しましょう。

photoshopの準備(2)
02:21
+ ポートフォリオTOP
24 lectures 44:22

Photoshopファイル(デザインベースファイル)を新規作成します。

ヘッダー~アイキャッチまで(1)
01:19

デザインベースのPhotoshopファイルの概要を確認します。

ヘッダー~アイキャッチまで(2)
01:22

ロゴの配置を通して、Photoshopでのオブジェクトの移動・配置方法を学びます。

ヘッダー~アイキャッチまで(3)
01:38

「ContactUs」ボタンを作成します。

ヘッダー~アイキャッチまで(4)
02:39

文字ツールを使って、ナビゲーションを作成します。

ヘッダー~アイキャッチまで(5)
03:09

アイキャッチ画像を作成するための枠(プレースホルダ)を作成します。

ヘッダー~アイキャッチまで(6)
01:45

アイキャッチ画像の写真をプレースホルダに配置します。

ヘッダー~アイキャッチまで(7)
01:02
リード文(キャッチコピー)を追加します。
ヘッダー~アイキャッチまで(8)
02:06

リード文に装飾を追加します。

ヘッダー~アイキャッチまで(9)
02:20

「最近の事例」エリアのタイトルを追加します。

最近の事例エリア(1)
01:13

事例の画像のプレースホルダを作成します。

最近の事例エリア(2)
02:01

事例の各タイトルと、文字を追加します。

最近の事例エリア(3)
01:58

事例のコンテンツを複製します。

最近の事例エリア(4)
01:20

事例画像を追加します。

最近の事例エリア(5)
01:41

「more info」ボタンを追加します。

最近の事例エリア(6)
01:31

「more info」ボタンを調整します。

最近の事例エリア(7)
01:41

サービスエリアを作成します。

サービスエリア
03:36

「About」エリアを作成します。背景エリアと、画像の配置を行います。

aboutエリア(1)
02:04

タイトルと、テキストを追加します。

aboutエリア(2)
01:19

「MoreInfo」ボタンを追加し、配置を微調整します。

aboutエリア(3)
02:06

「Contact」エリアを追加します。

contact〜footerエリア(1)
02:12

ページトップボタンを追加します。

contact〜footerエリア(2)
01:33

フッターエリアを作成し、カンバスサイズを調整します。

contact〜footerエリア(3)
02:04
【課題】ポートフォリオTOPのデザインを完成させましょう
00:43
+ ポートフォリオ下層ページ
15 lectures 17:28

下層ページ用のファイルを準備し、添付ファイル(リソース)をダウンロードします。

下層ページ(1)
01:43

下層ページ用にファイルを調整し、Cacooのワイヤーフレームを開きます。

下層ページ(2)
01:20

制作事例の画像のプレースホルダを配置し、ガイドを引きます。

下層ページ(3)
00:55

サイドメニューの作成開始。事例タイトルを追加します。

下層ページ(4)
01:11

説明文エリアを作成します。

下層ページ(5)
01:06

カテゴリーエリアを作成します。カテゴリータイトルを追加します。

下層ページ(6)
00:58

カテゴリーリストを作成します。

下層ページ(7)
01:35

「Website」ボタンを作成します。

下層ページ(8)
01:27

サブタイトルと、テキストを作成しましょう。

下層ページ(9)
01:51

事例画像サンプルを作成し、配置を調整します。

下層ページ(10)
00:51

「RecentWork」エリアを作成します。背景を配置します。

下層ページ(11)
01:12

「RecentWork」エリアをTOPデザインから複製します。

下層ページ(12)
00:43

「RecentWork」エリアをなじませたあと、Contactエリアと、Footerエリアを追加します。

下層ページ(13)
01:23

全体の配置を確認し、カンバスサイズを調整します。

下層ページ(14)
00:55
【課題】ポートフォリオ下層ページのデザインを完成させましょう
00:18
+ 納品データへ仕上げる
4 lectures 04:48

レイヤーを整理します。TOPページのフッターからaboutエリアまで作業します。

レイヤーを整理する(1)
01:26

サービスエリアから、TOPページのレイヤー整理完了まで作業します。

レイヤーを整理する(2)
01:20

下層ページのレイヤーを整理します。

レイヤーを整理する(3)
01:40
【課題】作成したデザインpsdのレイヤーを整理してみましょう
00:22
+ PC:コーポレートサイトを作成する
1 lecture 01:32

これから作成する、コーポレートサイトのデザインのテーマと構成を確認します。

Preview 01:32
+ ワイヤーフレームの作成
10 lectures 14:53

Cacooで新規ワイヤーフレームを作成し、ロゴとナビゲーションを作成します。

TOPワイヤーフレームの作成(1)
01:44

お問い合わせボタン、アイキャッチエリアを作成します。

TOPワイヤーフレームの作成(2)
01:36

アイキャッチの補足情報の追加方法、4つのサービスエリアを作成します。

TOPワイヤーフレームの作成(3)
01:08

ニュースエリア、スタッフ紹介バナー、ブログ新着情報を作成します。

TOPワイヤーフレームの作成(4)
02:01

フッターエリアを作成します。

TOPワイヤーフレームの作成(5)
01:11

フッターナビゲーションを仕上げ、ページトップボタン、GoogleMapエリア、コピーライト表示を作成します。

TOPワイヤーフレームの作成(6)
01:22

下層ページのワイヤーフレームを作成します。ページタイトルエリア、本文タイトル、仮テキストを作成します。

下層ワイヤーフレームの作成(1)
01:51

画像プレースホルダ、回り込みテキスト、会社概要の要素を追加します。

下層ワイヤーフレームの作成(2)
02:40

会社概要のレイアウトを調整し、仕上げます。

下層ワイヤーフレームの作成(3)
01:00

コーポレートサイトTOPのデザインを完成させましょう。動画でわかりづらい部分は、このレクチャーに添付するサンプルPSDを参考にしながら進めてください。

作成のヒント:

  • 今回のサイトは、背景の配置を先に仮置きし、コンテンツを埋めていく方式で作成すると、アタリがつけやすいです。
  • ひとつひとつのコンテナに集中せず、全体から配置を攻めてみましょう
  • カラーオーバーレイや、スマートオブジェクトを利用してみましょう
  • 単純なアイコンと、図形の組み合わせで、様々な表現ができることを確認しましょう。
【課題】コーポレートサイトのワイヤーフレームを完成させましょう
00:20
+ コーポレートサイトTOP
22 lectures 40:30

Photoshopでのデザインを開始します。Photoshopファイルの準備と、アイキャッチエリアのプレースホルダを作成します。

ヘッダ〜アイキャッチ、メニューエリア(1)
01:28

ヘッダー部分の背景と、アイキャッチ画像を配置し、ファーストビューのバランスを調整・確認します。

ヘッダ〜アイキャッチ、メニューエリア(2)
01:39

ヘッダーを仕上げます。ロゴ、グローバルナビゲーションを配置します。

ヘッダ〜アイキャッチ、メニューエリア(3)
01:46

お問い合わせボタン、ヘッダーの全体配置を調整します。

ヘッダ〜アイキャッチ、メニューエリア(4)
01:55

4つのボタン部分の背景の仮配置とアイキャッチ画像のキャッチコピー、人物写真を配置、アイキャッチ画像全体の配置を調整します。

ヘッダ〜アイキャッチ、メニューエリア(5)
02:33

4つのボタン部分のコンテンツを作成します。ボタンの作成を開始します。

ヘッダ〜アイキャッチ、メニューエリア(6)
01:44

1つ目のボタンを作成し、デザインルールを作ります。

ヘッダ〜アイキャッチ、メニューエリア(7)
01:57

レイヤースタイルについての解説、1つ目のボタンを仕上げます。

ヘッダ〜アイキャッチ、メニューエリア(8)
02:29

ボタンを複製し、残りの3つのボタンを仕上げていきます。アイコンの配置を行います。

ヘッダ〜アイキャッチ、メニューエリア(9)
01:40

4つのボタンのアイコンをさらに配置、文字を変更し、4つのボタンを仕上げます。

ヘッダ〜アイキャッチ、メニューエリア(10)
02:09

ニュースエリアの背景を作成します。タイトル、タイトルの装飾を追加します。

ニュースエリア(1)
01:53

ニュースリストの枠と、複製元となるレイアウトの日付とカテゴリー表示を作成します。

ニュースエリア(2)
01:48

ニュースタイトルを追加し、複製し、表示を調整します。

ニュースエリア(3)
01:25

スタッフ紹介バナーを作成します。プレースホルダを作成し、写真を配置します。

スタッフ紹介バナー(1)
01:30

スタッフ紹介の文字と、アイコンを追加します。写真の上の文字のみやすさについて解説しています。

スタッフ紹介バナー(2)
02:13

ブログの新着情報を作成します。文字の大きさの優先順位について解説しています。

ブログリンクリスト
02:29

境界線、ロゴ、電話番号のアイコンを作成します。

フッターロゴ周辺(1)
01:35

電話番号、住所を追加します。

フッターロゴ周辺(2)
01:34

フッターのメニューを作成します。フッターの文字列と、アイコンを作成シます。スマートオブジェクトの利便性について紹介しています。

フッターメニュー(1)
02:40

ページトップボタンを作成します。

フッターメニュー(2)
01:31

GoogleMapの埋め込みイメージの作成、著作権表示を追加します。

map、フッター
02:04
【課題】コーポレートサイトTOPのデザインを完成させましょう
00:28
+ コーポレート下層
7 lectures 12:59

コーポレート下層用のpsdを作成し、タイトル部分を作成します。

下層ページ(1)
02:23

レイヤーの整理を行い、見出しと見出しの装飾を追加します。

下層ページ(2)
02:10

サンプル文章、画像のプレースホルダと、回り込み文章例を追加します。

下層ページ(3)
02:53

会社概要タイトル、会社概要の内容を追加します。

下層ページ(4)
01:27

会社概要を表形式に変更します。

下層ページ(5)
01:51

会社概要の表にシンプルな装飾を追加し、カンバスサイズを調整します。

下層ページ(6)
01:48
【課題】コーポレート下層ページのデザインを完成させましょう
00:27