本サイトは、FANCL公式サイトを模写したWordPress制作です。

デザインをもとに構築を進め、検証ツールのコードを極力参照せずに、自身の考察と再現力を持って実装を行いました。

レスポンシブ対応をはじめ、動的コンテンツの出力やスライダー演出など、閲覧者に撮って快適で魅力的なUI/UXを意識して制作しています。

また、ニュースリリースでは、カテゴリー別の絞り込み検索機能を独自に実装し、ユーザーが目的の情報に素早くアクセスできるよう工夫しています。

使用スキル

・HTML/CSS（Sass構成）/JavaScript

・GSAP/ScrollTrigger（スクロールアニメーションの導入）

・Swiper.js（ビジュアルスライダーの実装）

・WordPress（PHP）（テーマ作成、カスタム投稿、ループ処理）

・レスポンシブ対応（@mediaクエリを用いたスマホ・タブレット最適化）

主な実装機能

・Swiperによるトップビジュアルおよびコンテンツスライダー

・GSAPとScrollTriggerを用いたスクロールアニメーション

・WordPressカスタム投稿タイプ「know-experience」からの動的データ出力

・カテゴリーごとのニュースフィルタリング検索機能

・レスポンシブ対応に伴う画像やテキストの切り替え（.pcView, .spView）

・ハンバーガーメニューと固定ヘッダー制御

・ページトップボタンの影制御とスクロール位置検知

・ユーザーインタラクションを考慮したアニメーションボタンやhover効果