Entries
2019.02/28 [Thu]
GIFアニメとは何か
ＧＩＦアニメとは
↑
ＧＩＦアニメーション画像の例
このような動くイラストは、ＧＩＦ(じふ)アニメーション画像といって、ブラウザ上(InternetExplorerやChromeやFirefoxなど)であれば、どんな環境でも動いて見える動画っぽい画像です。(Graphics Interchange Formatの頭文字をとっています)
上の歩く犬のＧＩＦアニメのファイルサイズ(バイト数)は、6.51ＫＢ(キロバイト)です。
普通の写真で同じぐらいのファイルサイズだと、下の写真が大きさ90x74ピクセルで5.57KBです。
ＧＩＦアニメーション画像は動きがあるので記事の中でとても目立ちます。
そして、私の作るＧＩＦアニメーション画像は、とても軽く、読み込みに負荷をかけません。(ほとんどが５０KB以下)
「動く画像はファイルサイズが大きいのでページ読み込みが遅くなる」と言われることがありますが、それは動画をgif形式に変換したＧＩＦアニメの場合で、イラストタイプのＧＩＦアニメは、とてもサイズが小さいのです。
ブログやホームページのちょっとした飾りに、目をひく効果が抜群ですので、ぜひお使いください。※3000点以上のGIFアニメが無料ダウンロードできるサイトはこちら
そんなＧＩＦアニメーション画像について、詳しく説明します
ＧＩＦアニメのメリット
・スマホでもパソコンでも動いて見える。
(ブラウザ上やアプリ上で動くので、単純にフォルダ内のファイルを表示しただけでは、1コマ目だけが静止画として表示されます。写真アプリ、フォトアプリでは、最新版で動いて見えます)
・YouTubeなどの動画投稿サイトにアップする必要がない。
・フラッシュアニメのように何かのソフトに依存しない。
(フラッシュアニメは、adobe flash playerがインストールされていないと表示出来ません)
・how toものの説明が一目瞭然である。
・動画開始を命令する必要がなく、ページ読み込みと同時に動き始め、無限にループする。
(1回だけ動作させたり、スタートボタンで開始する設定もできますが、一般的ではありません)
・普通の動画も短い秒数でサイズを小さくすれば同じように表現できる。
ＧＩＦアニメーション画像
168KB
ＧＩＦアニメのデメリット
・長い動画や大きな動画はバイト数が大きくなりすぎて、使うのに適しない。
・色数が256色に制限されているので、画質が悪い。(イラストなどはきれいに表現できる)
動画から変換したＧＩＦアニメの例
イラストのＧＩＦアニメの例
・音声がつけられない。(そのほうがいい場合も多くあります)
・作るのに技術がいる。(2コマ程度の簡単なアニメなら誰でもできますが、10コマ以上のアニメになると慣れと技術が必要です)
例えばこの犬のＧＩＦアニメーション画像は、以下のように１１枚の画像を使用しています。
使用している画像↓
使用している画像↓
ＧＩＦアニメーション画像の保存方法と使い方
【保存方法】
スマホ①長押し②画像を保存する(ダウンロード)
パソコン①右クリック②名前をつけて画像を保存
【投稿方法】
普通の写真と同じです。ネット上(ブラウザ上)で動く画像です。
パソコン・スマホのアイコン表示画面では1コマ目だけが表示されます。
アプリ「写真」「フォト」最新版では、動いて見えます。
ＧＩＦアニメーション画像のファイル形式は、abcdef.gifのように拡張子gifがつきます。
ただし、静止画gifファイルの場合も拡張子は同じなので、アニメーションgifとの違いはファイル名だけではわかりません。
※ホームページ作成時には、ホームページビルダーでは、アニメーションgifに以下のようなアイコンマークがつくのでアニメと静止画を区別できます。
ＧＩＦアニメーション画像を自分で作るには
サイトを利用する方法とソフトを使う方法があります。
・無料サイトでは、「無料バナー作成工房」さんが有名です。
2.3枚の写真を用意してサイトにアップすれば、簡単にＧＩＦアニメーション画像が作れます。詳しい説明はこちら(名前アイコンの作り方ですが、方法は同じです)
・有料ソフトでは、ホームページビルダー付属のウェブアニメーターがあります。
・無料ソフトでは、「Giam」などがありますので、「ＧＩＦアニメ作成」で検索して好みのものをダウンロードして下さい。
※当ホームページのＧＩＦアニメーション画像は、すべてホームページビルダー付属のウェブアニメーターを使用して作成しています。
ＧＩＦアニメをＬＩＮＥで使うには
無料通話アプリ「ＬＩＮＥ」を使っている人は多いと思いますが、
ＬＩＮＥでは、投稿画面にＧＩＦアニメーション画像を投稿すると友だちに見てもらうことができます。
ＬＩＮＥの投稿画面は、自分のホーム画面の左下の「投稿」から、スマホに保存したＧＩＦアニメーション画像を選んで投稿出来ます。
投稿すると、静止画で表示されますが、タップすると動く画像として表示されます。
※スマホの種類によっては、タップしなくても動いて表示されます。
ＬＩＮＥの投稿画面スクリーンショット↓
実際の画面では下のように動く画像が表示されます
トーク画面では、残念ですが、静止画になってしまいます。
ＧＩＦアニメをtwitterに投稿するには
TwitterではGIFアニメをツイートに載せて投稿することが可能です。
2016年からGIFアニメの投稿機能が実装されたので、だれでもGIFアニメが投稿できるようになりました。
しかし、Twitterに投稿できる画像の上限は５MBですので５ＭＢを超える画像は投稿できません。
当ホームページのＧＩＦアニメーション画像は、ほとんどの画像が投稿可能です。
例えば「ラジオ体操、やってるよ」と画像をつけてツイートするとき
実際の画像を投稿せずにこんなＧＩＦアニメをつけて投稿すれば、個人情報や位置情報をオープンにせずにすみますね。
TwitterへGIFアニメを投稿する方法
iPhoneの場合
ツイート作成画面の下部に画像を選択するアイコンがあると思いますが、その隣の「GIF」と書かれたアイコンからGIF画像を追加することができます。
アイコンを選択するとiPhoneのカメラロールが開かれ、保存されているGIF画像を選択し投稿することができます。
androidスマホの場合
AndroidスマホからTwitterへGIFアニメを投稿する場合もiPhoneと手順は同じです。
ツイート作成画面から「GIF」のアイコンをタップすることでフォトからGIFアニメを選択・投稿することができます。
※Facebookやmixiへの投稿方法は省略しますが、同様の手順で投稿できると思われます。
ＧＩＦアニメをメールで送信するには
スマホから送る場合、メール画面で普通の写真を送るときと同じ添付動作をし、スマホに保存したＧＩＦアニメを選択して、相手に送信します。
相手側は、以下のような操作で見ることができます。
相手がパソコンで見る場合
送られた相手は、受信箱では以下のように静止画で見えます。
↓例 ヤフーメールで受信した場合の受信箱
添付画像をクリックして「スキャンしてダウンロード」などを選び、デスクトップなどに保存します。
保存した画像を右クリックすると
別窓が開くので「プログラムから開く」→「常時使うブラウザ」の順に選択します。
※あらかじめＧＩＦアニメーション画像とブラウザを関連づけてある場合は、ダブルクリックするだけで表示されます。
ブラウザが開き、ＧＩＦアニメーション画像が動いて表示されます。
↓下はInternetExplorerで開いた例です。Chrome、Firefoxでも同様です。
上はスクリーンショットなので動いていませんが、実際は下のＧＩＦアニメーション画像が表示されます。
相手がスマホで見る場合
メール受信画面からダウンロードすると「カメラロール」や「フォト」のダウンロードフォルダに保存されます。
フォルダ内では静止画のサムネイルで表示されますが、タップすると動いて見えます。
↓ダウンロードフォルダでの表示
(androidの場合)
画像選択後の画面↓
※最新版の「フォト」や「写真」アプリで動きます。
皆さんも動くイラスト(ＧＩＦアニメーション画像)をブログやＳＮＳ投稿に活用してみて下さい。
応援ありがとうございます。(素材ランキング)
コメント