デザイナー、
こいずみ
ゆうか。

スターコンタクト

Banner

2025.03

スターコンタクト 販促バナーのモックアップ画像

春のキャンペーン告知用として、コンタクトレンズ通販サイト「スターコンタクト」様のバナーを制作しました。メルマガに使用されるバナーとして、春らしい爽やかさと清潔感を重視しつつ、商品の価格訴求やキャンペーン内容が一目で伝わるようにレイアウトや配色に工夫を加えています。PCサイズの基本バナー1点をベースに、商品や背景を変更したバリエーション2点と、スマホサイズに最適化したリサイズ版を制作しました。 Web Site : https://starcontacts.net/?srsltid=AfmBOoo-PencidWHyKxTz1D4iNil9g0zaBpH-1N43UZiLncsQ6TgGJLI

スターコンタクト 販促バナー 1枚目のデザイン写真
スターコンタクト 販促バナー 2枚目のデザイン写真
スターコンタクト 販促バナー 3枚目のデザイン写真
スターコンタクト 販促バナー SP 1枚目のデザイン写真
スターコンタクト 販促バナー SP 2枚目のデザイン写真
スターコンタクト 販促バナー SP 3枚目のデザイン写真
サイズ
PC用 : 1020 × 361px
スマホ用 : 550 × 200px
ターゲット
10代から60代までの幅広い年齢層の男女。特に、日常的にコンタクトレンズを使用しているユーザーを想定。
目的
春のタイミングで実施されるキャンペーン情報をユーザーに視覚的に伝え、価格訴求によって購入・リピート購入へつなげること。
レイアウト
左側にキャンペーン情報(見出し・価格・期間など)、右側に商品画像を配置し、視線の流れが自然になるよう構成。商品は全体が見えるように配置し、見やすさと信頼感を演出。スマホ用バナーでは、PC版の構成を保ちながら、情報が詰まりすぎないようバランスを調整しました。
デザイン

配色:春らしさ・清潔感を意識し、淡いブルーやグリーン、白を基調に使用。背景ごとに商品のイメージに合わせたトーンを選定。

フォント処理:主に視認性を重視し、太めのゴシック体を使用。袋文字や縁取り、グラデーション処理で「値下げ」や「限定セール」など強調したい文言を目立たせました。

図形・装飾 : 「5%OFF」などの数字には背景円を加えるなど、視認性を高める工夫を施しました。トーンや配色にも配慮し、補色や強すぎる色の組み合わせは避けることで、洗練された印象に仕上げました。

サイトデザインで使用したカラーコード
制作時間
8時間
使用ツール
Illustrator / Photoshop