【AI×Web制作 爆速ワークフロー⑤】JavaScriptを使ったアニメーション表現をAIで実現する
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。
AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。
（無料公開、限定100名、2月22日まで）
» 今すぐ億を稼ぐマニュアルをゲットする
HTMLとCSSを書いて、デザインに沿ったコーディングできた。
そこから、もう一段、仕上がりのクオリティを引き上げる要素があります。
それがJavaScriptです。
「げげっ…」と思った方、大丈夫です。
JavaScriptの文法やJSライブラリの記法を暗記する必要はありません。
AIにサポートしてもらって“意味のある動き”を実装しながら、同時にJavaScriptの理解を深めていくことができます。JavaScriptは自信が無い状態でも、お仕事をしながらスキルを伸ばしていきましょう。
- 【AI×Web制作 爆速ワークフロー】について
- AI×Web制作 爆速ワークフロー第5回｜JavaScript / リッチアニメーション
- JavaScriptが怖い理由
- 今回のポイント｜AI × GSAPで“意味のある動き”を実装する
- AI活用① スマホ用のグローバルナビを整備する
- AI活用② ヘッダー固定＋スクロール変化
- AI活用③ スクロールフェードイン
- まとめ
【AI×Web制作 爆速ワークフロー】について
この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを、ひとつの架空案件を通して紹介していきます。
テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。
なお、この連載は「AIに丸投げして作っちゃおう」という話ではありません。
これは、実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があるためです。
我々Skillhubがお伝えしたいのは、Web制作の仕事を請け負う中でのAI活用術です。
- 実際の制作フローの中で、AIをどのように活用するか？
- 失敗を防ぎ、AIを効果的に使うには？
- AIが優秀な今、人間（Web制作者）側に必要なスキルは何か？
前回はHTMLとCSSで、デザインに沿ったWebページの基礎コーディングを行いました。
今回は、JavaScriptを加えてサイトに「動き」を付けていきます。
現代のWeb制作に必須のスマホ向けナビゲーション、サイトをワンランク格上げするリッチアニメーションを実装しましょう！
AI×Web制作 爆速ワークフロー
第5回｜JavaScript / リッチアニメーション
JavaScriptが怖い理由
Web制作の中で、避けて通れない存在がJavaScriptです。
それは分かっていても、自分がコーディングするとなると「嫌だなぁ…」「極力使いたくない」と思ってしまいますよね。
- JSは急に“プログラミング”感が強く、文法の説明からわかりにくい。
- エラーが出て、どうして良いかわからず断念した。
- ライブラリを使うと楽だと聞いて探してみたけれど、よくわからない。
- どこに何を書けばいいのかも曖昧。
検索すると、英語のドキュメントや専門用語だらけの解説が出てきます。
基礎知識がある前提の解説も多いので、初心者・非エンジニアからすると「まず説明がわからない」と感じるのは、自然なことです。
本当に難しいのはJavaScriptそのものではなく、“ひとりで理解しようとすること”なのかもしれません。
今回のポイント｜AI × GSAPで“意味のある動き”を実装する
今回、JSを一から勉強する・文法を覚えることはしません。
AIを使用すると「JavaScriptは得意ではない」 「ライブラリを使うにも、使い方の把握に時間がかかる」という方も、短時間での実装が可能になります。
AIと対話しながら、サイトに“意味のある動き”を追加していきます。
デザイン方針を崩さず、サイトの機能性・印象を少しだけ上げる動きを実装します。
- スマホメニューが自然に開閉する
- ふわりとコンテンツが表示され、ページに動きが出る
- スクロールしたらヘッダーの雰囲気が変わる
そんな“ちょうどいい動き”を、AIと一緒に作っていきましょう。
大切なのは、完璧に理解してから触るのではなく、動かしながら少しずつ理解していくことです。
GSAPとは
今回は、GSAPというJavaScriptのライブラリを使ってサイトに動きを加えていきます。
Homepage | GSAP https://gsap.com/
GSAPは、JavaScriptで滑らかな動きを作るためのアニメーションライブラリ。
プロの現場でも使われており、複雑なアニメーションをシンプルな記述で実装できるのが特徴です。
最初にお伝えしておきたいのは、ライブラリを使わなくても実装は可能だということです。
シンプルな動きであれば、JavaScript（Vanilla JS）のみでも十分対応できます。
Vanilla JSをAIに書いてもらう方法は、以下の記事でもご紹介しました。
記事ではCursorを使用していますが、VScodeのチャットパネルでも同様のことは可能です。
ではなぜ、今回はライブラリを使用するのか。
それは、ライブラリを使わずにAIにJavaScriptを書いてもらう場合、滑らかさや細かな制御まで求めようとすると「この場合はこうして…」といった専門的な指示が必要になるためです。プロンプト自体に専門性が必要になり、難しくなるのです。
ライブラリを使用することで、そうした知識の負担を減らしながら、安定した動きを実装できるようになります。これが、今回GSAPを選ぶ理由です。
GSAPには、npmやCDNなど複数の導入方法があります。
今回はCDNを使用するため、HTMLに1行追加するだけで利用できます。
ただ、公式ドキュメントは英語で書かれており、情報量も多いです。
docsHome | GSAP https://gsap.com/docs/v3/
日本語が無くてギョッとした、Fundamentalsを見て「難しそう…」と感じた方も多いでしょう。
Demosを見ても、派手でグラフィカルな表現が並び、「これをどうしたら良いの？」と不安になるかもしれません。
ここでAIの出番。
AIにやりたいことを日本語で伝えれば、必要なコードを書いてくれます。
さらに、「このコードは何をしているの？」と聞けば、意味まで説明してくれます。
難しいライブラリを“理解してから使う”必要はありません。
AIを通訳にして、“使いながら理解する”。
それが、今回の進め方であり、ポイントです。
AI活用① スマホ用のグローバルナビを整備する
■ 現在のファイル状態
現在コーディングをしているページは、まだスマホ用ナビゲーションのCSSは作っていません。
表示確認がしやすいように、スマホ幅だとメニュー部分はdisplay: none;で隠している状態です。
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">
<img src="images/logo_edbasecompany.svg" alt="Edbase" />
</a>
<nav class="gnav">
<li><a href="#">トップ</a></li>
<li><a href="#">製品紹介</a></li>
<li><a href="#">導入実績</a></li>
<li><a href="#">会社紹介</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">お問い合わせ</a></li>
</nav>
</div>
</header>
.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background-color: var(--corporateDark);
color: var(--white);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 18px;
}
.logo img {
width: 39px;
height: 39px;
}
.gnav {
display: flex;
gap: 48px;
align-items: center;
}
.gnav li{
position: relative;
list-style-type: none;
}
.gnav li::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -24px;
margin-block: auto;
height: 16px;
width: 1px;
background-color: var(--white);
}
.gnav li:last-child::after {
content: none;
}
.gnav a {
color: var(--white);
white-space: nowrap;
}
@media (max-width: 767px) {
.gnav {
display: none;
}
}
もちろん、自分でスマホ幅でメニューを展開した際の表示用CSSを書いておいても良いです。
再現しなくてはいけないデザインがある場合は、デザイン通りにCSSを書いておいたほうが良いでしょう。
今回はスマホ幅デザインがない、かつ、どこから着手するか迷っている前提で、AIに相談してみます。
■ 下準備
まずは、使用したいフレームワークであるGSAPを読み込みます。
今回はCDNを使うので、HTMLファイル、</body>のすぐ上に下記の1行を追加するだけです。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
AIが決まったファイルに書いてくれるように、jsファイルも用意しておきましょう。
共通して使用するJavascriptをまとめるためのmain.jsファイルを作成。
GSAPのCDNコードの下にsctiptタグを書いて読み込みます。
これで準備は完了です。
■実装
スマホ用のナビゲーションの表示をAIにお願いしてみましょう。
してほしいことを挙げていきます。
現在ヘッダーのナビゲーションはスマホに対応していません。
.header-innerの右端にハンバーガーボタンを配置し、開閉可能なナビゲーションを実装してください。
- JavaScriptはGSAPを活用し、滑らかな動きにする。
- ハンバーガーボタンをクリックしたら、右からメニュー部分がスライドで表示される。
- メニュー展開時は、ハンバーガーボタンがメニューを「閉じる」に切り替わる。
- 必要なcssの記述はstyle.cssに追加。
- 必要なJSの記述はmain.jsに追加。
- GSAPの設定は、何をしているか分かるようにコメント付きでお願いします。
今回のポイントは「GSAPを使う」ことと、何をしているかわかるように「コメント付きで」という指示です。コードをどこに書いてほしいかも、指定しておくとスムーズです。
チャットに指示を入れて送信すると、AIが考え始めます。
以下のように「実行しても良いか？」「書き込んで良いか？」という確認が出た場合は、許可してください。
しばらく待っていると完了のメッセージが表示されます。
空だったmain.jsファイルを見てみると、結構な量のコードが追加されているはずです。
ブラウザで表示確認をしてみましょう。
（※ファイルサイズの関係上、画質を下げています）
AIが追加で作ってくれたハンバーガーボタンをクリックすると、メニューが右からスライドして表示されました。閉じるボタンを押すと、同じように滑らかに戻ります。
■ 上手くいかないときは…
表示確認をすると、「メニューが開かない」「レイアウトが崩れている」など、AIにお願いした実装がうまく動かない場合もあります。
例えば、以下はメニューが開かない（表示されない）ケースです。
ドキュメントを調べながら自力で書いていてこうなると、げんなりして「やっぱりやめようかな」と思ってしまうかもしれません。
ですが、AIと一緒なら大丈夫です。
起こっている問題をそのまま伝えれば、原因を一緒に探してくれます。
メニューのボタン部分を押しても、#site-nav下のli要素が表示されません。
ハンバーガーボタンの表示は切り替わっているので、JS自体は動いています。
コードを見直して修正してください。
↓
AIは考えられる原因を挙げ、修正案を提示してくれます。
AIは優秀ですが、何でも一発で解決してくれる魔法の存在ではありません。
実際の制作と同じく、トライ＆エラーを繰り返しながらやり取りしていきます。
「ここが原因かもしれない」と感じる箇所があれば、それも一緒に伝えると、回答の精度はさらに上がります。状況・問題の内容・違和感がある部分を具体的に伝えることで、AIとのやり取りの回数も減り、効率よく解決できます。
実は、この「うまく動かないコードの修正」は、実際のお仕事でAIを活用することが多い部分です。
一撃で希望の実装が出来なかった方は、実際の業務を体験できるチャンス。AIと協力しながら修正にチャレンジすると、業務スキルが上がりますよ。
AI活用② ヘッダー固定＋スクロール変化
次は、サイトの印象を一段引き上げる小さな演出を追加してみます。
ページをスクロールダウンしても、ヘッダーは再上部に固定表示。
ページをスクロールすると、ヘッダーにうっすら背景色が付き、影が現れる。
さらに、ロゴがほんの少しだけ縮む。
派手なアニメーションではありません。
ですが、この変化があるだけで「きちんと作られているサイト」という印象になります。
まずはAIに、やりたいことをそのまま日本語で伝えます。
スクロールしてもヘッダーが上部に固定されるようにしてください。
GSAPを使って、スクロールしたときにヘッダーの背景色を変更し、軽いボックスシャドウを追加してください。
あわせてロゴを少しだけ縮小するアニメーションも実装してください。
GSAPの設定は、何をしているか初心者でも分かるようにコメントを付けてください。
送信してみましょう。
↓
今回はコメントの書き方の指定を「初心者でも分かるように」と、①とは少し変えてみました。
ですので、jsファイルにかなり細かくコメントを入れてくれています。
ブラウザで表示を確認してみます。
ヘッダー固定と、指定した変化が実装されました。
大きな変化ではありませんが、“ちゃんとしたサイト”に見える度合いが上がりました。
AIを活用するメリットは、文法・動きを完璧に理解していなくても触れることです。
プロンプトで指示した通り、JSファイルにはAIがコメントを入れてくれています。
「ボックスシャドウのサイズ」など微調整をしたい場合に、どこを直したら良いかすぐわかります。
もちろん、修正してほしいと感じたことをそのままAIに伝えてもOKです。
「背景色の変化をもっと自然にしたい」
「ロゴの縮小をもう少し控えめにしたい」
すると、durationやeaseの値を調整したコードが返ってきます。
公式ドキュメントを開いて、プロパティを一つずつ確認する必要はありません。AIを“通訳”にして、相談しながら作業ができるとJavaScriptの「怖さ」や「むずかしさ」は一気に減ります。
AI活用③ スクロールフェードイン
最後は、コンテンツがスクロールに合わせて自然に現れる演出を追加します。
よく見る「ふわっと表示される」動きを取り入れることで、情報の整理感や読みやすさを高めます。
今回も、細かい文法は考えません。
やりたいことを、そのままAIに伝えます。
今度も使いやすいように、以下のような注文を加えるのもおすすめでです。
GSAPを使って、スクロールしたタイミングで要素が少し下からフェードインするアニメーションを実装してください。
以下の条件でお願いします。
・対象は「.fadein-BtoT」というCSSクラスを持つ要素にする
・他のページでも再利用できる汎用的な形で実装してください
・opacityとtranslateYを使用
・動きは控えめ
・初心者でも分かるようにコメント付きで書いてください
今回のポイントは条件の上に書いた２行です。
・対象は「.fadein-BtoT」というCSSクラスを持つ要素にする
・他のページでも再利用できる汎用的な形で実装してください
これは、スクロールフェードインを要素毎に個別に指定されないための予防線です。
「特定のクラス（今回の場合はfadein-BtoT）を付けたら動く」仕組みにしておくと、他のページでも同じクラス要素に追加するだけで動きを再利用できます。
実装の動作確認用に、index.htmlファイルの確認しやすい要素にfadein-BtoTクラスを追加しておきます。
AIにプロンプトを送信します。
スクロールに合わせてアニメーションを動かすGASPプラグイン「ScrollTrigger」が必要なことを認識し、CDNコードを追加する提案をしてくれました。「はい」で設定してもらいましょう。
↓
コードの生成が完了したら、ブラウザで表示を確認してみましょう。
ページをスクロールすると、コンテンツが下からスッと現れる動きが実装されました。
あとは、このfadein-BtoTクラスをフェードインさせたい要素に追加していくだけです。
もし、動きを調整したければ、AIに追加のリクエストを送信します。
「もう少しゆっくり表示させたい」
「移動距離を小さくしたい」
「フェードだけにしたい」
感じたことを、そのままAIに相談すれば大丈夫です。
現在のフェードインの速度をもう少しゆっくりにして、自然な動きにしてください。
などと書けば、easeやdurationの値を調整したコードが返ってきます。
「移動距離は10px、durationを少し長めに」など具体的に指示する、JSファイルを自分で調整することもできます。
以下のようにAIにリクエストを送れば、別のアニメーションを追加することも可能です。
バリエーションとして、スクロールしたタイミングで要素を少し右からフェードインさせるための fadein-RtoL クラス を作ってください。
.problem-grid 内の .problem-card は3枚を同時ではなく、左から順番に0.3秒ずつ時間差で表示してください。
横並び要素に時間差をつけた例
こうした動きの作成・調整を行うために、公式ドキュメントを隅から隅まで読む必要はありません。
AIと対話しながら作成していくことで、速やかに実装しつつ、理解も深めていくことが可能です。
まとめ
AIがあれば、JavaScriptは怖くなくなる
JavaScriptは、みっちりと学習をしないと扱えない言語ではありません。
文法をすべて暗記してから…と考えずに、動かしながら理解していくことができます。
今回のように、「こういう動きを付けたい」と日本語で伝える。
動いたら、「このコードは何をしているの？」と聞いてみる。
少し違和感があれば、「もっと自然に」と相談する。
その繰り返しで、少しずつ理解が追いついてきます。
AIがいれば、難しいドキュメントを一人で読み解く必要はありません。
上手く動かない場合も、AIに相談することができるので大丈夫。
AI時代は、一人ぼっちで頭を抱えて悩む不安はもうありません。
■ AI活用のメリット
- JavaScriptでのアニメーションが即実装できる
- ゼロから全てJavaScriptを書かなくて良い
- ライブラリを使用する場合も、公式ドキュメントの解読ナシで始められる
- エラーや不具合も相談しながら解決できる
- 業務での実装を進めながら、理解を深めていける
■ AI活用の注意点
- 生成されたコードは必ず自分で動作確認する
- 意味が分からない部分はそのままにしない
- 一発で完璧を求めない
AIは万能ではありませんし、全てを代行してくれる存在でもありません。
生成されたコードが、上手く動いていない場合もあります。
AIを過信せず、自分の目でしっかりと表示・動作を確認する。
上手くいかないところは、AIと相談しながら調整していきましょう。
次回予告
ここまでで、構成・デザイン・コーディング・JavaScriptまで一通り実装してきました。
次回はいよいよ、これをWordPressテーマとして組み込みます。
静的なHTMLから、動的に管理できるサイトへ。
AIと一緒に、もう一段レベルを上げていきましょう。
Skillhubのご案内
この連載で紹介しているフローは、基礎があってこそ再現できるものです。
Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。
- Webサイトの構造の考え方
- なぜその構成・デザインになるのか
- AIが出したコードや提案を“理解して直せる力”
基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
2月22日まで