バナーWebデザイン勉強会
投稿日 : 2021年12月22日

バナー制作過程の記録-2021年11月-

バナー制作過程の記録-2021年11月-の画像

「プログラムもいいけど、デザインもできたらもっと仕事の幅が広がるのではないか」―。
そう考えて、2021年5月からWebデザイナーの勉強を始めました。
元々少し気になっていた分野でもあるので、大変なことが多くても頑張りたい。
ここではWebデザイン関連の学習中に学んだことを「自分の視点でまとめたもの」を掲載します。

オンラインサロン「こみゅー」のバナー部で「同じお題でバナーを作成する」活動がスタートしました。
同じお題でもかなり違ったものが出てきます。
提出された作品を見て、また自分のものにコメントをいただいて、とても勉強になります。

2021年11月のお題

今回のお題はこちらです。

※ここに出てくる団体名やイベント名、内容、日時など、すべて架空のものです。

クライアント・イベント名

株式会社NANDEMO

福祉系&医療系派遣会社

求人募集用バナー

ターゲット

30~50代男女

ビジネス

概要・特徴

事業拡大のための求人募集です(会社の内容は福祉系&医療系派遣会社なので、その派遣に登録する人への求人)

中に入れる文言やキャッチコピー

医療系&福祉系でお仕事するなら
NANDEMO
時給2,000円~
詳細はこちら

希望イメージ

バナー希望イメージ表
  • シンプル +3
  • 単色 +2
  • 明るい +1
  • 日常 +3
  • 厳粛間&遊び心 ±0
  • 未来的&伝統的 ±0
  • 性別向け ±0

希望する色

会社のイメージカラーは必ず使ってください。オレンジ色です。

利用用途

求人募集用

自社サイト、転職サイト、その他ネット広告などに使用予定

納品サイズ

Webバナー サイズ480×60px

制作過程

ここからは私の作ったバナーとその制作過程です。

準備

いつものように準備します。

使用ツール、サービスなど

  • photoshop
  • 写真AC
  • 自分で撮った写真

レイアウトの方向性

実際に存在する医療系、福祉系のバナーを眺めながら考えます。

1番大事な要素は会社名の「NANDEMO」
2番目はキャッチコピーの「医療系&福祉系でお仕事するなら」
3番目は時給

としました。

派遣登録を促す求人募集なので、実際に登録した後は「どこそこから派遣したら、サイトも見やすくて使いやすかったしスタッフさんも優しくてよかったよ」となると思います。
そうなると「どこそこから」がとても重要になってくると思ったので、会社名を1番大事な要素としました。

普段、誰かから「〇〇〇(会社名)のエージェントさん、とてもよかったよ」と聞くと、その会社が頭に残りませんか?

フォント(印象)の方向性を決める

男女両方なので、フォントは「明朝」と「ゴシック」系統のもの、場所によって両方を使いわけるのがいいかなと思いました。

凝ったフォントは今回は対象外です。

カラーの方向

医療系、福祉系バナーを眺めていたら「空」が多く出てくることに気づきました。さわやかなイメージで青、空になるのかなと思います。

背景を空にし、文字色にオレンジ、または白を入れていこうと決めました。

書いていたノート

書いていたノート

いくつか文字配置パターンを考えましたが、横長なので左右に写真を置いて中央に文字要素が良いかなと考えました。男女両方なので男女の写真を左右に入れたら伝わりそう、と。

それからフォントのサイズ感を出すとちょっと協調されるかもしれない。よく漢字は少し大きく、ひらがなは少し小さく、などやりますね。金額の数字だけ大きくするなど。

…と考えました。

素材を探す

介護、福祉、医療のお仕事をしていそうな男女の写真を探しました。

男女が同じような服を着て仕事をしているイメージ写真があったので、こちらを採用することにしました。

「同じような服を着て」る男女の写真は意外と少なかったので、女性のみの画像になってしまうかも…とひやひやしました。その場合は画像を左か右のどちらかによせて、とやったかもしれませんね。

同じ場所で撮影されたのかなと思われる写真素材でも男性は医者系、女性は看護師系が多かったように感じます。

背景の空は自分で撮影しました。とてもいい天気でしたね。

実践

今回は写真素材を使うので、photoshopを選択しました。

文字の配置を決める

文字の配置とフォントを決めた状態

まずは白黒で配置を決めます。

配置が決まったらフォントを設定してバランスを見て、文字の大きさや詰めを試していきます。

今回のバナーは前回よりも縦幅が小さいので、どうまとめたものかととても悩みました。

色と素材を配置していく

決めた色と選んだ素材を入れていきます。

背景の空の画像を入れて、位置を調整する。意外と撮影したての写真は大きく、このサイズのバナーに当てはめると本当に一部しか入らないのだなと思いました。

背景が青なので、目立たせたいポイントをオレンジ色に。

色を決めて配置していくとどうも文字が近すぎるようだったので、グループ分けしてぎりぎりまで離す。

また、色を付けたり文字を小さくしているとつぶれて読みにくくなってしまうものが出てきました。試行錯誤の末、「游ゴシック」にたどり着きました(フォントは社名のみ「Georgia」、その他は「游ゴシック」を使用しています)。

左右に入れる写真の背景をマスクして削除し、必要なところだけを切り取りました。細かいところはすごく難しかったです。きれいにできたとは言えませんが…
写真も元のサイズが大きいので縮小すると結構粗が目立ちました。スマートオブジェクトにすると拡大、縮小を繰り返しても劣化せずに済むのですね。

完成品

2021年11月求人バナーのお題作成

このようになりました。

オレンジ枠はなくてもいいかなと思ったのですが、バナーによっては枠をつけて目立たせているものもあったこと、バナー全体の割合でオレンジ色が少なかったことからつけました。

そして…、完成した後でも文字色が少し見にくいなと思っていました。どうしたものかと。

完成品改

2021年11月求人バナーのお題作成改

文字エリアの背景に、空と同じような白の透過背景を入れました。

こみゅーで制作された他の方のバナーを拝見して、「そうか、エリアで色分けすればよかったのか」と気づいた次第です。

写真を左右のどちらかに寄せるでもよかったのか、背景をオレンジ系統、文字を青色にすればよかったのか…完成してからも色々悩む結果になりました。

正方形のバナーと比べて横長は難しいなと感じました。

来月のお題作成もやって、スキルアップをかけていきたいです。