❑目次❑
1.概要
2.制作物
3.要件定義
4.情報設計
5.ビジュアルデザイン
6.頑張ったポイント／学んだこと
1.概要
制作範囲 ：情報設計、ワイヤーフレーム、デザイン
使用ツール：Photoshop
2.制作物
3.要件定義
掲載場所
ファッション、インテリア、食品など幅広く扱うECサイトのトップページ
目的
ECサイト全体のセールを告知する
ターゲット
ECサイトのユーザー（30〜40代の女性）
入れる文章
ファイナルセール MAX90%OFF
デザインの方向性
・文字だけでお得感やワクワク感を伝える
・さまざまな商品があるため、特定の商品だけを感じさせるのはNG
・色やフォントの指定はなし
4.情報設計
- 「90％OFF」は訴求効果が高いと考えました。特に数字の部分は大きな訴求ポイントになるため、大きさを大きくして目を引くようにしました。「文字だけでお得感やワクワク感を伝える」という方向性に合わせ、単調にならないようにジャンプ率は高くしました。
- 文字だけという縛りがあり、文字をただ並べるだけだと無駄な空白が目立ち、雑多な印象になると考えました。それを避けるため、四角形の中にテキストが収まるような文字組みにしました。
5.ビジュアルデザイン
配色
- ベースカラーは、女性がターゲットであるため、女性向けでよく使われる暖色を用いました。30代〜40代という年齢層から、若い印象になりすぎないよう、明度はやや低めにしました。また、「特定の商品だけを感じさせるのはNG」「さまざまな商品がある」ことから連想し、単色ではなく２色のグラデーションにしました。
- アクセントカラーは、明度が低めのベースカラーの上で目立つように、明度・彩度ともに高い色を使用しました。
背景の装飾
- 文字だけでワクワク感を伝えるために、「SALE」というテキストを敷き詰めて情報量を増やし、楽しげな雰囲気をプラスしました。
6.頑張ったポイント／学んだこと
頑張ったポイント
文字だけでワクワク感を出すために、背景をグラデーションにする、文字を敷き詰めるなどの工夫をしました。
制作を通して学んだこと
文字だけのバナーを制作する際、のっぺりした単調な印象にならないよう、文字組みや背景を工夫することがポイントだと学びました。