アニメーションを入れてみたヨ

サイトアップデートしました！

といっても機能的には大きく変更はなく…。簡単にいうと、サイト（TOPページ）を開いた際に簡単なアニメーションが再生されます。

▶️ 左上のロゴから再生

このアニメーションはClaude codeで作成し(てもらい)ました。

ブログ内にアニメーションを貼る機能を作っていないので、実際に見てもらうしかありませんが、画像だと↓みたいな感じです。

正直、できることなら０→１で自分で作りたいのでこれを自分の作品だと言い張るつもりは到底ないのですが、、

とはいえこれくらいのものはもう簡単に作ってくれちゃうので。

これからも"このサイト自体は"AI君がどこまでできるのか試しつつ、遊んでいきます。

記事や作品の掲載については、自分で手を動かしたものになりますので、気軽に楽しんでいただければ幸いです。

でも正直もう「自分が作りました」っていう証明は難しいよね。

引き続き、まずは自分が納得できるラインを探りつつ、なるべく安心して見てもらえるように改善していく所存です。

----------

プロンプトは何回かのやり取りの上で作成しているので、あまり参考にはなりませんが以下のような流れで作りました。（一部抜粋）

① 既存のコード、サイトロゴから、サイトデザインのガイドラインを作成

② 作成したい動画の概要を指示

AI In Publicの5秒間の動画を作成します。

フレームレートは60fpsです。

上記で言語化したデザインガイドラインに従う。

デジタルノイズと「マルチバース」感をテーマに、サイト入場時に表示する短いアニメーションを作成して。スマホの縦長表示をメインに据えつつ、PCスクリーンでも映えるように。

現実から次元の壁を突き破って侵入するイメージ。動画の最後にはロゴとリリースバージョン、現在の年月日曜日を表示。

先進的なイメージと映画のような重厚感を両立したイメージで作ること。

サスペンスフルな音楽と効果音はすべてコードで生成し、すべてのヒットを完璧に同期させます。

すべてのフレームとサウンドはhtmlコードで記述する必要があります。

③ 出来上がったものを細かく修正

0〜1.4秒 現実の誌面ではなく、現実の東京の風景をイメージ。ヒビそのものは単純な黒色で表現。

1.4〜2.5秒 ピクセルノイズとグリッチのサイズと幅が短調すぎる。不均一なノイズに調整する。

2.5〜3.5秒 トンネルの形状を長方形ではなく、六角形〜八角形のあらゆる多角形で構成。

3.5〜5.0秒 バージョンと日付を除外。ロゴは立ち上がった後にそのままノイズと共にフェードアウト

全体的に安っぽいので、最大限の努力で先進的でリッチな仕上がりにして

④ 動画をインポートし、サイトへの実装を指示

セッション内で最初にTOPページを開いた１回だけ表示する。以降は、セッションが切れるまで表示しない。

音声は使用しない。

--PC表示の場合は横幅を画面幅に合わせて、上下をトリミングする。--

→ PCでは粗すぎるので縦幅を画面幅に合わせて、横幅の空白は背景色で埋めるように変更

ご参考までに。