HTML GIFアニメーションの作成方法と活用法

この記事では、HTMLを用いてGIFアニメーションを作成する方法と、その利用方法について詳しく解説します。GIFアニメーションはウェブサイトに動きを加え、ユーザーの注目を集めるのに非常に効果的です。基本的な作成手順から、便利なツールやテクニックまで幅広く紹介します。

HTMLでGIFアニメーションを簡単に作成するためのステップバイステップガイド

GIFアニメーションを作成するための基本的な手順を詳しく説明します。必要なツールの紹介や、具体的なコーディング方法を段階的に解説し、初心者でも理解しやすい内容になっています。また、アニメーションのデザインや最適化のポイントも紹介し、効果的なGIFアニメーションを作成するためのヒントを提供します。

GIFアニメーションの作成手順

GIFアニメーションを作成するには、以下のステップに従ってください。

ステップ	内容
1	アニメーション要素を計画する
2	画像を作成または収集する
3	GIFアニメーションソフトウェアを使用してGIFを作成する
4	HTMLにGIFを埋め込む

必要なツール

GIFアニメーションを作成するために役立つツールを以下に示します。

Photoshop：高度な画像編集が可能なツール。
GIMP：無料で使用できるオープンソースの画像編集ソフト。
Online GIF Maker：オンラインでGIFを作成できる便利なツール。

HTMLでのGIFアニメーションの埋め込み

作成したGIFアニメーションをHTMLに埋め込むには、以下のHTMLコードを使用します。


<img src="path/to/your.gif" alt="説明文">

このコードでは、"path/to/your.gif"をあなたのGIFファイルのパスに置き換えてください。alt属性には画像の説明を記入します。

アニメーションデザインと最適化のポイント

効果的なGIFアニメーションを作成するためには、以下のポイントに注意しましょう。

シンプルな動作：過度な動きはユーザーを混乱させることがあります。
色数の最適化：GIFは256色までの制限があるため、色数を抑えることでファイルサイズを小さくできます。
タイミング調整：フレームごとの表示時間を見直し、スムーズなアニメーションを目指します。

GIFアニメのHTMLとCSS

具体的なHTMLとCSSのコード例を紹介します。
画像の位置やサイズ、影などをCSSで調整しています。

<div class="parent-2">
    <div class="parent__inner-2">
        <img class="image-static-2" src="JR三門駅の写真のURL" alt="JR三門駅（無人駅）" width="800" height="533" style="filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.7));">
    </div>
    <div class="child-2">
        <img class="image-gif-2" src="ダッシュするサラリーマンのGIFアニメーションのURL" alt="ダッシュするサラリーマンのGIFアニメーション" width="300" height="300">
    </div>
</div>

.parent-2 {
    position: relative;
    width: 100%;
    max-width: 800px; /* 最大で800pxの幅を持つ */
    margin: 0 auto;
}

.parent__inner-2 {
    position: relative;
    width: 100%;
}

.image-static-2 {
    width: 100%;
    height: auto; /* オリジナルのアスペクト比を保つため、widthに合わせる */
    object-fit: cover; /* img要素が要素のボックスに対してどのように表示されるかを指定 */
    filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.7)); /* 画像の影 */
}

.child-2 {
    position: absolute;
    top: 45%; /* GIF画像の位置調整 */
    left: 85%; /* GIF画像の位置調整 */
    transform: translateX(-50%);
    width: 33vw;
    max-width: 300px; /* 最大幅を300px */
}

.image-gif-2 {
    width: 100%; /* 親要素にフィットするように設定 */
    height: auto; /* ここにも auto を指定した場合、元の画像比率が維持されます */
    max-width: 300px; /* 最大幅を300pxに設定 */
    max-height: 300px; /* 最大高さを300pxに設定 */
    object-fit: cover; /* ここも cover で描画エリア全体にフィットさせる */
}

StarSuite Impress (プレゼンテーション) を用いたアニメーションGIFの作成方法、ならびに作成したアニメーションGIFファイルをWebページに取りこむ方法を習得します。

テンプレートファイルの取得

これから、HTMLやCSSの各種要素について練習していきますが、まずは、練習するためのテンプレートファイルをダウンロードしましょう。

[演習：テンプレートファイルのダウンロード]

以下のようにして、HTMLのテンプレートファイルをダウンロードして下さい。

まず、「week09」というフォルダを作成してください。
指定のリンクをクリックし、「template1.zip」というファイル名でテンプレートの圧縮ファイルを保存します。
保存した「template1.zip」のアイコンをダブルクリックすると、「template1.html」のアイコンが見えますので、そのアイコンを右クリックして「切り取り」を選び、「week09」のフォルダに「week09\ex1.html」として貼り付けます。

2. StarSuiteを利用したGIFアニメーション作成

「アニメーションGIF」は、複数の素材画像データをパラパラマンガのように順番に表示する仕組をもったファイルです。例えば、下図のようなものが簡単なアニメーションGIFです。

このアニメーションファイルは、以下の3つの画像を順に表示しているものです。

ですから、アニメーションGIFを作るためには、以下の２つのステップが必要です。

アニメーション化する素材画像ファイルを必要な枚数作成する。
作成した複数の画像ファイルを、 GIFアニメーション作成用ソフトウェアに取りこみ、それらをまとめて一つのアニメーションGIFファイルに変換する。

それでは、具体的な例を使いながら作り方を説明しますので、説明を読みながらオリジナルのアニメーションGIFファイルを作って下さい。

[演習：アニメーションGIFの作成]

以下に説明する手順に従って、アニメーションGIFファイルを作成して下さい。

手順で示す画像ファイルはサンプルなので、各自、簡単な素材画像を３つ作り、それをもとに1つのアニメーションGIFファイルを作成して下さい。

作成したアニメーションGIFファイルならびに、 StarSuite Impress (プレゼンテーション) ファイルは「week09」に保存して下さい。

この演習の目的は、「アニメーションGIFファイルの作成方法の習得」ですから、各コマになる素材画像は単純なものを手際よく作って下さい。

素材画像の作成ならびにStarSuite Impress (プレゼンテーション) への読み込み

アニメーションGIFを作る２つのステップのうちの、第一番目のステップです。

■■ 一般的な方法 (今回の演習では行ないません) ■■

GIMP等の画像作成アプリケーションを用いて、 1コマ1コマの表示に必要なすべての画像ファイルを作成します。
保存形式は、アプリケーション専用のものではなく、「GIF」、「JPEG」、「PNG」などの汎用画像ファイルとして保存しておきます。このとき、画像の大きさをそろえておくと、アニメーション化したときに見やすいものとなります。
作成した画像を、StarSuite Impress (プレゼンテーション)に全部読みこみます。読みこむには、StarSuite Impress (プレゼンテーション) を起動後、「挿入」メニューから「画像」を選択し、作成した画像ファイルをひとつひとつ読みこみます。

例えば、下図はGIMPで作成した手書数字を、 StarSuite Impress (プレゼンテーション)に3枚読みこんだところです。これで、アニメーションGIFを作る準備ができたことになります。

■■ 今回の演習で行なう方法 ■■

ところで、画像ファイルの代わりに StarSuite Impress (プレゼンテーション)/ Draw (ドロー) で描いた図 (描画オブジェクト) も利用できます。これなら、わざわざ別のアプリケーションを起動したり、画像ファイルを何個も保存することなく、アニメーションGIFができますので、今回の演習では、描画オブジェクトを使うことにしましょう。

まず、StarSuite Impress (プレゼンテーション) を起動します。
描画オブジェクトを3つ (3つ以上でも可) 作成し、アニメーションGIFを作る準備をして下さい。

下図は、描画オブジェクトを3つ作った例です。

アニメーション・ウィンドウの準備

これ以降が、アニメーションGIFを作る２つのステップのうちの、第二番目のステップ(画像のアニメーション化)になります。

StarSuite Impress (プレゼンテーション)の「スライドショー」メニューから「アニメーション」を選択して、アニメーション・フレームの構成を行うアニメーション・ウィンドウを開きます。
アニメーション・ウィンドウを開いたら、まず「ビットマップオブジェクト」を選択しておきます。

6. 3. フレーム (画像) の構成

以下の手順で表示する順番に画像を登録し、これを最終フレーム(アニメーションの最後の画像)が登録されるまで繰り返します。

次に表示する画像(描画オブジェクト)をドラッグして囲むかクリックして選択します。選択されると、画像(もしくはオブジェクト)のまわりが緑のアンカーで囲まれます。 (例：「3」の文字が選択されている)
アニメーション・ウィンドウの「オブジェクトを適用ボタン」をクリックします。
このフレーム(画像)の表示時間を設定します。 (例：1.00秒)
手順 1. へ戻り、次に表示する画像に対しても同じ操作を繰り返します。

(註) 以下の図では3枚の画像を、「 3 」→「 2 」→「 1 」と表示されるように構成しています。

再生・確認および調整

「最初のイメージ画像」ボタンをクリックして巻き戻します。
「再生」ボタンをクリックしてアニメーションを再生し表示を確認します。
ここで、各フレーム(画像)の表示時間の調整やフレームの順番入れ替えを行います。

アニメーション・オブジェクト(画像)の作成

フレームの構成が完了したら、「作成」ボタンをクリックして、アニメーション・オブジェクト(アニメーション画像)を作成します。

GIFファイル (アニメーションGIFファイル) として保存

できたアニメーションオブジェクトを、以下の手順にしたがって gifファイルとして保存しましょう。

アニメーション再生するのを確認したら、このオブジェクトをクリックして再び選択状態にします。
次に、このアニメーションオブジェクトをアニメーションGIFファイルとして保存するために、「ファイル」メニューから「エクスポート」を選択して次の手順を行います。
- 「ファイルの種類」として「GIF - Graphics Interchange Format (.gif)」を選択します。
- 「選択範囲」チェックボックスにチェックを入れます。
- 「week09」フォルダに移動し、「animation.gif」など自分の好きなファイル名で保存します。ただし、拡張子は、「.gif」にして下さい。
「GIFオプション」の設定ダイアログが現われますので、「OK」をクリックします。(設定変更が必要なら、「OK」をクリックする前に変更して下さい。)

アニメーションGIFファイルをWebページで表示

アニメーションGIFファイルは、画像ファイルですから、これをWebページで表示するには、img要素を用います。

[演習：アニメーションGIFをWebページに掲載]

以下の例を参考にして、自分の作成したアニメーションGIFファイルが表示できるよう、本日の演習用ファイル「week09\ex1.html」に追加記述して下さい。

追加したら(上書き)保存し、WebブラウザでアニメーションGIFが、アニメーション表示できることを確認してください。

アニメーションGIFを含むWebページ

サンプルHTML

<p> これが、アニメーションGIFのサンプルです。<br>
  <img src="./animation.gif" alt="アニメーションGIFファイル">
</p>

よくある質問（QA）

GIFアニメーションを作成するのにどれくらいの時間がかかりますか？
制作時間はアニメーションの複雑さに依存しますが、単純なものであれば数時間で完成することができます。
GIFファイルのサイズを小さくする方法はありますか？
はい、色数を減らす、解像度を下げる、またはアニメーションのフレーム数を減らすことでファイルサイズを小さくすることができます。
画像編集のスキルが必要ですか？
基本的な画像編集スキルがあれば有利ですが、初心者でも使いやすいツールが多く存在します。

その他の参考記事:html gif 埋め込み