【世界観別バナーデザイン】ポップなデザインを作るための3つの要素

公開日 : 2024.06.07 最終更新日 : 2024.08.21

弊社、株式会社アンドエイチエー (AndHA inc.) では、デザインチームX (旧Twitter) アカウントを運用しており、その中で大変多くの好評をいただいている【世界観別バナーデザイン】のシリーズ。

本記事ではその中の「ポップなデザインのバナーをつくるための3つの要素」の投稿について、より掘り下げて解説します。

3つの要素

【世界観別バナーデザイン】シリーズでは主に、3つの軸を大切要素として紹介しており、今回のポップなデザインのバナーでは「COLOR」「FONT」「DECORATION」の3が肝になります。

まずは１つ目、COLOR -色- です。

色は彩度､明度を高めで弾けるような明るさでまとめてみましょう。色数が多いと若年層向け､少ないと中高年層向けと調整できます。強調したいところは色の濃淡でメリハリを出すと良いでしょう。

2つ目は、FONT -書体- です。

太めで元気のある書体が雰囲気作りに役立ちます｡ゴシック体寄りになりますが､線に動きがある書体だとポップさが際立ちます｡タイトルや見出しに使う際は1文字ずつ大きさや角度を変えると更に動きが出ます｡文字を1画ごとに分解して塗り分ける作字なども効果的。

3つ目は、DECORATION -装飾- です。

90年代のデジタルっぽい幾何学模様や、アメコミの装飾などで使われる網点(ハーフトーン)などであしらうと雰囲気が出ます。シンプルな水玉模様でも配色をカラフルにするとポップさが出ます。テーマに沿ったモチーフや全体のバランス見てサイズ感を整えましょう。

次に、この3つの要素を踏まえて作成したサンプルデザインをもとに解説します。

こちらの作例は架空ですが、VTubeにはロゴのデザインがあることが多く、そのロゴやアバターに使われている色を軸にそろえるとまとまりが出ます。

彩度は揃えて色数を増やすと賑やかになり、色相環で離れた色を使うと更に賑やかになります。太文字の中に網点で色をつけるとアメコミのようなポップさが出ます。点の大小でグラデーションっぽくなりますが色設定もグラデーションにすることで厚みが増します。

見出しは文字ごとにサイズ差や角度をつけることで動きを出すことでポップな雰囲気を出すことができます。本文や日程など見せるべき情報は動きをつけると読みにくいこともあるので色や書体を揃えるくらいにするとまとまります。

1つ目の作例のVtuverやこちらの動物はAdobe Fireflyで作成したAIイラストです。

Adobe Fireflyで作成しただけだとまだ違和感のあるイラストになるので、Photoshopで一部描き足したり切り抜いたりと調整して使用しています。0から作成するよりはかなりの時間が削減できると思います。

いかがでしょうか。
本記事の3つの要素を参考に、ポップなデザインのバナーをぜひ作ってみてください！

今後もデザインチームX (旧Twitter) アカウントで【世界観別バナーデザイン】シリーズを展開していきますので、ぜひフォローをよろしくお願いします！

X(Twitter)：株式会社AndHA デザインチーム

Tweets by AndHA_design

シリーズ記事紹介：大人向けデザインを作る3つの要素

また、過去にはこのシリーズの深堀り解説として『ガーリーデザインを作る3つの要素』も記事にしています。こちらもぜひ！

ガーリーデザインのための3つの要素とは？作例つきで深掘り解説！

https://and-ha.com/design/3pointdesign_otona/