驚きを隠せない!GIFアニメーションの力を実感できる参考サイト10選


驚きを隠せない!GIFアニメーションの力を実感できる参考サイト10選

GIFって聞くと一昔前のトレンドと思われる方も少なくないかもしれません。複数の画像をパラパラめくりしてアニメーションぽく表現できる画像ファイルです。

目次
  1. 参考になる「GIFアニメーション×Webデザイン」サイト10選
  2. GIFとは?
  3. シングルページ × GIFアニメ―ション
  4. サービス紹介 × GIFアニメーション
  5. トップ画面 × GIFアニメーション
  6. 癒し系webデザイン×GIFアニメーション
  7. コンテンツ紹介 × GIFアニメーション
  8. 作品紹介 × GIFアニメーション
  9. 比較表現 × GIFアニメーション
  10. 機能紹介 × GIFアニメーション
  11. SNS × GIFアニメーション
  12. まとめ

参考になる「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アニメーションのトピックス

シングルページ × GIFアニメ―ション

全国かまぼこ連合会

かまぼこが登場して今年で900年になることを記念して制作されたWebページになります。シングルページのアクセントとしてGIFアニメーションが使用され、gifファイルをCSSに盛り込んでコーディングしています。PC用のGIFファイルとSP用のGIFファイルを用意し、全部で6種類のアニメーションが盛り込まれています。PC用のGIFファイルは700KB程度に調整し、ローディング時間もストレスを感じさせないような工夫が施されています。

サービス紹介 × GIFアニメーション

未来工作アニメ

長野で学生向けにICTレッスンを提供する未来工作ゼミ。どのページも動きがあって面白いのですが、未来工作アニメを紹介するページでGIFアニメーションが活用されています。小学生から高校生に馴染むような優しいデザインと動きが特徴的です。尚、こちらのWebサイトはWordPressを用いて作成されています。

トップ画面 × GIFアニメーション

gif-ymcaYMCA Interlab 安藤洋子共同研究開発プロジェクト5.1MB

サイトトップに7種類のGIFファイルを用意し、CSSでコマ送りのように見えるようにデザインされたサイトになります。紹介するプロジェクトのイメージが一瞬で分かるWebデザインとなっています。GIFファイルは、300KBから1MBほどのサイズを用意しているため、ページサイズは 5.1 MB と若干重めになっています。また基本的には PC ユーザーをターゲットにしたデザインです。

癒し系webデザイン×GIFアニメーション

癒し系-gifカミハブのサト

千葉県内で複数のデイサービスや介護事業を提供する「カミハブのサト」。入居を検討されている方やそのご家族が、安心して施設を検討できるようなほっこりしたWebデザインになっています。GIFアニメーションは、トップページの所々でキリンやモグラが動くようにセットされていて、見ていて和みます。

コンテンツ紹介 × GIFアニメーション

fulu-gifhulu THE PERFECT GIF

オンデマンド業界大手のHuluが提供するGifファイルの紹介サイトになります。名画の一部分を無料でダウンロードでき、個人・非商用エリアで利用することが許可されています。サイト自体は一見すると静止画像ですが、マウスオンもしくは時間差でgifアニメーションが起動するように設定されています。オンデマンド・ユーザーの拡大を視野に入れたサイト・デザインとなっています。

作品紹介 × GIFアニメーション


Giant Ant

カナダの映像クリエイター集団 Giant Ant。過去に制作した映像を、GIF アニメーションを使って断片的に分かり易く情報発信しています。映画やアニメ、プレゼンなど様々なジャンルの動画系サイトに応用できそうです。またこちらの GIF ファイルのタグ文の長さ(参考画像)も、参考になると思います。

比較表現 × GIFアニメーション

photo:FASTCOMPANY

世界のユニーク技術を紹介するFASTCOMPANYで、レスポンシブ・デザインの特徴を紹介する記事にGIFが使われています。レスポンシブ・デザインとノン・レスポンシブの違いをGIFアニメーションを使って分かり易く表現しています。印象的な点は、モバイルで表示した時にトップのスライドショーがGIFアニメーションに切り替わり、動きのある印象的なファーストビューとなっています。

機能紹介 × GIFアニメーション

froontphoto : FROONT

オンラインWebクリエイト・ツールを提供するFROONT。FROONTを利用するとこんな風にWebを制作することができる、というイメージをGIFを使って発信しています。トップページに3つのGIFアニメーションが盛り込まれていますが、1つあたりのファイルサイズは50KBという軽量サイズで、モバイルでもストレスなく閲覧できる環境となっています。

SNS × GIFアニメーション

gif-facebook
Molly McHughさん / facebook

今年5月からプロフィール画像にGIFアニメーションを取り入れることができるようになったfacebook。表現の幅が広がりそうですよね。日本への対応も待ち遠しいモノです。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか?WebデザインにおけるアニメーションというとGIF以外にもCSSやSVG、JavaScriptなどありますが、その中でも比較的簡単にGIFアニメーションは作成できる特徴があります。
Google Photo アプリを使ったり、オンライン上でも YouTube の動画を GIF に転換できるサービス(Video to GIF)があるなど、GIF 環境は素晴らしく整っていると思います。ただし、実際に Web デザインに GIF アニメーションを活用する時はファイルサイズや色調、再生速度など細かい点の編集が必要となってきます。PhotoShopや専用ソフトを使いこなして、Web デザインにフィットする GIF アニメーションを作って、活用していきたいですね!


関連記事

阿蘇
この記事を書いた人
阿蘇
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp