▼sampleのsliderタブ
https://mog147.github.io/slider/
使用ソフト:Photoshop
制作期間:1日
サイズ:W1280 x H440px
使用フォント:AB-kirigirisu/VDL ギガ丸
ターゲット層:20-40代ペットを飼っている男女※指定
-----
【駆け出しデザイナー応援】デザインお題 #32 バナー「ペットショップサイトのバナー」
https://note.com/mifu_sensei/n/n8f56b676c528?magazine_key=m528dbedee3d1
お題内容
・ペットショップWebサイトトップページ最上部のスライダーに掲載するバナーを4つ作成
①新着ペットアイテムの紹介:
②アウトレットセール:
③健康的な食事アイテムの提案:
④ペットコスプレコンテスト告知:
デザインへの要望
・フォントはペットショップのカジュアルな印象を出すために手書きフォントを散りばめるが
使いすぎない。
・子どもっぽいキュートなデザインは希望ではない。
・サイズはW1280 x H440px
・PCでは2カラム、モバイルでは1カラムでスライドさせる
-----
使用した配色:
BとDはイベントのため華やかさを意識しました。
AとCは商品紹介なのでナチュラルな配色にしました。
Aキャッチコピーの勢ぞろいに合うようカラフルにしてみました。
アクセントカラー:商品のカラフルさを邪魔しないくすみブルー(#7fb5c2)
Bコスプレイベントということでハロウィンを想定して作成しました。
アクセントカラー:ハロウィンカラーの紫(#382b69)/ かぼちゃのオレンジ(#f08700)
Cセールなので指定の写真(犬)に使われていたオレンジを利用して暖色でセール感を出しました。
アクセントカラー:指定の写真に使われていたオレンジ(#e27447)
D健康をイメージする明るいグリーンを基調にしました。
アクセントカラー:明るい爽やかなグリーン(#aaca74)/ 犬の毛をイメージさせるベージュ(#d3985a)
・A→B→C→Dとバナーが流れることを想定して作成しました。商品→イベントと交互にながれることでナチュラルな商品紹介とイベントと華やかさで絵替わりが単調にならないようにしました。
・フォントをそろえて統一感を出しました。
・一度配色を統一して作成してみましたが、単調なイメージになってしまったのでバナーごとに変化を付けました。
・A:勢ぞろいのごとくこちゃっとした感じに配置してみました。単調にならないよう大きさや角度を変えて変化を付けました
・B:コスプレということでプロマイド写真風にしあしらいはハロウィンを意識して作成しました。
・C:健康的な犬を採用し、すっきりしたヘルシーなデザインを心がけました。
・D:斜めの線で%のイメージや割引の割る感じを表現しています。不透明度を変えてリズムを付けました。