Photoshopのデザインカンプをもとに、ECサイトのコーディング・UI実装を行いました。
TOPページ・商品一覧ページ・商品詳細ページの全3ページを、HTML・CSS・jQueryを使用してコーディングしました。
TOPページには、複数の画像が切り替わるカルーセル（スライダー）を設置。
商品一覧ページでは、複数の商品を見やすく整理して表示するグリッドレイアウトを採用しています。
商品詳細ページでは、サムネイルをクリックするとメインの商品画像が切り替わる機能を実装しました。
また、サイドメニューの「ページリンク」「CATEGORIES」には、クリックによって詳細項目を開閉できるアコーディオンUIを取り入れています。
制作情報
制作範囲：コーディング／UI実装
使用技術：HTML / CSS / jQuery
制作ページ：TOPページ／商品一覧ページ／商品詳細ページ
主な実装内容
- 全3ページのコーディング（HTML・CSS・jQuery）
- サイドバー
- カルーセル（スライダー）
- グリッドレイアウト
- アコーディオンUI
- 商品画像切り替え機能
制作したサイト
カルーセルやアコーディオン、商品画像の切り替えなど、実装した機能を実際に操作してご覧いただけます。
その他のWeb制作・デザイン実績
LP制作、Webデザイン、バナー・SNSクリエイティブなど、その他の制作実績もご紹介しています。
その他の経験・実績
ライティング・Kindle出版・SEO・Web制作など、これまでの経験・実績を、ポートフォリオにまとめています。
Web制作・デザインのご相談
Web制作・デザインに関するご相談・ご依頼は、お気軽にお問い合わせください。