Twitterバナー制作

OVERVIEW

ShelikesのWebデザイン入門コースで演習課題として初めて架空のバナーを制作しました。

YEAR 2021

◯要件

目的▶︎イベント開催の周知、申し込みページへの誘導

ターゲット▶︎Webデザイナー歴1年から2年の初心者デザイナー。最近スクールを卒業し、Webデザイナーとして働き始めたがまだまだ不安がある方。フリーランスを目指しており、同業の方との繋がりが欲しい方。

方向性イメージ▶︎女性向けで暖かいイメージ

指定カラー▶︎温かみが伝わるピンク系、オレンジ系などの暖色

伝えたいこと▶︎トークセッションもあるがメインは参加者同士で交流ができること


◯制作したバナー

修正前

◯工夫したところ

  • 伝えたいことの優先順位を意識し、タイトルを大きくしました。境界線と下線をつけることでさらに視認性が上がるようにしました。
  • ベースカラー、メインカラー、アクセントカラーを意識し、4色でまとめました。文字色は黒ではなく紺を使い、強い印象にならないようにしました。
  • 参加者同士が交流している雰囲気が伝わる写真を選びました。
  • ペルソナを意識し、曲線を多く用いて全体的に柔らかい雰囲気になるよう心がけました。


修正後

◯修正したところ

  • 左側のテキストエリアの余白

みんなでわいわいの上部に比べ、参加費無料の下の余白が狭くなっている、左側も少しあいておりますが、右側が少し窮屈な印象というフィードバックを受け、上下左右の余白を均等にしました。

  • 「みんなでわいわい」のテキストの境界線

文字が小さい場合やフォントが細い場合は、境界線が濃いと、文字が潰れてしまっているように見え、視認性が低くなってしまうとのことで境界線を無くしました。


◯制作を通して学んだこと

  • 見る側の立場になることの重要性

実際に制作したバナーをスマホで見た時に、余白の不均等と、「みんなでわいわい」の視認性の悪さに気づきました。


  • 要件やペルソナに沿って情報の設計すること

バナー制作の目的を理解し、ペルソナに合わせてデザインするというデザインの基本を学ぶことができました。一目見て、交流会の告知だと伝わるよう常に意識しながらデザインしました。