Javascript(49)ChatGPTと一緒に作るJavaScriptの簡単アニメーション

カラフルなJavascriptの画像 javascript

前回はChatGPTで試したいJavascrptで使えるプロンプトについて紹介しました。

Javascript(48)ChatGPTで試したいJavascrptで使えるプロンプト
今回は、ChatGPTで試したいJavascrptで使えるプロンプトについて紹介します。是非試してみて下さい。
kamechannel.com
2025.04.13

今回はChatGPTと一緒に作るJavaScriptの簡単アニメーションについて紹介していきます。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくJavaScript入門講座 [ Mana ]

価格:2794円
(2025/1/12 23:09時点)
感想(2件)

 

 

ChatGPTと一緒に作るJavaScriptの簡単アニメーション

「Webサイトにちょっと動きを加えたい」「単調なページを魅力的に演出したい」と感じたら、JavaScriptを使ったアニメーションがオススメです。さらに、今はAIアシスタントのChatGPTという強い味方がいます。初めての人でも、スクリプトをコピペしながら手軽に学べるのが大きな魅力です。本記事では、文字フェードイン、ボタン拡大、そしてスクロールエフェクトなど、実際に多用される仕組みを例として紹介します。JavaScriptの基本文法を理解している方なら、スムーズに学習を進められるはずです。

この記事の目標は以下の通りです。

  • アニメーションの基本的な実装例を把握する
  • ChatGPTからコードをもらう手順を体験する
  • それぞれのサンプルをコピペして試せるようになる

「JavaScriptでの開発は敷居が高そう」と思っている方でも、ChatGPTを活用すれば、一行一行のコードを理解しながら自分のペースで進められます。ぜひ実際に試してみてください。

目次

  1. はじめに：なぜアニメーションが必要？
  2. 文字フェードインに挑戦
  3. ボタン拡大エフェクトの実装
  4. スクロールエフェクトで動きを付ける
  5. さらにChatGPTに質問して発展させる
  6. アニメーション制作のポイント
  7. まとめと参考リンク

1. はじめに：なぜアニメーションが必要？

Webサイトにアニメーションを加えると、ページの雰囲気が大きく変わります。単純なテキストや画像だけのページよりも、ユーザーの目を引きやすく、操作しやすい印象を与えられるのです。たとえば文字がふわっとフェードインすると、訪問者に「新しい情報がここにあるんだ」と気づかせる効果がありますし、ボタンが拡大することで「クリックしてほしい」という意図をダイレクトに示すこともできます。

とはいえ、JavaScriptでアニメーションを組むのは、はじめは敷居が高いと思う人も少なくありません。しかし、ChatGPTのようなAIをうまく活用すれば、必要な部分だけコードを生成してもらい、その動きをカスタマイズするところから始められます。これにより、実装例と理屈を同時に学べるわけです。

このように、ちょっとしたアニメーションを取り入れるだけでも、Webページの見栄えと使いやすさが向上します。ここからは具体的な例を見ていきましょう。

2. 文字フェードインに挑戦

まずは定番のフェードインエフェクトです。ページが読み込まれたとき、あるいはボタンをクリックしたときにテキストがふわっと現れる動きを実装します。ChatGPTに「テキストをフェードインさせる簡単なコードを書いて」といったプロンプトを投げると、下記のようなサンプルをもらえます。

window.addEventListener("load", () => {
  const fadeText = document.getElementById("fadeText");
  fadeText.style.opacity = 0;

  let opacityValue = 0;
  const fadeIn = setInterval(() => {
    if(opacityValue < 1) {
      opacityValue += 0.02;
      fadeText.style.opacity = opacityValue;
    } else {
      clearInterval(fadeIn);
    }
  }, 30);
});

使い方：

  1. HTML側で<div id="fadeText">このテキストをフェードイン</div>のように要素を用意
  2. 上記のスクリプトを貼り付ける（<script>...</script>内）
  3. ページを読み込むと、自動的に文字が薄いところから徐々に濃くなる

ポイント：

  • window.addEventListener("load", ...) でページ読み込み後に処理開始
  • setIntervalを使って、opacityを少しずつ上げる
  • opacityValue < 1 の条件でループを回し、clearIntervalで止める

簡易的な実装なので、よりスムーズなアニメーションを求めるならrequestAnimationFrameを使う方法もあります。ChatGPTに「requestAnimationFrameを使ったバージョンのコードも示して」と頼めば、より洗練されたサンプルを得られるでしょう。

3. ボタン拡大エフェクトの実装

ユーザーにアクションを促すとき、ボタンを目立たせることは大切です。そこで、ボタンにマウスが乗ったときに大きくなるエフェクトを付けてみましょう。この例ではChatGPTに「hover時にボタンが少し拡大するJavaScriptコードを書いて」と依頼すると、以下のようなサンプルが得られます。

const enlargeButton = document.getElementById("enlargeButton");

enlargeButton.addEventListener("mouseover", () => {
  enlargeButton.style.transform = "scale(1.2)";
  enlargeButton.style.transition = "transform 0.3s";
});

enlargeButton.addEventListener("mouseout", () => {
  enlargeButton.style.transform = "scale(1)";
});

使い方：

  1. HTMLで<button id="enlargeButton">拡大ボタン</button>を準備
  2. スクリプトを貼り付ける。mouseoverイベントで拡大し、mouseoutイベントで元の大きさに戻す
  3. transitionプロパティを使って、0.3秒かけてスムーズに拡大

この手法ではCSSとJavaScriptを組み合わせています。実はhoverエフェクトならCSSだけでも実装できますが、JavaScriptで細かい制御をしたいときにこの方法は便利です。たとえばクリックと同時に色を変えるなど複数のアクションを組み合わせる場合も、ChatGPTに追加で尋ねることで簡単にサンプルをもらえます。

4. スクロールエフェクトで動きを付ける

長めのページを作るとき、スクロールに合わせて要素が出現・拡大・回転などの動きをするギミックはよく見かけます。たとえば「セクションがウィンドウ内に入ったらアニメーションさせる」といった演出が代表例です。ChatGPTに「スクロール時に要素がふわっと表示されるサンプルコードを教えて」と促すと、以下のようなイメージのコードが得られます。

window.addEventListener("scroll", () => {
  const fadeSection = document.querySelectorAll(".fade-section");
  
  fadeSection.forEach(section => {
    const rect = section.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    
    if(rect.top < windowHeight * 0.8) {
      section.style.opacity = 1;
      section.style.transform = "translateY(0)";
      section.style.transition = "all 0.5s ease";
    }
  });
});

使い方：

  1. HTMLで複数の要素にclass="fade-section"を付与（例：<div class="fade-section">セクション1</div>）
  2. 初期状態でCSSに.fade-section { opacity: 0; transform: translateY(20px); }のような指定
  3. スクロールイベントで要素の位置を取得し、if(rect.top < windowHeight * 0.8)などの条件で表示を切り替える

ポイント：

  • getBoundingClientRect()を利用して、対象要素の位置を測定
  • 画面下から20pxほど下がった位置（translateY(20px)）において、opacity 0 で隠す
  • 一定のスクロール量を超えたらアニメーションを発火し、opacity 1 & translateY(0)で見える位置に移動

この仕組みは

スクロールエフェクト

として定番で、ページに動きを加えるだけでなく、視覚的な区切りを作りやすいというメリットもあります。

5. さらにChatGPTに質問して発展させる

ここまでは「文字フェードイン」「ボタン拡大」「スクロールエフェクト」という3つのサンプルコードを取り上げました。しかし、実際のWeb制作では「クリックしたあとに何秒後に消える」「音と連動させて動きを変える」など、もっと複雑な要望が出てくることもあります。そんなときこそ、ChatGPTを使う絶好のチャンス。

たとえば、以下のような質問を投げてみてください。

「スクロールエフェクトが発火したあと、一定時間で要素を消したい。
それを実現するJavaScriptのサンプルコードを教えてほしい」

すると、ChatGPTはsetTimeoutやtransitionendイベントなどを使ったコード例を出してくれます。自分が欲しい動きを具体的にイメージしてプロンプトとして入力することで、ピンポイントに役立つコードを得られるのです。

6. アニメーション制作のポイント

実際にアニメーションを実装する際は、以下の点に注意しておくと良いでしょう。

  1. パフォーマンスを考慮する
    大量の要素を同時に動かすと、処理が重くなる場合があります。requestAnimationFrameを使った実装や、CSSアニメーションに切り替えられる部分はCSSで賄うなどの工夫が必要です。
  2. ユーザー体験を最優先
    派手な動きを詰め込むのが目的ではありません。ページを読みやすく、使いやすくするためにアニメーションを活用する姿勢が大切です。
  3. コードをモジュール化する
    プロジェクトが大きくなると、1つのJSファイルに書き散らす形だと管理が複雑になります。モジュールやクラス化などの設計を取り入れて、メンテナンスしやすい構造を目指しましょう。
  4. ブラウザ互換性にも留意
    最新のAPIばかり使うと、古めのブラウザで正常に動かない可能性があります。Can I useなどでサポート状況を確認し、ポリフィルを導入するなどの対策を考えてください。

これらを踏まえながら試行錯誤を繰り返すことで、実際の制作現場でも通用するノウハウが身につきます。ChatGPTを単なるソースコード生成ツールとしてだけでなく、「なぜこの書き方なの？」といった質問を投げかける学習パートナーにすると、一段と理解が深まるでしょう。

7. まとめと参考リンク

今回はJavaScriptを使った簡単アニメーションの例として、以下の3つのシナリオを中心に紹介しました。

  1. 文字フェードイン
  2. ボタン拡大エフェクト
  3. スクロールエフェクト

これらはどれも初心者が取り組みやすく、かつ実際のWebサイトでも頻繁に活躍する演出です。また、ChatGPTを活用すれば、コード例をすぐに入手できるだけでなく、「もう少し速く（遅く）アニメーションさせたい」「クリックした直後に少し待ちたい」などの細かい要望にも柔軟に対応してくれます。試しにいろいろとアレンジしてみましょう。

最後に、関連する参考リンクをいくつか紹介します。スムーズな学習と実装のために活用してみてください。

この記事をきっかけに、JavaScriptのアニメーション制作に少しでも興味が湧いたら嬉しいです。小さな例から始めて徐々にレベルアップし、サイト全体をダイナミックに動かせるよう挑戦してみてください。

以上がChatGPTと一緒に作るJavaScriptの簡単アニメーションについての紹介です。
次回は、ChatGPTで学ぶJavaScriptの非同期処理ベストプラクティスについて紹介します。

スポンサーリンク