Nuxt x GSAP x Three.jsで弊社公式サイトのリニューアルをして二つのデザインアワードで受賞した話

2K Views

August 26, 25

#サイトリニューアル #Web開発 #Nuxt.js #GSAP #Three.js

スライド概要

弊社10周年に合わせて、モダンなWebサイトへのリニューアルを行いました。デザイン、実装共に一定以上のクオリティのサイトとなり、CSS DAとCSS Winnerで賞を受賞するに至ったので、LTの時間で話せる範囲で品質の高いサイトを作るためにやったことをお伝えできればと思います。

Yohei

@ra4n8ra6n

スライド一覧

web engineer

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.6M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.3M

Meta XR SDK(V66-74)でQuestアプリを開発

spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder

あうぜん 1.1M

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]

ue5 unreal engine ue-rendering

エピックゲームズジャパン 1.1M

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 1M

各ページのテキスト

で公式サイトのリニューアルをして二つのデザインアワードで受賞した話 Nuxt × GSAP × Three.js 2025/08/25

自己紹介須田耀平株式会社GENEROSITY エンタメ系コンテンツor受託多めのチームのWebエンジニア

本題

周年でサイトリニューアルしました。 10

リニューアル前はこちら web.archive.org

https://web.archive.org/web/20231208003044/https://generosity.co.jp/

リニューアル後がこれです https://generosity.co.jp

https://generosity.co.jp/

受賞しました

で下記4受賞ベストUIデザインベストUXデザインベストイノベーション特別賞 CSS Design Award CSS Winner Site of the day

正直リニューアル大変でした

10.

しんどさポイントほぼフルコミットで4ヶ月（エンジニアは私がメインで実質1.5人ぐらいでやってた）公式サイトなので、作らなきゃいけないページ数が多いテンプレート化できないページが35ページ上に英訳版も作るから実質二倍。（英訳版はなんなら今まではなかったので完全新規）デザイナーのレベルの高い要求を可能な限り再現する必要がある。デザイナーと議論しまくってKVの完成に二ヶ月かけてるその他、細かいインタラクション一つ一つに至るまでデザイナーと議論して進めた

11.

それでもなんとか終わらせて賞も貰いました

12.

品質良く完成させるために何をやったか？

13.

①ページ単位のコンポーネント設計にこだわる

14.

コンポーネント設計最も意識したのはページ単位で高凝集であること冗長化 > 共通化後からデザインから変わることを見越していたので、デザインが変わっても他ページには影響を及ぼさずにスムーズに実装できた。

15.

②Nuxt-i18nの採用

16.

nuxt-i18n https://i18n.nuxtjs.org/ 多言語対応はこれがなければ絶対に終わらなかったパス変えたくないけど言語変更したいニーズにも応えられて最高 GSAPのSplitTextとの併用だけ大変だったでもv-htmlとcomputedの組み合わせでなんとかなるよ