(サムネイルは修正後のバナー)
==================================
<情報設計で工夫したこと>
・twitterでの投稿のため、タイトル、日時(とくに日付)、
参加費は一見で目に入るようにした
・必要な要素は左側にまとめ、上から順に目に入るようにした
・ターゲットの記載内容をまとめ各項目ごとに右側に記載した
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<デザインで工夫したこと(配色、フォント、写真など)>
・デザイン全体:
-「繋がり=輪」というイメージがあるため円を使用。
-円を使うので、全体的に馴染むように仕切りも波形にした。
-方向性イメージ、指定カラーより、ピンクをメインカラーに。
・タイトル:
-このデザイン内で1番大きいフォントサイズを使用。
-「交流」に目がいくよう背景に白マル(塗り)を配置。
-誰のための交流会かを伝えるために「for beginner」に円を添わせ、
交流会も込みで囲めるように、白マル(縁)を配置。
・開催日時:
web、for beginnerにローマ字を使用していることから
日時の記載も「.」で区切り、曜日もローマ字を使用して統一感を出した。
ただ、統一しすぎるとメリハリがなくなるので、日時のみ太字にした。
また、それだけではタイトルとのメリハリがなくなるので
上記(交流会)同様、背景に白マル(塗り)を配置。
・「みんなでわいわい」の文言:
申し込みページに"誘う"ように「わいわいしよう!」と伝えるために文言を追加した。
全体的にフワッとした印象に仕上げる予定だったので
追加文言は「しませんか」にし、言葉自体も柔らかくした。
また、1番の推し(参加者同士の交流)の文言なので、
アクセントカラーを使用した。(真っ黒にはせず、ベースカラーの明度を落とした)
・「参加費無料」:
推しの1つでもあるので、文言自体に背景を付けて引き立たせた。
ただ、1番の推しではないので、タイトルなどで使用した
イメージカラーとベースカラーを使用した。
・写真:
①優先度が「開催情報>写真」だと思った
②みんなでわいわい、交流なのでなるべく大人数入れたかった
上記2点から、5人全員使用しながらも人間を画面の半分以下にするために
写真を斜めにして配置した。
・ターゲットの内容:
-写真内の人間が5人と少し少なく感じ、
さらにこの配置の仕方だと、人と人との余白が広く感じたので、
適度に余白を埋めるように記載しようと考えた。
-この内容は伝えたい優先度は高くないので、必要要素とは分けて配置し、
文字に関しても他と比較し小さく細いサイズにした。
ターゲットの内容としてまとまりを持たせるため、
白マル(塗り)にピンクマル(フチ)を使用した。
-この中でも優先順位が有り、「繋がり>不安解消>フリーランス」
で伝えるべきかと思ったので、画面中央から順に配置した。
ただ、フリーランスだけ文言が長く目立ってしまうため
各円内の余白のばらつきは気になったが、繋がりの円も大きくし
かつ「左の必要要素枠」と「繋がり」が”繋がる”ように白マル(フチ)を配置した。
さらに、白マル(塗り)の色も5%ずつ透過度を変化させた。
-「フリーランスの円」は日時の4(リボンの端も同位置)と
交流会の背景にある白マル(塗り)の位置を意識し、
見えない長方形があるように配置した。
・右側端2つの白マル(フチ):
フリーランスを目立たせまいとしすぎて、逆にそっけなく周りと浮いていたので
近くに白マル(フチ)を配置。
上記を全て配置させた後、右上の余白が多すぎてバランスが悪かったので
白マル(フチ)を追加。
==================================
【修正点】
・誤字脱字(開催日時)
・メインタイトル 10~15%大きく(携帯で見るバナーのため)
・装飾が人に被らないように(写真の視認性を上げるため)
【修正後】
【修正前】