安さやチープな印象を強調させるデザインを考えてみる
最終更新日: Update!!
ECサイトやキャンペーンページのバナーなどで広告デザインをするときに、とにかく激安な印象とチープな雰囲気を求められることがあったりします。なんとなくアイデアは浮かび上がってくるものの、どこか抽象的で細かい部分はイメージしにくいのではないでしょうか。しかし、スーパーや電化製品店などの広告チラシでよくあるような、とにかく購買欲をそそるような、お得感が伝わるデザインにはいくつかの特徴や傾向が見られます。そこで今回は安さやチープな印象を強調させるデザインをのアプローチを考えてみたいと思います。
(こちらの記事もどうぞ)
ネガティブな印象を与えるデザイン表現を考えてみる
まず、激安感やチープな印象を与えるにはどのような要素が必要になるかを洗い出してみます。求められる状況によって様々ですが、大体は下記に当てはまるのが多いのではないでしょうか。
1. 強いインパクト
2. 高い視認性
3. 金額や数値を伝わりやすく
4. ポップでカジュアルな印象
デザインによって安さやチープな雰囲気を表現する上でこれらの要素はとても重要になってきます。見た目の雰囲気以外にも、キャッチコピーや金額や数値から伝わる情報も重要度で言うと大きなウエイトを占めます。では実際に安さやチープな印象を与えるデザインを各ステップごとのアプローチを例に見ていきます。
今回はこちらのイメージをベースに、安さやチープな印象を強調させるデザインに変えていきたいと思います。この段階では、割引金額の具体的な情報はあるものの、全体的にコントラストが弱く、配色もくすんだシックなものになっているため、インパクトもなく特に安さという印象は伝わってきません。
今回は安さやチープな印象を強調させるデザインのアプローチについて考えてみました。一見抽象的ではっきりとしたイメージが湧きにくいようなデザインですが、表現するのに必要な要素を分解して、その要素に合うアプローチを選択することで想定しているイメージに近づけることができます。激安を訴求する場面ではぜひ試してみてはいかがでしょうか。

書体や文字サイズとウエイトを調整する
まず最初にテコ入れをするのはタイポグラフィの部分です。まずは書体を変更します。細字の明朝体で構成されているコピーを、太字のゴシック体に変えてみます。合わせて伝えたい情報の優先度に合わせて文字サイズとウエイトを調整していき、メリハリをつけていきます。必要に合わせてトラッキングやカーニング、またベースラインシフトも調整しておきます。文字を変えるだけでもかなり訴求は上がりますね、タイポグラフィの重要性に改めて気付かされます。
金額や数値周りの調整
続いて、金額や数値周りのテキストを調整していきます。安さを訴求する場面では、金額や割引率などの数値部分を具体的に表示させるため特に細かく調整を重ねていきます。個人的には下記のポイントを意識して取り組んでいます。 ・「円」「¥」「%」といった単位は数字の部分より小さくなるように設定 ・金額を表す場合には、区切りのコンマも入れておき、文字サイズは小さくバランスをとる ・数値部分は時間を詰めておく ・さらに強調したい場合には斜体を使い、他の部分と区別するようにする
コピーが伝わりやすいレイアウト
バナーなどのイメージではコピーテキスト以外にも写真などのビジュアルも含まれますが、安さを訴求する場面においては写真よりもコピーテキストの優先度が高くなります。写真では安さを伝えることが難しいからですね。文字を調整してからも今ひとつ訴求やインパクトが弱い場合には、思い切ってコピーテキストがよく見えるようにレイアウトを調整してみるのも良いアイデアです。今回は最初のレイアウトから大きく変えることでコピー部分の収まりが良くなり、さらに目立たせることができました。写真は少し見切れるようになりましたが、コピーを目立たせる方を優先します。
コントラストが強い目立つ配色に
ここまでの変化でもかなり訴求力は変わってきましたが、色味がそのままではまだまだ想定しているイメージには程遠いです。続いては配色を変えて、より目立つ色味でコントラストを上げていきます。使う色味は、できるだけ原色に近い色や彩度が高い色を使い、かつ暖色系でまとめるとよりインパクトが出ます。膨張色であるメリットを活かしていきましょう。背景色と文字色が交わる部分はコントラストの比率が高くなるように設定します。やはり色が変わるとイメージに近づいていきますね。
コピー周りの装飾
タイポグラフィ、レイアウト、配色と調整しベースは出来上がっている状態ですが、まだ装飾が足らないのでどこかソリッドな見た目になっています。今回のデザインの主役はコピーテキストになるので、最低限テキスト周りの装飾は施しておきたいですね。テキストの装飾については過去記事(ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#3(アウトライン・シャドウ・グロー効果))などをぜひご参考ください。効果的なのは境界線を足して袋文字にしたり、ソリッドなシャドウをつけて立体感を表現することで訴求が強くなります。視認性が弱くなる箇所には背景用の矩形を足して効果的に見やすくなるよう調整していきます。これで大方完成してきました。
チープでポップな雰囲気を表現
よりデザイン的に作り込んだものにするためには、もっと派手な感じをプラスしていきます。ここでは下記のアプローチを例としてあげています。ポップで楽しい雰囲気になるよう、装飾を加えていきます。 ・ポップ書体、丸文字、または力強い筆文字などの書体に変える ・背景パターン、テクスチャで賑やかさを演出 ・紙吹雪やクラッカーなどのデザイン素材で特別感をプラス 最終的にはここまで変わりました。パッと見て金額部分に目がいくのと、お得感を感じさせるインパクトのあるデザインに仕上がりました。最初のものと比較すると違いがよくわかりますね。
今回は安さやチープな印象を強調させるデザインのアプローチについて考えてみました。一見抽象的ではっきりとしたイメージが湧きにくいようなデザインですが、表現するのに必要な要素を分解して、その要素に合うアプローチを選択することで想定しているイメージに近づけることができます。激安を訴求する場面ではぜひ試してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories