• SEOブログ

    スマホサイトWeb WordPressなどのSEO
    小画面 少コンテンツ 省テキスト 多画像対応の
    コーディング実験検証

  • SEOブログ

スキル不足でも動画 アニメーションPNGはAPNG Assemblerで簡単作成

スキル不足でも動画 アニメーションPNGはAPNG Assemblerで簡単作成
画像編集ソフトさえあればAPNG Assemblerでパラパラ漫画、スライドショー、なんちゃって動画!? スマホWebに動きをつける

スマホWebの動くコンテンツ APNG

小画面にいろいろな情報を盛り込んでは、ユーザー利便性を損なってしまう
アニメーションやスライドショー、パララックスや選択肢は多い
SVGなども、CSSやJQuery(JavaScript)が面倒臭い

そこで、弊社のようにスキルが乏しいウェブマスターでも、簡単にパラパラ漫画のアニメーションができあがる、アニメーションPNGがありがたい
アニメーションGIFよりもきれいに仕上がってクール

APNGとアニメーションGIFの比較

アニメーションGIF

アニメーションGIF

アニメーションPNG APNG

アニメーションPNG

とはいうものの、こんなヘタレの画像では明確な差が出ない…
容量も、アニメーションGIFが81KBで、アニメーションPNGが163KBで、意味がないかも

まぁ後日、差がはっきりしたものをアップロードしよう

ところで、この2つのアニメーション画像には、リンク設定している
裏で余計な設定が蠢いて、パソコンなどでポインターを乗せると、青い横棒が伸び縮みして鬱陶しいが、ご理解を
(上の目次をはじめ、ほとんどのリンクでこうなるしかけ…)

アニメーションPNGはAPNG Assemblerが定番

画像のアニメーションは、編集ソフトのほかに、専用ツールが要ることが多い

アニメーションPNGの定番として、APNG Assembler の名が挙がる

APNG Assembler

マニュアルのサンプル集にも書いているが、悩むのはアニメーションの動き

右は「1秒間に1コマ」、左は「次の画像まで3秒」、この設定で3秒ごとに画像が切り替わる

WordPressでアニメーションGIFやアニメーションPNGを使うとき

WordPressでは、投稿画面の「メディアを追加」、メディアの「新規追加」などを使うと、ファイルが壊れると思われる

よって、FTPで適当な場所にアップロードして、リンクする

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ

«
»