React × Three.js × GSAPで「映像を魅せるブランドサイト」の構築

今回は、Reactをベースに「映像そのものを主役にしたブランドサイト」を制作しました。

一般的なポートフォリオサイトのように画像や文章を並べるだけではなく、サイトを開いた瞬間から映像の世界観に入り込めるような構成を意識しています。

今回のテーマは「想像を、映像に。」

AIを活用した映像制作を行う中で、

「完成した映像を、もっと印象的に見せられないか？」

と考えたことが今回の制作のきっかけです。

そこで、Webサイト自体を一つの映像作品のように見せることを目指しました。

ファーストビューでは画面全体に映像を表示し、その上に大きくコピーを配置。

スクロールすると次々と異なる世界観の映像が現れ、作品を見ながらサイトを進んでいく構成にしています。

ReactだけでなくThree.jsとGSAPも活用

今回使用した主な技術は、

・React

・Vite

・Three.js

・GSAP / ScrollTrigger

・HTML5 Video

・CSS

です。

Three.jsでは背景に細かなパーティクル表現を加え、GSAPではスクロール量に応じて文字や映像が動く演出を実装しています。

特に意識したのは、「3Dやアニメーションを使うこと」自体を目的にしないこと。

映像から次の映像へ自然に視線を誘導し、作品の世界観を邪魔しないようなWeb演出を目指しました。

作品を並べるだけではなく「制作力」を見せる

サイト内には、

・CINEMATIC

・SHORT FILM

・COMMERCIAL

・WEB VISUAL

など、制作ジャンルごとのセクションを用意しています。

また、作品一覧だけでなく、

「依頼内容を受け取る」

↓

「世界観を考える」

↓

「ビジュアルを制作する」

↓

「映像化する」

↓

「編集して一本の作品にする」

という制作プロセスも見せる構成にしました。

AIで映像を生成するだけではなく、構成や演出、編集まで含めて一つの作品として仕上げることを大切にしています。

映像とWebを組み合わせる

今回の制作で特に面白いと感じたのが、

「映像制作」と「Web制作」を別々に考える必要はない

ということです。

例えば、

・ブランドサイトの背景映像

・商品やサービスのプロモーションページ

・映画や作品の特設サイト

・イベント用Webサイト

・AI映像を活用したLP

・スクロールと映像が連動するWebコンテンツ

など、映像とWebを組み合わせることで表現の幅はかなり広がります。

今後は単に「見る動画」だけでなく、「触れる映像」「スクロールして体験する映像」のような表現にも取り組んでいきたいと思っています。

映像・Web制作のご相談受付中です

AIを活用した映像制作、SNS向けショート動画、CM風映像、物語・映画風映像のほか、ReactやThree.jsを活用したWebサイト制作も行っています。

「こんな映像を作ってみたい」

「アイデアはあるけれど、どう映像にすればいいか分からない」

「普通とは少し違うWebサイトを作りたい」

といった段階からでも対応可能です。

映像とWebを組み合わせた制作についてもご相談いただけます。

ご興味がありましたら、プロフィール・出品サービスよりお気軽にご相談ください。