オンラインカウンセリング実施中

納得のいくバナー作成の参考に!
目を引くバナーを作成したい!そんなフリーランスにおすすめの記事まとめ

  • このエントリーをはてなブックマークに追加

メイン画像

いざバナーを作ろうと思っても、デザインやサイズなどに悩んでなかなかイメージ通りのものが作成できないという方もいることでしょう。そこで、ここではバナー作成の基本的な知識や作り方のコツなどが紹介されている記事を集めてみました。ぜひ参考にして、ユーザーが思わずクリックしてしまうような目を引くバナー作成に役立ててくださいね。

「自分のスキルの相場をしりたい」と思う方へ

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

※相場算出に個人情報の取得はおこないません。

目次

制作前に知っておきたい!バナー制作上の注意点や基本の知識
プロっぽいゲームバナー作成のコツ?文字のデザインに注目!
バナーで伝えたいのは、お客さまが手に入れられるもの
クリックされやすいバナー・サムネイル作成のコツ!
【Photoshop】バナー広告を作る方法を詳しく解説
バナー制作過程公開 〜「#バナーお題」に挑戦〜
【Canva】誰でも簡単に好きなサイズのバナー画像を作成

制作前に知っておきたい!バナー制作上の注意点や基本の知識

デザイナーとして活躍する傍らで、Web制作講師としてもアグレッシブに活動している、正垣敬一さん。
『D-FOUNT』のサイト内には、過去の制作実績が紹介されているほか、Webデザイン関連の知識やツールの使い方など、これまで培ったデザイナーとしてのノウハウを惜しみなく綴られています。

こちらの《制作する前に知っておきたい!バナー制作上の注意点や基本の知識》という記事も、その中の1つです。
バナー制作初心者向けに、知っておくべき基礎的な知識と、バナー制作上で念頭に置いておきたいことを織り交ぜて解説されていました。

ここで注目したいのは、バナー広告デザインを制作する上での注意点について書かれた部分。
正垣さんは、まずは訴求するターゲットを決定し、ターゲットを中心としたデザインを考えることが最も重要だと言います。
また、移動先のサイトのデザインとバナー広告のデザインがかけ離れないように注意する必要があるのだとか。
これらを心がけることで、ユーザーから好印象を得られるバナーが作成できるようです。

そのほか、記事にはバナーのサイズにも触れられており、ひと目で分かるようにまとめられています。
もしもサイズに迷ったら、アドバイスされている基本的なサイズで作るといいかもしれません。
詳しくは、記事中で確認してみてください。
こちらの記事からは、バナー制作をこれから始める方も、復習としておさらいしたい方も有益な情報を得られるのではないでしょうか。

【参照元】https://d-fount.com/what-is-banner/

プロっぽいゲームバナー作成のコツ?文字のデザインに注目!

目立つバナーは、ついクリックしてしまうもの。
日々バナー作成に向き合う中で、「とにかく目立つように作って」と、クライアントから注文を受けることもあるでしょう。
しかし、限られたサイズの中で派手な色ばかり使うと見づらい、写真をメインにすると何を伝えたいかわからなくなる、などバランスに悩むフリーランスは少なくありません。
そこで今回は、《プロっぽいゲームバナー作成のコツとは?文字のデザインに注目しよう!》という記事を取り上げてみました。

この記事の執筆者はなさくのさんが紹介するのは、文字(フォント)デザインのコツ。
文字デザインで使えるテクニックとして、以下6つを挙げています。

・文字に境界線をつけて縁取り文字にする
・文字色は背景色と離れた色を選ぶ
・読みやすいフォントにする
・目立たせたい文字を大きくしてメリハリをつける
・ドロップシャドウで文字を立体的にする
・文字周りに目を引くような装飾をつける

はなさくのさん曰く、「文字を目立たせる方法は無限大」とのこと。
記事には、キャラクター素材を用いて実際に作成し、完成までの工程がわかりやすく解説されているので、ぜひ参考にしてください。

その他、『HanaSaqutto』には、本職であるゲームのUIデザインやバナー制作、イラストを中心とした情報を掲載。
はなさくのさんのフリーランスとしてのタスク量、UIデザイナーへの転職方法など気になる話題も発信されているので、ぜひアクセスしてみてはいかがでしょうか。

【参照元】https://hanasaqutto.com/2859/design/game-banner-text-design/

バナーで伝えたいのは、お客さまが手に入れられるもの

担当したクライアントから7割以上のリピート率を得ている、Webデザイナーの川島彩さんのサイト『デザインオアシス』からは、訴求力のあるバナー広告を作成するときに押さえるべきポイントが書かれた記事を紹介しましょう。

こちらの《バナーで伝えたいのは、お客さまが手に入れられるもの》という記事です。
川島さんによると、バナー広告を作成するときには、「何を提供するのか」ではなく、「お客さまは何を手に入れられるのか」ということにフォーカスすることが大切なのだとか。
上記の記事には、あるバナーのリデザイン前と後を例に挙げ、バナーを見た人の視点に立って、クリックしたくなるようなデザインにするためのポイントをまとめてくれています。

フォントの種類や大きさ、全体の配色をはじめ、バナー作成では重要なことがたくさんありますが、見る人を意識したデザインでなければ、どんなに凝っていても興味を惹くことはできません。
ぜひ川島さんの記事を読んで、ステキなバナーを作るときの参考にしてくださいね!

【参照元】https://design.mamaoasis.com/archives/133

クリックされやすいバナー・サムネイル作成のコツ!

視覚的に目立つバナーがクリックされやすいと頭では分かっていても、どう作成すると効果的なのか具体的な方法を見出だせていないという方もいることでしょう。
その疑問を解消してくれるのが、こちらの《クリックされやすいバナー・サムネイル作成のコツ!【デザインやサイズでクリック率が違う】》という記事。
ここでは、バナーのクリック率を上げるための秘策を公開されています。

筆者のおすんさんが挙げているポイントは、以下の4つ。
■適切な文字数やサイズ、デザインにする
■目立つ色を配色する
■見出しなどを装飾する
■うまく余白を使う

たとえば、適切な文字数にするという点では、ユーザーが瞬時に見て理解できるよう伝えたい情報のみを文字にして、多くを詰め込みすぎないのがコツなんだとか。
ユーザーに文字を読ませるのではなく、見せるというイメージでのバナー作成が好ましいようです。
そのほかのポイントについても、それぞれ分かりやすく解説されています。
また、クリック率を左右するバナーのサイズや、バナー作成にあたっての参考サイトと作成方法、ツールなどについても言及。
これらについて、ぜひ記事の隅々まで熟読し、納得のいくバナーを作成してくださいね。

上記の記事は、『OsunBook』というブログに掲載されています。
ブログには、フリーランスデザイナーとして活躍中のおすんさんが、ビジネスや副業、ライフスタイルなどのカテゴリーごとに興味深い内容の情報を発信中。
どれも読み応えある記事ばかりなので、ランダムに選択しても楽しく読み進められますよ。

【参照元】https://osunbook6.com/banner-design/

【Photoshop】バナー広告を作る方法を詳しく解説

『S.Design.Labo』は、Web制作をメインにフリーランスとして活躍する、バーグさん運営のサイト。
デザイナーが知りたい各デザインツールの情報や、Web関連のノウハウなどが公開されています。

ここでは、その中の1つ、《【Photoshop】フォトショでバナー広告を作る方法を詳しく解説》という記事をご紹介しましょう。

記事中で解説されているのは、Photoshopを使ったバナー広告の作り方。
構成や背景写真の素材探し、Photoshopでのキャンバス作成、文字の入力と色の変更など、ゼロベースで作る場合の一連の工程を細かくアドバイスされています。

また、Photoshop初心者にも分かりやすいよう、スクショを貼り付けて操作方法も解説。
文字のサイズやフォント1つとっても、色んなパターンのサンプルを展開されているので、Photoshopの機能について理解を深められるだけでなく、バナー広告としての見栄えなどを見比べて判断することができるでしょう。
Photoshopで自分の納得のいくバナー広告を作成したい方は、ぜひ記事を熟読して作り方をマスターしてくださいね。

【参照元】https://sdesignlabo.com/photoshop/ps-makingbanner/

バナー制作過程公開 〜「#バナーお題」に挑戦〜

『デザインと暮らしのメモ』は、グラフィックデザイナーとして活躍中のchihiroさんが運営するブログです。
ブログには、Webデザインやグラフィックデザインといったカテゴリーを設け、これまで培った経験をもとにデザインのノウハウを惜しみなく綴られています。

今回紹介するこちらの《バナー制作過程公開 〜「#バナーお題」に挑戦〜》という記事も、その中の1つ。
ここでは、WebデザイナーのこばやすさんによりSNS上で出題されたバナーのお題に沿って、chihiroさんがバナー制作した様子を記録されています。

chihiroさん曰く、お題に沿ったバナー制作をする上でまず悩んだのは、そのバナーでいちばん伝えたいことは何なのかということ。
そのいちばん大事な情報を察知できるかが、ユーザーの目を引くバナー制作の鍵となりそうです。

ちなみに、chihiroさんはPhotoshopを使って制作しており、記事ではその過程も公開しています。
文字入れ段階では、レイアウト考案に集中するべく、まずは白黒のみでざっくりと配置してみたり、カラーにしていちばん大事だと思う情報をバナーの中心に配置してみたり…。
試行錯誤を繰り返す中での気付きや発見もあったようですよ。
さて、そんな中、一体どんなバナーが完成したのでしょうか?

こちらの記事では、バナー制作で悩みがちなポイントとその解決策が過程を経て記されているため、自身がどこで躓いているのかを把握しやすく、同時に知りたかったヒントを得られるかもしれません。

【参照元】https://blog-chihiro3.net/banner-odai_vol3/

【Canva】誰でも簡単に好きなサイズのバナー画像を作成

女性Webエンジニアの視点から、人生を豊かにするライフハックメディア『TO DARE IS TO DO』を運営しているぽむさんは、《【Canva キャンバ】誰でも簡単に好きなサイズのバナー画像を作成する方法(初心者向き)【無料&5分で完成】Win&Mac対応》という記事の中で、無料で利用できるデザインツールを使ったバナー制作の方法を紹介しています。

この記事で取り上げられているデザインツールは、ブラウザ上で使用可能なCanva。
一からバナーをデザインすることもできれば、豊富なテンプレートや画像素材をカスタマイズしてバナー作成をすることもできるそうで、記事内では既存のテンプレートを利用する方法が公開されています。
Canvaはサイズ調整も自由自在で、保存形式もJPEGとPDFから選べるので、かなり使い勝手は良さそうですよ。

イラストレーターやフォトショップに苦手意識があると、バナー作成もハードルが高く感じてしまうかもしれませんが、Canvaならコツさえ掴めば操作は簡単なので、チャレンジしやすいのではないでしょうか。
ぜひ、ぽむさんの記事を熟読して、バナー作成にも意欲的に取組んでみてくださいね!

【参照元】https://todareistodo.net/production/canva/


レバテックフリーランスはIT・Web系フリーランスエンジニア(IT個人事業主)専門エージェントです。ご自身にマッチする案件をご提案するだけでなく、「自分のスキルで通用するか?」「将来性にフリーランス転向を考えているので話を聞きたい」といったご相談も承っています。

キャリアの選択肢としてフリーランスエンジニアへの転向に興味をお持ちの方は、フリーランスor会社員の働き方のメリット・デメリットを比較した下記の記事も併せてご覧ください。

関連記事 : フリーランスエンジニアと会社員エンジニアの働き方比較

最後に

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

※相場算出に個人情報の取得はおこないません。

  • このエントリーをはてなブックマークに追加
いきなり相談するのは不安な方へ フリーランスになった時にどんな案件を提案されるのかメールでわかる! 詳しくはこちらから

関連記事

プライバシーマーク

© 2014-2020 Levtech Co., Ltd.