僕はGIFが大好きです。記事のちょっとしたアクセントに使われていたりインパクト重視で使われていたりと様々ですが、どのGIFも「より読者に伝えたい」という想いが感じられます。
GIFについてなるべく簡単に解説しましたので、GIF初心者の皆さんも是非挑戦してみて下さい！ 表現の幅がグッと広がりますよ！
GIF自体の説明などもしているため、必要のない人は目次から飛んでください。
ブログにだけ与えられた力
人は文字よりも画像、画像よりも動画に反応しやすくアフィリエイトなどでの購買率も上がります。
ブログはYoutubeなどの動画サイトと比べ情報量は少なくなります。しかし、だからといって動画の方が優れたメディアというわけではありません。ブログのメリットは手軽さです。また、得たい情報が載っている部分を表示する操作性はブログの方が上です。
ブログは手軽さを武器に他のメディアと戦っていますが、実は一つだけ特殊なアイテムを持っています。それが今回紹介する
「GIF」
です。
例えば、下図の伸び縮みするハンガーのレビューをする場合
と画像で説明するよりも、
GIFを貼り付ける方が効果的に情報を伝えられます。
(354KB)
また、GIFは食レポでも活躍します。
下図は先日食べてきたつけ麺です
GIFを使うとこのように表現できます。
(71KB)
こっちの方が湯気が見えて美味しそうですよね！ また、カメラアングルを右に流して麺や具を映すとより良くなると思います！
他にも、このようにとにかくインパクトを与えたいときにも便利です。
(347KB)
何もない部屋でダンボールを有効活用してたけどついに家具が届いたよ！
GIFの特徴
GIFアニメには5つの特徴があります。
インパクト
読者は絶対に見ます。文字列の中に動くものがあると、よほど修行を積んでいなければ自動的に見てしまいます。一方、一般的に記事内の全ての文字を読まれることはほとんどありません。「絶対に伝えたい事」をGIFで表現すれば必ず伝えられます。
手軽さ
動画と比べてGIFは手軽に視聴できます。というか、気付いたときには既に再生されているので読者に再生ボタンを押してもらう必要がありません。
ループ性
GIFはデフォルトでループするため繰り返しの表現に最適です。
音無し
GIFには音が無いため読者にイヤホンを用意させる必要がありません。電車内でも見れます。
画像よりも重く動画よりも軽い
GIFは何枚もの画像を高速で表示しているため画像よりも容量は重くなります。動画を貼るほどではないけど画像では伝えずらいときに使用しましょう。
GIFに適したもの
上記の特徴からGIFアニメに適したものをまとめるとこのようになります。
絶対に満たさなければいけない3つの条件
- 短い尺（0.1～6.0秒程度）
- 音無しで伝わるもの
- 動きのあるもの
より適した2つの条件
- ループさせたいもの
- インパクトを与えたいもの
GIFの作り方
Animated GIF editor and GIF maker
このサイトが使いやすくてお勧めです。
動画からGIFを作る方法
「Video to GIF」タブの「Video to GIF」を選択
GIFにしたいファイルを選択し「Upload!」をクリック
GIFのカスタマイズ画面が表示されます
「Convert to GIF」で変換されページ下部にGIFが作成されます。表示されたGIFでよければ右クリックして「名前をつけて保存」、変更したい場合は上部の数値を変えてもう一度「Convert to GIF」をクリックします。
ファイルサイズは必ずチェックしてください。
150KB程度であれば次に行うGIFの圧縮で約70KBになるため問題ありません。200KB以下を目安にカスタマイズの数値（時間・サイズ・FPS）を調整しましょう。
つけ麺GIFのように尺が短くても良いものはどんどん削りましょう。1ループさせたときに不自然でなければどれだけ短くても問題ありません。つけ麺GIFは0.3秒しかループさせていません。
(71KB)
（0.3秒の繰り返し。1秒にしても風景は変わらないので無駄に容量を3倍にしてしまうだけです）
画像からGIFを作る方法
画像から作るとパラパラ漫画のようなGIFが作れます。
(193KB)
このようなGIFが作りたいときは一度動画にせずとも先程紹介したサイトで画像からGIFが作れます。（撮影する時はカーテンを閉めましょう。ふと外を見たら隣のマンションの住人にガン見されてました）
「GIF Maker」タブをクリックして「ファイル選択」でGIFにしたい画像を複数選択し「Upload!」
カスタマイズして「Animate it!」で作成される
PC画面をGIFとして録画する方法
このソフトで簡単にPC画面をGIFにできます。操作説明などに重宝します（Excelの使い方の記事とか）
こちらはScreenToGifを使って撮影した記事です。この頃は僕もGIFを使い慣れていなかった事と絵が下手な事の相乗効果で撮影に10時間くらいかかりました･･･
GIFの圧縮
このサイトで圧縮できます。
ファイルが日本語だと圧縮に失敗することがあります。失敗したらファイル名を英語にしてから再挑戦してみてください。
GIFの貼り付け
JPGやPNGと同じように貼り付けられます。
しかし、僕は以前GIFを貼り付けると黒い線が入ってしまう現象が起きました。その際に使用した手法も解説しておきます。（容量が大きいと画像の様には貼り付けられないようです。どうしても貼り付けたいときに使用して下さい）
DropBoxの直リンクで貼り付け
僕がいつものように貼り付けられないときはDropBoxを使用しています。
まず、DropBoxにGIFを保存し「共有」を選択します
「リンクを作成」しアドレスをコピーします
先程コピーしたアドレスを2点編集します
- 最後尾の「?dl=0」を削除
- 「www.dropbox.com」を「dl.dropboxusercontent.com」に変更
参考にしたサイトはこちらです
【備忘録】Dropboxの画像のURL（直リンク）の取得 - ないものは作りましょう。
編集して出来上がったアドレスをHTMLで貼り付けましょう。これで問題なくGIFを使えます。
GIFに集中線をいれる
こちらのサイトでGIFや静止画に集中線をいれられます。
(347KB)
このGIFの集中線もこのサイトでいれました
画像のURLを入力する必要があるため、一度インターネット上にアップロードしてください。はてなブログであれば「はてなフォトライフ」でOKです。貼り付けの際に説明したDropBoxの直リンクでも出来ます。
はてなフォトライフの場合は画像を右クリックして「画像アドレスをコピー」してください。
まとめ
短く音無しで動きのあるものをGIFにする
作成：Animated GIF editor and GIF maker
集中線：!!!集中線GIFメーカー!!!
GIFを作成したら是非教えてください！
見に行かせていただきます！
・環境を整えないと効率的なアウトプットができない。故にブログも捗らない。
・デザインフェスタvol.45に行って緊縛吊り体験をしてきました
・「全人類群馬県民化計画」〜両毛線に揺られて〜
・PCスキルを初心者から上級者へ向上させる方法と考え方11選【パーティション分割まで】
