3Dボクセルアイランドが動くコーポレートサイト制作
会社の活動をひとつの島に見立てた3Dジオラマをトップページに実装。企画・デザインから3D制作・実装・CMS構築まで、自社で一貫して手がけたリニューアルプロジェクトです。
概要
自社コーポレートサイトのリニューアルにあたり、IT・地域・教育・イベントの4つの活動領域を「島の暮らし」として表現したリアルタイム3Dのボクセルアイランドをトップページに実装しました。島では人物や乗り物が動き回り、看板をクリックすると各コンテンツへ移動できます。描画負荷を抑える軽量化チューニングや、3D非対応環境向けの静止画フォールバックなど、幅広い閲覧環境への配慮も実施。あわせて実績・採用・お知らせをヘッドレスCMSで運用できる体制も整えました。
ポイント
- 会社の活動領域を島に見立てたリアルタイム3Dジオラマをトップページに実装
- メッシュ統合などの軽量化チューニングと静止画フォールバックで幅広い環境に対応
- 実績・採用・お知らせのヘッドレスCMS化で更新しやすい運用体制に
主な取り組み
→ 横にスクロールできます
| 項目 | 内容 | 使用技術 |
|---|---|---|
| 3DボクセルアイランドMV | 会社の活動を島に見立てたリアルタイム3D。人物・乗り物のアニメーションや、看板クリックでの各コンテンツへの誘導を実装。 | three.js / WebGL / JavaScript |
| パフォーマンス最適化 | メッシュ統合などで描画負荷を大幅に削減。3D非対応環境には静止画で代替表示。 | three.js |
| コンテンツのCMS化 | 実績・採用・お知らせをヘッドレスCMSで運用できる体制に。記事の更新が社内で完結。 | Astro / microCMS |