
Photoshopを使った実践Webデザイン講座
Photoshopを使った
Webサイト制作の全てがゼロから学べる
この講座では、Photoshopを使用したWebデザインの方法をレクチャーします。
Webデザインの準備段階となるワイヤーフレームの制作から始めて、デザインテクニックの基礎を習得した後は、仮のWebサイトを初級・中級・上級の3段階に分けて初めから制作していきます。基礎から学び、最終的には実際のWebサイトのデザインまで行えるように作られた内容なので、
「Photoshopを使用したWebデザインができるようになりたい」という方や、
「Photoshopは最低限の操作はできるけれど、もっと技術の幅を広げたい」という方まで学んでいただけます。
動画を見ながら一緒に操作をして作品を作っていくことをテーマとしていますが、動画は全て5〜10分前後にまとめているので、初心者の方にも、無理なくご自身のペースで、楽しみながら学んでいただけます。
※各セクションの冒頭に動画内で使用するデータを添付しています。あらかじめダウンロードした上でご覧ください。
※推奨条件
Photoshopの基本的な操作を習得していることがおすすめです。
この講座で学べること
- ワイヤーフレーム制作
- 初心者のためのウェブデザインテクニック
- 【初級】クリニックのWebサイト〜トップページ編〜
- 【中級】美容院のWebサイト制作
Webサイトをデザインする前に行うべきサイトの設計図、「ワイヤーフレーム」の制作方法を学びます。
ヒアリングの段階からどのようにワイヤーフレームを制作すれば良いかを学ぶ事が出来ます。 実用的で、目的を達成するためのWebサイトのレイアウト方法を知ることができるので、初めてワイヤーフレームを作成する初心者の方はもちろん、もう一度基礎を学びたい上級者の方にもオススメです。
Photoshopを利用して、実際のウェブサイトのパーツをデザインしていきます。
簡単な練習課題を通して、どのようにWebサイトデザインを行うのか、といったコツを掴み、本番のWebサイト制作に役立てることができます。
Photoshopを使って、仮想のクリニックを紹介するWebサイトをデザインします。
複雑なPhotoshopの機能はあまり使わなくても出来る、シンプルなデザインのWebサイトですので、初心者の方でも気軽に取り組んでいただけます。 ここでPhotoshopを使ったWebサイトデザインの流れを掴んでください。
Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。
- Webサイト用のファイル新規作成方法から、ガイドを利用したレイアウトを作成
- レイヤースタイル等を利用したデザイン
- トップページのデザインファイルを複製した、下層ページの作成
- シェイプツールを利用した、ご予約フォームのデザイン
この章をマスターすることで次回からは簡単なサイトを自分で作れるようになります。
作成していただく課題は、少し複雑な機能やツールを利用することもありますので、やや中級者向けです。
Photoshopを使って、様々なコンテンツを提供するWebメディアサイトを実際にデザインしていきます。
- ヘッダー、フッター
- 特集記事
- 人気ランキング
- サイドバー
- 新着記事
- サイドバー
- 記事本文ページ
などを作成します。
たくさんのPhotoshopのツールを駆使してデザイン制作を行っていきますので、上級者向けの章です。
理解度チェックとして、講師運営スクールのNESTschool公式Webサイトのデザインを行なっていきます。
講師はテクノロジーとクリエイティヴのプロを目指すためのスクールを運営しており、卒業生は1,000名以上。
未経験からWebデザイナーとして働けるレベルになることをゴールとしていますので、Webデザイナーを目指す方へオススメの講座です。
About the Instructor
テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。
卒業生は1000名以上です。
★提供しているサービス
2ヶ月のWebデザインコース
2ヶ月で未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです
Webデザインキャンプ
【2日間で全てを学ぶ!】Webデザイン集中講座
Railsキャンプ
RailsCamp -2日間集中プログラミング入門講座-
など
Course content
Section 1:ワイヤーフレーム制作 | ||||
1 | ワイヤーフレームについて | Preview | 5:31 | |
2 | ワイヤーフレーム作成手順・ツール | 5:48 | ||
3 | WEBサイト制作のヒアリングのコツ | 4:37 | ||
4 | ワイヤーフレーム作成のためのヒアリング | 5:06 | ||
5 | レイアウトパーツの役割と名称 | 5:59 | ||
6 | ワイヤーフレームの作り方 | 3:37 | ||
7 | ワイヤーフレーム作成時の注意点 | 5:46 | ||
Section 2:初心者のためのWebデザインテクニック | ||||
8 | 初心者のためのWebデザインテクニック | 1:00 | ||
9 | 初心者のためのWEBデザインの方法・勉強法 | 5:00 | ||
10 | パンくずリストの作り方 | 18:19 | ||
11 | 押したくなるボタンの作り方 | 25:00 | ||
12 | バナーの作り方 | 14:33 | ||
13 | Webサイトのメインビジュアルの作り方 | 11:06 | ||
14 | ナビゲーションの作り方 | 9:58 | ||
15 | ガイドでWebデザインのベースを作成する | 18:47 | ||
16 | 役立つ参考サイトの探し方 | 3:20 | ||
17 | Web制作でよく使用するツール | 7:37 | ||
Section 3:【初心者向け】PhotoshopでWebデザインをしてみよう:クリニックのWebサイト制作 | ||||
18 | 【初心者向け】クリニックのWebサイト制作 | 1:00 | ||
19 | デザイン前の環境設定をしよう | 5:43 | ||
20 | Webサイトのベースを作成してみよう | 16:16 | ||
21 | ロゴを配置してみよう | 9:28 | ||
22 | グローバルナビゲーションを作ってみよう | 10:05 | ||
23 | メイン画像を作ってみよう | 7:42 | ||
24 | サイドバーを作ってみよう | 15:48 | ||
25 | 記事一覧を作ってみよう | 13:48 | ||
26 | フッターを作ってみよう | 6:58 | ||
27 | ページトップへのボタンを作ってみよう | 5:12 | ||
28 | 画像をスライスして書き出してみよう | 10:41 | ||
Section 4:【中級者向け】実践Webデザイン:美容院のサイト制作 | ||||
29 | 【中級者向け】美容院サイト | 1:00 | ||
30 | Webサイト用のファイルを新規作成する方法 | 2:07 | ||
31 | ガイドを使ってレイアウトを作る方法-1 | 8:24 | ||
32 | ガイドを使ってレイアウトを作る方法-2 | 6:26 | ||
33 | Webサイトに背景画像を設定する方法 | 5:30 | ||
34 | アイコンを利用したロゴを作成する方法-1 | 6:17 | ||
35 | アイコンを利用したロゴを作成する方法-2 | 4:59 | ||
36 | お問い合わせバナーを作成する方法-1 | 4:52 | ||
37 | お問い合わせバナーを作成する方法-2 | 3:57 | ||
38 | テキストツールでナビゲーションを作る-1 | 4:14 | ||
39 | テキストツールでナビゲーションを作る-2 | 5:38 | ||
40 | レイヤースタイルを使ったメイン画像を作る | 6:38 | ||
41 | テキストボックスで新着情報一覧を作る-1 | 8:44 | ||
42 | テキストボックスで新着情報一覧を作る-2 | 10:03 | ||
43 | 写真を使ったバナーを作成する方法-1 | 4:29 | ||
44 | 写真を使ったバナーを作成する方法-2 | 5:54 | ||
45 | 写真を使ったバナーを作成する方法-3 | 4:19 | ||
46 | コピーライト付きフッターを作成する方法 | 2:38 | ||
47 | 記事ページ用のファイルの複製と修正 | 4:16 | ||
48 | メインビジュアルを見出しに変える方法 | 7:55 | ||
49 | レイヤーを再利用したメニュー一覧を作る-1 | 5:12 | ||
50 | レイヤーを再利用したメニュー一覧を作る-2 | 5:56 | ||
51 | レイヤーを再利用したメニュー一覧を作る-3 | 6:09 | ||
52 | レイヤーを再利用したメニュー一覧を作る-4 | 4:58 | ||
53 | フッターを調整する方法 | 3:02 | ||
54 | ご予約ページ用のファイルの複製と修正 | 4:02 | ||
55 | ナビゲーションの修正と小見出しの修正 | 3:20 | ||
56 | ご予約フォームの注意文を作成する方法-1 | 7:13 | ||
57 | ご予約フォームの注意文を作成する方法-2 | 6:39 | ||
58 | ご予約フォームを作成する方法-1 | 5:06 | ||
59 | ご予約フォームを作成する方法-2 | 4:58 | ||
60 | ご予約フォームを作成する方法-3 | 4:05 | ||
61 | ご予約フォームを作成する方法-4 | 6:38 | ||
62 | ご予約フォームを作成する方法-5 | 12:10 | ||
63 | ご予約フォームを作成する方法-6 | 6:19 | ||
Section 5:上級者向け】実践webデザイン:Webマガジンサイト制作 | ||||
64 | 【上級者向け】Webマガジンサイト制作 | 1:00 | ||
65 | 新規ファイルの作成と横幅ガイドの作成 | 4:22 | ||
66 | サイト全体のレイアウト組みをしよう-1 | 4:42 | ||
67 | サイト全体のレイアウト組みをしよう-2 | 3:02 | ||
68 | ヘッダーのデザイン① 背景の作成 | 5:20 | ||
69 | ヘッダーのデザイン① ロゴとナビの作成-1 | 4:58 | ||
70 | ヘッダーのデザイン① ロゴとナビの作成-2 | 5:44 | ||
71 | 特集のデザイン① メイン記事の作成-1 | 3:18 | ||
72 | 特集のデザイン① メイン記事の作成-2 | 4:43 | ||
73 | 特集のデザイン① メイン記事の作成-3 | 3:51 | ||
74 | 人気記事ランキングを作成しよう① | 4:17 | ||
75 | 人気記事ランキングを作成しよう② | 6:23 | ||
76 | 人気記事ランキングを作成しよう③ | 4:07 | ||
77 | 人気記事ランキングを作成しよう④ | 3:39 | ||
78 | 人気記事ランキングを作成しよう⑤ | 4:42 | ||
79 | 人気記事ランキングを作成しよう⑥ | 3:08 | ||
80 | サイドバーを作成しよう① | 5:10 | ||
81 | サイドバーを作成しよう② | 4:19 | ||
82 | サイドバーを作成しよう③ | 4:42 | ||
83 | 新着記事一覧のデザイン① 見出しの作成 | 4:07 | ||
84 | 新着記事一覧のデザイン② 記事一覧-1 | 2:44 | ||
85 | 新着記事一覧のデザイン③ 記事一覧-2 | 5:43 | ||
86 | 新着記事一覧のデザイン④ 記事一覧-3 | 5:33 | ||
87 | 新着記事一覧のデザイン⑤ 記事一覧-4 | 5:04 | ||
88 | 新着記事一覧のデザイン⑥ 記事一覧-5 | 4:22 | ||
89 | ページネーションの作成 | 7:33 | ||
90 | フッターを作成しよう① ロゴの作成 | 4:19 | ||
91 | フッターを作成しよう②-1 お問い合わせ | 3:48 | ||
92 | フッターを作成しよう②-2 お問い合わせ | 5:14 | ||
93 | 記事ページを作成するための準備をしよう | 3:00 | ||
94 | パンくずリストの作成 | 4:39 | ||
95 | サイドバーの作成:人気記事ランキング① | 5:38 | ||
96 | サイドバーの作成:人気記事ランキング② | 5:44 | ||
97 | 記事本文のデザイン① タイトルのデザイン | 6:20 | ||
98 | 記事本文のデザイン② 本文のデザイン | 4:55 | ||
99 | 記事本文のデザイン③ 見出しのデザイン | 7:11 | ||
100 | 本文下のデザイン① 関連記事一覧 | 4:45 | ||
101 | 本文下のデザイン① 見出しのデザイン | 6:10 | ||
102 | 本文下のデザイン① 記事一覧のデザイン | 7:09 | ||
Section 6:【チャレンジ】実際のWebサイトのデザインをしてみよう | ||||
103 | 実際のWebサイトのデザインをしてみよう | 1:00 | ||
104 | NESTschool公式サイトのデザイン(1) | 21:50 | ||
105 | NESTschool公式サイトのデザイン(2) | 16:59 |