- 更新日: 2017年3月8日
- 公開日: 2015年11月6日
驚きを隠せない！GIFアニメーションの力を実感できる参考サイト10選
GIFって聞くと一昔前のトレンドと思われる方も少なくないかもしれません。複数の画像をパラパラめくりしてアニメーションぽく表現できる画像ファイルです。
参考になる「GIFアニメーション×Webデザイン」サイト10選
GIFとは？
GIF（Graphics Interchange Format）は、1987年アメリカのオンライン・サービス会社CompuServer社（現H&RBlock社）によって開発された技術で、画像ファイルでありながら動画を表現できる特徴があります。
Gifファイルの仕組み
GIFファイルは、JPEGやPNGなどの画像ファイルと異なり、ブロック要素で構成されているファイルになります。そのため通常の画像ソフトではなく、Internet ExplorerやGoogle ChromeといったブラウザでGIFファイルを開く必要があります。
■GIFファイルの中身イメージ■
Photo : What’s In A Gif
GIFのメリットクリック率
GIFファイルは、VIDEOファイルと違ってリンク設定を行うことができます。例えば、Google 社からのレポートによると、Web 広告の平均 CTR は 0.06 ％*といわれています。それに対して動画広告の CTR は 0.1 ~ 0.28 %** といわれ、平均よりも高いパフォーマンスを納めています。GIF を活用したバナー、リンク設定、広告を行うことによって、静止画以上の高いクリック率、強いては Web サイトの価値向上につながってくると考えられます。
- CTR・・・ネット広告の表示回数に対して、クリックされた数の割合。数値の高い方がいい。
GIFアニメーションのトピックス
- Facebook2015年5月末からGIFファイル対応開始。現在はイギリスとカルフォルニアに限って、プロフィール画像もGIFに対応。
ツイッター2014年6月からGIFサポート
Photo : Twitter Support
シングルページ × GIFアニメ―ション
かまぼこが登場して今年で900年になることを記念して制作されたWebページになります。シングルページのアクセントとしてGIFアニメーションが使用され、gifファイルをCSSに盛り込んでコーディングしています。PC用のGIFファイルとSP用のGIFファイルを用意し、全部で6種類のアニメーションが盛り込まれています。PC用のGIFファイルは700KB程度に調整し、ローディング時間もストレスを感じさせないような工夫が施されています。
サービス紹介 × GIFアニメーション
長野で学生向けにICTレッスンを提供する未来工作ゼミ。どのページも動きがあって面白いのですが、未来工作アニメを紹介するページでGIFアニメーションが活用されています。小学生から高校生に馴染むような優しいデザインと動きが特徴的です。尚、こちらのWebサイトはWordPressを用いて作成されています。
トップ画面 × GIFアニメーション
YMCA Interlab 安藤洋子共同研究開発プロジェクト5.1MB
サイトトップに7種類のGIFファイルを用意し、CSSでコマ送りのように見えるようにデザインされたサイトになります。紹介するプロジェクトのイメージが一瞬で分かるWebデザインとなっています。GIFファイルは、300KBから1MBほどのサイズを用意しているため、ページサイズは 5.1 MB と若干重めになっています。また基本的には PC ユーザーをターゲットにしたデザインです。
癒し系webデザイン×GIFアニメーション
千葉県内で複数のデイサービスや介護事業を提供する「カミハブのサト」。入居を検討されている方やそのご家族が、安心して施設を検討できるようなほっこりしたWebデザインになっています。GIFアニメーションは、トップページの所々でキリンやモグラが動くようにセットされていて、見ていて和みます。
コンテンツ紹介 × GIFアニメーション
オンデマンド業界大手のHuluが提供するGifファイルの紹介サイトになります。名画の一部分を無料でダウンロードでき、個人・非商用エリアで利用することが許可されています。サイト自体は一見すると静止画像ですが、マウスオンもしくは時間差でgifアニメーションが起動するように設定されています。オンデマンド・ユーザーの拡大を視野に入れたサイト・デザインとなっています。
作品紹介 × GIFアニメーション
カナダの映像クリエイター集団 Giant Ant。過去に制作した映像を、GIF アニメーションを使って断片的に分かり易く情報発信しています。映画やアニメ、プレゼンなど様々なジャンルの動画系サイトに応用できそうです。またこちらの GIF ファイルのタグ文の長さ（参考画像）も、参考になると思います。
比較表現 × GIFアニメーション
photo:FASTCOMPANY
世界のユニーク技術を紹介するFASTCOMPANYで、レスポンシブ・デザインの特徴を紹介する記事にGIFが使われています。レスポンシブ・デザインとノン・レスポンシブの違いをGIFアニメーションを使って分かり易く表現しています。印象的な点は、モバイルで表示した時にトップのスライドショーがGIFアニメーションに切り替わり、動きのある印象的なファーストビューとなっています。
機能紹介 × GIFアニメーション
photo : FROONT
オンラインWebクリエイト・ツールを提供するFROONT。FROONTを利用するとこんな風にWebを制作することができる、というイメージをGIFを使って発信しています。トップページに3つのGIFアニメーションが盛り込まれていますが、1つあたりのファイルサイズは50KBという軽量サイズで、モバイルでもストレスなく閲覧できる環境となっています。
SNS × GIFアニメーション
今年5月からプロフィール画像にGIFアニメーションを取り入れることができるようになったfacebook。表現の幅が広がりそうですよね。日本への対応も待ち遠しいモノです。
＼一流デザイナーのスキルが身に付く／
まとめ
いかがでしたでしょうか？WebデザインにおけるアニメーションというとGIF以外にもCSSやSVG、JavaScriptなどありますが、その中でも比較的簡単にGIFアニメーションは作成できる特徴があります。
Google Photo アプリを使ったり、オンライン上でも YouTube の動画を GIF に転換できるサービス（Video to GIF）があるなど、GIF 環境は素晴らしく整っていると思います。ただし、実際に Web デザインに GIF アニメーションを活用する時はファイルサイズや色調、再生速度など細かい点の編集が必要となってきます。PhotoShopや専用ソフトを使いこなして、Web デザインにフィットする GIF アニメーションを作って、活用していきたいですね！
- この記事を書いた人
- 阿蘇
