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

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

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

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

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

※2021/12/22 メンタリング後の修正バナーを掲載しました。

2021年10月のお題

記念すべき第一回目のお題はこちらです。

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

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

株式会社 百鬼夜行

Cosplay Holic 31 -Haloween Events-

ターゲット

20～40代男女、新規・古参レイヤー

概要・特徴

  1. 主催者はイベント会社
  2. 過去に5回開催済み（コロナで自粛していたなどの情勢は無視した設定です）参加者の7割はガチコスプレイヤー
  3. 今までの開催規模は80人前後。今年は120人以上を目指したい
  4. スポンサーに某化粧品会社が1社ついてる
  5. 10/30（土）22時～ ※アルコールが出るので20歳以上のみ
  6. 会費は5000円
  7. コスプレイヤー向けフォトスポットと食べ飲みエリアがある
  8. 目玉として1人1票コスプレイヤーに投票できる→賞品or賞金がある
  9. 今までの流入経路はオーガニック15%、SNS35%、リピーター30%、その他20%。新規顧客獲得のため、ディスプレイ広告向けのバナーやチラシがいけるのでは？と思っている
  10. LPはどこかに外注（※ここでは無視）

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

夜通しで盛り上がれ！コスプレイベント
Cosplay Holic 31
撮影場所、更衣室、飲食エリアあり！
10/30（土）22:00～翌5:00まで

できる人はこちらのコピー

夜通しで盛り上がれ！コスプレイヤーのためのイベント
Cosplay Holic 31
撮影場所、更衣室、飲食エリアあり！
コスプレ投票イベント（賞品あり）もあるよ！
10/30（土）22:00～翌5:00まで
会費：5000円
主催者：株式会社 百鬼夜行 協賛：MagicCosmetic 株式会社
※アルコールの提供があるため、未成年者は保護者同伴であってもご参加いただけません。

希望イメージ

バナー希望イメージ表
バナー希望イメージ表
  • 複雑 +1
  • カラフル +2
  • 明るい +3
  • 高級感 +2
  • 厳粛間 +1
  • 未来的 +2
  • 性別向け ±0

希望する色

ハロウィンらしい色を使ってほしい。たとえばオレンジ、黒、紫色など。

利用用途

インスタ、Twitter広告などで使用する予定

納品サイズ

Webバナー サイズ800×800

出来上がったみんなの作品

こみゅー公式アカウントがツイートしていますので、こちらのツリーでご確認ください。

制作過程

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

準備

いきなり取り掛かると地獄をみるので、事前準備をしっかりと。

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

レイアウトの方向性

実際に存在するハロウィンバナー、イベントバナーをみながらどういったものにするか考えます。

1番大事な要素はイベント名の「COSPLAY HOLIC 31」
2番目は見る人への呼びかけ文となる「夜通しで盛り上がれ！コスプレイベント」
3番目は開催日時

としました。

※初心者なので短い文言を使用しています。

フォント（印象）の方向性を決める

フォントは「かっこいい」系統のものがいいかなと思いました。

ハロウィンバナー自体がほんわりしたようなものが少なく、ちょっとカッコイイかも…と思わせるものが多かったように思います。

ましてや今回は男女両方。丸文字系は合わないのはわかります。

カラーの方向

クライアント指定もある通り、オレンジ、紫を使っていこうと決めました。色の渋滞にならないように…

書いていたノート

  • ノート1枚目
  • ノート2枚目
書いていたノート

いくつか文字配置パターンを考えましたが、イベント名を目立たせたいとなるとやはり中央配置がいいかなと思いました。
またインスタなどのSNS広告を眺めていたら、一番伝えたいもの、目立たせたいものが上にあるものが多いように思いました。下にスクロールして一番に出てくるのは上の部分だから、そこで目に留まるようにさせるためでしょうか。

…と考えました。

今回は使用目的がSNSとあるので、メインの文字を上に持ってくるように作ってみました。

素材を探す

コスプレ内容の先入観がないほうが良いかも、と考えたので、今回はハロウィンにありそうなシルエット素材を使うことにしました。ノートにもその旨書いてありますね。
この時点でいくつか選択しておきました。

実践

今回は写真素材を使わないのもあり、illustratorで制作してみました。

文字の配置を決める

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

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

配置が決まったらフォントを設定してバランスを見てみて、文字詰めをしてみたり離してみたり…。

使用フォント制作しながら検討した結果、英文字のイベント名は「Orbe Pro」、その他日本語は「FOT-キアロ Std B」を採用しました。

ちょっとした情報、「撮影場所、更衣室、飲食エリアあり」の文字位置に悩んでいます。どこに配置したものか…

色と素材を配置していく

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

ハロウィンで夜イベントだから紫色をメインカラーに。

ハロウィンといえば夜のイメージで月が出ていることも多いので月と雲を入れる。これはイラレで自作しました。

最後にハロウィン仕様の画像を配置して…

制作途中

なんか違う。

全体的に暗いし、ちっとも楽しそうなイベントに見えません。

小情報の「撮影場所、更衣室、飲食エリアあり」の場所が迷子になっている。これは場所が悪いのかな。

ハロウィンかぼちゃでオレンジを入れようと思って決めたイラスト素材が完全に浮いている。シルエットと合っていない。

暗いのは紫色が全面ベースになっているから、いっそハロウィンかぼちゃもシルエットにしたほうが良いのでは…？

背景の紫色とシルエットの黒が重なっていて認識し辛いですね。

再考-やり直し

ということでリスタート。

文字の配置からやり直します。

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

小情報を上に持ってきました。

ここから採用画像をシルエットのみにして配置し直していくと…

完成品

2021年10月ハロウィンバナーのお題作成

このようになりました。

文字色は初期と変えていません。

初期の夜空が暗くて楽しそうに見えなかった、シルエットの黒と被ってしまっている問題があったので、中間でグラデーションをオレンジ色に切り替えるようにしました。
こうすることでシルエットも目立つし、「夜から明け方までのイベント」のイメージが出せたかなと思っています。

個人的には大人のイベントだとわかるような高級感を出したかったです…けれどうまく出せませんでした。どうしたらよかったんだろう。きらきらさせる？それも違うか…？

こみゅーの仲間からのコメント

提出後、以下のようなコメントをいただきました。

小情報のところは実は最後まで迷子でした。開催日時の下でもいいかなと本人思いましたが、悩んであの位置に…でもここだけ迷子感が抜けていない。ご指摘いただいた通りの位置にすればもっと良かったかなと思います。何よりそちらのほうが情報がまとまっていたようにみえたかも。

…ここから添削を受けるとどう変わるのだろう？

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

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

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

メンタリング後、修正したハロウィンバナー

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

  1. バナーは文字を中心に据えて考える
  2. 大人感を出したいのでフォントはゴシックよりも明朝が良さそう（イベント名以外を明朝系統に変更）
  3. 画像そのものにメリハリをつけると良い
  4. お酒が出るイベントなので、お酒のイラスト等あった方がわかりやすくて良さそう
  5. 画像は重ねない
  6. （このシルエットの場合は）画像にぼかし効果を入れるとちょっと高級感が上がる
  7. 文字はドロップシャドウかオーバーレイで影を付けると見やすくなる（イベント名に黒のドロップシャドウを追加して黄色文字でもちょっと見やすくなった）

文字を中心にしてイベント名をどーんと大きくしたら画像が入らなくなって、コスプレしている人の画像は1枚だけになっちゃいましたね。これもありかな。
開催日時を別枠取って下に入れたら随分わかりやすくなった印象です。エリア分けができて丁度いい感じにみえます。