LINEアニメーションスタンプの作り方をわかりやすく解説

LINEスタンプの猫キャラクターは何かを始める準備をしている所

LINEスタンプのデザインを始めるとやってみたくなるのが「アニメーションスタンプ」ですね。

しかしアニメーションスタンプは作り方が少しややこしく、手を付けてみるのが億劫になることが多いです。

今回は、アニメーションスタンプを簡単に作った事例を交えながら書いていきます。

この記事の内容
  1. LINEアニメーションのスタンプの準備の仕方
  2. LINEアニメーションスタンプの基本的な情報
  3. アニメーション作成の準備

LINEアニメーションスタンプの作り方

LINEアニメーションスタンプの作り方はとても簡単です。下記の手順で行うことができます。

  1. アニメーションのコマ出しを行う
  2. アニメーションで動く部分のパーツレイヤーを分ける
  3. アニメーションにするためのファイル管理構造を作る
  4. アニメーションソフトで制作開始
  5. アニメーションファイルの連続静止画を書き出す
  6. 各静止画を圧縮する
  7. 圧縮した静止画をAPNG変換ソフトで加工する

これだけの動作で完了です。

時間はかかるけどできた時の感動は大きい

LINEアニメーションスタンプは、ステップとしてはそれほど難しいものではないのですが、作る手間はものすごく大きいです。

それでもコツコツ作っていき、出来上がった時の感動はとても大きいものです。

少しずつでも作成していき、チャレンジしてみることをお薦めしています。

私たちも、LINEアニメーションスタンプの第2段を制作中ですが、動きのたくさんあるアニメーションを作成するのはとても時間がかかっています。

そこで生まれた制作ノウハウなどは、また情報共有をしていきます。

今回の記事では、私たちが作成したLINEアニメーションスタンプ第1弾をベースに解説していきます。

どんなフォーマットなの?

LINEのアニメーションスタンプは「APNG」というフォーマットで作成されています。

「APNG」形式の作り方については後述していきます。

解像度は?

アニメーションスタンプの販売には、3つの素材形式が必要です。

メイン画像

横240x縦240ピクセルの.png(APNG)方式が必要です。

トークルームタブ画像

横96x縦74ピクセルの.png(静止画1枚のみ)で大丈夫です。

アニメーションスタンプ画像

横320x縦270(最大)ピクセルの.png(APNG)方式が必要です。詳しい内容については後述していきます。

販売個数は?

アニメーションスタンプは、8個、16個、24個の中から販売個数を選択できます。

価格は?

価格は

  1. 250円
  2. 370円
  3. 490円
  4. 610円

から選択可能です。

アニメーションスタンプを制作する環境

まずは、アニメーションスタンプを制作する環境を紹介します。

Adobe Photoshop(スタンプデザイン)

私たちの制作環境は「Adobe Photoshop」になりますが、他のペイントツールでも全然問題はありません。

今回は、Adobe Photoshopベースで説明していきますが、現在はそれほどレイヤー構造も変わらないです。

Adobe Animate(モーション付け)

理想としてこのソフトがあるとアニメーションの手法によってはかなり楽になりますが、Adobe Photoshopや、他のアニメーションソフトでも問題はありません。

今ではフリーソフトで「AnimeEffects」というとても素敵なソフトもあります。

Pngyu(PNGデータの圧縮)

PNGデータを圧縮するソフトです。

圧縮設定をして一括で複数フォルダごと圧縮作業ができるのでとても便利なソフトです。

アニメーションスタンプは1コマの容量が300KB以内と定められているので、容量の調整を手動でやると大変なので、大変助かるソフトです。

APNGb(APNG形式への変換)

アニメーション用に作成された連番PNGを一つのファイルにまとめてくれるソフトです。

これが「APNG」形式に変換してくれるソフトです。

他のWebサイトなどで不具合が確認されていますが、不具合の検証をとり、私たちはこのソフトを使用しています。

普通に流れ作業で使用するには問題なくアイテム登録できています。

アニメーションスタンプを作る

それでは、アニメーションスタンプの制作に入っていきましょう。

今回は初心者向けなので、難しいアニメーションではなく、簡易的に作成可能なモーション付けのみを解説していきます。

ファイルの準備

アニメーションスタンプは、通常より工程が多いので出力されるファイルの管理が煩雑になりがちです。

デザインする内容によって少し構造は変わりますが、私たちは下記の画像のようにデータの管理をしています。

ファイル管理の仕方の参考画像

デザインするスタンプの種類を分けておく

LINEスタンプはいくつものラインナップがあるので、フォルダでデザイン種別を分けてあります。

デザイン種別に応じたツールとスタンプフォルダを同一階層に入れておく

デザインする種類によって使用するツールが違うので、種別ごとにツールとスタンプ作品のフォルダをまとめてあります。

工程順にフォルダを作っておく

アニメーションスタンプは通常よりも工程が多いので、進めていく順番ごとにファイルを作成してあります。

  1. 元素材(アニメーションに使うパーツやデザイン素材)フォルダ
  2. 登録する「メイン画像」フォルダ
  3. 登録する「トークタブ画像」フォルダ
  4. アニメーション制作に使用するベース素材種別フォルダ
  5. 圧縮前のPNGファイル格納フォルダ
  6. 圧縮後のPNGファイル格納フォルダ
  7. 圧縮調整する時のサブファイル格納フォルダ
  8. 「APNG」を格納するフォルダ

ここまでの準備はできたでしょうか。

次の記事では、実際のアニメーションスタンプ作成に入っていきます。

LINEアニメーションスタンプを作るための実践記事

アニメーションの制作には、Adobe CC環境があると効率がいいのですが、普通にライセンスを購入するとちょっと高いですよね…。

けれど、下記の講座受講を受けると付いてくるAdobe CCライセンスはお得な価格になります。

講座とAdobeCCの両方合わせても、普通にAdobeCCを買う金額より安いのはかなりお得です。

Adobe(アドビ)マスター講座 |Web、CG、映像、プログラミングの通信講座デジタルハリウッドのAdobeマスター講座の申込 

合わせて、アニメーション制作に役立つリンクも紹介しておきます。

最後まで記事を読んでいただきありがとうございました。

アニメーションスタンプは売れるの?

筆者も1つだけアニメーションスタンプを販売しています。

文字が点滅するだけのもの凄くシンプルな「ねこ看板」という作品なのですが、長い機関、ちょこちょこと売れ続けています。

アニメーションスタンプは制作負荷が大きい分、リリースされる数は少ないため、売れやすい傾向があります。

最近はAdobeのアニメーターツールなどでだいぶ手間が省ける用事なってきたので、チャレンジしてみる価値はありです。

APNGデータを作る記事のカバー画像
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業から法人化して初期の頃は、自分と同じく起業する人、スタートアップ企業への出資や資金調達を含めてサポートしていました。

最近は、主に自社のブログサイト運営やWebメディア、Webアプリの開発や運営、LINEスタンプやLINE絵文字等の2Dイラスト制作を中心にキャラクターデザインをしたり、3DCGによるコンテンツ制作事業をAR(拡張現実)と、VR(仮想現実)のプラットフォーム向けに行っています。

公式ブログサイトでは、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。

2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

SMPTE Professional Engineer Member

一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら