求人バナーの作り方を解説！おしゃれで効果的なバナーを作るコツは？

こんにちは。スキマバイト募集サービス「タイミー」ライターチームです。

WEBサイトで求人募集を行う際、求人バナーでユーザーからの注目度を上げクリックを促すと求人ページへの流入を増やすことができます。自社で求人バナーを制作する方法、効果を出すために重要なポイントについて解説していきます。

おしゃれな画像サイトや、簡単に扱える作成ツールも紹介しますので、参考にしてみてください。

優秀な人材が退社を考える理由や、その特徴を理解し、モチベーションをアップさせるなど退職を防止する方法を学びましょう。

求人バナーとは？何のために作る？

バナーとはもともとサイトとサイトを繋ぐリンクが埋め込まれた画像を指します。

なかでも求人バナーとは、求人情報が記載されているサイトに繋がる画像のことです。給与や勤務時間のような具体的な募集条件を記載するのではなく、人材を募集していることや企業の雰囲気を伝えるような画像が多いです。

求人バナーの目的は、求職者の目に留まり、求人情報が記載されているページに遷移してもらうことにあります。魅力的な求人バナーは、ホームページやランディングページから求人の閲覧数を集めやすくなるでしょう。

求人バナーに必要な要素

魅力的な求人バナーに必要な4つの要素について説明します。自身で制作するときはもちろんですが、他社や人に依頼する際にも、次の4つの要素を押さえてデザインをイメージすることがおすすめです。

• キャッチコピー
• CTA（Call To Action）
• 素材
• 配色

順番に見ていきましょう。

キャッチコピー

キャッチコピーは、短く分かりやすくインパクトがあることが大切です。長文であればあるほど読まれないと思った方が良いです。求人情報の魅力やアピールポイントを一言で端的にまとめてみてください。

特にスマートフォンでサイトを眺めている読者は、小さな文字や長い文章を好みません。画面をスクロールした際に、一瞬で読めるキャッチコピーを作りましょう。

CTA

CTAとは、「Call to Action」の略称で「行動喚起」を意味します。求人バナーを見た読者が、「バナーをクリックする」という行動を起こしたらCTAを獲得したことになります。

バナー画像出典：株式会社ソルブレイン公式Facebook

バナー画像出典：バナー広場

バナーの善し悪しを決めるのはCTAを多く獲得しているかどうかに左右されます。求人サイトにどのように誘導するか、CTAの導線を考えることが魅力的な求人バナー制作に重要なポイントです。

素材

求人バナーを制作する上で画像やイラストなどの素材集めも必要な要素です。だいたいのデザインイメージを踏まえて、使えそうな素材をチョイスします。

バナーに限らず、クリエイティブ画像はいくつもの素材を組み合わせて制作することが多いです。募集したい求人情報のイメージに近い素材を、専用サイトからピックアップしていきましょう。

配色

配色は求人バナーの方向性を決めるうえで重要なポイントです。

パッと見た時の印象は配色によって大きく異なります。たとえば柔らかく華やかな雰囲気を出したいならピンク系、エネルギッシュな雰囲気なら赤系などが適しています。

後述しますが、求人募集を通して伝えたいポイント・ターゲットに適した配色や、企業のイメージカラーなどを使用すると良いでしょう。

求人バナーの基本的な作り方

求人バナーの基本的な作り方を6つのステップごとに解説していきます。

1. 伝えたい要素を全て羅列してみる
2. 内容の優先順位を決める
3. メイン素材を仮に決める
4. レイアウトを決めて要素を並べる
5. フォントやカラーを決めて配置してみる
6. 全体を見てバランスを整える

順番に見ていきましょう。

ステップ1.伝えたい要素を全て羅列してみる

ステップ1では、求人バナーを通して読者に伝えたい要素を書き出してみましょう。デザイン先行にならないように、誰に何を伝えるのかあらかじめ整理しておくことが重要です。ターゲットを決めて、「課題」「不安」「叶えたいこと」を考えてみてください。

この時点ではざっくりしたイメージで良いので、キャッチコピーまで具体的に想像できていなくてもOKです。可能性のある要素を洗い出して、数多くアイデアを出していくのがポイントです。

ステップ2.内容の優先順位を決める

次にステップ1で洗い出した要素に優先したい順番をつけていきます。求人バナーは小さい画像になるため、多くの情報は入りません。何を入れたら理想の求人バナーに近づけるか考えながら、取捨選択していきます。

ある程度絞っていくことで、ターゲットへのメッセージ性が高まり、インパクトを強化しやすいため、あれもこれも伝えたいと欲張らないようにしましょう。1人の具体的なターゲットに向けて手紙を書くようなイメージで、相手の立場を想像しながら優先順位をつけていきます。

ステップ3.メイン素材を仮に決める

求人バナーを通して伝えたいメッセージやイメージが決まったら、メインの素材を決めます。この時点で確定する必要はありません。ざっくりとした方向性を決めるために、バナーのサイズや色合いを選ぶようにしましょう。

求人バナーは正方形のタイプから横長の長方形のサイズまでさまざまです。埋め込むサイトのデザインを踏まえて、適切なサイズを決めていきましょう。サイトによってサイズを調整する場合もありますので、何パターンか考えておくのがおすすめです。

ステップ4.レイアウトを決めて要素を並べる

レイアウトを決める際は、「分割レイアウト」と「全面レイアウト」の2種類から選択します。レイアウトに沿って、画像やキャッチコピーを並べていきます。まずはそれぞれのレイアウトの特徴について説明していきます。

分割レイアウト

分割レイアウトとは、複数の画像を組み合わせて配置させる作成手法です。縦・横・ななめなどいくつかのパターンがあります。組み合わせ方によっては情報量を増やしやすくなります。

たとえば以下の画像では、ななめのラインを境に写真を2つ挿入しており、女性単独の写真と複数名の写真が柔らかな雰囲気でデザインされています。

ベースをホワイトに統一することで、2つの画像の境目が分かりにくくなっています。横に並べるだけのレイアウトより、スタイリッシュさを感じるバナーデザインです。

画像引用元：【第2新卒・キャリア歓迎】人事/採用担当 募集！

全面レイアウト

全面レイアウトとは、1枚の素材を大きく活用して作成する手法です。画像を大きくアピールするため、分割レイアウトよりシンプルなデザインになりますが、その分インパクトを強化することができます。

たとえば以下の画像は、3名が映っている1枚の写真に、「働きやすさ？成長？どっちもでしょ。」というキャッチコピーが大きく入っており、企業が伝えたいメッセージが明確に発信されています。写真が1枚なのでスマートフォンでスクロールした際にも読みやすく、パッと目に入る鮮やかな色合いも特徴的です。

画像引用元：【社内SE（社内情報システム）】の転職・求人・中途採用情報│doda

ステップ5.フォントやカラーを決めて配置してみる

レイアウトを決めたら、挿入する文字のフォントやカラーを決めて、試しに配置してみましょう。

フォントは大量のパターンがあるので、どのフォントを使用するか悩むことも多いかと思います。そんなときは、キャッチコピーがひらがな・カタカナ・英語（大文字・小文字）のどれに当てはまるか考えてみてください。

英語が得意なフォントや漢字がきれいなフォントなど、字体の特徴を踏まえて配置するとイメージしやすくなります。

ステップ6.全体を見てバランスを整える

最後に、画像やキャッチコピーを配置した求人バナーのバランスを調整しましょう。次のポイントをチェックしながら、テキストサイズや色合いを整えると良いでしょう。

• 写真に文字がかぶさっていないか？
• 色味がぶつかり合って読みにくくなっていないか？
• 情報量が多すぎたり少なすぎたりしないか？

他者に確認してもらい、フィードバックをもらうのもおすすめです。自分では良いと思っても、初見の感想をもらうことでより良い求人バナーに近づけることができます。

求人バナーを制作する際は心理学も活かそう

求人バナーを制作する際に、心理学も活かせることをご存じでしょうか。

今回は次の4つのポイントについて紹介します。

• 人は初見で好みや信頼性を判断する
• 人は新鮮でユニーク、または予期しない情報に興味を持つ
• 整然とした一貫性あるデザインの方が興味を持つ
• 過度な情報は無視される傾向にあるため注意する

順番に見ていきましょう。

人は初見で好みや信頼性を判断する

人は、初見の印象で好みや信頼性が決まります。メラビアンの法則によると、視覚・聴覚・言語情報のうち視覚から得る情報が55％と言われています。

求人バナーにおいても、キャッチコピーの言葉選びよりも、パッと見たときのデザイン性が印象を決定づけると思った方が良いでしょう。初見で興味を持ってくれたり、ポジティブな印象を抱いてくれたりすると、何が書いてあるのかじっくり見てもらえるということです。

人は新鮮でユニーク、または予期しない情報に興味を持つ

これまで見たことのない情報や、「面白い」と思ってもらえた情報は、強く人の興味を惹きつけます。無難なデザインや、「よく見たことある」と思われてしまうと、せっかく有益な情報が記載されていても見てもらうチャンスを失ってしまいます。

逆に、同じような情報であったとしてもユニークなデザインの求人バナーを制作することができれば、興味を持ってもらいやすくなります。新鮮な情報提供を意識してデザインを考えてみましょう。

​​​​​整然とした一貫性あるデザインの方が興味を持つ

デザインの一貫性も重要なポイントです。

人は無意識に「一貫性」を求める心理が働きます。自分の行動・発言・態度を統一させたいと思うのは、ある意味当然といえます。なぜなら、「言っていることが毎回違う」、「発言と行動が伴わない」という人は周りから信頼されにくいからです。

求人バナーを制作する際も、ある程度整っており一貫性のあるデザインを目指すことで、信頼を獲得しやすくなります。たとえばエネルギッシュな若手を募集する求人サイトに対して、クールな印象の求人バナーを作るなど、統一感のないデザインは避けるようにしましょう。

過度な情報は無視される傾向にあるため注意する

情報量が多すぎると人は処理が追いつかなくなり、無視してしまう傾向にあります。アメリカの心理学者スタンレー・ミルグラム氏は、この現象を「過剰負荷環境」と名付けています。

つまり今回のパターンでは、情報量が多い求人バナーを制作してしまうと必要な情報以外は無視されてしまうため、注意が必要ということです。また求人バナーは画像サイズがコンパクトになるため、情報量を増やすのではなく1つのメッセージを強化することに注力しましょう。

効果のある求人バナーを作る際のコツ・ポイント

求人バナーで効果を出すためには7つのコツを押さえることが重要です。

• 作成する前に手書きでラフを作る
• PC・スマホどちらに優先表示させるかでレイアウトやサイズを決める
• 高品質な画像を選定する
• 伝えたいイメージによって配色を決める
• キャッチコピーは簡潔で分かりやすいものにする
• コントラストやアクセントをつける
• CTAの位置や色を考慮し目立たせる

また以下の記事では「求人ポスター」を作る際のコツ・ポイントついて詳しく解説しています。バナーの作り方とあわせて参考にしてください。

作成する前に手書きでラフを作る

1つ目のコツは、求人バナーを作成する前に、まずはラフでデザインを書き出してみることです。

一度バナーの制作を進めてから、途中で「やっぱり違う」と思ってしまうと再作成に時間がかかります。ある程度手書きでイメージを書き出してみて、イメージしているものと完成品のギャップを埋めておきましょう。

また、ラフの段階で人に見せて、アドバイスをもらうようにすれば効率よくブラッシュアップしていけます。

PC・スマホどちらに優先表示させるかでレイアウトやサイズを決める

2つ目のコツは、表示する端末によってレイアウトやサイズを決めることです。スマートフォンであれば画面サイズがコンパクトなので、複雑なデザインの求人バナーはおすすめしません。シンプルかつインパクトのある分かりやすいデザインが良いです。

反対に、パソコンであれば画面サイズも大きいため、求人バナーのサイズを大きくし、情報量を増やしてもアプローチできます。複数写真を組み合わせたレイアウトにも向いています。優先させたい端末によって作り分けるようにしましょう。

高品質な画像を選定する

3つ目のコツは、画質の良い画像を使って求人バナーを作ることです。画質が粗い画像でバナーを作成してしまうと、求人バナーのクオリティが下がり、クリック率の低下を招きます。

具体的には「解像度」と呼ばれる画像の鮮明さを決める値を、Web媒体で適しているといわれる「72dpi」に設定しましょう。あまり高画質にしすぎてもデータ容量が増えてしまい、端末によっては読み込みのスピードを下げるので気を付けてください。

伝えたいイメージによって配色を決める

求人バナーのデザインを決める上で、伝えたいイメージに沿ったベースの色選びは非常に重要なポイントです。今回は特に利用されることが多い、赤・青・緑・黄・黒・白の7色がそれぞれどのようなイメージを持っているか解説します。

赤が持つイメージ

赤はエネルギッシュでアクティブ、情熱的なイメージの色です。その反面、危険・リスク・停止といった注意喚起を促すカラーでもあります。

インパクトの強い色味なので、多用するとメッセージ性が強くなりすぎてしまいます。求職者の興味を強く引きたい箇所やCTAボタンにポイントとして使うのがおすすめです。

青が持つイメージ

青は落ち着いている様子や爽やかで知的な様子を表す色です。新卒のフレッシュなデザインに利用されることも多く、空や海のように広く壮大なイメージの素材も多いです。

ただ、冷静・クールな印象も持ち合わせた色となるため、温かみは伝わりにくいです。たとえば「アットホームな職場」といった職場の雰囲気を伝えたいときは避けた方が良いでしょう。

緑が持つイメージ

緑は植物を中心とした自然界に多い色で、安心や安定、癒しを与える色です。濃淡にもよりますが、鮮やかな緑色は若々しさを表現し、目にも優しい色合いです。逆に深い緑は落ち着いてどっしりと構えるような安定感を醸し出します。

若手人材にアピールするときは明るい緑、年配層にアピールするときは深緑、といった使用方法がおすすめです。

黄が持つイメージ

黄色は、人の心を明るくするパワーを持つ色です。コミュニケーションが円滑な様子やポップで楽しい様子を伝えることができます。求人バナーに使用すれば、職場の雰囲気が明るいことやポップで軽やかな印象をアピールできます。

また、赤と同じように「危険・注意」を表現する色味でもあります。赤よりも「注意喚起」の要素が強い色ですが、うまく活用することで読者の目を引きやすくなります。

黒が持つイメージ

黒が持つイメージは高級・重厚感・強さなどを感じさせる色です。何色にも染まらない黒は、ほかの色を引き締め、ピリッとした雰囲気にしてくれます。

白と合わせてモノトーンでスタイリッシュな印象にまとめたり、ゴールドと合わせてリッチで高級な印象にまとめたりと、合わせる色で印象を変化させることができます。

白が持つイメージ

白はほかのどの色にも染まる色なので、合わせ方で無限に印象が変わります。透明感や純粋・無垢なカラーとして多彩な組み合わせが楽しめます。

クリーンで清潔な印象もあり、色と色を自然につなげてくれます。乳白色な白から、透き通るような白まで、同じ白でも濃淡があるため求人バナーのデザインにあわせて透明度を調整すると良いでしょう。

キャッチコピーは簡潔で分かりやすいものにする

キャッチコピーは、10文字前後（9～13文字程度）の短くわかりやすいものにしましょう。

たとえば、「年収500万円可能な不動産営業スタッフ大募集！20〜30代が活躍しているフレッシュな職場で楽しく稼げる！ノルマも一切なしで始めやすい！」というキャッチコピーがあったとします。これだと文字量が多すぎて何が言いたいのか、瞬間的に伝わりません。

そこで、良いキャッチコピーを生成するために便利なツールを活用しましょう。ChatGPTをはじめとするAIツールを使えば、簡単に魅力的なコピーを仕上げることができます。

プロンプトの例
「あなたはコピーライターです。求人募集をするためのバナーを制作します。○○、△△のキーワードを入れ込み、10字前後のキャッチコピーを3つ考えてください。」

まずは「コピーライターです」と、AIに役職を教えます。その後、何を制作するのか、どんなキーワードを入れたいか（募集する職種など）、を記載しましょう。1つだけでなく複数考えてもらうことで、イメージに近いキャッチコピーが生まれやすくなるでしょう。

コントラストやアクセントをつける

求人バナーの全体的なデザインがまとまってきたら、メリハリをつけるために文字を大きくしたり、アクセントとなる吹き出しや記号を入れたりしましょう。

装飾が多すぎても視認性が下がってしまうので、あくまでも読みやすく、アピールポイントがはっきり伝わるように心がけながら調整していくのがポイントです。色の濃淡や配置のバランスを見ながら少しずつアクセントを加えていき、インパクトがある求人バナーに仕上げましょう。

CTAの位置や色を考慮し目立たせる

CTAの位置や色、文字の大きさも効果に直結する重要なポイントです。CTAとは、Call to Actionつまり「行動喚起」のことですが、求人バナーの目的はCTAを増やすことです。そのため、良い求人バナーを作成してもクリックにつながらなければ意味がありません。

具体的には、「詳しくはコチラ！」「資料をダウンロードする」「今すぐチェック」といったコピーを記載します。求人バナーは、単なる画像ではなくクリックするボタンだと認識してもらう必要があります。

画像の上に文字を重ねる場合は、CTAがはっきり見える配置と色を選ぶようにしましょう。場所は上部や下部などに設置することが多く、真ん中のスペースはキャッチコピーやアピール画像に使用するケースが多いです。

おしゃれな求人バナーの参考になるサイト3選

求人バナーの制作時にイメージ画像があると作りやすいでしょう。さまざまなバナーが掲載されている参考サイトを3つ紹介します。

• Pinterest（ピンタレスト）
• Bannnner.com
• バナー工場

Pinterest（ピンタレスト）

「Pinterest（ピンタレスト）」は、まるでコルクボードに写真をピンで留めて集めたように、思い思いの写真や画像が掲載されているサイトです。写真を投稿するだけではなくシェアすることもできます。

旅行先やインテリア、食べ物など、複数のカテゴリーが存在しているため、用途にあわせて写真を検索することができます。気になる写真はブックマークしておけば、あとでまとめて見返すことも可能です。

参考：Pinterest（ピンタレスト）

Bannnner.com

「Bannnner.com」とは、バナー制作者の見本になるような、優れたバナーを集めたバナーデザインのギャラリーです。「Pinterest（ピンタレスト）」が画像全般のまとめサイトだとしたら、「Bannnner.com」はバナー専用のまとめサイトとなります。

なんでも投稿できるわけではなく、ある一定の基準を満たしたバナーしか掲載することができないため、クオリティの高いバナーを見ることができます。

参考：Bannnner.com

バナー広場

「バナー広場」は、14000を超える（2023年8月現在）さまざまな種類のバナーが掲載されている画像のまとめサイトです。サイズやカラーを選択して好みの画像を探すことができ、吹き出しやCTAボタンといった細かな検索軸があることも特徴的です。

人材募集に絞ってサイト検索をすれば、求人バナーの一覧を見ることができるため、制作時の参考になるでしょう。

参考：バナー広場

初心者でも簡単に求人バナーが作れるツール3選

初心者であっても簡単に求人バナーを作ることができるツールを3つ紹介します。デザインのテクニックやバナー制作の経験がなくても分かりやすく触りやすいツールばかりです。それぞれの特徴について解説していきます。

Canva

「Canva」はパソコンだけではなくスマートフォンでも簡単に画像を作成できる編集ソフトです。大量に登録されているサンプル画像を編集することで製作できるため、ある程度完成イメージがしやすいのがポイントです。

また「Canva」はAIが搭載された「Canva AI」という機能も無料で使えます。テキストで画像のイメージを入力するとAIが数パターンの画像を作成してくれるため、簡単にオリジナルバナーを作成できます。

参考：Canva

Adobe無料バナーデザイン作成ツール

「Adobe無料バナーデザイン作成ツール」は、ブログやサイトのヘッダーやサイトにリンクするバナー、広告用のバナーなどを作成できる無料のソフトです。

2000以上のフォントが登録されており、テンプレートも豊富なため誰でも簡単に高クオリティのバナーを作成することができます。

月額1,078円（税込）から、機能面が豊富なプレミアムプランも用意されています。無料プランに物足りなくなってきたらプランアップも可能です。

参考：Adobe無料バナーデザイン作成ツール

バナー工房

「バナー工房」はクラウドベースのオンライン画像加工編集サイトです。サイト上で、「文字入れ」「好きな形で切り取る」「明るくする」など希望の機能を選択し、画像を選ぶだけで簡単に画像を加工できます。

シンプルかつ機能別に分かれており、見やすいサイト構成なので、「ちょっとした加工を手早く済ませたい」という方にもぴったりです。

参考：バナー工房

まとめ

魅力的な求人バナーはコツを押さえれば意外と簡単に作ることができます。本記事を参考に、自社の求人募集に求人バナーを活用してみてはいかがでしょうか？

また、「Timee（タイミー）」ではスキマバイトの募集をしたい企業に役立つ情報をたくさん配信しています。人材不足に悩む企業や、求人バナーを有効的に活用したい企業はぜひお気軽に資料をダウンロードしてみてください。

タイミーのサービス内容が3分でわかるサービス資料のダウンロードはこちら(無料)>>