バナー作成の学習はPhotoshopから始めるべき？Illustratorとどっちを先に学べばいいか解説します

これからバナー制作を学習する初心者の人であれば、まずはPhotoshop（フォトショップ）を使って模写学習をすることをおすすめします。

もちろん、副業や転職でWebデザインを始めるのであれば、Illustrator（イラストレーター）も使えるようになっていた方が良いです。

しかし、

• これからPhotoshopとIllustratorの勉強を始めるWebデザイナー志望の人
• まずはバナー作成を上達させたい人

このどちらかに当てはまるのであれば、Photoshopを利用したバナー作成から練習する方が学習効率が上がります。

この記事では、以下について解説しています。

• バナー作成ではPhotoshopから学習を始めた方が良い理由 
• PhotoshopとIllustratorの学習方法 
• バナー制作の参考にしたいサイト 
• プロを目指す人のための、コスパ最強のバナー作成講座 

＼ 公式サイトはこちら！ ／

＼ 公式サイトはこちら！ ／

バナー作成をするならPhotoshopから学習した方が良い理由

基本的な形のバナーは、Photoshopの方が作りやすい

Photoshopは、写真素材を使ったバナー制作の際によく利用されます。

バナーで使う写真素材は、

• PIXTA（ピクスタ） ：日本人写真素材が豊富
• 123RF：写真・イラスト・AI画像などが豊富な、世界的に有名な素材サイト
• Unsplash：無料で商用利用できる写真素材サイト
• Adobe Stock：写真・イラスト・AI・各種画像素材が豊富

などでダウンロードできます。

Adobeソフト（特にIllustrator）は多機能でとても便利ですが、はじめて使う人にとっては操作方法が分かりにくいのがデメリットです。

Webデザイン学習でつまづく人は、制作物を完成させられない・素早くバナーを作成できないという壁にあたることが多いです。

バナー作成上達のコツは、制作物をたくさん完成させながら機能を覚えていくこと。

Photoshopは素材をダウンロード→写真を加工→写真やシェイプ・文字を配置する

• 素材をダウンロード
• 写真を加工
• アートボードに写真やシェイプ・文字を配置する

という３つの手順で簡単にバナーを作れます。

個人的には、Illustratorと操作が似ている部分があり、バナー作成においては使う機能が限られているPhotoshopの方が、習得難易度は低いと感じています。

ちなみに、Photoshopの写真加工は奥が深く、はじめから機能を十全に使いこなすのは難しいです。

以下の記事では、Webデザインで重宝する「写真を簡単にキレイにする方法」を解説しています。

実践ですぐに使えるので、Photoshop学習中の人は是非のぞいてみてください！

Illustratorはいつ学習するべき？

Photoshopの学習からIllustratorの学習に切り替えるタイミングは、「1日に確保できる学習時間がどの程度あるか？」という基準で考えるのがおすすめです。

Illustratorは、Photoshop（写真加工）やFresco（デジタルイラスト）などの他のAdobeアプリで加工した画像を利用してバナーやポスターなどのデザインを作成することに向いたアプリです。

• 画像作成・加工は他のAdobeアプリで行う
• 作成・加工した素材を使ってIllustratorで制作物のデザインをする

という方法が、Adobeアプリのメジャーな使い方です。

実際の制作現場でもこのような使い方をしているクリエイターさんは多いので、プロのやり方を自分でも実践できるようにしていきましょう！

以下に2つの方法を紹介していますが、どちらの方法であっても最終的には、

Photoshopで加工した画像を、Illutratorと連携させてバナー作成をする

というステップを目指して学習します。

パターン①：1日2～4時間以上の学習時間を確保できる人

学生の方など、学習時間がたっぷりとれる人はPhotoshopのバナー作成に時間をかけた後で、Illustratorの学習に移る方法をおすすめします。

Photoshopを使いながら、Adobeソフトの基本操作だけではなく、バナーの様々なデザインをインプットする時間を取るのが目的です。

デザインの幅を広げておけば、後にIllustratorを学習する際にも応用がききやすいです。

学習時間を確保しやすい人
（1日2～4時間の学習時間）

• Photoshopでバナーを2～3個作成して、基本操作を覚える
• （応用）Photoshopで動きのあるデザインや、画像加工を利用したバナーを作成する
• Illustratorでバナーを2～3個作成して、基本操作を覚える
• （応用）Illustratorで「文字を変形させる」などの機能を使って動きのあるデザインのバナーを作成する
• （応用）Photoshopの画像加工機能とIllustratorを使ってバナーを作成する

パターン②：学習時間が1日2時間以下の人

1日に学習に費やせる時間が少ない人は、PhotoshopとIllustratorの基本操作を覚えることを重視した学習方法をおすすめします。

本業があり、学習時間を確保しにくい人
（1日1～2時間の学習時間）

• Photoshopでバナーを2～3個作成して、基本操作を覚える
• Illustratorでバナーを2～3個作成して、基本操作を覚える
• （応用）Photoshiopの画像加工を利用したバナーを作成する
• （応用）Illustratorで「文字を変形させる」などの機能を使って動きのあるデザインのバナーを作成する
• （応用）Photoshopの画像加工機能とIllustratorを使ってバナーを作成する

バナー作成の際に参考にしたいサイト

バナー作成では、お手本を見ながら真似して作成するのが効率的な学習方法です。

はじめは、素材と簡単なシェイプを使ってバナーを作成してみましょう。

慣れてきたら、写真を加工したり、変わったシェイプを作ってみたりして、思わず目を惹いてしまいそうなデザインのバナーを模写していきましょう。

以下に、バナー見本を集めたサイトを紹介しています。

バナー見本サイト

• BANNER LIBRARY
  おしゃれなバナーが、デザインイメージごとにカテゴリー分けされている
• バナー広場
  日本中のバナーが、色や業種ごとにカテゴリー分けされている
• Bannnner.com
  厳選された高品質のバナーが、業種や季節イベントなど、独自の基準でカテゴリー分けされている

制作経験豊富なプロの技術を学習したい人へ

先ほど学習ステップの最終段階として、「PhotoshopとIllustratorの両方を使って、動きのあるデザインのバナーを作成する」という目標をおきました。

しかし、PhotoshopやIllustratorの魅力を十分に引き出して、目を惹くデザインのバナーを作成するには、就職して実際の現場でテクニックを磨く必要があります。

しかし、未経験のWebデザイナーの就職・転職ハードルは高いです。

バナー作成の副業であっても、ココナラなどのクラウドソーシングサイトには、ライバルが沢山います。

これから学習を始める人が、ライバルの技術に追いつき、追い越すには、多数の制作経験とプロが使うテクニックを身につけていくことが必要になります。

コスパ最強で、自分のペースでオンライン学習ができるUdemyでは、Webデザイン経験豊富なプロから、バナー制作の基礎から、実務で使える応用までの技術を習うことができます。

これからバナー制作を頑張る人は「基礎講座」と「上級者講座」を、すでにバナーの制作経験があり、もっとテクニックを磨きたい人は「上級者講座」から始めてみることをおすすめします。

バナー制作初心者向けの「基礎講座」

Webデザインとバナー作成の基本が身につく！

【超初心者用】いきなりPhotoshop！写真加工「切り抜き＆合成フォトレタッチ」マスター講座

【超初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】

Webデザイン歴20年以上のベテラン講師によるPhotoshop・Illustrator講座です。

現場で使える基礎テクニックをしっかりマスターできる、Webデザイン初心者向きの講座です。

魅力的なバナーの構図を身につけたい！

サンペー先生の「思わずクリックさせる魔法のバナー講座　超簡単！売れるデザインは、ただなぞるだけ」

バナーデザインは「センス」ではなく、構図を理解していけば上達します。

思わずクリックしたくなるようなデザインのバナーを作成したい人は、この講座がおすすめです。

もっとスキルを磨きたい人の「上級者講座」

【上級者用】続！バナーデザインマスター講座｜Adobe Illustrator（イラストレータ） ＆ Photoshop

Webデザイン歴20年以上のベテラン講師による、バナー作成の上級者向け講座です。

IllustratorやPhotoshopの基本操作が身についたら、すぐに受講してみましょう。

現場経験豊富なベテランの方の真似をしていくことが、初心者からプロになるための最短ルートであるとも言えます。

＼ 公式サイトはこちら！ ／

＼ 公式サイトはこちら！ ／