写真ズームアニメーションを作る方法

(Sample)

今回は新人エンジニア向けに、「写真のズームアウトアニメーション」をHTML＋CSS＋JavaScriptで作る方法を、丁寧に・わかりやすく解説します。

アニメーションは見た目に楽しいだけでなく、ユーザーの注意を引いたり、自然な導線を作ったりするための重要な技術です。「動くWebページ」を作りたいと思ったこと、ありませんか？

では、早速コードのポイントを解説していきましょう！

HTML：ページの土台をつくる

まずはHTMLの役割から確認しましょう。HTMLはWebページの構造を定義する言語です。

<h1>写真のズームアウトアニメーション</h1>
<div id="image-container">
  <img id="image" src="https://picsum.photos/1000" alt="Placeholder Image" />
</div>

ポイント

• <h1>：ページタイトル。SEO的にも大事。
• <div id="image-container">：画像を包む「箱」。
• <img id="image">：実際に表示される画像。

**例えるならば、HTMLは「骨組み」や「設計図」**のような存在です。画像を入れる枠（container）をつくり、その中に画像を置いています。

CSS：見た目を整えて動きを与える

次にCSSです。CSSは見た目のスタイルを指定します。そして今回は、アニメーションの効果もCSSで定義しています。

#image {
  width: 100%;
  height: 100%;
  transition: transform 10s ease;
  transform: scale(2);
}

専門用語解説

• transform: 要素を変形（拡大・回転など）するプロパティ。
• scale(2): 拡大率。2は「2倍に拡大」という意味。
• transition: 変化をアニメーションさせるプロパティ。
• 10s ease: 10秒かけて、滑らかに変化させる指定。

例えると、「画像を最初はズーム状態で表示しておいて、あとからゆっくり縮めていく」という演出です。

JavaScript：動きをスタートさせる

HTMLとCSSだけでは、アニメーションは「始まるタイミング」を制御できません。そこでJavaScriptの出番です！

document.addEventListener("DOMContentLoaded", function () {
  const image = document.querySelector("#image");
  setTimeout(() => {
    image.style.transform = "scale(1)";
  }, 100);
});

専門用語解説

• DOMContentLoaded: ページの読み込みが終わった合図。
• querySelector: 特定のHTML要素を取得する関数。
• setTimeout: 指定した時間（ms）後に処理を実行。

ここでは、ページが表示された直後に、0.1秒の遅延を入れてズームアウトをスタートさせています。

アニメーションの流れを図で理解しよう

以下のような流れで動いています：

ページ読み込み
　↓
画像は最初2倍（ズーム状態）
　↓（0.1秒後）
CSSのtransitionにより
10秒かけて縮小（scale 1倍へ）

こんなところに注意しよう！

メリット

• シンプルなコードで視覚効果が得られる
• ユーザーの印象に残りやすい演出が可能

デメリット

• 動作が遅い端末ではスムーズに表示されないことも
• 長いアニメーション（10秒など）はユーザーのストレスになる可能性

つまり、使う場面と演出のバランスが大切なんですね。

応用してみよう！

以下のような発展が可能です：

今後の学習の指針

今回の例は「CSSのtransform」「JavaScriptのタイマー制御」など、フロントエンドの基礎的な技術がたくさん詰まっていました。

次はこんなテーマにも挑戦してみてください。

• hoverやclickといったインタラクションの追加
• CSSアニメーション（@keyframes）との比較
• ReactやVueなどのフレームワークで同じことをやってみる

ちょっとした演出ができるようになると、Web制作が一気に楽しくなります！

どんどん試して、体で覚えていきましょう！質問があればいつでも聞いてくださいね。