Top Design 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

    Course content

    Total 11 hours 13 minutes
    Preview You can preview lectures with this label
    ワイヤーフレーム制作
    1 ワイヤーフレームについて Preview 5分31秒
    2 ワイヤーフレーム作成手順・ツール 5分48秒
    3 WEBサイト制作のヒアリングのコツ 4分37秒
    4 ワイヤーフレーム作成のためのヒアリング 5分06秒
    5 レイアウトパーツの役割と名称 5分59秒
    6 ワイヤーフレームの作り方 3分37秒
    7 ワイヤーフレーム作成時の注意点 5分46秒
    初心者のための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秒
    【初心者向け】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秒
    【中級者向け】実践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秒
    上級者向け】実践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秒
    【チャレンジ】実際のWebサイトのデザインをしてみよう
    103 実際のWebサイトのデザインをしてみよう 1分00秒
    104 NESTschool公式サイトのデザイン(1) 21分50秒
    105 NESTschool公式サイトのデザイン(2) 16分59秒

    Ratings and reviews

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

    Related Courses