1. TOP
  2. お役立ち
  3. デザイン
  4. 【クリエイターズ】動くLINEスタンプの作り方!APNGとは?

【クリエイターズ】動くLINEスタンプの作り方!APNGとは?

こんにちは。私です。

皆さんご存知でしょうか?なんといつの間にか動くLINEスタンプが申請できるようになってました。何事も新しい分野にいち早く参入すると成功する可能性が高くなるということでちょっと作ってみようかなーと思う私です。

ということで動くLINEスタンプについて作り方やらなにやらを調べてみました。


 
スポンサーリンク



 

制作ガイドラインは?

LINEクリエイターズスタンプのマイページにて制作ガイドラインが追加されていました。下記が詳細です。

 

必要数 サイズ(pixel) ファイル形式
メイン画像 1個 W 240 × H 240 APNG
アニメーションスタンプ画像 24個 W320 x H270(最大) APNG
トークルームタブ画像 1個 W 96 × H 74 PNG
  • アニメーションスタンプ画像はAPNG作成ツールを使用し、最終ファイル形式はAPNGファイルになります。
  • アニメーションスタンプ画像の素材はPNGファイル W320 x H270(最大)です。幅、高さ共に長辺どちらかが270px以上あれば、横長や(ex:W270 x H100)や、縦長の画像(ex:W100H x H270)の制作も可能です。
  • ループ数:1スタンプあたり1〜4回(再生時間4秒を超えない範囲内)。
  • 最大再生時間: 1スタンプあたり4秒まで。
  • 1つのAPNGあたりのPNGフレーム数:イラストは最低5~最大20フレームです。
  • カラーモードはRGBで制作してください。
  • 画像は1個 300KB以下で制作してください。26個すべての画像を1つのZIPファイル形式でアップロードする場合、ZIPファイルは20MB以下で作成してください。
  • APNGの最初の画像がLINE STOREまたはスタンプショップの販売時や静止時に表示されるため、制作する際はご注意ください。
  • APNGのサポート環境はFirefoxを推奨しています。Firefoxの最新版の環境にて動作確認を必ず行ってください。
  • イラストなどの背景は透過でお願いします。

んん?APNG形式?初めて聞いたぞ!

 

APNG形式とは

Animated Portable Network Graphicsの 略で APNGとのこと。

どうやらgifアニメに変わる新しい形式のようです。iosなどでサポートされているとのことで要するにpngのアニメーションverということになります。ということはgifのようにギザギザになったりしないで256色以上使えるというアニメ画像の可能性を無限に広げてくれるということになります。これはLINEスタンプのみならず、webサイトなどにもいろいろ使えそうですね。

 

APNGファイルを作成できるツールは?

無料ツールと有料ツールとありますが、それぞれ紹介します。

 

無料ツール

APNG Assembler

予め作成したpngファイルを組み合わせてアニメーション化するツール。

photoshopで制作する人はこれで1枚づつ書き出して作るのもいいかもしれません(そのうちphotoshopが書き出せる機能拡張しそうですが)下記は詳しく紹介している記事です。

http://hokanko2008.seesaa.net/article/414112269.html

 

 

有料ツール

Adobe Animate CC(Adobe Flash Professional CC)

アドビのFLASHのことです。フラッシュ自体は使用率は下降ぎみですが、アニメーションを制作する上では便利なツールです。下記は詳しく紹介している記事です。
https://ics.media/entry/3718

 

 

まとめ

いかがでしたでしょうか?

アニメーションは敷居が高い分、LINEスタンプの制作者のライバルは比較的減りそうですが、なにせ作るのがたいへんそうですね。制作スタンプ数は40個から24個に減っていますが、アニメーションをさせる画像を何枚作らないと行けないんだろうと思うと少し気持ちが重くなりますね。笑

しかしだからこそ爆売れチャンスがありそうです。やるなら本格的にライバルが増える前に取り掛かりたいですね。それではバーイ!

 

 

 

関連記事