ui components

概要

Web制作で頻出するUIコンポーネントを体系的にまとめたデモサイトです。

ナビゲーション、モーダル、アコーディオンなどのUIを、Vanilla JavaScriptで再利用可能な形に設計・実装しています。単体のパーツとしてだけでなく、一つのWebサイトに組み込むことを前提に構築しています。

制作目的

Web制作で使用されるUIを単発のサンプルで終わらせず、「実際のWebサイトでの運用」を想定した形で統合的に扱えるようにすることを目的に制作しました。

各UIの挙動だけでなく、メニュー開閉・スクロール時のヘッダー制御・モーダル表示など、複数の状態が連動する設計まで含めて整理することで、実装力をポートフォリオとして具体的に示すことを目指しています。

工夫した点

• 複数UIを1サイトに統合して「状態」を整理

  モーダル・ハンバーガーメニュー・ドロップダウン・タブ・アコーディオンなど、同時に存在すると挙動が競合しやすいUIをあえて1ページに集約。 開閉状態やクリック対象の判定などを整理し、UI同士が干渉しない設計を意識しました。

• Intersection Observerでヘッダー挙動を制御

  Intersection Observer API を使い、KVの表示状態に応じてヘッダーを固定表示へ切り替える仕組みを実装しました。 スクロール位置の監視を軽量に行いながら、視認性と操作性が落ちない状態遷移を目指しています。

• GSAPによるアニメーションの付与

  UIの切り替えをただ表示/非表示にせず、GSAPで動きの気持ちよさを追加しました。 “見せるためのアニメーション”ではなく、切り替えの意図が伝わる補助として扱うことを意識しています。

• Splideでスライダーを実装しUIを拡張

  KV内にスライダーを配置し、サイトの第一印象に動きを持たせました。 ライブラリ導入の基本（読み込み・初期化・構造理解）を押さえつつ、ページ内の他UIと共存できる形で組み込んでいます。

学び

単体のUI実装を「動く」だけで終わらせず、複数のUIを同一ページに配置したときに必要になる “状態管理” の考え方を学びました。 具体的には、開閉状態の持ち方、イベントの衝突回避、スクロールや固定ヘッダーなどページ全体の挙動との整合性を取りながら実装する重要性を実感しました。 また、Intersection Observer のようなAPIを使うことで、スクロール位置依存の処理を無理なく整理できることも理解できました。

使用言語 / 使用ツール

• HTML
• CSS
• JavaScript
• GSAP
• Cursor
• Figma
• Intersection Observer API
• Splide