【架空】バナー制作｜Twitter

｜目次｜

1.目的

2.制作物

3.意識したところ

4.学んだこと

-------------------------------------------------------------------------------

１.要件

（※架空の要件設定です）

■目的

　イベント開催の周知・申し込みページへの誘導

■ターゲット

　・webデザイナー歴1~2年の初心者デザイナー

　・スクールを卒業しデザイナーとして働き始めたが、まだ不安がある方

　・フリーランスが目標の為、同業者との繋がりが欲しい方

■掲載場所

　・Twitter

■入れたい要素

<文言>

　・webデザイナー交流会 for Beginner
　・みんなでわいわい
　・開催日：4月10日(火) 19:30-21:30
　・参加費無料

<制作要件>

　推移先：申し込みページ
　方向性イメージ：女性向けで温かいイメージ
　指定カラー：温かみが伝わるピンク系、オレンジ系などの暖色
　伝えたいこと：トークセッションもあるが、メインは参加者同士の交流であること
　画像：指定の画像とその他フリー素材等

----------------------------------------------------------------------------------

２.制作物

-------------------------------------------------------------------------------

３.工夫したこと

▼ユーザーの目に留まる情報設計（優先順位）

・基本のZの法則に合わせて、文章と日付の部分とカテゴリ分けがわかるようにまとめることとそれぞれの配置については揃えるを意識して作成しました。
・SNSでスクロールしながらでも見つけてもらえるように、大きさなども意識しながら、枠に詰め込みすぎないように、余白を意識しました。

▼ターゲットに合わせた配色

・要件に合わせて使用するカラーは暖色系のピンク（コーラルやシェル系）でまとめました。
・やわらかい印象を持たせたかったので情報を配置する部分の背景をべた塗りではなく、2つ四角形を使用し、コーラルのグラデーションと写真の色味に合う淡いブルーをぼかしで重ねて、写真もグラデーションの部分からなめらかになるように彩度を少し下げて調整しました。

▼視認性を意識した文字情報の配置

情報の内容もジャンプ率を意識してフォントサイズを調整しながらも、小さめのフォントにもしっかり目がいくように主張しすぎない程度のあしらいを使用したり、"webデザイナー交流会"の部分も文字の境界線を使用し、同じ色味でもしっかり見れるよう、視認性を意識して作成しました。

▼期間限定を意識したバナーの雰囲気

この夏だけの期間限定キャンペーンを訴求したいバナーなので、ひとめで夏ということがわかるよう淡めな水色カラーとストライプ、スイカやパラソルのイラストで夏感を演出しました。

４.制作を通して学んだこと

▼視認性

・文字のサイズ感など、実際にSPで見て見やすいかを都度確認していく必要があると感じました。

・色味など、重なる部分はぼんやりとしていないか、はっきりと見えるかどうかを制作しながら試行錯誤することが多くありました。

▼文字間の調整

テキスト一文字一文字のカーニングなど微調整で印象やバランスが大きく変わってくることなどを実感しました。

【制作概要】制作期間：3日（情報収集→制作→ブラッシュアップ）

【制作範囲】バナー制作1枚