デザインの考え方からレイアウトまで！バナー制作のナレッジまとめ🎁
こんにちは、ファインディでコミュニケーションデザイナーをしているナカム〜（@ynakamuuuu）です！
この記事はファインディデザインチーム Advent Calendar 2024の19日目の記事です🎄🎅<hohoho〜🎵
今年のテーマは「事業貢献に関して気づいたこと」というテーマです！
今年はデザインチームが事業貢献をしていくと決めて走り抜けた1年目となります。その中で気づいたことなどを発信していければと思います。
ファインディデザインチーム Advent Calendar 2024より
ファインディに2024年7月に入社し、まもなく半年が過ぎようとしています🏃♀️2ヶ月前に公開したnoteでもご紹介しましたが、DevRel専任デザイナーとして多くのイベントバナーを制作する日々です！
（入社３ヶ月間で制作したクリエイティブまとめnoteはこちら👇）
日々イベントバナー制作をする中で、私なりのナレッジが少しずつ溜まってきましたので、みなさんにも共有したくnoteにまとめてみました✍️
こんな考え方もあるんだ〜と一例として見ていただき、ご自身がデザインする際の発想の起点になったら幸いです！
どこを目立たせる？優先順位のつけ方
まずはイベントの訴求ポイントを知る
最も訴求したいポイントが登壇者や所属会社なのか、それともイベント内容なのかでレイアウトは大きく変わってきます。まずはイベント企画者とのコミュニケーションを通して、一番の訴求ポイントを知る事が大切です☝️
企画者の意思を汲み取った上で、それぞれの訴求ポイントごとにレイアウトで気をつけている点をご紹介します。
訴求ポイントが登壇者の場合
登壇者の顔写真やアイコン、氏名を大きく分かりやすく配置。タイトルや日時は視認性を保ちつつ、ほんの少し🤏控えめに配置する事を意識しました。
実際にデザインしたバナーがこちら👇
こちらのイベントは開催前ですので、ご興味がある方はぜひご参加ください✨
訴求ポイントがプロダクトや登壇企業の場合
企業名やロゴが一番目に入る様にレイアウト。ロゴの配色や企業のブランドイメージを、デザイン全体にも盛り込りこむことを意識しました。
実際にデザインしたバナーがこちら👇
訴求ポイントがイベント内容の場合
イベントのタイトルの優先度を上げて、視認性の高いフォントを使用。タイトルが読みやすく頭に入ってきやすいレイアウトを意識しました。
実際にデザインしたバナーはこちら👇
ここまではイベントバナーの設計についてお伝えしましたが、次はテーマごとの表現についてです。視覚化するのが難しいテーマについてどのようにデザインを制作するのか深ぼってご紹介します☝️
どう表現する？視覚化が難しいテーマ
ファインディではエンジニア向けのイベントを月に10回以上開催しています。イベントの多くが技術や概念をテーマにしており、視覚化するのがなかなか難しい場合が多いです。（ファインディ主催のイベントはこちら！）
そんな中でも、テーマが難しいときの考え方やデザインアプローチについて気づきがあったので、具体例を交えて一部をご紹介していきます！
ステップを踏んでデザインを考える
視覚化が難しいテーマをどのように形にしていくか、ステップを踏んで紹介します☝️ステップに加えて、表現に迷った時は社内のエンジニアにヒアリングをしながら制作を進めることも多いです。
STEP1 : 類似テーマの事例をPinterestなどでリサーチ
よく使われる表現や色などを理解する
表現の被りを回避するため、他社の類似事例を知る
いいと思ったデザインを発想の元にする
STEP2 : テーマに関連したワードで画像検索や素材サイトで検索したり、AIと壁打ちをする
抽象〜具象まで使用できそうな表現を幅広く探す
STEP3 : STEP1と2を合体してデザインする
集めた資料をアートボードの横に置きながら、要素を組み合わせてバナーを制作していきます
テーマごとの実例紹介
テーマ「セキュリティ」
セキュリティは抽象的な概念のため、可視化が難しいテーマだと個人的に思います。セキュリティ自体やそこから得られる効果をどう表現するか、私も頭を悩ませがちです😭
STEP1~2を経てデザインに反映したポイント💡
セキュリティを表現するカラーは青〜エメラルドグリーン系が多い
盾、チェックマーク、鍵などのモチーフがよく使用されている
「守っている」感を出すシールドのようなやや抽象的な表現もよく使う
実際のバナーがこちら👇
テーマ「QA」
QAも具体的なイメージをつけるのが難しいと、個人的に思うテーマの一つです。QAの品質やクリーンなイメージの表現をデザインに落とし込むのに試行錯誤しました、、
STEP1~2を経てデザインに反映したポイント💡
QAのクリーンなイメージを表現する整然としたデザインが多い
全体的に青〜緑などのクリーンなイメージの配色
バグを連想させない、秩序のあるビジュアル
実際のバナーがこちら👇
テーマに限らず、「これはどうビジュアル化する…？」となった時にはSTEP1〜3を実践するとなんとなく道筋が見えてくる事が多いです。後は1〜3で集めた要素をどう組み合わせるのか、ひたすら試行錯誤します✏️
さいごに
視覚化が難しいテーマに直面したとき、レイアウトで訴求ポイントの見せ方に迷ったときに参考になりそうなナレッジ（当たり前に実践されている方も多いと思いますが🫣）のご紹介でした！
少しでもnoteを読んでくださったみなさんの手助けになったら嬉しいです。
（また、ナレッジをドキュメント化したもう一つの目的は、属人化しがちな知識を社内デザインチーム、依頼者の事業部にも共有したいという思いもありました）
ナレッジ共有を通じて、これからもデザイン生産性の向上に努めたいと思います✊
ファインディではデザインを通じて事業貢献をしたいデザイナーを絶賛募集中です！
もし記事を読んで興味を持たれた方はお気軽にDMまたはカジュアル面談でお話ししましょう！⛄️🎅🎄
おまけ🎁
今年のアドベントカレンダー のサムネデザインを担当しました✌️デザインチーム、エンジニアチームでデザインは共通の色違いで制作しています〜！
（エンジニアチームのアドベントカレンダーはこちら）
ファインディらしくコードで描いた風のクリスマスのイラストを入れ、エンジニア用のサムネは開発画面を意識した配色にした点がポイントです☝️
🎅<良ければサムネも注目してね〜🎄✨