バナー制作01_webデザイン交流会

OVERVIEW

<初めてのバナー制作> イベント開催の周知、申し込みページへの誘導のバナー制作

YEAR 2022

(サムネイルは修正後のバナー)

==================================

<情報設計で工夫したこと>

・twitterでの投稿のため、タイトル、日時(とくに日付)、

 参加費は一見で目に入るようにした 

・必要な要素は左側にまとめ、上から順に目に入るようにした 

・ターゲットの記載内容をまとめ各項目ごとに右側に記載した

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<デザインで工夫したこと(配色、フォント、写真など)>


・デザイン全体: 

 -「繋がり=輪」というイメージがあるため円を使用。

  -円を使うので、全体的に馴染むように仕切りも波形にした。

  -方向性イメージ、指定カラーより、ピンクをメインカラーに。 


・タイトル:

  -このデザイン内で1番大きいフォントサイズを使用。

  -「交流」に目がいくよう背景に白マル(塗り)を配置。

  -誰のための交流会かを伝えるために「for beginner」に円を添わせ、

   交流会も込みで囲めるように、白マル(縁)を配置。


 ・開催日時:

  web、for beginnerにローマ字を使用していることから

  日時の記載も「.」で区切り、曜日もローマ字を使用して統一感を出した。

  ただ、統一しすぎるとメリハリがなくなるので、日時のみ太字にした。

  また、それだけではタイトルとのメリハリがなくなるので

  上記(交流会)同様、背景に白マル(塗り)を配置。


 ・「みんなでわいわい」の文言:

  申し込みページに"誘う"ように「わいわいしよう!」と伝えるために文言を追加した。

 全体的にフワッとした印象に仕上げる予定だったので

  追加文言は「しませんか」にし、言葉自体も柔らかくした。

  また、1番の推し(参加者同士の交流)の文言なので、

 アクセントカラーを使用した。(真っ黒にはせず、ベースカラーの明度を落とした)


 ・「参加費無料」:

  推しの1つでもあるので、文言自体に背景を付けて引き立たせた。

  ただ、1番の推しではないので、タイトルなどで使用した

  イメージカラーとベースカラーを使用した。


 ・写真:

  ①優先度が「開催情報>写真」だと思った

  ②みんなでわいわい、交流なのでなるべく大人数入れたかった

  上記2点から、5人全員使用しながらも人間を画面の半分以下にするために

  写真を斜めにして配置した。


 ・ターゲットの内容:

  -写真内の人間が5人と少し少なく感じ、

   さらにこの配置の仕方だと、人と人との余白が広く感じたので、

   適度に余白を埋めるように記載しようと考えた。

  -この内容は伝えたい優先度は高くないので、必要要素とは分けて配置し、

   文字に関しても他と比較し小さく細いサイズにした。

   ターゲットの内容としてまとまりを持たせるため、

   白マル(塗り)にピンクマル(フチ)を使用した。

  -この中でも優先順位が有り、「繋がり>不安解消>フリーランス」

   で伝えるべきかと思ったので、画面中央から順に配置した。

   ただ、フリーランスだけ文言が長く目立ってしまうため

   各円内の余白のばらつきは気になったが、繋がりの円も大きくし

   かつ「左の必要要素枠」と「繋がり」が”繋がる”ように白マル(フチ)を配置した。

   さらに、白マル(塗り)の色も5%ずつ透過度を変化させた。

  -「フリーランスの円」は日時の4(リボンの端も同位置)と

   交流会の背景にある白マル(塗り)の位置を意識し、

 見えない長方形があるように配置した。


 ・右側端2つの白マル(フチ):

  フリーランスを目立たせまいとしすぎて、逆にそっけなく周りと浮いていたので

  近くに白マル(フチ)を配置。

  上記を全て配置させた後、右上の余白が多すぎてバランスが悪かったので

  白マル(フチ)を追加。

==================================

【修正点】

・誤字脱字(開催日時)

・メインタイトル 10~15%大きく(携帯で見るバナーのため)

・装飾が人に被らないように(写真の視認性を上げるため)

【修正後】

【修正前】