Photoshopの効率的な勉強法！無料の教材でサクッとマスターしよう！

WEBデザインのためにPhotoshop（フォトショップ）をいざ学び始めても、「何から手をつければ良いか」よくわかりませんよね。

結論を言うと、「WEBデザインで必要な知識・スキル」に絞って、以下3ステップで学習すればOKです。

Photoshopの専門用語と基礎知識を学ぶ ツールの使い方をマスターする バナーを模写して操作に慣れる

Photoshopは、全ての機能を学ぶ必要はありません。

この記事では、WEBデザイン作成に焦点を絞ったPhotoshopの勉強方法を、無駄なく体系的に解説いたします。

「学習範囲」「効率的な手順」「おすすめの教材」「プロも使う便利なテクニック」なども含め、マルっとご紹介しますね！

スクールに通う必要はないので、あなたはお金をかけずにデザイン作成に取りかかれるレベルになれます。

　

【スクール不要】Photoshopの基礎学習は独学でOKです。

まず初めに、Photoshopの操作を学ぶのは、独学で十分です。

というのも、WEBデザインで使うPhotoshopの機能は、かなり限られている + 難しくないから。

Photoshopは写真加工アプリのため、WEBデザインに不要な機能が非常に多いのです。

つまり、 Photoshopのためだけに数万円の教材を買ったり、数十万円のスクールに入る必要はなく、最低限の勉強を独学で習得すればOKと言えます。

教材はWEBに落ちているものがベスト！

Photoshopの勉強は、YouTubeなど、WEBに落ちているものを使うのがベストです。

理由は以下の3つ。

質が高いのに無料で学べる アップデートに対応した最新の教材で学べる メジャーなソフトのため情報量が多い

最近はYouTubeなどにわかりやすい解説があるので、数千円の参考書すら買う必要はないのかなぁといった感じですね。

実際、YouTubeなどの独学だけで、基礎を習得する人の方が多いです。

現役のWEBデザイナーも「紙吹雪の作り方」など、必要に応じてWEBでやり方を調べることは多々ありますね。

ただ、体系的にまとめられているわけではないので、学習範囲や手順、適切な教材などをこの記事でフォローできたらと思います。

Photoshopの効率的な勉強法3ステップ！無料の教材も紹介します！

Photoshop学習は、3段階に分けて勉強するのがおすすめです！

手順としては、以下の通り。

専門用語と基礎知識を学ぶ ツールの使い方を学ぶ バナーを模写して操作に慣れる

この3つを勉強すれば、全体像をマスターできるため、サクサクとWEBデザインを作れるようになりますよ！

WEBデザイナーに必要な知識とスキルだけに絞って、勉強方法をご紹介するので、安心して学んでいきましょう！

1つずつ解説していきますね。

1. Photoshopの専門用語と基礎知識を身につけよう！

まず初めに、Photoshopの専門用語と基礎知識をざっくり習得していきます。

具体的には、ツール名や画面の各種名称・機能、WEBデザイン作成の際の設定、専門用語などは、最低限覚えたいところ。

それでは早速勉強していきましょう！

学習順序も考慮しているので、順番通りに勉強していけばOKです◎

教材（WEBページやYouTube）も、併せてご紹介させていただきます。

Photoshopの仕組み

Photoshopの使い方や機能を勉強する前に、まずは「仕組み」や「全体像」を押さえておきましょう。

Photoshopが「どのような仕組みでデザインを描画しているのか」を知っておくと、理解の進みが早いです。

結論を言うと、「レイヤー」「ツール」「フィルター」という、3つの機能を組み合わせてデザインを描画しています。

以下教材で、ざっくりと仕組みについて学んでいきましょう！

【おすすめの教材】

Photoshopでできること、超基礎操作

Photoshopでできることや、ファイルの開き方・保存方法・書き出し方などについても、学んでおきましょう！

「何ができるか」を大まかに知っておくと、デザインの再現の幅が広がりますよ！

また、Photoshopは多機能のため、「保存」と「書き出し」で違うものが出来上がるなど、超基礎的な部分にも少しクセがあります。

細かい部分ですが、基礎を習得しておきましょう！

【おすすめの教材】

Photoshopの画面の名称・機能・配置

Photoshopの画面を開いた時、まず思うのが「何がなんだかわからない」だと思います。

なので、画面の各種名称・機能・配置について勉強しましょう！

完璧に名称を覚える必要はありませんが、パネルやツールバーなどの位置くらいは、知っておくのがおすすめです。

【おすすめの教材】

レイヤー

レイヤーはPhotoshopの土台となる重要な概念なので、しっかりと習得しておきましょう！

レイヤーとは、デザイン要素を構成する1枚のシートのようなものです。

この1枚のシートに各パーツのデザインをしていき、デザインしたレイヤーを組み合わせることで、デザインを作っていきます。

また、レイヤーをグループ化することで、整理できたり、グループをまとめて動かすことができるなど、便利なことが多いので、効率的な使い方も学んでおくのがおすすめです。

ツール

Photoshopは、各ツールを使ってデザインを作成していきます。

要素を移動させる「移動ツール」、文字を書く「テキストツール」、パスを書く「ペンツール」といった具合ですね。

ツールの使い方については、後で詳しく解説いたしますが、どんな種類があるか、役割は何かくらいをざっくりとつかんでおくと良いでしょう。

ツールも、Photoshop学習には欠かせないものとなります。

【おすすめの教材】

フィルター

画像の一部をぼかしたり、テクスチャーを変えたり、手書き風にして表現を変えたりできるのが、「フィルター機能」です。

画像にレタッチを加えるだけで強烈なインパクトを残せるので、どのようなフィルターがあるのかと、使い道をざっくりと見ておくと良いでしょう。

WEBデザインでも、背景をぼかすことでテキストの可読性をあげるなど、使い道は無限大。

フィルターの種類は非常に多いため、全てを覚える必要はありませんが、全体像は把握しておくと良いでしょう。

アートボード

アートボードとは、デザインを作る際の土台となるものです。

アードボードの上にデザインを作成するイメージですね。

1つのファイルに、PCデザインとスマホデザインを配置したり、デザインごとに別々に管理できるなど、非常に便利な機能となっています。

ここでは、アートボードの特性を理解しましょう！

【おすすめの教材】

マスク

マスクとは、レイヤーの一部を覆う機能のことで、画像を切り抜いたりする時に使う機能です。

人物のみを画像から切り抜いたり、シェイプの形に合わせて画像などを表示させたりするときなどに使います。

マスクを使いこなせると、デザインの再現性が圧倒的に高まるので、しっかりと理解しましょう！

また、マスクには「レイヤーマスク」「クリッピングマスク」「フィルターマスク」「ベクトルマスク」の4種類があるため、機能と使い方の違いまでをざっくりと学習するのがおすすめです。

テキストだとわかりにくいかと思うので、YouTubeでの学習が良いでしょう。

【おすすめの教材】

パス

パスとは、「ペンツール」などで描く線のことです。

境界線が綺麗な切り抜きができたり、選択範囲にできたり、パスで作ったシェイプを登録することもできます。

要は、自由自在に、丁寧に画像や選択範囲を作るためのツールですね！

今はイメージが湧きにくいと思いますが、汎用性はかなり高いので、ざっくりと理解しておきましょう。

【おすすめの教材】

レイヤースタイル

レイヤースタイルとは、選択したレイヤー全体に、グラデーションや境界線などの「効果」を簡単にかけられる機能のことです。

複雑な効果を簡単にかけられたり、他のレイヤーにも効果を使いまわせるなど、非常に便利な機能と言えます。

必ず使うので、概要くらいは覚えておきましょう！

【おすすめの教材】

スマートオブジェクト

スマートオブジェクトとは、画像を拡大・縮小させても、画質が劣化しないようにするための機能です。

写真などの「ビットマップ画像（ラスター画像）」は、拡大・縮小を繰り返すことで、画質が悪化するのですが、それを防いでくれます。

WEBデザインをする際には、重要な概念となりますので、言葉だけでも覚えておきたいですね！

ガイド

ガイドは、デザインする際に目安とするための線のことです。

WEBサイトのコンテンツ幅や、グリッドデザインをする際に、目安となる位置を視認するために使います。

1pxのズレもない丁寧なデザインをするには、必須の機能と言えますね！

文字間の調整（カーニング・トラッキング）

カーニング・トラッキングとは、文字間隔を調整することをいいます。

実はフォントは、各文字が持つ余白がバラバラなのです。

例えば、「龍」と「！」だと、「！」の方が余白が多いのがわかると思います。

見た目的に文字間隔がバラバラだと読みにくくなってしまうため、カーニングやトラッキングで調整するのです。

細かい点ですが、デザインの質に大きく関わる部分のため、ぜひ身につけましょう。

【おすすめの教材】

パターン

パターンとは、背景にストライプやドットの模様を作るための機能です。

パターンで模様を再現できると、デザインのクオリティを高まるので、使い方くらいは覚えておくと良いでしょう。

作ったパターンは登録して使いまわせるので、お気に入りのものを作っておくと便利です。

WEBデザインを始める前の基礎設定

WEBデザインを始める前に、必須の設定は覚えておきましょう！

具体的には「単位」や「解像度」「カラーモード」などの設定ですね！

WEB専用、もしくは印刷物専用の設定をしないと、思い通りにデザインができないので、必ず設定しましょう！

ショートカットキー

Photoshopには、さまざまなショートカットキーが用意されています。

WEBデザインは時間との勝負になりがちなので、ショートカットキーを使いこなす人こそが、WEB制作を制します。

ツールを呼び出すなど、基本的な機能はショートカットを使えると、作業効率が大幅にアップするのでおすすめですよ！

一覧をまとめた教材があったので、共有いたします◎

2. Photoshopのツールの使い方をマスターする

Photoshopの仕組みや専門用語がざっくりわかったら、ガンガン触っていきましょう！

2ステップ目は、「ツール」の使い方をマスターしていくフェーズです。

Photoshopでは、「ツールをどのくらい使いこなせるか」で、実現できるデザインの幅が変わってきますからね。

教材は、YouTubeの解説動画をみながら真似すると良いでしょう。

「基本的な使い方」と「使い道」をなんとなく掴めれば十分ですよ。

文字を読むだけでは血肉化しにくいので、動画を真似して積極的に使うのがおすすめです。

移動ツール

要素を移動させたり、サイズを感覚的に変更できる基本ツールです。

複数の要素を自動計算で整列させられる便利機能もあるので、しっかり使いこなしましょう！

ショートカットキーは「v」です。

【おすすめの教材】

文字ツール

文字ツールは、テキストを入力するためのツールです。

横書きはもちろん、縦書きができる文字ツールもあるので、必要に応じて使い分けましょう。

基本の使い方は簡単ですが、パネルの使い方も覚えておくと便利です！

また、「ポイントテキスト」「段落テキスト」についてや、さまざまな文字の作り方も覚えておくと良いでしょう。

【おすすめの教材】

■文字ツールの基本

シェイプツール

シェイプツールは、長方形や三角形、矢印など、さまざまなシェイプを簡単に描画するためのツールです。

非常によく使うので、使い方やショートカットキーは覚えておきたいところです。

また、「カスタムシェイプツール」を使えば、世界中の人が作ったシェイプや、自作のシェイプを使いまわせるというメリットもあります。

【おすすめの教材】

選択ツール

選択ツールとは、画像の切り抜きや、指定した範囲を塗りつぶすときなどの、「選択範囲」を決めるためのツールです。

「Tシャツの色だけ変更したい！」といった時の、範囲指定のために使います。

長方形選択ツールなどの決まった形を選択したり、人物などに沿って自動で選択範囲を作ってくれる「オブジェクト選択ツール」などがありますよ。

非常によく使うツールなので、まずは使い方と、それぞれの機能の違いくらいは学んでおくと良いでしょう。

【おすすめの教材】

■選択ツールの基本

■オブジェクト・自動・クイック選択ツール

ペンツール

ペンツールとは、「パス」を描画するときに使うツールです。

細かい選択範囲を作ったり、複雑な曲線を作るときに便利なツールと言えます。

ハンドルの操作には慣れが必要ですが、使えるとデザインの幅が広がるので、ぜひ身につけたいツールと言えます！

【おすすめの教材】

■便利な使い方

切り抜きツール

画像などのトリミングをする際に使うツールです。

特にWEBでは、切り抜いた画像に無駄な余白があると、配置が難しくなるため、トリミングはよくおこないます。

【おすすめの教材】

■切り抜きツールの使い方

ブラシツール

ブラシツールは、ブラシで描画するだけでなく、レタッチなどにも使える便利ツールです。

絵の具で書いたような表現ができたり、雪が降っているような表現も可能なので、必要に応じて使えると便利でしょう。

ただ、非常に奥が深いツールなので、WEBデザインでは使いこなす必要はありません。

基本的な使い方を覚え、あとは表現したいデザインからやり方を逆引き検索すればOKですね。

【おすすめの教材】

■ブラシツールの便利な使い方

塗りつぶしツール

塗りつぶしツールは、文字通り選択した範囲を塗りつぶす際に使うツールです。

人物画像の洋服を選択し、塗りつぶしツールを使うだけで服の色を簡単に変更できます。

WEBデザインでも部分的な色変更などでそこそこ使うため、今のうちから身につけておきましょう。

【おすすめの教材】

グラデーションツール

グラデーションツールは、文字通りグラデーションを作るためのツールです。

部分的なグラデーションは、レイヤースタイルでつければ良いのですが、キャンバス全体にグラデーションをつけるときはグラデーションツールが使いやすいですね。

最近は、グラデーションを使ったデザインも多いので、習得しておきましょう！

【おすすめ教材】

3. バナーを模写してPhotoshopの操作に慣れる

ツールの基礎や使い道がざっくりと理解できたら、あとは実際にデザインして操作に慣れていきましょう！

見るだけだと身につきませんからね。

具体的には、実在するバナーをいくつか模写（同じように作る）するだけ。

バナーを1つ模写するだけでも、複数のツールを実際に使うことになるので、参考書や動画を見るより圧倒的に学びが多いです。

ツールだけでなく、レイヤーをグループ化して修正のことまで考えたり、この操作はショートカットを使った方が時間を短縮できそうといった、新たな発見も得られるでしょう◎

やり方は、シンプルに2ステップです。

見本となるバナーを探す 模写をする

見本となるバナーを探す

まずは模写（トレース）するバナーを探します。

実在するバナーをまとめて掲載してくれるギャラリーサイトがあるので、そこから選んでダウンロードしましょう！

無料なので安心してくださいね。

ギャラリーサイトはどれでも良いのですが、「BANNER LIBRARY」 が見やすいかつ、新しいバナーをどんどん追加してくれるのでおすすめです！

古いバナーだと、今主流じゃないデザインを習得することになるので注意しましょう。

バナー選びのコツ

バナー選びのコツは、シンプルなものを選ぶことです。

というのも、いきなり複雑な模様やシェイプがあるバナーだと、作り方がわからず挫折してしまうから。

そのため、簡単なものから作り、徐々に難易度をあげていくのがベストです。

ただ、文字が並んだだけのものだと練習になりません。

人物画像が切り抜かれていたり、グラデーションがかかっているなど、ある程度ツールを使う必要のあるバナーを選ぶと、良いでしょう。

Photoshop初心者向け！模写におすすめのバナー3点

とはいえ、いきなり模写に適したバナーのイメージは湧かないと思うので、いくつかピックアップしました！

「とりあえず模写してみたい」という人は、以下をダウンロードして使ってみてくださいね！

文字と写真を簡単に配置したバナーです。

文字などの配置方法、人物画像の切り抜きをメインに練習できます◎

画像を新たに用意しても良いですが、このバナー自体の人物画像を切り抜いて使っても良さそうですね！

角丸シェイプやドット線、簡単なあしらい、画像のトーンを調整し背景に馴染ませるなどを練習できるバナーです。

矢印やチェックボックスなど、よく使うアイコンの練習にもなるのでおすすめ！

曲線を使ったシェイプ、クリッピングマスクの練習など、シンプルながら少し複雑な模写となります。

ペンツールやマスクの練習に最適と言えるでしょう！

 

---

 

ちなみに、画像やフォントは似たようなものでOKです！

同じ画像・フォントを完璧に用意するのは難しいので、似たものを探しましょう！

画像やイラスト・アイコンは、photoACやO-DAN、unDraw、イラストAC、ICOON MONOなどの無料画像サイトで見つけられますよ◎

模写のやり方

見本のバナーが決まったら、あとは見本と同じように作っていきます。

手順としては、以下の流れで進めるのがおすすめです。

似ている画像・フォントを探す、もしくは見本から切り抜く 配置場所やサイズ感などを意識しながら模写する

似ている画像・フォントを探す、もしくは見本から切り抜く

まずは見本で使われているフォントや画像をチェックし、似たようなものを選びます。

全く同じのものを用意する必要はないので、似ているものを探してみましょう！

英語のフォントであれば、WhartFontというGoogleの拡張機能を使えば、画像からフォントを検索できるのでおすすめです◎

日本語のフォントを検索するサービスは不完全なので、ゴシック体・明朝体・丸ゴシック体くらいを統一すればOKですね。

画像等は上で紹介した、photoACやO-DAN、unDraw、イラストAC、ICOON MONOなどで似ているものを探してみましょう！

配置場所やサイズ感などを意識しながら模写する

要素の準備ができたら、どんどん作っていきます。

やり方は自由ですが、以下の手順がおすすめです。

アートボードを作成し、模写したいバナーを貼り付ける アートボードをコピーし、隣に配置 模写（トレース）する

要は、見本を隣に置いて、見比べながらやりましょうということですね。

配置や色はもちろん、フォントサイズの数値なども意識しながら模写をすると、完成度が高くなるでしょう。

模写のイメージが湧かない場合、以下の動画がイメージしやすくておすすめですよ◎（ここで紹介したやり方と少し違います）

3つか4つ模写をすれば、色々なツールを使うことになるので、基礎力は大幅にアップします。

操作感は、使えば使っただけ上達するので、ガシガシ使い込んでくださいね。

地道ではありますが、「作る→調べる→解決する」のサイクルが1番上達します。

また、この時点ではPhotoshopの使い方の練習ですが、行間や字間、使っている色・色数、配置の仕方・要素間の余白、フォントサイズなど、デザインについても意識しながらトレースしていきましょう！

数値をメモするだけでも、かなり勉強になりますよ♪

もう困らない！Photoshop学習での「不明点」の調べ方

Photoshopで不明点が出たときに困るのは、「検索する言葉がわからない」ということ。

「調べ方がわからないから、このデザインは諦めるか…」となると、デザインの質が上がらない + 挫折の原因となります。

なので、ざっくりと調べ方についてのポイントを3つ押さえておきましょう！

感覚的に検索する 画像検索をする Photoshopの小技集から探す

感覚的に検索する

調べ方がわからない一番の原因は、デザインをどのように言語化すれば良いかわからないことです。

例えば、以下の模様を作る際、なんて検索すれば良いでしょうか？

「サンバースト」なんて言葉が出てくれば良いですが、初めはパッと思い浮かばなかったり、知らない言葉だったりすると思います。

そんな時は、作りたいデザインの特徴を感覚的に検索してみましょう！

先ほどの模様だと、「フォトショ 放射状の模様 作り方」というイメージですね。

一発で求める結果が出ない時もありますが、検索結果から自分の中にない単語を見つけられたりするので、次の検索に繋がります。

何度も感覚的な単語を検索していると、ヒントが見つかるので、つまづいた時は試してみましょう！

画像検索で解決する

最近は、Googleレンズなどの画像検索の精度が高くなっています。

デザインを言語化するのが難しい場合は、そのデザインをスクショして、Googleレンズで検索してみましょう！

検索結果から該当のWEBページへ飛べば、ヒントとなる単語が見つかるかもしれません。

Photoshopの小技集から探す

感覚的な検索も、画像検索でもわからない場合は、Photoshopの小技集から探してみましょう！

うまく言語化されている方法があったり、超マニアックなテクニックが掲載されているので、不明点の解決を大きく助けてくれるはずです。

WEBデザインでよく使うテクニック集

最後に、WEBデザインでよく使うテクニックについてご紹介します。

WEBデザインでは、同じようなデザインを何度も使い回すことが多いです。

そのため、よく使うものに絞り、逆引き形式で作り方を知っておくだけでも、制作速度が爆上がりしますよ◎

画像の切り抜きテクニック

WEBデザインで必須のフォトショスキルといえば、「切り抜き」です。

人物や動物、食べ物や洋服など、切り抜いて合成する機会はとても多いですね。

しかし、切り抜くものによって、最適な方法は要素によって異なります。

そんな時、「最適な切り抜き方」を知っていれば、迷わず爆速で切り抜きができます。

切り抜きの種類とテクニックは、ぜひマスターしたいですね！

水玉模様やストライプ模様

「なんかこのデザイン物足りない。。」なんて感じる時、便利なのが「模様」です。

特に水玉模様・ストライプ模様の作り方を覚えておくと、簡単に物足りなさを解消できるので、作り方は把握しておきましょう！

一度模様（パターン）を登録しておけば、何度も使いまわせるので、「模様の作り方」「パターンの登録方法」までセットで覚えるのがおすすめです。

【おすすめの教材】

■ 水玉模様

■ストライプ模様

文字の装飾

最近のデザインでは、文字の中身が背景画像になっていたり、ネオン管のようだったり、文字の一部だけ色が違うといったものもよく見かけます。

文字の装飾も覚えておくと、デザインの幅が広がるのでおすすめです◎

WEBでもCSSで表現できるものが増えていたり、画像文字にすればどんな文字も使えるので、ぜひ習得しておきたいですね！

■文字の変形

■ シェイプに沿って文字を書く

■文字の一部だけデザインを変える

■透明の文字を作る

曲線の描き方

「曲線」を自在に操れれば、理論上どんなシェイプも作れます。

ペンツールを使って、曲線の作り方をマスターしておきましょう！

「なかなか思い通りのアイコンが見つからない…」なんてことが無くなるので、曲線を制するだけで、デザインの幅が大幅にアップします。

色味の調整方法

デザインをしていると「一部だけ色を変えたい！」とか「全体のトーンを明るくしたい！」といったケースは必ず出てきます。

そんな時は、色味の調整機能を使えばOKですね。

その色味の調整でよく使うのが「色調補正」や「トーンカーブ」。

この辺りの使い方をマスターすると、デザインの質が上がるので、ぜひ身につけたいところですね！

少し難易度が上がりますが、じっくり学習しましょう！

■特定部位の色の変え方

■トーンカーブについて

まとめ：Photoshopはポイントを絞ってサクッと学べばOK！

WEBデザイン学習のための、Photoshopの勉強法について最後にまとめます。

■ Photoshopの勉強は、独学かつ無料の教材で十分！ ■ WEBデザインで使う機能に絞って勉強すべし！操作法なんかは高速で身につけよう！ ■ 勉強法は、「基礎知識の学習」「ツールの習得」「模写で操作に慣れる」の3ステップで習得しよう！ ■ 1.基礎知識の学習項目 Photoshopの仕組み Photoshopでできること、超基礎操作 Photoshopの画面の名称・機能・配置 レイヤー ツール フィルター アートボード マスク パス レイヤースタイル スマートオブジェクト ガイド カーニング・トラッキング パターン WEBデザイン時の設定 ショートカットキーについて ■ 2.ツールの学習項目 移動ツール 文字ツール シェイプツール 選択ツール ペンツール 切り抜きツール ブラシツール 塗りつぶしツール グラデーションツール ■ 3.バナーを模写してPhotoshopの操作に慣れる 見本となるバナーを探し、それを模写する シンプルかつ、ちゃんとデザインしてあるバナーを選ぶと練習になる どんどん作って、わからないことがあったら調べて上達しよう！ ■ Photoshop学習での「不明点」3つの調べ方 感覚的な言葉で検索する Googleレンズで画像検索してみる Photoshop小技集で該当のものを探してみる ■ よく使うデザインテクニックを覚えておけば、制作速度は爆速化する！