leaf design lab

概要

架空のWeb制作会社「Leaf Design Lab」のコーポレートサイトとして、デザインからコーディング実装までを個人で制作しました。

Web制作の現場で頻出するUI（モーダル / ハンバーガーメニュー / ドロップダウン / タブメニュー / アコーディオン / スライダー）を1つのサイト内にまとめ、 “実装できるUIの引き出し” を可視化した作品です。

制作目的

オンラインスクールHello Mentorの課題で学習した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