事務スタッフ専門の派遣社員募集バナー

こんにちは、yuriです。

今回、ヒカルさんから教えていただくバナー作成のレッスンが、第13回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン13にて公開されています✨

今回のバナーの目的　事務スタッフ専門の派遣社員募集

ターゲット　女性・30代

雰囲気　シンプル

サイズ　300px x 250px

画像　事務職の女性

配色　ピンク、イエロー

文言

（必須）

・未経験歓迎

・残業なし

・日給1.5万円

・応募はこちら

・事務スタッフの転職はJIMUJIMU7

今回、ブラッシュアップをして頂いたバナーの前に、私が作成したバナーがこちらになります。

作った後に、自分で足した文言、「事務職デビューしませんか？」が、女性が募集する側に見えてしまって適切ではなかったと反省しました。

ヒカルさんにこのバナーを見て頂いたときに、指示書の「ターゲット　女性・30代」や、「雰囲気　シンプル」を踏襲できていないことをご指摘いただきました。

私は作っている中で、参考にしたバナーの雰囲気を目指してしまい、指示書の内容を見失っていました。

もしこれが実際の案件だったとしたら、発注したものと違うものを作ったこととなり、案が通りません。なので、まずしっかりと指示書の内容を理解して、わからない点があった時は、質問や相談するようにと教えていただきました。

これからは、まず指示書をしっかり読むようにしていきます！

もう一度この課題のバナーにチャレンジさせていただき、ブラッシュアップしていただきました。

左の画像（スマホ画面では上）が、私が作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップをしてくださったものになります。

指示書のターゲット属性や「雰囲気シンプル」を意識しました。

そして募集するにあたり、おすすめのポイントの内容を伝わりやすくするためにアイコンをおき、強調するために黄色の下線をしきました。反省点は、文言へ視線誘導をしたいため、女性の写真のインパクトを減らすような加工がしたかったのですができなかった点でした。

ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっていたのでそれを参考に「ブラッシュアップの流れ」を書かせていただきました。

Twitter

外部サイト

https://twitter.com/design_hikaru/status/1249487518925328384?s=20

ブラッシュアップの流れ

左側が窮屈なので人物を切り抜いて重ねる（斜めのアクセントは良い感じなので使用する）
人物のトリミングは腕組を見せるようにし、目線の高さをコピーの近くへ置くことにより視線誘導する
黒文字が続いており縦の余白も広めでバラけて少し目が散る → アイコンまで下線を伸ばして縦の余白は詰めてまとめる
アイコンはピンクにしてリズムを付ける
社名と、その下の文言で、黒文字が続いており目が泳ぐ →下に帯を敷いてレイアウトを分けてみる、ボタンと違うリズムを作るため帯を薄めのピンク、文字を濃いピンクにする
ボタンのみ視認性が低めなのでコントラストを高く調整する（色・大きさを調整する）
枠の色は、薄めのピンクにする

メリハリをつけることが大切など、頭では理解しているつもりになっていましたが、まだそれを実際に作成したものに反映する力が足りないことに、気付かせていただきました。

私は参考にしたバナーデザインの要素を、そのまま使用することに留まっていて、ヒカルさんのように全体を見て、自分で考えて作成していく力が足りません。

気持ちは良く分かるけど、止めた方が良いデザインワークフロー2選。

➀すぐ手を動かす×
　├まずは指示書や原稿を読む
　└答えは指示書や原稿にある

➁参考を探して真似る×
　├まずは自分の頭で考える
　└特に配色は曇なき目で見定める

僕もそうだったし気持ちは分かる。
日頃の鍛錬が大切大切。

— カトウヒカル@1on1レッスン (@design_hikaru) April 6, 2020