アニメーションgifを簡単作成 複数の画像を切り替えて商品のイメージを効果的に伝えよう

公開日:  最終更新日:2014/10/13

アニメーションgifを簡単作成 複数の画像を切り替えて商品のイメージを効果的に伝えよう
複数の画像を切り替えて表示する方法として、このブログでもいくつか紹介してきました。
jQueryなどのスライダーを使って切り替えて表示するのが最近の定番なのではないでしょうか。
これらの方法は設置する際に、ファイルをダウンロードしたり設置したりとある程度の知識等が必要になってきます。

そこで、本日は使う場面は限られるかもしれませんが、もっと簡単に複数の画像を切り替えて表示する方法を紹介したいと思います。

スポンサードリンク

アニメーションgifもまだまだ現役 効果的に活用してみよう

134-5.png
画像を自動的に切り替える方法としては、最近ではjQuery(JavaScript)を使う方法が多いかと思います。少し前はFlashを使ったサイトをたくさん見かけましたが、最近は減ってきましたよね。さらにそれ以前は、アニメーションGIFを使った方法をよく見かけました。

もう古い技術になってしまったと思われがちなアニメーションGIFについて、まだまだ効果的に活用している方法を紹介したいと思います。
jQuery(javascript)、Flashなどを使う方法だと、実装するのに少しハードルが上がってしまいますが、アニメーションGIFであれば、簡単に作成出来るWebサイトなど画像さえ用意すれば誰でも簡単に作成することが出来ます。

で、実際に見かけたのが「スイマーバ」という赤ちゃんの首につける浮き輪の楽天商品ページ

【あす楽】【25日までビタットプレゼント】【無料ギフト包装】【★代引・送料無料★】スイマーバ Swimava【認定正規販売店】【ご出産祝】【楽ギフ_包装】【HLS_DU】【RCP】おふろ プール うきわ首リング 正規 スポーツ 知育


上記の商品ページの中にアニメーションGIFを使って画像を切り替えている部分があります。
134-1.png
こんな感じで写真部分が自動的に切り替わります。
134-2.png
利用している様子を色んな写真を切り替えながら表示しているのは見せ方としては効果的だと思います。
134-3.png


こういった商品は動画もあるとさらに効果的ですね。
134-4.png
アニメーションGIFは画像としては1つのファイルなので、リンクを貼る際には1つのリンクしか貼ることが出来ませんが、今回紹介したように商品ページであればリンクを貼る必要もなく、画像を切り替えて表示するだけで商品のイメージを伝えることが出来そうです。

アニメーションGIFを簡単に作成出来るWebサイト

134-6.png
GIFアニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房
使い方は簡単で、必要な画像を用意するだけで、今回紹介したようなアニメーションGIFを作成することが出来ます。
134-7.png
上記サイトで作成したサンプル
134_sample.gif


画像を用意さえすれば、あっという間に複数の画像を切り替えて表示するアニメーションgifを作成することが出来ました。1つの画像になってしまうので、画像ごとにリンク先を変えたりすることが出来ませんが、見せるだけで良い場合など使える場面では十分に利用できると思います。ぜひ、活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑