Technology

使用技術そのものが、このページの演出になる

アイコンと説明文を並べるのではなく、各技術要素自体を使ってこのページを演出しています。Three.js・GSAP・Canvasのカードは、その技術で描いた小さなビジュアルを添えています。

使用技術一覧

• React / Next.js

  App Routerで全ページを構築

• TypeScript

  全ファイルを型安全に実装

• Framer Motion

  マイクロインタラクションの演出

• GSAP

  ScrollTriggerで文字単位の演出

• Canvas

  Productページのインタラクティブデモ

• Three.js

  TOPヒーローの3Dオブジェクト

• API連携

  ダミーAPIのFetch・エラーハンドリング

• CMS想定設計

  型 + 非同期getterでスキーマを設計

• ダークモード

  デフォルトダーク、ライト切り替え可能

• 多言語対応

  next-intlで日本語・英語に対応

• レスポンシブ

  3D演出はモバイルで軽量な代替表現

• SEO

  ロケール別の動的OGP生成

• アクセシビリティ

  キーボード操作・reduced-motion対応

• パフォーマンス最適化

  3D要素の遅延読み込み