担当させていただいたHP内で、商品紹介ページへ遷移するためのバナーを作りました。
目次
デザインコンセプト
商品紹介ページへ遷移する導線作成のため、どのような商品が売っているのか、イメージ画像とサイト全体の雰囲気に合わせたアースカラーのバナーを作成しました。デバイスにそれぞれに対応したレイアウトとして作成しています。UI/UXを意識しました。
製作期間
1日
デスクトップ用バナー
![](http://aqua27spes.com/wp-content/uploads/2024/06/banner_pc-2-1024x213-2.png)
こちらはデスクトップ用です。文で商品を囲うデザインであたたかみを出しています。HP全体の雰囲気を壊さないデザインとなりました。
![](https://aqua27spes.com/wp-content/uploads/2024/06/03cbdbaf48671205167fd76339bb97d0-1-1024x592.png)
レスポンシブデザイン用バナー
![](https://aqua27spes.com/wp-content/uploads/2024/06/banner_sp-1-3.png)
スマホレイアウト用のバナーです。スマホで見た際、デスクトップ用バナーは表示されなように切り替えています。今回苦慮したポイントは、デスクトップ用バナーに記載した文言をレスポンシブライクにした際配置に困るなという部分でした。「特別なひとときをあなたに。」は、文字色を白くして商品に若干被らせてワンポイントにしました。
使用ソフト
Illustrator
作成したHPについてはこちら
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](http://aqua27spes.com/wp-content/uploads/2024/04/eyechach-300x158.jpg)
よもぎをメインとしたハンドメイド商品、個人販売のHP
よもぎクッション「りょく」 https://ryokunomori.com 【デザインコンセプト】 よもぎを使ったハンドメイドの商品を取り扱っている、温かみのあるデザイン。よもぎ色を...