designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. 安さやチープな印象を強調させるデザインを考えてみる

安さやチープな印象を強調させるデザインを考えてみる

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

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact