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

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

※2022/1/31 メンタリング後の修正バナーを掲載しました。

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」、その他は「游ゴシック」を使用しています）。

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

完成品

このようになりました。

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

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

完成品改

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

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

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

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

追記：メンタリング後、修正したバナー

ミューズアカデミーでデザインメンタリングを受けた後、上記バナーを修正しました。

メンタリングで、はじめに作ったものは

• 前回のものは「空の背景」に引っ張られた印象
• 左右に展開することで情報が散らばってしまっている
• 空中にいきなり人が出てくるのは不自然
• 小さいバナーなので左右に情報を散らさないほうが良い
• 468×60の場合は「入れるべき情報を入れたらほぼ終わり」
• 凝ったことはやらない（目立たない）

でした。

気を付けたポイントはざっと以下の通りです。

• 先に大きい画像を作ってみて配置をイメージし、それを小さく配置し直した
• 2枚あった画像を1枚のみ、男性にした（女性画像でもいいと思う）
• 背景を単色ではなくどこかの光あふれる室内イメージの背景をぼかしてそれとわからなくしたものを入れた
• ベベルとエンボスなど、凝った加工は封印

実際のバナー作成では複数サイズを作ることが多いそうです。同じ内容のバナーを適切な場所に適切なサイズで出すことも多いでしょうし、考えてみればあり得る話ですね。

今回のような極端に小さいバナーの場合（＝よくあるサイズ外の場合）は一度大きいサイズのものを作成し、それを元に配置し直すと作りやすいそうです。

それに倣って、400×300サイズのものを作ってから、468×60サイズにしてみました。

こちらでは「時給2000円」を吹き出しにしていましたが、468×60サイズでは吹き出し入れるところが非常に難しかったのでやめました。

あとお兄さんの向きが左右対称になっています。
横長バナーだったら左から右の視点移動で「詳細はこちら」が最後に来るのが自然かなと思いました。

おまけ：背景単色バージョン

背景単色、サイズが大きいと地味なのが目立ちます。単色背景でも見劣りしない方法を身に着けていきたいですね。