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

1.2K Views

August 26, 25

スライド概要

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

シェア

またはPlayer版

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

ダウンロード

関連スライド

各ページのテキスト
1.

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

2.

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

3.

本題

4.

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

5.

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

6.

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

7.

受賞しました

8.

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

9.

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

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の組み合わせでなんとかなるよ

17.

③完全無償化したGSAPの導入

18.

( ) GSAP SplitText 公式サイトの至る所で使っているSplitText 自前で作ると調整面倒な上クオリティも下がる GSAPの有料機能だったので、無償で使えるよう になって助かった。 その他のエフェクトもトップページをはじめとし て各所で活躍。

19.

④デザイナーにThree.js製プロトタイプを見せまくる

20.

Three.js KVのパターンいっぱい作って見せまくって品質+意思決定のスピードをなんとかした。 これはあくまで一部で実際は30パターンぐらい作ってる

21.

まとめ 実装、設計、ライブラリ選定、進め方等色々工夫したことでなんとか結果出せました。 「現場のためのフロントエンド最前線」の話になってるかこれ…? 各論にはなってないけど、現場ノウハウではあるから許してくれ〜

22.

おわり