Webサイトでよく見かけるカルーセル（スライダー）。単に横にスライドするだけではなく、ちょっとしたアニメーションを加えるだけでユーザー体験がグッと向上します。
今回は、話題の生成AI「Claude」と「Gemini」に指示を出し、JavaScriptを一切使わない完全CSSのみで6種類のカルーセルアニメーション（本っぽい、ズーム、立体、サーチ、奥行き、フリップ）を作成してもらいました。
AIによってアプローチが異なり、面白い結果になったのでそれぞれのソースコードを公開します！
WRITER PROFILE
熊切 啓太
KUMAKIRI KEITA
Web Marketer / Director
10年以上のキャリアを持つWebマーケター。EC・D2C領域からB2Bのリード獲得まで、多岐にわたる業種で「0からの集客基盤構築」を行ってきました。 広告運用だけでなく、制作からLPO、SEO、EFOまで幅広く手がけています。今のお客様にとって本当に必要なことを一緒に考え、着実に成果を積み上げていくスタイルを大切にしています。また、最近では当サイトでも発信している通り、先端AIを実務に活用することで、より効率的で精度の高いマーケティング支援を追求しています。
▶ リード獲得数を0から月間200件へ
▶ EC年商3,000万から1億超へ貢献
▶ 累計500社以上の集客戦略を支援
▶ 検索上位獲得による売上基盤構築
