本作品は、デザイン性と機能性を併せ持つ家電ブランド「アラジン」の公式サイトを参考に、模写制作を行なったものです。

トップビジュアルの印象的な演出や、製品画像・カラー切替・スライダー・スクロールアニメーションなどの動きに注目し、ユーザーが視覚的に楽しみながら情報にアクセスできるよう工夫しました。

HTML/CSS/JavaScriptを使用し、Swiperを用いたスライダー機能や、スクロールアニメーションを実装しています。

また、レスポンシブ対応により、PC・スマートフォン両方で快適に閲覧できる構成を意識しました。

使用スキル

・HTML/CSS/JavaScript

・Swiper.js（スライダープラグイン）

・レスポンシブ対応（メディアクエリ）

・DOM操作/クラスの切り替えによるUI制御

・WordPressによるカスタム投稿（NEWS記事）の一覧表示構築

主な実装機能

・製品画像のスライダー（Swiper.js）

・カラー切り替え機能付き製品ビュー

・トップビューや各セクションでのスクロールアニメーション演出

・レスポンシブレイアウトによるスマホ・タブレット対応

・ナビゲーションバーの固定表示（スクロール連動）

・ページ全体のビジュアルと印象を再現するための配色・レイアウト設計

・WordPressを使用しカテゴリーボタンによる絞り込み（ソート）機能の実装