並盛のブログの人気コンテンツのひとつ、『バナーお題』。
簡単な約束を守っていただければ、自由に使っていただいてOK！
- ポートフォリオ掲載OK！
- 架空案件とわかるように公開
- #並盛デザインお題 をつけてポストする
- →並盛が喜びます
お題の記事はこちら👇
この記事のお題を使ってバナーを制作し、その過程を記事にしています。
今回はシリーズ第3弾。
これまでのシリーズはこちらから👇
自分の学びの振り返りや記録に、と考えて始まった企画ですが、
誰かの制作フローってあまり見ないですよね？
デザイナーの思考プロセスの公開は、初心者さんの制作にもかなり役立ちます。
今、バナー制作を学んでいる皆さんは、
ご自身の制作過程も記録してみてくださいね！
- 3人子育て中のママ
- 元飲食店勤務
- 未経験からwebデザインスクールを受講
- 卒業後はブログ運営とデザインの学びをコツコツ継続
- 末っ子が幼稚園に行ったら本格始動
- モチベーションの維持と時間術が得意です！
バナーデザイン練習！今回のお題は蚤の市イベントバナー
| 概要 | バナー設置場所：自サイトブログ ターゲット：30〜50代のファミリー・雑貨好き 目的：地域イベント集客・周知 イメージ：賑やか、明るい、レトロポップ バナーサイズ：336px×280px |
| テキスト | メインコピー：「秋の蚤の市 in Sapporo」 サブ：「古道具＆フード出店多数」 期間：10/20（日） 10:00〜16:00 CTA：「詳細を見る」 主催：サッポロマルシェ実行委員会 |
| 与えたい印象 | ファミリー向けに賑やかで楽しい雰囲気。 |
| 画像 | 蚤の市の出店内容や雰囲気が伝わるもの |
| 色指定 | 低彩度にまとめてください |
自サイトブログのサイドメニューに掲載する、イベント周知のバナー。
ファミリー層に向けて、楽しそうな雰囲気を伝えるのと
レトロポップにまとめるのがポイントだね。
まずは情報整理から
今回もCanvaを使って製作します。
お題から情報を書き出して、
優先順位がわかるように配置。
ポイントは３つです。
- 何のバナーか？
- イベントなので、日付が大事
- 詳細ページへ誘導したい
主題の「蚤の市」を大きく
縦の視線誘導で途中にしっかりと開催日を配置
最終的にCTAに誘導する構図です。
スワイプ、スクロールされる中で、
ユーザーが情報をストレスなくキャッチできる構図を心掛けました。
イメージを具現化する
実案件では、実際に出店する店舗情報や写真を掲載するといいですね。
今回は、課題なので写真ではなくイラストを使います。
レトロな雰囲気の水彩風イラスト素材を配置。
個人的にすごく好きなデザインです。
「水彩 イラスト レトロ マルシェ」
などのワードで素材を検索すると出てきます。
柔らかな雰囲気で、ファミリー向けなのが◎。
ですがこれだけではさみしいので、
背景と配色、フォントで工夫しましょう。
背景の工夫でクオリティup！
マルシェの賑やかな雰囲気を追加するために、
ストライプの要素を追加します。
また、メインのフォントはレトロ感を演出する「しっぽり明朝」を採用。
その他のコピーには「Rounded M+」を採用し、やわらかく親しみのある印象に。
情報の密度を上げるために、場所の情報を追加しました。
カラーは秋の紅葉をイメージした赤系にしましたが、
ちょっと強くて浮いています。
全体を調整して完成
角の丸みや、あしらい、カラーの調整をして完成です。
CTAは、地味にグラデーションをかけています。
これにより、ほんのり立体感をつけて、
推したくなるボタンデザインに！
全体のカラーの彩度を整えて、一体感のあるデザインに！
ガーランドや、点線、スポットマークなど、最低限のあしらいで
情報を整理しています。
💡素材のランダム配置の7つのコツ
今回の例バナーでは、雑貨・食べ物・紙モチーフなど
複数ジャンルのアイテムをちりばめて、ナチュラルで可愛い世界観を作っています。
しかし「ランダム」と言いつつ、実はしっかり規則があります。
以下では、デザイン初心者さんが真似できる形でコツをまとめました。
① まず主役の円を作り、周りに置いていく
中央に大きな円を配置し、
テキストはすべてその中に収めています。
この主役となるエリア（円・四角・帯など）を決めておくことで、
素材配置がブレず、散らかって見えるのを防げます。
- 真ん中→情報の核
- 周囲→世界観を盛る装飾素材
✅ この構造が「ランダムなのに整って見える」理由。
② 左上・右上 → 大 → 中 → 小のサイズで散らす
素材を適当に置くのではなく、
大きい素材 → 中くらい → 小物の順で配置するとバランスが取りやすくなります。
作例のバナーでは…
- 左上⌇大きな花
- 右上⌇コーヒーやパンなど中くらいのモチーフ
- 下⌇小さめのクマや手紙類
視線の動きに合わせて滑らかに動きが生まれ、
リズム感が出るので自然にまとまって見えます。
③ 素材のジャンルは左右どちらかに寄せる
ランダムに置くと、どうしても「ごちゃごちゃ」になりがちです。
そんな時は、似ている素材を片側に寄せるとスッキリします。
作例バナーでは…
- 左側⌇アンティーク系（花・時計・食器）
- 右側⌇紙もの・フード・雑貨
ジャンルを“緩く”まとめることで、
世界観は統一しつつランダム感もキープできます！
④ 素材の角度は3〜5度だけ回転させる
写真や切り抜き素材をまっすぐ置くと不自然なので、
ほんの少し角度をつけるのがポイント。
- 左右どちらかに 3〜5°傾ける
- 角度を付けすぎない（10°以上はカオス感が強くなる）
今回のバナーも、
紙ものやカップ、食器をほんの少し斜めに傾けることで、
自然なワクワク感を演出しています。
⑤ 透過素材は“重ねすぎない”
ランダム配置では、素材同士を重ねたくなるけれど、
重ねすぎると一気に雑然と見えるので注意。
コツは…
- 重ねるのは最大2層まで
- 素材は少し距離を空けて“余白”を残す
- メイン円との距離は一定にする
作例バナーは、すべての素材が一定距離を保って円を囲むように配置することで、
余白による統一感を作っています。
⑥ ジャンルミックスは3種類まで
雑貨・フード・紙もの・花など、
世界観を広げるために素材を混ぜたくなるけれど…
テーマに対して3ジャンルまでが安定します。
作例バナーでは、
- 花・アンティーク雑貨
- フード
- 玩具系素材
の3カテゴリで構成されています。
これ以上増やすとチグハグ感が出るので要注意。
⑦ 最後に“右下を軽くする”
右下は視線が溜まりやすい位置。
ここに大きな素材を置くと、デザイン全体が重く見えます。
作例バナーでは右下に…
- 小さめのクマ
- 細いベビーカー
といった軽量素材を置くことで、
視線の抜けが生まれ、全体をスッとまとめています。
ランダム配置のコツまとめ
素材のランダム配置は「世界観を出す」「親しみやすくする」など
メリットが大きい手法です。
しかし実際は、
①主役エリアを固める → ②サイズ階層 → ③軽いジャンル分け → ④角度微調整 → ⑤余白管理
という“計算されたランダム”で成り立っています。
このコツを押さえれば、
どんなテイストでも統一感のあるランダム配置ができるようになります。
ランダム配置のコツを押さえて、
SNSの投稿にも使える、目に留まるデザインになりました。
イベント運営者さん、SNS担当者の方、バナーのデザインや投稿デザインにお困りでしたらお声がけください。まずは相談だけでも、お気軽にどうぞ⋆｡°✩₊˚
蚤の市イベントバナー制作フローまとめ
今回のバナー制作ポイントは3つ。
- 上から下へ視線誘導
- 中心核を置いて素材をランダム配置
- ほんのりレトロ感のあるフォントと配色
とくに、ランダムな素材の配置のコツは、
様々なデザイン制作において応用の効くポイントなので、
しっかりモノにしてくださいね𓂃𓈒𓏸⋆
それでは、オリジナルの制作を楽しんでください～！
コメント