【自主制作】ECサイトバナー｜サイトモール全体のセール告知バナー

要件定義

制作目的 ▶︎ モール全体のセールを告知して、購買数を増加させること
ターゲット ▶︎ ECサイトユーザーの30-40代女性
コンセプト ▶︎
モール全体のセール告知なので、特定の商品写真の掲載はしない。
文字や配色、あしらいだけで興味関心や購買意欲が増すようなデザインにする。
一瞬で目を惹き、お得感やワクワク感を感じてもらえる女性が好みそうな配色やフォントを意識したデザイン。
掲載場所▶︎
ファッション・インテリア・食品など幅広く扱うECサイトモールのトップページ

情報設計

目的設定 ▶︎
セールをアピールして興味を持ってもらうことや購入してもらうことが目的なので、一眼でワクワクできるお得なイベントであることが理解できるように配色やあしらいを工夫しました。
テキストだけで目を惹くデザインにするため、文字周辺に余白を取ることで情報を整理して文字が引き立つようにした。
情報の整理・近接を意識して配置することで視認性の高いデザインにしました。
文字だけでバナーにワクワク感・存在感を出すため、奥行きのあるあしらいを意識しました。
文字情報だけでも飽きないデザインにするため、隙間を感じさせず纏まりを演出しました。グルーピングを意識して意図的に文字をぎゅっと詰めることで、可読性の高いデザインにまとめました。

ターゲット ▶︎
普段からECサイトに見慣れている30-40代女性でも興味を抱くような、ワクワク感やお得感を感じるデザインにしました。
ECサイトやセールに慣れている人でも、一眼で『おっ』と思うような可読性の高さを意識して情報を整列させ、あしらいやコピーを配置しました。

ビジュアルデザイン

配色 ▶︎

ベースカラー: ベージュ
メインカラー：グリーン
アクセントカラー： ブルー/ネイビー
レイアウト ▶︎
文字周囲には余白を多く設けたり、各要素が見やすいように近接・整列して各情報を配置することで、可読性の高いデザインにしました。
優先順位を決めて、優先度の高い情報は目につきやすい中央に、大きく配置しました。
フォント ▶︎
文字情報だけでも隙間を感じさせないために、安定感のある可読性の高いフォントを使用しました。
商品数が多く情報量が多い中でも興味を惹かれるように“90%”を強調しました。
一眼で理解しやすい視認性の高いフォントを使用しました。
情報の優先順位に応じてフォントの大きさを変更したり装飾のように使用しました。
あしらい ▶︎
背景にテクスチャやパターンなどの飾りを入れることで、文字情報だけでも飽きないデザインに仕上げました。
さまざまなテクスチャを使用することで、楽しげな雰囲気を演出し、読者にワクワクしてもらえるイベントであることを実感してもらいやすく設計しました。
パターンやシャドウを入れることでデザインに奥行きが出て、視認性の高くしました。
テクスチャを２種類以上入れながらも、配色を統一することでデザイン全体に纏まりを出しました。
セール情報が伝わりやすいようにシンプルなデザインにしつつも、飽きないようにパターンやテクスチャを使用しました。
柔らかい雰囲気を意識して、丸みを帯びた女性が好みやすいデザインにしました。

制作物

３点 ▶︎ 

※以下２点トレース