| 制作期間 | 画像、素材準備 1.5時間 デザイン構想 3時間 コーディング 15時間 |
|---|---|
| 使用ソフト等 | HTML CSS jQuery Photoshop |
| ペルソナ | 30代の女性 |
| サブターゲット | 服が好きな方 |
| キーメッセージ | 私のスタイルは私が決める。 |
| サイトのこだわり | 「人の目を気にせず着たい服を着る」を伝える企業。 服を際立たせるため、サイトのデザインはシンプルに。 簡素になりすぎないように、jQueryのスライダー使用や、 背景が動くCSSなど、サイトに動きを追加。 |
Rankingアイテムにアイテムページのリンクを紐付け、
すぐに欲しいアイテムにアクセスできるように設定。
3つ全て同じ高さにせず、ずらすことでデザイン性を高めるように工夫。
Rankingアイテムにアイテムページのリンクを紐付け、 すぐに欲しいアイテムにアクセスできるように設定。
3つ全て同じ高さにせず、ずらすことでデザイン性を高めるように工夫。
アイテムリストには、オートで動くスライダーを導入。
グリッド配置にはせず、スライダーで動かすことによって、
全アイテム満遍なく、目を止めてもらえるように工夫。
ボタンはホバー時の色の切り替えを背景色、
文字色を反転することで、
色の統一感を出し、
スタイリッシュな印象へ。
アイテムリストには、オートで動くスライダーを導入。 グリッド配置にはせず、スライダーで動かすことによって、 全アイテム満遍なく、目を止めてもらえるように工夫。
ボタンはホバー時の色の切り替えを背景色、 文字色を反転することで、 色の統一感を出し、 スタイリッシュな印象へ。
購入までのステップが分かりやすいよう、シンプルなデザインに。
jQueryを用いて、小さいアイテム画像をクリックすると、
アイテム名、価格が変更するように設定。
気になるアイテムを保存するための「♡」アイコンと、
カート内のアイテムを確認できるカートアイコンを設置。
購入までのステップが分かりやすいよう、シンプルなデザインに。
jQueryを用いて、小さいアイテム画像をクリックすると、 アイテム名、価格が変更するように設定。
気になるアイテムを保存するための「♡」アイコンと、 カート内のアイテムを確認できるカートアイコンを設置。
スクロールと共に３枚の画像が切り替わり、
メッセージが上から流れるように設定。
スクロールと共に３枚の画像が切り替わり、 メッセージが上から流れるように設定。
jQuery学習後初めて作ったサイトです。
様々なプラグインがありますが、シンプルなサイトに仕上げたかったため、
動きは控えめにしました。
商品詳細ページのアイテム名と価格の変更をjQueryのクリックイベントで
設定しましたが、コードの作成に時間を要しました。
このコーディングを経て、jQueryの理解が深まりました。