ここから本文です

書庫全体表示

GIFアニメとは

GIFアニメとは

イメージ 1
GIFアニメーション画像の例

このような動くイラストは、GIF(じふ)アニメーション画像といって、ブラウザ上(InternetExplorerやChromeやFirefoxなど)であれば、どんな環境でも動いて見える動画っぽい画像です。(Graphics Interchange Formatの頭文字をとっています)

上の歩く犬のGIFアニメのファイルサイズ(バイト数)は、6.51KB(キロバイト)です。
普通の写真で同じぐらいのファイルサイズだと、下の写真が大きさ90x74ピクセルで5.57KBです。

イメージ 2


GIFアニメーション画像は動きがあるので記事の中でとても目立ちます。
そして、私の作るGIFアニメーション画像は、とても軽く、読み込みに負荷をかけません。(ほとんどが50KB以下)

「動く画像はファイルサイズが大きいのでページ読み込みが遅くなる」と言われることがありますが、それは動画をgif形式に変換したGIFアニメの場合で、イラストタイプのGIFアニメは、とてもサイズが小さいのです。
ブログやホームページのちょっとした飾りに、目をひく効果が抜群ですので、ぜひお使いください。※2200点無料ダウンロードできるサイトはこちら

そんなGIFアニメーション画像について、詳しく説明します

GIFアニメのメリット

・スマホでもパソコンでも動いて見える。
(ブラウザ上やアプリ上で動くので、単純にフォルダ内のファイルを表示しただけでは、1コマ目だけが静止画として表示されます。写真アプリ、フォトアプリでは、最新版で動いて見えます)

・YouTubeなどの動画投稿サイトにアップする必要がない。

・フラッシュアニメのように何かのソフトに依存しない。
(フラッシュアニメは、adobe flash playerがインストールされていないと表示出来ません)

・how toものの説明が一目瞭然である。

動画開始を命令する必要がなく、ページ読み込みと同時に動き始め、無限にループする。
(1回だけ動作させたり、スタートボタンで開始する設定もできますが、一般的ではありません)

普通の動画も短い秒数でサイズを小さくすれば同じように表現できる。
イメージ 3
GIFアニメーション画像
168KB


GIFアニメのデメリット

長い動画や大きな動画はバイト数が大きくなりすぎて、使うのに適しない。

色数が256色に制限されているので、画質が悪い。(イラストなどはきれいに表現できる)
動画から変換したGIFアニメの例
イメージ 4

イラストのGIFアニメの例
イメージ 5

音声がつけられない。(そのほうがいい場合も多くあります)

作るのに技術がいる。(2コマ程度の簡単なアニメなら誰でもできますが、10コマ以上のアニメになると慣れと技術が必要です)

例えばこの犬のGIFアニメーション画像は、以下のように11枚の画像を使用しています。イメージ 1使用している画像↓イメージ 6

GIFアニメーション画像の保存方法と使い方

【保存方法】
スマホ①長押し②画像を保存する(ダウンロード)
パソコン①右クリック②名前をつけて画像を保存
【投稿方法】
普通の写真と同じです。ネット上(ブラウザ上)で動く画像です。
パソコン・スマホのアイコン表示画面では1コマ目だけが表示されます。
アプリ「写真」「フォト」最新版では、動いて見えます。

GIFアニメーション画像のファイル形式は、abcdef.gifのように拡張子gifがつきます。
ただし、静止画gifファイルの場合も拡張子は同じなので、アニメーションgifとの違いはファイル名だけではわかりません。
※ホームページ作成時には、ホームページビルダーでは、アニメーションgifに以下のようなアイコンマークがつくのでアニメと静止画を区別できます。
イメージ 7


GIFアニメーション画像を自分で作るには

サイトを利用する方法ソフトを使う方法があります。

・無料サイトでは、「無料バナー作成工房」さんが有名です。
  2.3枚の写真を用意してサイトにアップすれば、簡単にGIFアニメーション画像が作れます。詳しい説明はこちら(名前アイコンの作り方ですが、方法は同じです)

・有料ソフトでは、ホームページビルダー付属のウェブアニメーターがあります。

・無料ソフトでは、「Giam」などがありますので、「GIFアニメ作成」で検索して好みのものをダウンロードして下さい。

※当ホームページのGIFアニメーション画像は、すべてホームページビルダー付属のウェブアニメーターを使用して作成しています。

GIFアニメをLINEで使うには

イメージ 8
無料通話アプリ「LINE」を使っている人は多いと思いますが、
LINEでは、投稿画面にGIFアニメーション画像を投稿すると友だちに見てもらうことができます。

LINEの投稿画面は、自分のホーム画面の左下の「投稿」から、スマホに保存したGIFアニメーション画像を選んで投稿出来ます。
イメージ 9


投稿すると、静止画で表示されますが、タップすると動く画像として表示されます。
※スマホの種類によっては、タップしなくても動いて表示されます。
LINEの投稿画面スクリーンショット↓
イメージ 10

実際の画面では下のように動く画像が表示されます
イメージ 11


トーク画面では、残念ですが、静止画になってしまいます。


GIFアニメをtwitterに投稿するには

イメージ 12
TwitterではGIFアニメをツイートに載せて投稿することが可能です。

2016年からGIFアニメの投稿機能が実装されたので、だれでもGIFアニメが投稿できるようになりました。

しかし、Twitterに投稿できる画像の上限は5MBですので5MBを超える画像は投稿できません。

当ホームページのGIFアニメーション画像は、ほとんどの画像が投稿可能です。

例えば「ラジオ体操、やってるよ」と画像をつけてツイートするとき
実際の画像を投稿せずにこんなGIFアニメをつけて投稿すれば、個人情報や位置情報をオープンにせずにすみますね。
イメージ 13


TwitterへGIFアニメを投稿する方法

iPhoneの場合

ツイート作成画面の下部に画像を選択するアイコンがあると思いますが、その隣の「GIF」と書かれたアイコンからGIF画像を追加することができます。

アイコンを選択するとiPhoneのカメラロールが開かれ、保存されているGIF画像を選択し投稿することができます。

androidスマホの場合

AndroidスマホからTwitterへGIFアニメを投稿する場合もiPhoneと手順は同じです。

ツイート作成画面から「GIF」のアイコンをタップすることでフォトからGIFアニメを選択・投稿することができます。


※Facebookやmixiへの投稿方法は省略しますが、同様の手順で投稿できると思われます。

GIFアニメをメールで送信するには

スマホから送る場合、メール画面で普通の写真を送るときと同じ添付動作をし、スマホに保存したGIFアニメを選択して、相手に送信します。
相手側は、以下のような操作で見ることができます。

相手がパソコンで見る場合

送られた相手は、受信箱では以下のように静止画で見えます。

↓例 ヤフーメールで受信した場合の受信箱
イメージ 14


添付画像をクリックして「スキャンしてダウンロード」などを選び、デスクトップなどに保存します。

保存した画像を右クリックすると
別窓が開くので「プログラムから開く」→「常時使うブラウザ」の順に選択します。
イメージ 15

イメージ 16

※あらかじめGIFアニメーション画像とブラウザを関連づけてある場合は、ダブルクリックするだけで表示されます。

ブラウザが開き、GIFアニメーション画像が動いて表示されます。

↓下はInternetExplorerで開いた例です。Chrome、Firefoxでも同様です。
イメージ 17
上はスクリーンショットなので動いていませんが、実際は下のGIFアニメーション画像が表示されます。
イメージ 11



相手がスマホで見る場合

メール受信画面からダウンロードすると「カメラロール」や「フォト」のダウンロードフォルダに保存されます。

フォルダ内では静止画のサムネイルで表示されますが、タップすると動いて見えます。

↓ダウンロードフォルダでの表示
(androidの場合)
イメージ 18


画像選択後の画面↓
イメージ 19
※最新版の「フォト」や「写真」アプリで動きます。

イメージ 11

皆さんも動くイラスト(GIFアニメーション画像)をブログやSNS投稿に活用してみて下さい。

イメージ 20



応援ありがとうございます。(素材ランキング)

開くトラックバック(4)

ブログバナー

ちいこ
ちいこ
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について

本文はここまでですこのページの先頭へ

[PR]お得情報

ふるさと納税サイト『さとふる』
お米、お肉などの好きなお礼品を選べる
毎日人気ランキング更新中!
コンタクトレンズで遠近両用?
「2WEEKメニコンプレミオ遠近両用」
無料モニター募集中!
ふるさと納税サイト『さとふる』
11/30まで5周年記念キャンペーン中!
Amazonギフト券1000円分当たる!
話題の新商品が今だけもらえる!
ジュレームアミノ シュープリーム
プレゼントキャンペーン

その他のキャンペーン

みんなの更新記事