Share this course

Get up to 20% revenue for each qualifying new purchase you refer.
You can join the course referral program after purchasing this course.
Let's take this course now!
Top Breadcumb navigator Design Breadcumb navigator Photoshopを使った実践Webデザイン講座
PRO COURSE

Photoshopを使った実践Webデザイン講座

デザインの準備や基礎を学んだ後、実際にPhotoshopを用いて模擬サイトのWebデザインを行います。実践的なデザインの方法や、役立つコツなども学びます。

Photoshopを使った
Webサイト制作の全てがゼロから学べる

この講座では、Photoshopを使用したWebデザインの方法をレクチャーします。

Webデザインの準備段階となるワイヤーフレームの制作から始めて、デザインテクニックの基礎を習得した後は、仮のWebサイトを初級・中級・上級の3段階に分けて初めから制作していきます。

基礎から学び、最終的には実際のWebサイトのデザインまで行えるように作られた内容なので、
「Photoshopを使用したWebデザインができるようになりたい」という方や、
「Photoshopは最低限の操作はできるけれど、もっと技術の幅を広げたい」という方まで学んでいただけます。

動画を見ながら一緒に操作をして作品を作っていくことをテーマとしていますが、動画は全て5〜10分前後にまとめているので、初心者の方にも、無理なくご自身のペースで、楽しみながら学んでいただけます。

※各セクションの冒頭に動画内で使用するデータを添付しています。あらかじめダウンロードした上でご覧ください。

※推奨条件
Photoshopの基本的な操作を習得していることがおすすめです。

この講座で学べること

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


  3. 初心者のためのウェブデザインテクニック
  4. Photoshopを利用して、実際のウェブサイトのパーツをデザインしていきます。
    簡単な練習課題を通して、どのようにWebサイトデザインを行うのか、といったコツを掴み、本番のWebサイト制作に役立てることができます。


  5. 【初級】クリニックのWebサイト〜トップページ編〜
  6. Photoshopを使って、仮想のクリニックを紹介するWebサイトをデザインします。
    複雑なPhotoshopの機能はあまり使わなくても出来る、シンプルなデザインのWebサイトですので、初心者の方でも気軽に取り組んでいただけます。 ここでPhotoshopを使ったWebサイトデザインの流れを掴んでください。


  7. 【中級】美容院のWebサイト制作
  8. Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。

  • Webサイト用のファイル新規作成方法から、ガイドを利用したレイアウトを作成
  • レイヤースタイル等を利用したデザイン
  • トップページのデザインファイルを複製した、下層ページの作成
  • シェイプツールを利用した、ご予約フォームのデザイン
などを行なっていきます。

この章をマスターすることで次回からは簡単なサイトを自分で作れるようになります。
作成していただく課題は、少し複雑な機能やツールを利用することもありますので、やや中級者向けです。


  • 【上級】Webマガジンサイト制作
  • Photoshopを使って、様々なコンテンツを提供するWebメディアサイトを実際にデザインしていきます。

    • ヘッダー、フッター
    • 特集記事
    • 人気ランキング
    • サイドバー
    • 新着記事
    • サイドバー
    • 記事本文ページ

    などを作成します。

    たくさんのPhotoshopのツールを駆使してデザイン制作を行っていきますので、上級者向けの章です。


  • 【チャレンジ】実際のWebサイトのデザインをしてみよう
  • 理解度チェックとして、講師運営スクールのNESTschool公式Webサイトのデザインを行なっていきます。


    講師はテクノロジーとクリエイティヴのプロを目指すためのスクールを運営しており、卒業生は1,000名以上。
    未経験からWebデザイナーとして働けるレベルになることをゴールとしていますので、Webデザイナーを目指す方へオススメの講座です。


    About the instructor

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

    卒業生は1000名以上です。

    ★提供しているサービス

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

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

    Webデザインキャンプ

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

    Railsキャンプ

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

    など

    See more

    Course content

    Total
    Preview You can preview lectures with this label
    Loading

    Ratings and reviews

    4.4
    9 reviews
    5 stars
    56%
    4 stars
    33%
    3 stars
    11%
    2 stars
    0%
    1 stars
    0%

    Related Courses

    90秒で分かるPhotoshopの写真の切り抜きと合成ってどうやるの?
    SNACK COURSE

    90秒で分かるPhotoshopの写真の切り抜きと合成ってどうやるの?

    Free

    90秒で分かる白黒の写真をPhotoshopでカラーにする方法
    SNACK COURSE

    90秒で分かる白黒の写真をPhotoshopでカラーにする方法

    Free

    90秒で分かるPhotoshopで写真の色を一瞬で置き換える方法
    SNACK COURSE

    90秒で分かるPhotoshopで写真の色を一瞬で置き換える方法

    Free

    Web制作の学校が教える これからはじめる Photoshopの講座
    PRO COURSE

    Web制作の学校が教える これからはじめる Photoshopの講座

    5h 10m Video Course
    Instructor: 宮川千春(ロクナナワークショップ)
    6
    $59.99
    誰でもわかる Adobe Photoshop CC 2018
    PRO COURSE

    誰でもわかる Adobe Photoshop CC 2018

    3h 27m Video Course
    Instructor: アテイン株式会社
    1
    $32.99
    未経験から始める Photoshop CS6
    PRO COURSE

    未経験から始める Photoshop CS6

    3h 32m Video Course
    Instructor: アテイン株式会社
    3
    $21.99
    Photoshopマスターコース 基礎からステップバイステップで学ぼう
    PRO COURSE

    Photoshopマスターコース 基礎からステップバイステップで学ぼう

    14h 14m Video Course
    Instructor: ムラモリ コウ
    4
    $75.00
    Photoshop【最高難易度のスキル】中級者からプロ・上級者レベルへ
    PRO COURSE

    Photoshop【最高難易度のスキル】中級者からプロ・上級者レベルへ

    6h 5m Video Course
    Instructor: ムラモリ コウ
    4
    $99.99
    90秒で分かるPhotoshopのレイヤーとマスクの概念
    SNACK COURSE

    90秒で分かるPhotoshopのレイヤーとマスクの概念

    Free

    なぞって学ぶプロのデザイン講座 簡単!10分で美しいバナーを作ろう!
    PRO COURSE

    なぞって学ぶプロのデザイン講座 簡単!10分で美しいバナーを作ろう!

    1h 44m Video Course
    Instructor: 西田 隆美
    13
    $44.99
    90秒で分かるPhotoshopで不要な人や物を消したり塗りつぶしたりする方法
    SNACK COURSE

    90秒で分かるPhotoshopで不要な人や物を消したり塗りつぶしたりする方法

    Free

    初めてのPhotoshop - 1ヶ月で覚える写真加工の基礎から中級まで
    PRO COURSE

    初めてのPhotoshop - 1ヶ月で覚える写真加工の基礎から中級まで

    9h 28m Video Course
    Instructor: 森 まりも
    73
    $114.99
    初心者のためのPhotoshop超基礎講座 Webデザイン編
    PRO COURSE

    初心者のためのPhotoshop超基礎講座 Webデザイン編

    43m Video Course
    Instructor: 植本 彩花
    38
    $36.99
    90秒で分かるPhotoshopのトーンカーブの色調補正ってどうやるの?
    SNACK COURSE

    90秒で分かるPhotoshopのトーンカーブの色調補正ってどうやるの?

    Free

    基礎から学んでクリエイターを目指そう Photoshop CC 2015
    PRO COURSE

    基礎から学んでクリエイターを目指そう Photoshop CC 2015

    3h 6m Video Course
    Instructor: アテイン株式会社
    3
    $32.99
    90秒で分かるPhotoshopのスライスって何だろう?
    SNACK COURSE

    90秒で分かるPhotoshopのスライスって何だろう?

    Free

    90秒で分かるPhotoshopでおしゃれな正方形画像を作る方法
    SNACK COURSE

    90秒で分かるPhotoshopでおしゃれな正方形画像を作る方法

    Free

    90秒で分かるPhotoshopでベジェ曲線を使ったイラストの描き方
    SNACK COURSE

    90秒で分かるPhotoshopでベジェ曲線を使ったイラストの描き方

    Free

    90秒で分かるPhotoshopのトーンカーブの明暗補正ってどうやるの?
    SNACK COURSE

    90秒で分かるPhotoshopのトーンカーブの明暗補正ってどうやるの?

    Free