スマホサイトは動画は重い… それでもリッチに!でもサクサク見せたいならGIFアニメがおすすめ。

このエントリーをはてなブックマークに追加

先日、ブログで「背景フルスクリーン動画” のサイト」を紹介しました。
今回はこちらに続き、最近のWebトレンドで注目を集めているGIFアニメーションを紹介します。GIFアニメーションを使えば、リッチな表現を手軽に表現できます。

GIFアニメーションが有効に使われている事例

GIFアニメーションをふんだんに使ったお祭り感満載の「おしい!広島県」

このサイトは、広島の知られざる「おしい!」を紹介し、たくさんの人が実際に広島を訪れて「おいしい!」県になることを目指しています。 サイトについた「いいね!」は35,000以上、オフィシャル動画の再生回数は、64万回を超えています。

「おしい!広島県」には随所にGIFアニメショーンが使われ、一番の特徴である”サイトの賑やかさ”を演出しています。

以下のような、サイトの両サイドで動いている画像がGIFアニメーションです。

より詳しい解説はFlash一切なし!HTML / CSS / javascriptでできた、アニメーション満載の「おしい!広島県」 をご覧ください。

背景フルスクリーンGIFアニメのサイト「TIERRA」

福岡にある美容室のサイトです。一瞬、フルスクリーン動画と思うかもしれません。複数のGIFアニメーションファイルを切り替えて表示しています。 背景いっぱいにGIFアニメショーンが使われており、レトロな感じやおしゃれな印象を受けます。

スマホでもさくさく再生

GIFアニメーションは一部のOSを除き、スマートフォンでも閲覧することが出来ます。
上の二つのサイトをスマートフォンでご覧ください。

おしい広島県 TIERRA

PCほどスムーズとはいきませんが、きちんと動作していることがわかると思います。 GIFアニメーションは、動画よりも軽くリッチな表現を可能にしてくれるため、よりスマートフォンに向いているかもしれません。

GIFアニメーションをつくる

GIFアニメーションの作成方法はいくつかありますが、Photoshopを使う方法とiPhoneアプリを使う方法を紹介します。

-Photoshopでつくる方法

メニューバーのウィンドウ⇒アニメーションを選択し、作成することができます。

ディレイの時間などを調整することができます。

以下のリンクが詳しいです。

フレームを使用した GIF アニメーション作成方法 (Photoshop CS5)

-iPhoneアプリでつくる方法

こちらは自分で取った写真をGIFアニメに変換してくれるアプリケーションです。

GIFアニメーションSNS「Gifture」

自分で取った写真をその場でGIFアニメーションに変換してくれます。 作成したGIFアニメーションはPCでも閲覧することができ、保存することも可能です。

実際に以下のGIFアニメーションを作ってみました。

GIFアニメーション自体は昔からあり、どちらかというと古い技術というイメージがあるかもしれません。しかし、限られた性能と時間で情報を伝える必要のあるモバイルウェブ時代に、軽くリッチに表現出来るGIFアニメーションは見逃せない要素の一つではないでしょうか。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ