「バナー制作くらい、1時間もあればできる!」
と意気込んで作るものの、1つのバナーを制作するのに2時間、3時間かかってしまう…。
上記のように、Webデザインの勉強や仕事を始めたばかりだと、バナーを早く作れないという悩みを抱える人も多いと思います。
今回は、爆速で高品質なバナーを作れるようになるために、初心者が覚えておくべきコツを4つ紹介します。
これからWebデザイナーになりたい人、バナー作成の仕事で納品スピードに悩んでいる人におすすめの上達法です。
ぜひ参考にしてみてください!
帽子ねこ
- 子育てしながら在宅ワーカー歴3年以上
- WebライティングとWebデザイン
- Adobe製品を仕事や趣味で多用
- 最近はAdobe Fresco、Procreateでお絵描きライフ
- 人物フリー素材サイト「ふぁみりー素材.com」運営中
バナー制作の仕事でスピードが求められる理由
- バナーは次の日や数日後に使われる予定で依頼されることが多いため
- 「Webデザイナーに頼めば、すぐに・高品質なバナーを作ってもらえる」という期待があるため
バナー制作をしていると、「明日から使いたいから、送った素材を元にイイ感じのバナーを作ってよ!」
という依頼は度々あります。
Webデザインの学習中にはあまり気づかないことですが、バナー制作においては、
- 技術力
- 応答の速さ、丁寧さ
- 納品までのスピード
この3つが重視されます。
バナー制作は、Webデザインの中でも比較的仕事の難易度が低いと思われがちです。
しかし、クライアントの期待に十分に応えられるバナーを即座に作成するのは、仕事を始めたばかりの人だと難しいのが実情です。
高品質なバナーを素早く作るためには、数をこなす経験が必要になります。
次の章からは、より早くバナーを作成するコツを4つ紹介します!
ぜひ参考にしてね!
バナーを爆速で作るためのコツ
バナー制作の副業では、クライアント(依頼主)の要望に応えて、スピーディに高品質なバナーを作成することが求められます。
そこで、初心者でもバナー作成のスピードを上げるコツを4つご紹介します。
- 配色、素材選びにかける時間を減らす
- 既存のバナーの型をストックしておく
- 業界内で好まれるデザイン、あしらいを優先的に習得する
- SNSや本などで、毎日少しずつ勉強していく
1つずつ解説していきます。
コツ1:配色、素材選びにかける時間を減らす
Webデザインの仕事では、クライアントとの打ち合わせ後に素材と配色を絞り込むことが多いです。
(配色と素材が指定されている場合もあります)
しかし、実際に仕事に入る前に、いくつか使えそうな素材・配色パターンをチェックしておけば、ラフ作成の時間が短縮でき、デザインのブラッシュアップに使える時間が増えます。
ラフ提案までの時間を短くすることや、ブラッシュアップの時間を増やすことは、クライアントにより良いバナーを提案できることに繋がります。
素材選びは、あらかじめ素材サイトをブックマークしておいてるけど、
「配色」って決まっているものなの?
Webデザインでは、制作物のジャンルごとに最適な配色パターンがあります。
配色パターンを紹介してくれているサイトや本もあるので、こちらもチェックしておきましょう!
- colorate
バランスのいい3色の配色を決めたいときに便利。
グラデーションも生成できる。 - Color Hunt
4色の配色を決めたいときに便利。
「暖色」、「寒色」、「よく使われる配色」などのパターン別の検索も可能。 - 原色大辞典
Webデザインで使える色を、幅広く網羅。
個人的にはブクマ必須のサイト。 - WebGradients
グラデーションのコレクションサイト。
CSSコードもコピーして使える。 - Adobe Color
すでにバナーやイラストなどで使用されている配色を探すときに便利。
Adobeアカウントが必要。 - ColorMagic
よく使われる色のパターンの他、色のイメージを文章で打ち込むと、AIが最適な色を提案してくれる。
本でチェックしたい人は、こちらからどうぞ!
コツ2:既存のバナーの型をストックしておく
- 検索エンジン、SNS等で目にするバナーの「型」を紙に描きだし、ファイリングする
- PCのバナー画像フォルダーに、使えそうなバナー画像をストックしておく
日常でよく目にするバナーデザインをよく観察しましょう。
見るだけでなく、実際に自分の手を動かすことで、デザインの引き出しを広げることができます。
私は、人や文字の配置だけでなく、配色や気づいたこともメモするようにしています。
時間がない時は、パソコンのフォルダーに画像をストックしておいて、後で参考にできるようにしています。
(著作権があるので、参考にしたバナーを自分のSNSアカウントやメディアにアップロードしないようにしましょう)
また、バナーデザインを集めたサイトもブックマークするようにしています。
デジタルとアナログ両方でストックしておくことで、様々なデザインパターンをいつでも見返せるようにしておくのがポイントです。
コツ3:最初の目標は「業界・クライアントの意向に合ったバナーを作る」
仕事以外にも、自主学習でPhotoshopやIllustratorを触っている人も多いでしょう。
コツ3は、効果的な学習に関する解説です。
Webデザインを勉強中の人なら、このような意見を目にしたことがある人も多いと思います。
「Webデザイナーなら、お客様の提案に合った制作物だけでなく、より魅力的なデザインを提案すべき」
この意見は、ある程度以上の仕事経験を積んだWebデザイナーに対しては、正しいと言えるでしょう。
しかし、Webデザインの未経験者や仕事を始めたばかりの初心者は、まずはクライアントの希望通りのバナーのパターンを、すぐに提案できるようにしておくことを優先する必要があります。
プロであれば、1時間で2~3つの完成バナーを提案できる人は多いですが、仕事を始めてばかりの駆け出しWebデザイナーが同じスピードで仕事をするのは難しいです。
まずは、30分~1時間以内に、バナーのラフデザインを2~3つ提案できるようにしましょう。
業種ごとに好まれるデザインがある
バナー作成の実際の仕事を始めてみると、業種ごとに好まれるデザインがあることに気がつきます。
- 自分が仕事を受けている業界で好まれるデザインを作れるようになる
- 他の業界でもよく使われている技術を習得する
- クライアントの希望通りのデザイン+「自分が考えた魅力的なバナー」を提案できるようになる
このようなステップを踏んで上達していくと良いでしょう。
仕事と学習がリンクしていくと、IllustratorやPhotoshopの勉強が、より楽しくなってきますよ!
コツ4:SNSや本などで、毎日少しずつ勉強していく
Webデザイナーになるまでは、ガッツリ勉強していたんだ。
でも、仕事を始めてからは、まとまった学習時間が取れてなくて…
こんな悩みを抱えている人は、X(旧Twitter)、Instagram、PintarestなどのSNSで、IllustratorやPhotoshopの情報発信をしている人をフォローしておくのがおすすめです。
(時間がある程度取れる人は、YouTubeも)
特にXとInstagramは、ショート動画で分かりやすくまとめてくれている人も多いです。
ショート動画での学習は、電車の中や、外出時のちょっとしたスキマ時間でも気軽に確認できます。
AIを使ったデザイン方法や、使えるショートカットキーも発信されているので、積極的に活用していきましょう!
帽子ねこオススメの学習法
- 外出時などのスキマ時間にSNSをチェック
- PC学習時に、あらかじめチェックしておいたイラレ、フォトショの技術を再現してみる
解説を見るだけでなく、実際に自分の手を動かすことで、使える知識として自分の中にストックされます。
もっとじっくり学びたいときは、書籍や、オンライン学習プラットフォームのUdemy(ユーデミー)も活用しています。
バナー学習に最適な
Udemyの学習講座
バナー制作初心者向けの「基礎講座」
Webデザインとバナー作成の基本が身につく!
Webデザイン歴20年以上のベテラン講師によるPhotoshop・Illustrator講座です。
現場で使える基礎テクニックをしっかりマスターできる、Webデザイン初心者向きの講座です。
魅力的なバナーの構図を身につけたい!
バナーデザインは「センス」ではなく、構図を理解していけば上達します。
思わずクリックしたくなるようなデザインのバナーを作成したい人は、この講座がおすすめです。
もっとスキルを磨きたい人の「上級者講座」
Webデザイン歴20年以上のベテラン講師による、バナー作成の上級者向け講座です。
IllustratorやPhotoshopの基本操作が身についたら、すぐに受講してみましょう。
現場経験豊富なベテランの方の真似をしていくことが、初心者からプロになるための最短ルートであるとも言えます。
まとめ:昨日の自分より「ちょっと上手&ちょっと速い」でOK!
- 素材、配色選びは、仕事時間外に9割済ませておく
- 日常で目に付いたバナーデザインを観察・分解してみる
- IllustratorやPhotoshopの技術は、よく使われるものから習得する
- SNSでスキマ時間の学習をする
「昨日の自分よりも、ちょっとだけ成長する」を繰り返していくことで、仕事への自信をつけていくことができます。
このブログでは、他にも、全くの初心者の状態から、バナー作成の仕事を取るまでの記事を解説しています。