# 流行りのシネマティックスクロール作ってみた！ 5分で学べる。ハチコのAI実践カフェ。 おはようございます。こんにちは。こんばんは。 この番組では、ママエンジニア、ハチコがAIでできたことや、 おすすめのAI活用法をお届けしていきます。 さて、今日のテーマは、 Cinematic Scroll Pageを作ってみました。 ということで、最近流行ってるんですってね、 このCinematic Scroll Page。 これはウェブサイトの一つのパターンなんですけど、 ウェブページにキャラクターがいて、 その動きがアニメーションになっていて、 自分の見ている人のマウスのスクロールとかに合わせて動くみたいな。 スクロールするとテクテクテクって歩いたりするような、 そういうサイトですね。 見ている人のマウスの動きでページが動くので、 見ている人もすごく楽しいですし、没入感もありますよね。 そういうちょっとエンタメ度の高いウェブサイトなんですけど、 これをいつだったかな、先月くらいにそういうサイトを見て、 えー、かわいいって思ってたんですけど、 先週のAIセミナーのときに、 これをどんなふうに作ったかっていう話を聞くことができて、 それを真似っこしてみました。 どんなサイトを作ったかっていう話と、 どうやってやったかっていう話をこれからしますね。 まず作ったサイトは自分のホームページです。 なので、私の自己紹介とか、私が出しているコンテンツについて、 ツアーで私自身のハチ子のキャラクターが テクテク歩きながらいろんなお部屋に行って、 その自己紹介したり、コンテンツを紹介したりするというサイトです。 それをどうやって作ったかっていうと、 私のいつも使っているAIで描いたハチ子さんがいるんですけど、 それを最初はChatGPTでクレイアニメ風にしてもらいました。 キャラクター表をそのままクレイアニメにして、 そのキャラクターをグロックに渡して、 このキャラクターが右奥のほうにテクテク歩いていく動画を作ってと頼みました。 そのときに後で透過するから、背景は黄緑にしておいてくださいと。 そんなふうにお願いしたら、いい感じのやつができました。 その動画を持ってFableのところに行き、 最近流行っているCinematic Scroll Pageで私のウェブサイトを作りたいですと。 私がテクテクする動画はこれですと。 いい感じに作ってくださいってお願いしちゃいました。 もともと自分のホームページを作り直していて、 全然遊び心は特にないシンプルなサイトは作っていたんですけど、 結果的に作っていたサイトから色を抽出し、 私のクレイアニメ風の世界観を踏襲した背景を作ってくれて、 もともとあったページのメニューに合わせて、 色んな部屋があって、そこをテクテクしていくようなページを作ってくれました。 ただ、テキストで作ったメニューの構成と一緒だとちょっと違和感があったので、 そこはお話ししながらまとめたり分けたり、このメニューをなくすってしたり、 色々調整して一応出来上がりましたね。 グロックで作ってもらったやつ、結構良かったんですけど、 書いてもらった背景を見ながら、よくよく考えてみると、 私がテクテク歩いて、右奥の方に背中を見せながら歩いていくんだけど、 すごい遠くに行っちゃうみたいな、パースが効いてるっていうの? めちゃめちゃ遠くに、スススって行っちゃってたから、 もうちょっと近くにしたいんだよねってお願いして、 私、ファルというAPIを繋いでるって言っていいのかな。 ファルっていうサービスを使っているので、それも使っていいから、 似たような動画で、もうちょっと私があまり遠くに行かないような、 そういう遠近感の、今作ってもらった背景の画像と合うような遠近感の動画を もう一回作ってってお願いして、差し替えてもらったんですよ、そういえば。 そしたら、グロックのやつをベースに、もうちょっと遠近感が、 そんな遠くまで行かないやつを作ってくれて、 まあまあ初回にしてはいいんじゃないかなっていうものができました。 サイトは丸投げで作るのはあんまり良くないんですけど、 クライマティックスクロールページにしてみないと、どういう構成がいいのか、 いまいちピンときてなかったので、今回はフェーブル任せって感じで、 一回作ってもらって、そこから直すという流れにしてみました。 あとは、背景の絵は、やっぱりファル経由でGPTイメージ2.5を使ってもらっています。 自分のキャラクター表、これアニメのキャラクター表もGPTイメージ2.5で作っているというか、 ちゃんとGPTで作ったんですけど、同じエンジンで作っているので、 テイストも合わせやすかったかななんて思っています。 こういうちょっと流行りだけど、本当にさ、自分で作ったら結構大変みたいなものを、 期間限定でもいいから、ちょっと作ってみようってできるようになったのが、 本当にすごいなと思って、楽しいなと思いながら作ってみました。 これを収録している時点では、まだ公開はしてないんですけど、 もうちょっと直したら出そうかなと思っているので、 もし概要欄にリンクがあったら、ぜひ遊びに来てみてください。 ということで、今日もここまで聞いてくださって本当にありがとうございます。 もしこの放送を気に入っていただけたら、いいね、ハロー、コメントなど、 ぜひぜひよろしくお願いいたします。 今日も一緒にAIでちょこっと進化していきましょう。 それでは、またね。