APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
Electron（エレクトロン）とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electronエレクトロン製のアプリケーションはChromiumクロミウム（Chromeブラウザの元となるもの）とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツー
Electron (エレクトロン)はウェブの技術でデスクトップアプリケーションを開発できる人気のフレームワーク。HTML5とCSS3とJavaScriptで開発できるため、ウェブ開発者であれば手軽に導入できます。それもクロスプラットフォームなので、ワンソースでWindowsとmacOS向けのソフトウェアが作れることが利点です。 GitHub社の「Atom」やMicrosoft社の「Visual Studio Code」もこのElectronを使って開発されているなど、大手企業が採用していることでも人気の高さがうかがえます。この入門サイトでは、開発環境のセットアップからサンプル・アプリケーションの作り方を解説します。 Electron入門編 最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう Electronの導入手順を解説。ゼロからアプリケーションのビルドまでの手順を
GoogleがAngular 2を正式リリース！ 未来のウェブ標準を意識した新しいフレームワーク グーグルが開発するJavaScriptフレームワークAngularの最新バージョン「Angular 2アンギュラー・ツー」が本日、正式リリースされました。 Angular 2はSPAエスピーエー（シングル・ページ・アプリケーション）の開発に利用するフレームワーク。AngularJSの後継にあたります（バージョン1.x系ではJSフレームワークとしてAngularJSアンギュラー・ジェイエスという名称でしたが、バージョン2からはJSに限定しないフレームワークとなったためAngularという名称になっています）。 AngularJSはMVWフレームワークとして2010年にグーグルよりリリースされ、多くのウェブサイトで採用されてきました。新バージョンではアーキテクチャーの一新により、ウェブ標準が意識さ
モジュールバンドラーwebpack（ウェブパック）はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？ 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
Electron（エレクトロン）とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electronエレクトロン製のアプリケーションはChromiumクロミウム（Chromeブラウザの元となるもの）とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツー
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
▲メイン画像（「アニメーションスタンプ制作ガイドライン」より引用） ▲トークルームタブ画像（「アニメーションスタンプ制作ガイドライン」より引用） デザイン カラーモードはRGB 画像サイズは幅320×高さ270px以内（幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能） 背景は透過 アニメーションのない余白部分は削除 APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される 再生時間（1つのAPNGファイルあたり） 最大再生時間は4秒 最大フレーム（コマ）数は5〜20フレーム 1〜4回ループ可能（再生時間4秒を超えない範囲内） データ容量（1つのAPNGファイルあたり） 300KB以下 詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください。この記事の情報もガイドラインの更新にあわせて随時アップデートしてい
Amazing Flash
AnimateとクリスタでLINEアニメーションスタンプ 10年ぶりにLINEアニメーションスタンプ作りました。これです。擬人化を抑えたトイプードル LINEアニメーションスタンプを作るってことはAPNGを作るってこと。AnimateはAPNGに対応してないけど変換すればいい。FlashでAPNGではAPNG Assemblerを使った。今では「アニメ画像に変換する君」でAPNGにするのが定番らしいぞ。 実は10年前の今頃、某航空会社のアニメーションスタンプ作ったことあんのです。8コ作るのに10日ほどかかったかな。当時はアニメーションスタンプ出始めの頃で、一般には仕様が公開されてなかった。アニメーションスタンプが珍しいので成果はあったそうで、クライアントに好評だったよ。APNG化する手段もなく、連番PNGを納品したんだっけ。キャラの密度が高いのでPNGのファイルサイズを抑えるのに苦労したな
APNGエーピング(Animated Portable Network Graphics)形式とは、高画質なアニメーション用の画像形式です。類似の画像形式としてGIFアニメーション形式が存在しますが、APNGは高画質化が可能であり透過情報の扱いに長けています。詳しい利点は記事「これからはGIFアニメからAPNGの時代に」で紹介しています。 本記事ではAPNGファイルの作り方を解説します。APNGファイルの作り方はいろいろありますが、「できるだけデータ容量を軽く」というテーマでまとめてました。 ※LINEアニメーションスタンプの作り方については、記事「LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説」で解説してます。 APNGの作り方の手順 本記事では次の手順で解説します。 Adobe Animateでアニメーションを作成 アニメーションの連番画像を書き出し
祝！LINEアニメーションスタンプ承認記念にAPNGファイル作成でわかりづらい所を解説 - こうですか？わかりません
タイトル長っ！ みなさん！やりました～！この前ブログで紹介したアニメーションスタンプ「２枚目が現れるスタンプ」が無事承認されました～。 アニメーションスタンプについての記事 www.yuru-ppo.xyz 何度もリジェクトを乗り越えてついに承認されました。 「２枚で気持ちを伝えるスタンプ」 気になった方はストアに見に行ってみて下さい。画像クリックしても飛べますよ！ https://store.line.me/stickershop/product/1499705 さて、本題に入りますが、みなさんはLINEスタンプ作った事ありますか？ 作った事ある人でも動くスタンプの方はまだ手を出していない方は多いんじゃないでしょうか？ 私も制作を始めた頃は「LINEアニメーションスタンプの制作ガイドライン」の内容で理解出来ない事があったり、聞きなれないAPNGという画像形式にとまどいました。 APNGと
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
モジュールバンドラーwebpack（ウェブパック）はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？ 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
AngularとElectronやIonicで挑戦した
デスクトップ・モバイルアプリ開発
ng-japan 2017( http://ngjapan.org/ )での登壇資料です。Angular 2+とElectronやIonic/Cordovaで開発した事例を紹介します。 - アニメ画像に変換する君 - 攻略アプリ 逆転の書Read less
ChromeがAPNG (Animated PNG) に対応したので作ってみた | SONICMOOV LAB
Chromeのバージョン59でAPNG (Animated PNG)が対応されたみたいなので、早速作ってみたいと思います。 目次 APNG (Animated PNG)とは？ APNGのデモ APNGのブラウザ対応状況 APNGの作り方 Adobe Animate CCでアニメーションを作成 PNGシーケンスに書き出し 「アニメ画像に変換する君」のダウンロード APNGへの書き出し設定 JSライブラリ「apng-canvas」で非対応ブラウザでも再生 APNG (Animated PNG)とは？ アニメーションをするPNGファイルで、The Animated Portable Network Graphicsの略です。アニメーションGIFのPNG版といったところですが、アニメーションGIFが256色しか扱えなのに対して、APNGは24bitのフルカラーでアルファチャンネルを扱えます。 また
▲メイン画像（「アニメーションスタンプ制作ガイドライン」より引用） ▲トークルームタブ画像（「アニメーションスタンプ制作ガイドライン」より引用） デザイン カラーモードはRGB 画像サイズは幅320×高さ270px以内（幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能） 背景は透過 アニメーションのない余白部分は削除 APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される 再生時間（1つのAPNGファイルあたり） 最大再生時間は4秒 最大フレーム（コマ）数は5〜20フレーム 1〜4回ループ可能（再生時間4秒を超えない範囲内） データ容量（1つのAPNGファイルあたり） 300KB以下 詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください。この記事の情報もガイドラインの更新にあわせて随時アップデートしてい
アニメーションpng
アニメーション PNG (Animated Portable Network Graphics, APNG) とは、静止画像の PNG 形式を拡張し、 GIF アニメと同じ要領で動画を再生可能にしたものだ。 概要GIF の代替フォーマットとして作られた PNG はアニメーション機能を持っていなかった。そのため、アニメーションを扱える規格として MNG 形式が PNG から派生して作られた。しかし MNG は構造が複雑だったこととライブラリが巨大で重いためにほとんど普及しなかったどころか一時サポートしていた Mozilla Corporation は撤退した。そこで同社が新たに作った規格が APNG (エーピング)だ。 GIF アニメが256色しか扱えないのに対し、 APNG は 24bit のフルカラーで扱うことができるうえ、透過色を複数定義できる（よって、32bit になる）。 これによ
APNGエーピング(Animated Portable Network Graphics)形式とは、高画質なアニメーション用の画像形式です。類似の画像形式としてGIFアニメーション形式が存在しますが、APNGは高画質化が可能であり透過情報の扱いに長けています。詳しい利点は記事「これからはGIFアニメからAPNGの時代に」で紹介しています。 本記事ではAPNGファイルの作り方を解説します。APNGファイルの作り方はいろいろありますが、「できるだけデータ容量を軽く」というテーマでまとめてました。 ※LINEアニメーションスタンプの作り方については、記事「LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説」で解説してます。 APNGの作り方の手順 本記事では次の手順で解説します。 Adobe Animateでアニメーションを作成 アニメーションの連番画像を書き出し
APNGとは？ APNG(エーピング)とはアニメーションするPNG画像のことです。もともとブラウザベンダーのMozillaが提案した規格で、Webサイトでのアニメーション表現に利用できます。従来よりアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなどクオリティ面で悩ましいところが多々あります。その悩みを払拭してくれると期待されるのがAPNG形式です。 最近では、LINEのアニメーションスタンプ(うごスタ)にも使われています。 APNGの詳細はICS MEDIAにて解説してますのでご覧ください。 GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 APNGファイルの作成に必要なものはPNGの連番画像 APNGファイルの作成には、次のようなアニメーションの
今日は過去のブログの補足です。すみませんm(__)m どうも、おはこんばんちは。ゆるっぽです。 前回といってもかなり前ですが、LINEアニメーションスタンプ作成時のファイルフォーマットであるAPNGについての解説をしました。 ↓こちらです。 最近久しぶりにアニメーションスタンプを作っていて、細かい設定を忘れていたので自分のブログで確認しようとした所、今使っているソフトと違うものを使用していたので、現在使っているソフトの説明です。今後の自分の確認用のための記事でもあります(笑)。 現在使っているAPNG作成ソフトは「アニメ画像に変換する君」です。←クリックでダウンロードページに飛べます。 LINEスタンプアニメーション用のAPNGファイル作成が出来るので便利です。 起動するとこの画面が現れます。 非常にシンプルで分かりやすいソフトで、用途とアニメーションと画質の設定をしたら画像を読み込んでア
ICSはわずか9人の小規模なウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトICS MEDIAを運用しています。このサイトは開設から3年目を迎え、今年は「ニッチな技術よりも、ウェブ制作に幅広く役立つ記事の充実」をテーマとしてやってきました。そんなICS MEDIAにとっての2016年を、あらゆる数値を使って多角的にレポートしたいと思います。 アクセス解析を公開、年間223万PVでした 1/1〜12/27の期間でGoogle Analyticsで集計したところ、年間PV(ページビュー)は223万PVという結果となりました。昨年の3倍、一昨年のアクセス数の10倍となり、堅実な成長を実感できます。なお、今年一年で執筆した記事は64本で、昨年の55本よりもわずかに多い本数となりました。 2016年もっとも読まれてた記事はこれ！ 年間TOP 10の紹介 今年はどの記事がもっとも読まれた
【番外編】LINEアニメスタンプをAnimateを使って作る - 初心者のためのAdobe Animateブログ
クラゲふにゃ！AnimateでLINEアニメスタンプが作れるって本当ふにゃ！？ フフフフ…その通りだよ。 なんせアプリケーション名が「Animate」ってくらいだからね。 前のコマを半透明に表示させて確認しながら描けたり、 アニメ作りに特化した機能がそろってるよ。 ふにゃもアニメスタンプを作って販売してみたいふにゃ〜！ Animateを使った作り方を教えて欲しいにょ♪ やる気まんまんなのはいいけど作る前に ちゃんとアニメスタンプの仕様をよく確認するんだよ。 ふにゃクンはおっちょこちょいだから… ---------------------------------------------------------------------------------------- やってみよう！ 歩くカメールクンだよ。 1秒4コマのアニメをループさせているよ。 1.アニメを描く準備 LINEアニメスタ
GoogleがAngular 2を正式リリース！ 未来のウェブ標準を意識した新しいフレームワーク グーグルが開発するJavaScriptフレームワークAngularの最新バージョン「Angular 2アンギュラー・ツー」が本日、正式リリースされました。 Angular 2はSPAエスピーエー（シングル・ページ・アプリケーション）の開発に利用するフレームワーク。AngularJSの後継にあたります（バージョン1.x系ではJSフレームワークとしてAngularJSアンギュラー・ジェイエスという名称でしたが、バージョン2からはJSに限定しないフレームワークとなったためAngularという名称になっています）。 AngularJSはMVWフレームワークとして2010年にグーグルよりリリースされ、多くのウェブサイトで採用されてきました。新バージョンではアーキテクチャーの一新により、ウェブ標準が意識さ
1. WebPとは？Googleが開発している静止画像フォーマット です。 特徴としては、高圧縮率、アルファチャンネル可、アニメーション可能、と言ったところです。 アニメーションできる画像形式としては animated gif とか APNG とかもありますが、クオリティとファイルサイズと将来性の面で WebP が有利かなと思う次第です。 （主要なOS・ブラウザは対応している） 本記事では、アニメーション WebP の作り方を解説します。 2. 何でアニメーションを作ればいい？アニメーション制作ツールは何でもいいですが、最終的に「連番 PNG ファイル」に出力できる物を使ってください。 筆者は After Effects が良いと思います！ 3. 何で変換するの？「アニメ画像に変換する君」Microsoft Store でダウンロード(無料) ググると良く紹介されているツールですが、大きな
Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 #朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨ pic.twitter.com/ZMgH0bAJyY — Eri Matsushita 松下 絵梨 (@matsu_eri) June 22, 2023 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印の左側にある「ビデオタイムラインを作成」ボタンをクリックします。 レイヤーごとに、タイム
クックパッド デザイナーのよーた（@yotaszk）です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか？ UIデザインツール？、プロトタイプングツール？・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです（本当に勿体無いので2回）。 もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグインを活用することで、3Dデザイン・アニメーションなど、ハイクオリティなデザインを簡単につくれます。 このnoteでは、実際に「クックパッド」アプリに取り入れた知見をもとに、Figmaでアニメーションを制作する事例、作り方、なぜ入れたか3つをまとめます！ 事例：レシピ/つくれぽ投稿機能をまとめた「のせる」のお知らせベルアイコンFigmaのプラグインで作ったアニメーションはこちら。お知らせが来ると右上のポ
アニメーションWebPの作り方 - Qiita
先日調べたWebPにアニメーションを持たせることが出来るとわかったので試しに作ってみた。作る方法は限られているがGIFアニメより制約がな無い分使う機会は多いと感じた。以下にテストで作った手順をまとめる。 テストで使う動画は以前作った動画を使う。尺も短く8秒だからテスト素材には丁度よい尺の動画。この動画をアニメーションwebpに変換してみる。 手順 手順はとてもシンプル アニメーション連番PNGを用意。 アプリ「アニメ画像に変換する君」で変換。 まず連番PNG用意。今回はテストなので小さめにBlenderから直接960 x 430pxフレームレートは24fpsで書き出す。 次にMS Storeから「アニメ画像に変換する君」というアプリをインストール。名前はふざけているが使いやすく優秀なソフト。 アプリを開いて先程書き出したPNGをインポート。フレームレートを設定して「LINEアニメーションス
Amazing Flash
AnimateとクリスタでLINEアニメーションスタンプ 10年ぶりにLINEアニメーションスタンプ作りました。これです。擬人化を抑えたトイプードル LINEアニメーションスタンプを作るってことはAPNGを作るってこと。AnimateはAPNGに対応してないけど変換すればいい。FlashでAPNGではAPNG Assemblerを使った。今では「アニメ画像に変換する君」でAPNGにするのが定番らしいぞ。 実は10年前の今頃、某航空会社のアニメーションスタンプ作ったことあんのです。8コ作るのに10日ほどかかったかな。当時はアニメーションスタンプ出始めの頃で、一般には仕様が公開されてなかった。アニメーションスタンプが珍しいので成果はあったそうで、クライアントに好評だったよ。APNG化する手段もなく、連番PNGを納品したんだっけ。キャラの密度が高いのでPNGのファイルサイズを抑えるのに苦労したな
Electron (エレクトロン)とは、Webの技術でデスクトップアプリケーションを作成できるテクノロジーです。HTML5とCSS3、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを一つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electron製のアプリケーションはChromiumクロミウム（Chromeブラウザの元）とNode.jsノードジェイエスがランタイムとなっています。Webコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツール、インスタレーションや
アニメ画像に変換する君 - Free download and install on Windows | Microsoft Store
This is an application that converts sequential images into APNG or WebP files. ■ Features of this application: - Creation of APNG files - Creation of WebP files - Creation of LINE animation stomps - Compliance check for LINE stomp animation rules - Setting animation loops - Creation of animated images for web pages - Creation of HTML for displaying these images
こんにちは、 フロントエンドエンジニア坂本です。 今回は、いにしえのインターネットの演出を支え、今なお根強い支持を得ているGIFアニメーションについてお話させてください。 個人的には、簡単にブラウザで動く演出を作ることができたり、いろんな人がいろんなGIFアニメーションを作ったりしていて、コンテンツとしてGIFアニメがすごく好きなんです。 ただ、この子かなり癖が強い…。 ということで、そんな癖の強いGIFアニメーションとうまく付き合っていくための話をします。 GIFアニメーションを仕事の制作物として使用したいと考え始めている方に読んでいただきたいです。 GIFアニメーションとは ※一応お約束でGIFアニメーションの説明 概要 まず、GIFというのはPNGとかJPEGみたいな画像の形式のこと。 そして、GIFアニメーションはその名の通り、GIF形式の画像でアニメーションするやつ。 Wikip
Amazing Flash
AnimateとクリスタでLINEアニメーションスタンプ 10年ぶりにLINEアニメーションスタンプ作りました。これです。擬人化を抑えたトイプードル LINEアニメーションスタンプを作るってことはAPNGを作るってこと。AnimateはAPNGに対応してないけど変換すればいい。FlashでAPNGではAPNG Assemblerを使った。今では「アニメ画像に変換する君」でAPNGにするのが定番らしいぞ。 実は10年前の今頃、某航空会社のアニメーションスタンプ作ったことあんのです。8コ作るのに10日ほどかかったかな。当時はアニメーションスタンプ出始めの頃で、一般には仕様が公開されてなかった。アニメーションスタンプが珍しいので成果はあったそうで、クライアントに好評だったよ。APNG化する手段もなく、連番PNGを納品したんだっけ。キャラの密度が高いのでPNGのファイルサイズを抑えるのに苦労したな
APNGとはAnimated Portable Network Graphicsの略で、静止画連番ファイルをひとつのファイルに格納してパラパラ漫画のようにアニメーション再生を可能にするフォーマットです。 よく聞く代替フォーマットとしてGIFやWebPフォーマットもありますが、私たちはLINEスタンプの作成で馴染みのあるフォーマットなので今回はAPNGを紹介します。 APNGについて簡単にそのファイルの仕組みを説明します。APNGなどの静止画連番ファイルは、見た目はひとつのファイルにみえていてもその中身には、連番ファイルから変換した時の何十フレーム（何十枚もの静止画ファイル）が格納されています。実は、現在のデジタルシネマの映像もこの静止画連番ファルを再生する方式です。 APNGに変換できるソフトを紹介 現在、容易にAPNGファイルに変換できるアプリケーションは２種類あります。ひとつは「アニメ
今回は、巷に溢れている無料のapng作成ツールを使って、実際に作ってみよう、というお話です。 そもそもapngっていうのは、『アニメーションpng』のことで『動くpng』って事です。 gifだとどうしても透過部分がジャギジャギってなってしまうのですが、pngだとなりませんよね？ アルファチャンネルをサポートしているかどうかの違いですがパッと見きれいにできたと思っても… 背景にのせると残念な結果に… そもそも表示できるブラウザが少なく、あまり普及していなかったこのapngですが、 LINEのクリエイターズで販売するアニメーションスタンプで有名になりましたね。 私本人も知ってはいたものの作ったことがなかったので、この際 無料のapng作成ツールを使って、実際に作ってみようと思います。 今回、私は「アニメ画像に変換する君」でやってみます。理由は名前…ですかねw ではコマごとの画像を用意して… ”
GIFアニメは次世代へ！動くpng画像、apng形式の作り方
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 フリーソフトを使って作成します。 2016年11月現在、作り方としてはこんな感じです。pngさえ作ってしまえばfreeのソフトを通すだけなので作成自体は楽ですね。 連番のpng画像を作成する際は、Adobe Animate CCなどで書き出すと良いと思います。（Flashがいつの間にかこんな名前に変わっていたんですね…） 変換のためのフリーソフトもいくつか試してみたのです
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
After Effects(アフターエフェクト)でアニメーションLINEスタンプ（Apng）の作り方 - ホワイトボードアニメーション制作・手書き動画ならキザキヤ（東京・新宿）
After Effects(アフターエフェクト)でアニメーションLINEスタンプ（Apng）の作り方 2017年11月20日 2020年2月4日 動くLINEスタンプを作成 皆様、こんにちは。映像制作キザキヤでホワイトボードアニメーションを制作している大橋です。 以前にLINEスタンプの動くバージョンのアニメーションLINEスタンプを制作しました。 それから、しばらく時間が経ち動くLINEスタンプの制作の仕方も忘れ始めていることに気がついたので 再度動くLINEスタンプの制作をすることにしました。 以前にLINEのアニメーションスタンプを制作した時はAdobeのAnimate CCを使用して制作をしました。 このAdobeのAnimate CCが個人的に使いにくかったので、スムーズに制作ができなかったということがありました。 そこで今回は動く（アニメーション）LINEスタンプをAdobeの
背景透過の動画を作りたい｜マヨナカ工房 雑記帳
始めに最近モーショングラフィックスを作るのにハマりぎみです。それでいくつか作っているうちに「背景透過してるやつが作りたい」と思い、色々調べたり試したりした徒然なる記録です。 ※2023年10月25日現在の話です。 今まで作った作品の例 ↓ （ホラーなので苦手な方は再生しない方がいいかも） 動画ファイル制作の作業環境Windows11 PhotoshopCC ※主にPhotoshopで動画（モーショングラフィックス等）の作成をしています mp4は透過できないのか できない！！（泣） まず超汎用的保存形式のmp4で背景透過できないかな？と思ったんですが、mp4は背景透過に対応してないようです。 詳しい説明は出来ないけど、mp4のレンダリング画面では背景の指定ができないようになっています。「アルファチャンネル」の所で背景の有無を指定するんですが、グレーアウトしていますよね。 mp4のレンダリング
という感じ。作ったことがない人からしたら？？？って感じになるかもしれないけど、実際はそんな難しい事ではないのでご安心を 書き出しファイルはAPNGまず書き出しファイルについてはAPNGという形式のファイルでないといけない。 APNGって聞きなれないけど、要はPNG画像を繋げてアニメーション化した、アニメーションPNGファイルの事。 自分は動くスタンプはGIFかと思っていたけど、違うらしい。このAPNG形式でないとアップロードできないので注意してください。 APNGの書き出し方法は、PNGの連番を「アニメ画像に変換する君」等のフリーソフトで変換する方法もあるが、CLIPSTUDIOなら直接APNGとして書き出せる。 ファイル→アニメーション書き出し→アニメーションスタンプ(APNG)で書き出しが出来る。 サイズは幅320×高さ270px以内 ファイルサイズに関しては320×270px以内。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
最新版で学ぶElectron入門 – HTML5でPCアプリを開発する利点と手順 – ICS MEDIA
Electron入門サイト〜開発経験者が解説する導入手順と魅力 - ICS MEDIA
GoogleがAngular 2を正式リリース！ 未来のウェブ標準を意識した新しいフレームワーク - ICS MEDIA
最新版で学ぶwebpack 5入門 - Bootstrapをバンドルする方法 - ICS MEDIA
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう - ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 - ICS MEDIA
ウェブ用アニメーションを劣化なく保存できる画像形式APNGの作り方 – ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
最新版で学ぶwebpack 5入門 - Bootstrapをバンドルする方法 - ICS MEDIA
LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 - ICS MEDIA
ウェブ用アニメーションを劣化なく保存できる画像形式APNGの作り方 - ICS MEDIA
APNG AssemblerでアニメーションするPNG(APNG)を書き出す - Qiita
APNGファイル作成時に使っていたソフトを変えたので軽く説明 - こうですか？わかりません
オウンドメディアは成功したか？ ICS MEDIAの2016年 - ICS MEDIA
GoogleがAngular 2を正式リリース！ 未来のウェブ標準を意識した新しいフレームワーク - ICS MEDIA
アニメーション WebP の作り方 | OPENSPHERE Inc. Blog
PhotoshopでAPNGやWebPアニメーションを作ろう｜松下 絵梨
Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン｜よーた / Yota Suzuki
最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA
「GIF重いね」の話 - 重すぎるGIFアニメーション- | 株式会社ニジボックス
APNGの作り方|アニメーションファイル作成アプリを紹介｜ユニコブログ®
無料のapng作成ツールを使って、実際に『アニメーションpng』を作ってみよう ｜ フクロウのブログ｜株式会社フクロウ｜株式会社フクロウ
ラインの動くスタンプを作って販売してみた！CLIPSTUDIOを使った作り方