ホームページのアニメーションをAIで10案試作｜2日で比べて公開するまで

ホームページの動き（アニメーション）は、AIに1案だけ作らせて悩むより、10案を試作して並べてから選ぶほうが決めやすくなりました。この記事では、9/24〜9/25の2日間の作業をそのまま紹介します。AIのFable5で動きを10案試作し、縦動画と5×2の比較動画で見比べました。そのあとポートフォリオに組み込み、手元と本番URLの両方で表示を確かめています。

書いているのは、ETERNALd.c.t代表の畑 和寿です。ETERNALd.c.tでは、ホームページ制作とAI導入支援を仕事にしています。この記事は、自分のポートフォリオで実際に手を動かした一人称の作業記録です。

自分のホームページやポートフォリオを持っている個人事業主・ひとり経営者・配信者の方に向けて書きました。読み終えるころには、自分のサイトでも「案をたくさん出してから、比べて選ぶ」を試せるようになるはずです。

なお、公開後の閲覧数・反響・依頼数は計測も記録もしていないため、この記事では書きません。

結論：AIで動きを10案作り、並べて比べてから公開した（2日間の全体像）

最初に全体の流れを書きます。1案ずつ悩むのはやめて、先に10案を作りました。それを動画にして並べて見比べ、最後は全部をポートフォリオに載せて公開しました。

試作に使ったのはAIのFable5です。作業フォルダは、本体とは別に portfolio-motion-lab を用意しました。

9/24にやったこと：3案→7案の試作と比較動画づくり

1日目は、試作と見比べる準備に使いました。まず3案を試作し、同じ日のうちに残りの7案も作りました。それぞれを縦動画にしたうえで、10案を5×2に並べた比較動画を1本作っています。

日付	作業	できたもの
9/24	3案を試作	文字に飛び込む・サイト解剖・ビフォーアフター
9/24	残りの7案を試作	無限ズーム・カードパック・レシート・発車標・重力・レコード・文字演出
9/24	各案を縦動画にする	10本の縦動画
9/24	10案を5×2に並べる	比較動画1本

9/25にやったこと：ポートフォリオへの組み込みと公開確認

2日目は、10案すべてをポートフォリオ本体に載せる作業です。motion/ に10ページを置き、トップに Motion 欄を作りました。手元で表示を確かめてから公開し、本番URLでももう一度確認しています。

日付	作業	できたもの
9/25	本体に組み込む	motion/ に10ページ、トップに Motion 欄
9/25	確認と公開	手元で確認 → 公開 → 本番URLで確認

作業時間の細かい記録は取っていません。そのため、ここでは「2日間」「試作は2回に分けた」という粒度で書いています。

ホームページのアニメーションとは？個人サイトで押さえる種類と注意点

アニメーションとは、サイトの上で文字や画像が動く演出のことです。

よく使われる動きの種類（ホバー・スクロール・読み込み・切り替え）

• ホバー：マウスを乗せたときに、ボタンや画像が反応する動き
• スクロール：ページを下に読み進めると、要素がふわっと出てくる動き
• 読み込み：ページを開いてから表示されるまでの間に出す演出
• 切り替え：ページや画面が移り変わるときの動き

動きを付けるメリットと、やりすぎたときのデメリット

メリットは2つあります。目に留まりやすくなることと、作り手の雰囲気が伝わることです。

デメリットもあります。表示が重くなることがあり、動きが多すぎると内容が読みにくくなります。どちらも一般的によく言われる点です。

動きは、CSS（見た目を決める言語）やJavaScript（動きを付ける言語）で作ります。この記事では書き方の解説はしません。試作はAIに任せる前提で進めます。

一般的には、次のような作り方があります。名前だけ知っておくと、AIに頼むときや人に相談するときに話が通じやすくなります。

• CSSアニメーション：見た目の指定だけで付けられる、比較的軽い動き
• JavaScript：スクロール量やクリックに合わせて細かく動かしたいときに使う
• Lottie（ロッティー）：デザインツールで作った動きを、ファイルとして読み込んで再生する仕組み

また、スマートフォンやパソコンには「視差効果を減らす」「アニメーションを減らす」といった、動きを控えめにする設定があります。動きが苦手な人もいるので、その設定をオンにしている人には動きを止める・弱めるといった配慮をしておくと安心です。

なぜAIに1案ではなく10案を作らせたのか

理由は、動きは実際に動いているものを見ないと、良し悪しを判断しにくいからです。

言葉だけで動きを決めるのは難しい

「かっこよく」「印象的に」と言葉で考えても、動きのイメージは固まりません。しかも1案だけだと比べる相手がいないので、「これで良いのか」を決めきれなくなります。

複数を並べれば、違いが目に見えます。違いが見えれば、選びやすくなります。

AIなら試作の数を増やしても手間が大きくならない

AIを、アイデア出しや相談の相手として使う方法はよく紹介されています。今回はそこから一歩進めて、動く試作そのものをAIに作ってもらいました。

自分で1から作るのに比べると、1案あたりの手間はかなり小さいと感じました。だから、最初に数を出してから絞る進め方が合っていました。

ETERNALd.c.tでは「つくる過程も本気で楽しむ」を約束の1つにしています。案を広げていく工程は、正直いちばん楽しい時間でした。

手順1：本体とは別の作業フォルダで試作する

まず、試作用の場所をポートフォリオ本体とは別に用意しました。

作業フォルダ portfolio-motion-lab を用意した

試作はすべて portfolio-motion-lab というフォルダの中で行い、本体には触れていません。

本体と分けておくと気軽に壊せる

分けておくと、次のような利点があります。

• 公開中のサイトに影響しない
• 失敗した案は、消すだけで済む
• 案をいくつ作っても、本体が散らからない

自分のサイトで試すなら、まずは「本番とは別の試作用フォルダを1つ作る」ところから始めれば十分です。

手順2：Fable5で動きの案を3案→7案の2回に分けて試作する

9/24に、まず3案を作りました。同じ日のうちに、残りの7案も試作しています。

1回目の3案：文字に飛び込む・サイト解剖・ビフォーアフター

• 文字に飛び込む：文字の中へ、カメラが入っていくように見せる動き
• サイト解剖：サイトの中身や仕組みを、分解して見せる方向の動き
• ビフォーアフター：手を入れる前と後を見比べられる動き

2回目の7案：無限ズーム・カードパック・レシート・発車標・重力・レコード・文字演出

• 無限ズーム：どこまでも拡大していくように見せる動き
• カードパック：カードの束を開けるような演出
• レシート：レシートが印字されて出てくるような見せ方
• 発車標：駅の案内板のように、文字がパタパタ切り替わる動き
• 重力：要素が落ちる・転がるといった、重さを感じる動き
• レコード：レコード盤をモチーフにした動き
• 文字演出：文字そのものの出し方で見せる動き

各案の実際の動きは、ポートフォリオのMotion欄から見られます。

AIで作ったデザイン案の比較方法：10案を並べて見えた手触りの違い

並べてみると、印象ははっきり分かれました。私の感想としては、次の3つのタイプがあります。

• 遊び心が前に出る案：カードパック・レシート・発車標など
• 仕組みや変化を見せる案：サイト解剖・ビフォーアフター
• 落ち着いて見られる案：文字演出など

結果的に、少し作って方向を確かめてから数を増やす順番になりました。自分のサイトで試すときも、この順番がおすすめです。

Fable5への指示で大事なのは、「1案ではなく複数案」を頼むことです。たとえば、次のような頼み方が考えられます（今回実際に使った指示文ではなく、一般的な例です）。

「ポートフォリオのトップに置く動きを、方向性の違う案で3つ作ってください。スマホの縦画面で見やすくして、1案1ファイルに分けてください。」

ポイントは3つです。「どこに置くか」、「方向性の違う案をいくつ」、「どの画面で見るか・どう分けるか」を最初に伝えておくと、あとで並べて比べやすくなります。

手順3：縦動画と5×2の比較動画で見比べる

比べ方は2段階にしました。まず1案ずつ縦動画にして、そのあと10案を5列×2段に並べた比較動画を1本作りました。

各案を縦動画にした理由

縦動画にしておくと、スマートフォンの画面で見たときの印象を確かめやすくなります。SNSにもそのまま使える形です。ただし、今回SNSに投稿した記録はありません。

10案を5×2に並べた比較動画を作った

1本ずつ順番に見ると、前に見た案の印象がどうしても薄れてしまいます。同時に並べれば、動きの速さや派手さの差が一度に目に入ります。

手順4：ポートフォリオ本体に組み込む（motion/に10ページ＋トップにMotion欄）

9/25に、10案すべてをポートフォリオ本体に組み込みました。1つに絞らず、全部を載せています。

motion/フォルダに1案1ページで10ページを置いた

motion/ という場所を作り、1案につき1ページ、合わせて10ページを置きました。

トップページにMotion欄を作って入口にした

トップページには Motion 欄を追加しました。ここから各ページへ移動できます。

動きをトップ全体に入れる必要はありません。専用の置き場所を作れば、今あるページの読みやすさを崩しにくくなります。

手順5：手元で確認してから公開し、本番URLでも確かめる

確認は2段階で行いました。

公開前：手元の環境で表示を確認

まず、自分のパソコンの上（手元）で、表示と動きを確かめました。

公開後：本番URLでもう一度確認

公開したあと、実際のアドレス（本番URL）で、もう一度確かめました。

一般的に、手元では問題なく動いていても、公開先では表示が変わることがあります。2回確認したのはそのためです。確認するときは、次の項目を見ておくと安心です。

• トップから各ページへ、迷わず移動できるか
• スマートフォンでも、見切れずに見えるか
• 動きが重すぎないか、読み込みに時間がかかりすぎないか
• 動きが本文を読む邪魔になっていないか

やってみて、できたことと手間取ったこと

できたこと

2日間で次のところまで進められました。

• 10案の試作
• 縦動画と比較動画の作成
• 全案の本番への組み込み
• 公開後の確認

手間取ったこと・次に直したいこと

1日目の作業量が多くなりました。9/24は、3案の試作、7案の試作、10本の縦動画づくり、比較動画づくりが1日に集中しています。作る工程と見比べる工程が同じ日に重なったので、落ち着いて比べる余裕は少なめでした。

2日目は、組み込みと確認に使いました。10案をまとめて載せたので、置くページも確認するページも10ページ分になります。しかも手元と本番URLの2回見るので、1案だけ載せる場合より確認の手間は増えました。

次にやるなら、比較動画づくりを別の日に分けるほうが落ち着いて見比べられると思います。段取りとしては、次のように分けるつもりです。

• 1日目：試作（3案で方向を確かめてから、残りを追加）
• 2日目：縦動画と比較動画を作り、基準を決めて見比べる
• 3日目：本体への組み込みと、手元・本番URLでの確認
• あわせて：今回測っていない表示速度も、次回は測って記録する

今回、閲覧数・反響・依頼数は計測していません。

個人事業主・配信者が自分のサイトで試すときの進め方

明日から試すなら、次の5ステップで進めます。

1. 試作用のフォルダを、本体と分けて作る
2. AIに、複数の案をまとめて頼む
3. 動画にして並べ、見比べる
4. 本体に、動き専用の置き場所を作る
5. 手元と本番URLの両方で確認する

最初の指示は「1案」ではなく「複数案」で頼む

1案だけだと、どうしても「直すかどうか」の話になります。複数案を頼めば、「どれを選ぶか」の話にできます。

比べる基準を先に決めておく

基準を先に決めておくと、見比べたときに迷いにくくなります。たとえば次のような基準です。

• 自分の仕事や人柄に合っているか
• スマートフォンで見やすいか
• 内容を読む邪魔になっていないか

全部載せるか、1つに絞るか

今回は10案すべてを載せました。もちろん、1つに絞ってトップに使う方法もあります。

配信者の方なら、縦動画をプロフィールや告知に使う手もあります。これは提案で、私自身はまだ試していません。

ETERNALd.c.tでは「丸投げにさせない」を大切にしています。AIに作ってもらっても、選ぶのは自分の目です。

よくある質問

コードが書けなくてもAIで動きを試作できますか？

今回、試作はFable5に任せました。表示の確認は、自分の目で行いました。コードを書かずに（ノーコードで）どこまでできるかは、使うサービスやサイトの作り方などの条件によります。

10案も作る必要はありますか？

大事なのは数ではありません。比べる相手を用意することです。3案から始めても十分です。

動きを入れるとサイトが重くなりませんか？

一般的に、動きが多いほど重くなることがあります。公開後に本番URLで確かめておくと安心です。なお、今回は表示速度を測っていません。

自分のサイトでも「出してから選ぶ」を試してみてください

やり方はシンプルです。試作フォルダを分けて、複数案を出し、並べて比べてから選びます。まずは3案からでも、ぜひ自分のサイトで試してみてください。

今回のような実作業は、X（@kazuto_AI_auto）で日々発信しています。進め方をもっと見たい方は、フォローしていただけるとうれしいです。

また、今回Fable5に出した指示の型は、Brainの『Fable5 思考マニュアル』にまとめています。気になったら覗いてみてください。

---

運営者：ETERNALd.c.t（代表 畑 和寿／ホームページ制作・AI導入支援）
お問い合わせ：https://eternaldct.net/contact.html