05

ARCHITECTURE · PORTFOLIO

湾アーキテクツWAN ARCHITECTS

カテゴリ

建築 / Portfolio

技術

HTML / CSS / JS

地図

Leaflet.js

ステータス

LIVE

概要

神奈川・湘南エリアを拠点とする架空の建築設計事務所「湾アーキテクツ」のポートフォリオサイト。6作品を掲載し、各作品の5段階プロセス（敷地調査→コンセプト→設計→施工→竣工）をタイムライン形式で可視化しています。

最も作り込んだ作品。スクロールアニメーション・インタラクティブマップ・シネマティックツアーの3つのUX機能を実装しました。

こだわり

  • Leaflet.js + CartoDB タイルで6作品の所在地マップ
  • シネマティックツアー（5フレーム自動再生 + requestAnimationFrame）
  • IntersectionObserver によるスクロールリビール
  • 各作品に個別詳細ページ（計6ページ）
  • 作品画像はすべて gpt-image-2 で生成（Python スクリプト運用）
サイトを見る → ← Works に戻る