【自主制作】twitterバナー|イベント開催周知バナー制作
SHElikesのWebデザイン入門コースの課題として、架空イベントのバナー制作を行いました。
要件定義
制作目的 ▶︎ イベント開催の周知、申込みページへの誘導
ターゲット ▶︎
・Webデザイナー歴1~2年の初心者デザイナー
・最近スクールを卒業しWebデザイナーとして働き始めたがまだまだ不安がある方
・フリーランスを目指しており同業の方との繋がりが欲しい方
コンセプト ▶︎
『春・明るく活気ある雰囲気・創作意欲・楽しい』というイメージで制作。
参加者同士のコミュニケーションがメインであることや、参加しやすい雰囲気の伝わるデザインを意識しました。
情報設計
目的設定 ▶︎
・イベント開催の周知、申込みページへの誘導なので、パッと見て何のどんな交流会なのかが理解できるようにしました。
・Twitterは情報の流れが多いので、パッと見てわかるように文字のコントラストや構図を意識。
ターゲット ▶︎
・『Webデザイナー歴1~2年の初心者デザイナー』『最近スクールを卒業しWebデザイナーとして働き始めたがまだまだ不安がある方』に対して➡️“for beginner”を枠や文字装飾を行うことで強調。
・『フリーランスを目指しており同業の方との繋がりが欲しい方』に対して➡️参加者同士の交流がメインであり、繋がりを作るきっかけにしてほしい意図に沿って情報を記載。
グルーピング ▶︎
・交流会タイトル・開催日など各項目の情報を近接させてグループ化することで、読み手に情報が明確に伝わるようにしました。
ビジュアルデザイン
配色 ▶︎
ベースカラー:ホワイト(#ffffff)
メインカラー:ピンク(#f8cec1)
アクセントカラー:グリーン/イエロー(#3d828e/#f8e815)
・写真がカラフルで人も多く写っているので、全体に統一感が出るように写真で使っている配色に近い色(ホワイトやピンク)をベースカラー・メインカラーにしました。
・『春・明るく活気ある雰囲気・創作意欲・楽しい』というイメージで、鮮やかなパステルカラーで華やかで温かい女性らしい配色にしました。
・アクセントカラーで補色を使い、可読性や視認性を意識。
・アクセントカラーは黒ではなくグリーンを使うことで、落ち着きつつも柔らかい雰囲気を表現しました。
・花びらで、春らしさと華やかで活気ある雰囲気を表現。
・色数を絞って全体のまとまりを出しました。
・女性向けの温かい配色と季節感を意識したピンクを多く使用。
・交流会参加に、不安感・不信感を抱かないように優しく落ち着きのあるニュアンスカラーを使いました。
レイアウト ▶︎
・女性らしく、背景の白枠の角を丸くしました。
・春開催なので桜のモチーフでアクセントと季節感を出しました。
・外の余白を上下左右で均等に取るように配置して、視線が情報に集中するように演出。
・硬い感じではなく参加しやすい雰囲気を出すため、『みんなでワイワイ』に吹き出しをつけることで楽しいイメージにしました。
・交流会・開催日・参加費無料という各情報を、それぞれ近接させてグループ化することで読み手に情報が明確に伝わるようにしました。
・参加費“無料”が目立つように点をつけました。
フォント ▶︎
・フォントや構図を極力おしゃれでデザインに興味がある人の目を引くようにしました。
・数字(開催日)や反応しやすい文字(参加費無料)や交流会タイトル強調。(大きく太くする、タイトルにシャドウをつける等)
・開催日の数字を強調して可読性や視認性を上げました。
・for Beginnerの字体を変えて視認性を上げつつ、初心者でも参加しやすい雰囲気を表現。
・『webデザイナー交流会』『for beginner』『開催日』『参加費無料』でジャンプ率を高くすることで優先順位を設けてメリハリや活気ある目立つ構造にすることで、Twitterという情報の流れの多い媒体の中でも目が引くバナーにしました。
・『webデザイナー交流会』を白抜き+ドロップシャドウをつけて視認性や可読性をあげました。
・『for beginner』は飾り枠で目立つように。
・文字は全体的に一文字ずつカーニングして視認性をあげました。(タイトル/開催日/for beginnerの箇所は特に慎重に)
・フォントは2種類以内に抑えて統一感を出しました。
写真 ▶︎
・『メインは参加者同士が交流できること』を伝えたいので、ワイワイと楽しく交流している人たちがよく見えるような構図にしました。
・Twitter掲載なので、大量の情報から一眼で認識してもらえるように、写真に違和感ない程度のトーンカーブをかけて視認性を高くしました。