△△ inc. (Demo)

架空広告代理店△△ inc.のコーポレートサイトのトップページを想定したデモページを作成しました。
such(齊藤沙耶)のフロントエンド実装力をアピールするためのデモページです。
デザインから実装まで自作し、アニメーション表現やアクセシビリティへの配慮を取り入れています。

GitHubリポジトリ

https://github.com/Saya-such/such-demo1

使用技術

• Framework: Astro v5.10.1
• Language: TypeScript
• Styling: Tailwind CSS v4.1.11 + @tailwindcss/vite
• Animation: GSAP / Swiper / Lenis
• Build / Deploy: GitHub Actions + GitHub Pages

ポイント

• 画像や動画を使わずにできるだけコードのみでアニメーションを表現しました。(ローディング/リロード時や各セクションタイトル等のテキストグラデーション/Heroセクションのスライダー切り替え/キャッチコピーのアニメーションなど)
• ループ処理やメニューの開閉等、不要なメモリの消費を避けるためにGSAPのTimelineやSwiperインスタンスの適切な制御を行なっています。
• アクセシビリティを考慮し、alt属性/aria属性を適切に記述。(メニュー開閉時にaria-expandedの切り替えも行なっています。)
• 構造化マークアップに対応。
• dataに格納してある画像や記事データを更新することで、簡単に使用しているデータの変更が可能。
• 関数型プログラミングを意識し、できるだけコンポーネント内で処理を完結させるような設計。
• CLSを意識し、アニメーションによって高さが変わらないよう気をつけて設計しました。
• モバイル環境でのUIバー表示に対応し、スクロール時の高さ変化やリサイズによるレイアウト崩れを防止しています。
• 関数名の命名規則を決めてある程度統一し、JSDocも丁寧に記載しました。