【SHElikes課題】架空案件バナー

要件、素材は提供され、ビジュアルデザインを制作しました。

●要件定義

〈 テーマ 〉　「WEBデザイナー交流会」イベント参加訴求バナー

〈 サイズ 〉 横1280px × 縦 670 px / PNG　

〈 提供素材 〉バナーに使用している文言、訴求内容に沿った画像数枚

〈 トンマナ 〉可愛すぎず、大人スタイリッシュなイメージ。「ここなら仲間が見つかるかも」と思ってもらえるような柔らかい雰囲気。

〈 フォント 〉日本語は視認性がよいヒラギノ角ゴPro、英数字はFuturaを使用し強調させた。また、「Let's Meet up!」はSignPainterというフォントを使用しました。

〈 その他 〉　ターゲットはWEBデザイナーの女性、同業のつながりを作って交流を深めたい方、オフラインイベントなので集合場所に集合できる方。

●情報設計

• 参加を訴求するバナーであるため、情報の優先順位を①「Webデザイナー交流会」②「一緒に頑張る仲間を見つけよう」③開催日時、開催場所　④参加費無料としました
• アイキャッチとして参加費無料を左上部に設置しました
• 参加を訴求するバナーであるため、「一緒に頑張る仲間を見つけよう」「Webデザイナー交流会」をアイキャッチからの視線動線上に、バナー下部に日付、場所に関する情報を設置しました
• 「一緒い頑張る仲間を見つけよう」という一言から女性２人が作業している画像を使用しました

［配色］

●デザインのポイント

［配色］
・「可愛すぎず、大人スタイリッシュなイメージ」とのことだったため、女性らしいかつ落ち着いた印象のあるくすんだピンクをベースカラーに使用しました
・アイキャッチや訴求したい文章にはくすんだグリーンを使用し、全体の中で目立つように配色しました
・「同業のつながりを作って交流を深めたい方」と要件定義されていたので、「仲間」という単語にアクセントカラーでレッドを使用し1文の中で強調しました
・開催日時・場所についてはそこまで情報の優先順位が高くないと考え、フォントカラーは白にし、全体のデザインのバランスを意識しました

［ フォント ]

・「Webデザイナー交流会」参加訴求バナーであったため、「Webデザイナー交流会」を全体1番のフォントサイズにし、その他は情報の優先順位に合わせて調整しました
・「参加費」は読まなくても「無料」という意味が伝わるのでフォント比率を下げてバランスを整えました
・「Tue」も日付があれば読む必要のない情報だと考え、フォント比率を下げました
・開催場所はお店の名前だけで集合できると考え、その他の「中目黒〜」のフォント比率を下げました

［あしらい］
・背景に歪んだ円を配置し、女性らしくわ柔らかいイメージを表現しました
・「参加費無料」はターゲットがWebデザイナーであるため、リボンのようなあしらいを使用しました
・「一緒に頑張る仲間を見つけよう」「Webデザイナー交流会」は視認性を上げるために透過性を下げた白のボックスを設置しました
・線は全体のトンマナを意識し、太すぎず、細すぎない幅で統一しました

［画像］
・元の写真が少し暗めだったので、明るさや色調を調整し、明るく楽しげな雰囲気を意識しました

●課題を通して学んだこと

• 要件定義に合わせて情報設計、配色、全体のデザインの決め方を学びました
• 画像の色調調整の仕方を学びました
• 自分が使用したいフォントのダウンロードの仕方を学びました

●頑張ったポイント

• Webデザイナー向けのバナーだったので、配色やフォント選びに力を入れました。
• 配色に関しては、「可愛すぎず、大人スタイリッシュなイメージ」との要件であった為、女性らしいピンクでも落ち着いた印象のくすみピンクを使用しました。ベースカラーがピンク系なので、締め色で最初「紺色」でイメージしていたのですが、締め色が強すぎた為試行錯誤の結果同じくすみカラーのグリーンを採用しました。
• 要件定義からずれないようにフォントサイズは悩みました。情報の優先度が高い順にフォントサイズを決めていったのですが、優先度が1番低い情報のフォントサイズに苦戦しました。小さすぎず、大きすぎず。最終的に文字のジャンプ率、視認性を意識し現在のサイズになりました

●課題の感想

　今回の課題では、指定されたサイズのバナーに情報設計どおりに要素を配置するのに苦戦しました。情報設計やデザインは割とすぐ浮かんだのですが、実際に配置してみるとイメージと乖離しており、リサーチを重ねながら試行錯誤しました。リサーチの重要性を痛感しました。
　その他にもフォントサイズや配色なども提出直前まで悩み、制作に時間がかかってしまいましたが、完成した時は達成感を感じられました。