未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース from Udemy

What's inside

Syllabus

基本的なツールを利用して実際に作品を作りながら、まず初めに覚えるべき基本的な知識と、操作方法について学んでいきます。画面構成やツールの選択方法など、Photoshopを初めて操作向けに優しく解説します。

グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。
1つの動画につき1つの作品を作りながら、難なく楽しく学ぶ事が出来ます。

まず初めに覚えるべき、Photoshopの画面構成について学びます。

ファイルを新規作成する方法を学ぼう

まずはじめに覚えるべき、Photoshopの基本のツールの使い方を学びます。

Photoshopファイル上に、画像を貼り付ける方法と、その画像を拡大縮小、回転させる方法について学びます。

フィルター機能を使って、写真をイラスト風に変える方法について学びます。

長方形選択ツールを使って、画像の一部分のみにエフェクトを加える方法について学びます。

Photoshopのブラシツールを使って、写真にキラキラした演出を加えます。

Photoshopで作成したファイルをjpgに変換する方法を学びます。

色調補正機能を利用して、写真の加工や補正を行う方法をご紹介します。明るさやコントラストの調整はもちろん、写真の一部の色を変えたり、切り抜きや合成など Photoshopの機能をフル活用して、プロ並みの写真加工技術を学びます。

Photoshopの画面を拡大縮小したり、ウィンドウを並べる方法を学びます。

色調補正パネルの「明るさ・コントラスト」を調整する方法について学びます。

色調補正パネルを使って、女性の唇以外の部分をモノクロに変えます。

色の置き換えツールを使って、紫色のファイルを青色に変えます。

ぼかしツールを使って、写真にぼかしを加え、ミニチュア風になるように色調補正を加えます。

色調補正系のツールや、様々な選択範囲の作成ツールを駆使して、画像をトイカメラ風になるように加工します。

Photoshopの基本である、レイヤー機能について学びます。

クイック選択ツールを使って、人物を選択し、綺麗に切り抜きます。

クイック選択ツールを使って、空の部分を綺麗に選択し、その部分に晴れの画像を合成させます。

チャレンジ課題です。理解度をチェックするために挑戦してみましょう！

テキストツールを利用した様々なテキストの入力方法や、シェイプツールを使って四角形や楕円形を作成する方法について学びます。また、Webサイトデザインをする上でかかせない「レイヤースタイル」のかけ方を学び、要素を光らせたり影をつけたりといった、エフェクトを加える方法もレクチャーします。　 Thumb 2015 07 20 10.48.16 Lesson1 (07:16) テキス

テキストツールを使用して、テキストを入力し、フォントの種類や大きさなどのスタイルを変更します。

Photoshopのファイル上に、テキストボックスを作成し、範囲内で自動で改行させる文章を入力します。

Photoshopのワープ機能を使って、テキストに変形を加え、レトロ風のロゴを作成します。

シェイプツールを使って、ボタンの背景を作成し、インストールしたカスタムシェイプを使ってイラストを追加し、会員ログインボタンを作成します。

Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。

楕円形ツールを使って、楕円を作成し、クリッピングマスクを使って、作成した楕円の形に写真を切り抜きます。

クリッピングマスク機能を使って、写真を切り抜き、コルクの背景に合成させたFacebookのカバー写真を制作します。

スライス機能を使って、スライスを作成し、photoshopファイルをパーツ毎に画像として書き出します。

「複雑な形の画像を切り抜き」「画像の一部分のみに色調補正を加える」などを可能にする、「選択範囲」と「マスク」ついてレクチャーします。選択範囲系のツールはたくさんの種類がありますが、選択する画像の特徴によって使い分ける事で、より高度な写真合成や加工を行う事ができます。

切り抜きツールを使用し、画像を指定のサイズに切り抜き（トリミング）します。

長方形選択ツールを使用し、海の写真をコピーし、窓枠に違和感なく貼り付けます。

楕円形選択ツールを使用し、ピザの写真をコピーし、お皿の上に違和感なく合成します。

様々な選択ツールを利用して、レモンの写真をコピーし、別の写真に違和感なく合成します。

クイック選択ツールを使って、人物を選択し、切り抜きます。

クイック選択ツールを使って選択した範囲を、マスクモードでさらに微調整し、綺麗な選択範囲を作成します。

自動選択ツールを使用し、バラの写真を切り抜き、花嫁が持っているような画像を作成します。

様々な選択ツールを利用して、シャツやネクタイの画像を切り抜き、必要なテキストを入力し、よくあるネットショップのアイキャッチ画像を制作します。

Photoshopのクイック選択ツールや自動選択ツール、境界線を調整するなどして、髪の毛を綺麗に切り抜きます。

Photoshopを扱う上でも最も重要とも言える「レイヤー」について勉強します。レイヤーには、立体的に見せる「ドロップシャドウ」や、ネオンのように光らせる「光彩」など、さまざまなエフェクトを加える事ができます。それらを学んで、プロに近づくためのphotoshopテクニックを手にいれましょう。

Photoshopのレイヤーの仕組みを理解して、レイヤーパネルの操作方法（移動や名前の変更、グループ化など）をマスターします。

Photoshop上のレイヤーの不透明度を調整し、違和感なく画像を合成します。

レイヤーをリンクさせ、複数のレイヤーを一気に編集します。カラーラベルを設定し、管理しやすくレイヤーパネルを設定します。

バラバラに配置された写真を整列させ、長方形の不透明度を調整し、感じの良いアイキャッチ画像を作成します。

レイヤースタイルのドロップシャドウを使って、レイヤーに影をつけます。

レイヤースタイルの光彩を使って、テキストをネオン風に光らせたクリスマスカードを作成します。

パターンオーバーレイを使って、背景のレイヤーにざらざらした質感を加え、リッチなウェブサイトのデザインを作成します。

様々なレイヤースタイル機能を使って、単純なレイヤーにエフェクトを加え、かわいい商品のお申込みリンクのバナーを作成します。

Photoshopを使って、オリジナルのパターンを作成し、パターンオーバーレイを使ってAirmailの枠線を作ります。

グラデーションやシェイプ、ブラシを使ったペインティングなど、画像をデザインする上で欠かせないペインと操作をレクチャーします。webサイト制作では、ブラシツールはあまり利用しませんが、習得しておくといざという時に役に立つとても便利なツールです。この機会に、一緒にマスターしましょう！

レイヤーから選択範囲を作成し、選択範囲をグラデーションで塗りつぶし、段々と透明になるグラデーションを作成します。

ブラシツールを使って、クレヨン調のブラシを設定し、黒板に文字を描きます。

無料のカスタムブラシをインストールし、そのブラシでスタンプのように絵を描き、一瞬でポスターデザインを完成させます。

ブラシツールを使って、女性の頬に赤いブラシを描き、不透明度を下げて違和感なく化粧を施します。

シェイプツールを使って、角の丸い長方形を作成し、グラデーションを設定して押したくなるボタンに編集します。

アンカーポイントとパスについて理解し、ペンツールを使ってアンカーポイントを作成し、ハンドルを操作して、英語の文字をトレースします。

パス選択ツールを使って、アンカーポイントの位置を調整し、ハンドルを操作して丸みを出し、様々なデザインのリボンを作成します。

無料のカスタムシェイプをインストールし、一瞬でフラットなボタンを作成します。

長方形ツールで作成した四角形に、ペンツールを使ってアンカーポイントを追加し、パス選択ツールでポイントの位置を調整し、ふきだしになるようにデザインします。

文字の入力方法と、その編集・変形方法をレクチャーします。Webサイト制作において、文字の入力が出来る事は必須です。単純に文字を入力するだけなら簡単です。ここでは、簡単な文字を入力するところから、パスに沿ったテキストの入力など、プロが利用する高度な文字入力方法まで、様々な文字の入力と変形をお伝えします。

テキストツールを使って文字を入力し、文字パネルでサイズや色の設定方法を学びながら、名刺を制作していきます。

長い文章を範囲内で自動改行できるテキストボックスを作成し、効率よく制作する方法を学びながら、カクテル紹介ポスターを制作していきます。

単純なテキストの入力と、テキストボックスでの入力との違いやメリットを理解した上で、２つの入力方法を使い分けつつ、雑誌のページデザインを作っていきます。

シェイプツールで雨の形を作成し、雨の中にテキストを入力して、かわいいポスターを作成します。

ペンツールで半円のパスを入力し、そのパスに沿ってテキストを入力し、ビンテージ風のロゴを作成します。

テキストツールを使って入力した文字を、ワープさせ、変形させます。

テキストツールを使って入力した文字を、遠近法ワープを使って、ビルから垂れ下がったポスターのように変形させます。

デザインに合った無料の新規フォントをインストールし、ビンテージ感のあるロゴを完成させます。

マスクを使った画像合成や簡単な色調補正等を行います。「マスク」と聞くと何の事かわからない方が多いと思いますが、マスクを利用する事で、画像に直接編集を加える事なく、画像編集を行う事が出来るので、いつでも元の状態に戻せたり、高度な編集を行う事ができます。ここでは、プロが行うマスクの操作に基づいて、画像の合成や色調補正を通して「マスクの綺麗なかけ方」を学んでいきたいと思います。

Photoshopのレイヤーマスク機能を使って、画像を切り抜く方法について学びます。

Photoshopのレイヤーマスク機能を使って、画像を徐々に透明にする方法について学びます。

クイックマスクモードで、作成した選択範囲をさらに細かく微調整し、複雑な写真を綺麗に切り抜きます。

レイヤーマスク機能を使って、アーティスティックなカリグラフィポスターを制作します。

レイヤーマスク機能を使って、写真の曇り空部分を切り抜き、代わりに晴れの写真を貼り付けて合成します。

クイック選択ツールを使って、髪の毛を綺麗に選択し、色調補正をかけて、髪の毛の色を変えます。

クリッピングマスクの特性を理解し、実際にクリッピングマスクを使って、画像に直接変更を加えずに画像を切り抜きます。

本のカバーの形にシェイプを作成し、クリッピングマスクを使って、本のカバーを革の画像に合成させます。

ペンツールでシェイプを作成し、作成したシェイプの形に、クリッピングマスクを使って画像を切り抜き、綺麗なウェブサイトメイン画像を作成します。

色調補正パネルやその他、レタッチ系のツールを利用して、「人物を若返らせる」「曇り空を晴れにする」などの画像の修正方法を学びます。細かいマスクをかけたり、色調補正を行う必要があるので、やや上級者向けの章です。

無料のアクションをインストールし、単純な画像にボタンひとつでレトロ風になるエフェクトを加えます。

色調補正のレベル補正を使って、食べものの写真を美味しそうに補正します。

フィルター機能を使って、写真をイラスト風に加工します。

Photoshopの自動処理機能を使って、普通の写真をHDR風に加工します。

写真に直接変更を加えれるように画像をラスタライズし、写真に直接変更を加え、シャープツールを使って、人物の目をはっきりさせます。

スポット修正ブラシツールを使って、人物のニキビやシワを消し、ぼかしツールで肌をなめらかにするレタッチを行います。

クイック選択ツールで歯の部分を綺麗に選択し、明るさを調整して白くします。目の部分も同様に白く補正します。

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

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

ワイヤーフレームをどのような手順で作成すれば良いかを知り、ワイヤーフレームを作成するためのツールをレクチャーします。

そもそもヒアリングとはなにかを知り、ヒアリングすることの目的を知ります。失敗しないためにどのようにヒアリングしていけばよいのかなどをお伝えします。

クライアントの状況に応じたヒアリングを行うことができるように、ワイヤーフレームを作成するために、何を聞けば良いのかを知ります。

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

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

基礎から中級まで幅広く学べる

動画を視聴しながら実制作ができるため、実践的なスキルが身に付く

運営会社がWebサービス運営やWeb制作事業を行っているため、実際のノウハウが提供される

効率的に無駄なく必要な知識を学べる

初心者向けの入門から、上級者向けのWebメディア制作まで幅広いカリキュラム

Reviews summary

基礎をしっかり学べるwebデザイン入門コース

このコースはWebデザインの基礎を学ぶのには適しており、講師の解説が丁寧でわかりやすいと評判です。ただし、内容が少し古いとの声もあり、スマホやタブレット用のCSSに対応していない点に注意が必要です。

Webデザインの基礎をしっかり学ぶことができる

"HTML と CSS の基礎をしっかり学ぶことができたことに感謝しています。"

講師の解説が丁寧でわかりやすい

"講師の方の解説が丁寧でわかりやすいです。"

スマホやタブレット用のCSSに対応していない

"スマホ、タブレット用のCSSには対応していない。"

情報が少し古い

"情報が、少し前のものだと感じました。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース with these activities:

Webサイトデザインを作成する

Show steps

Webサイトデザインを作成することで、Webサイトデザインに関する知識を実際に試すことができます。

Show steps

Webサイトデザインのアイデアを考える
Webサイトのデザインを作成する
作った Web サイトのデザインを改善する

Webデザインコンテストに参加する

Show steps

Webデザインコンテストに参加することで、Webサイトデザインのスキルを向上させ、モチベーションを高めることができます。

Show steps

参加可能なWebデザインコンテストを見つける
コンテストに参加し、提出する
コンテストのフィードバックから自分のデザインを改善する

Show all two activities

Career center

Learners who complete 未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース will develop knowledge and skills that may be useful to these careers:

Web Designer

Web designers create the visual appearance of websites. They work with web developers to create websites that are both visually appealing and user-friendly. This course can help you build a strong foundation in web design by teaching you the basics of web design, HTML, CSS, and JavaScript. With this knowledge, you can create websites that are both visually appealing and user-friendly.

See salaries and explore the career path for Web Designer

Web Developer

Web developers design and develop websites. They are responsible for the look, feel, and functionality of a website. This course can help you build a strong foundation in web development by teaching you the basics of web design, HTML, CSS, and JavaScript. With this knowledge, you can create websites that are both visually appealing and user-friendly.

See salaries and explore the career path for Web Developer

User Experience Designer

User experience (UX) designers are responsible for the overall user experience of a website or app. They work with web developers and web designers to create websites and apps that are both user-friendly and visually appealing. This course can help you build a strong foundation in UX design by teaching you the basics of user research, user interface design, and information architecture. With this knowledge, you can create websites and apps that are both user-friendly and visually appealing.

See salaries and explore the career path for User Experience Designer

Information Architect

Information architects design and organize websites and other information systems. They work with web designers and web developers to create websites that are both user-friendly and visually appealing. This course can help you build a strong foundation in information architecture by teaching you the basics of information architecture, user experience design, and content strategy. With this knowledge, you can create websites and other information systems that are both user-friendly and visually appealing.

See salaries and explore the career path for Information Architect

Content Strategist

Content strategists develop and manage content for websites, blogs, and other digital platforms. They work with marketing teams to create content that is both informative and engaging. This course can help you build a strong foundation in content strategy by teaching you the basics of content strategy, content marketing, and social media marketing. With this knowledge, you can create content that is both informative and engaging.

See salaries and explore the career path for Content Strategist

Graphic designer

Graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course can help you build a strong foundation in graphic design by teaching you the basics of Photoshop, Illustrator, and InDesign. With this knowledge, you can create visual concepts that are both visually appealing and effective.

See salaries and explore the career path for Graphic designer

Product Manager

Product managers are responsible for the development and launch of new products. They work with engineers, designers, and marketers to create products that meet the needs of users. This course can help you build a strong foundation in product management by teaching you the basics of product development, user research, and marketing. With this knowledge, you can create products that are both successful and meet the needs of users.

See salaries and explore the career path for Product Manager

Social Media Manager

Social media managers use social media to promote products and services. They work with marketing teams to create social media campaigns that reach the target audience and achieve the desired results. This course can help you build a strong foundation in social media marketing by teaching you the basics of social media marketing, social media advertising, and social media analytics. With this knowledge, you can create social media campaigns that are both successful and reach the target audience.

See salaries and explore the career path for Social Media Manager

Marketing Manager

Marketing managers are responsible for the development and execution of marketing campaigns. They work with marketing teams to create campaigns that reach the target audience and achieve the desired results. This course can help you build a strong foundation in marketing by teaching you the basics of marketing strategy, market research, and campaign management. With this knowledge, you can create marketing campaigns that are both successful and reach the target audience.

See salaries and explore the career path for Marketing Manager

Digital Marketing Manager

Digital marketing managers are responsible for the development and execution of digital marketing campaigns. They work with marketing teams to create digital marketing campaigns that reach the target audience and achieve the desired results. This course can help you build a strong foundation in digital marketing by teaching you the basics of digital marketing strategy, search engine optimization (SEO), and pay-per-click (PPC) advertising. With this knowledge, you can create digital marketing campaigns that are both successful and reach the target audience.

See salaries and explore the career path for Digital Marketing Manager

Project Manager

Project managers are responsible for the planning, execution, and completion of projects. They work with project teams to ensure that projects are completed on time, within budget, and to the required quality. This course can help you build a strong foundation in project management by teaching you the basics of project planning, project execution, and project control. With this knowledge, you can manage projects and ensure that they are completed successfully.

See salaries and explore the career path for Project Manager

Data Scientist

Data scientists use data to solve problems and make predictions. They work with data engineers to collect, clean, and analyze data. This course can help you build a strong foundation in data science by teaching you the basics of data analysis, data mining, and machine learning. With this knowledge, you can use data to solve problems and make predictions.

See salaries and explore the career path for Data Scientist

Business Analyst

Business analysts help organizations understand their business processes and make improvements. They work with stakeholders to identify problems and opportunities and develop solutions. This course can help you build a strong foundation in business analysis by teaching you the basics of business process modeling, data analysis, and requirements gathering. With this knowledge, you can help organizations improve their business processes and achieve their goals.

See salaries and explore the career path for Business Analyst

Software Engineer

Software engineers design, develop, and maintain software systems. They work with software developers to create software that is both efficient and reliable. This course can help you build a strong foundation in software engineering by teaching you the basics of software design, software development, and software testing. With this knowledge, you can create software that is both efficient and reliable.

See salaries and explore the career path for Software Engineer

Data Analyst

Data analysts use data to identify trends and patterns. They work with data scientists to collect, clean, and analyze data. This course can help you build a strong foundation in data analysis by teaching you the basics of data analysis, data mining, and machine learning. With this knowledge, you can use data to identify trends and patterns.

See salaries and explore the career path for Data Analyst