実際にLINEアニメーションスタンプを制作した実例を公開

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

この記事はLINEアニメーションスタンプの作り方をわかりやすく解説の続きです。

この記事でアニメーションスタンプの作成を進めていくには、上記の記事でアニメーションスタンプを作るために必要なデータの保存のファイル構成を準備しておく必要があります。

この記事の内容
  1. アニメーションフレームの作り方
  2. アニメーションフレームの圧縮
  3. アニメーションフレームの連結

この記事は初心者でも作れるアニメーションスタンプの制作を目的にしているので、非常に簡単なアニメーション構成で進めていきます。

1コマをひとつずつ描きこんでいく進め方からはかなりショートカットしているので予めご理解ください。

アニメーションフレームの作り方

アニメーションスタンプを作っていくには、各スタンプで3つの準備をしておくことが必要です。

  1. 動く部分と動かない部分のパーツを分けておく
  2. アニメーション制作ソフトを用意する
  3. LINEアニメーションの約束事に適合した静止画連番ファイルを連結するソフトを用意する

今回は、私たち販売しているLINEアニメーションスタンプで「にゃっこらさんの猫看板」をベースに進めていきます。

動く部分と動かない部分

にゃっこらさんの猫看板は、すごく簡単にアニメーションスタンプを作るために、動く部分は「文字」だけにしています。

ものすごく凝った素敵なアニメーションスタンプはたくさんありますが、うまく構成すれば他の素敵なスタンプのように表現することも可能です。

動く部分

アニメーション部分

文字だけの部分が点滅するように調整しています。

動かない部分

アニメーションスタンプの背景マスク部分

文字が点滅する部分を囲うようにディスプレイをデザインしてあります。

重ねるとどうなるか

合成したアニメーション

重ねるとこのようなイメージになります。実際のアニメーションイメージはLINE STOREで「にゃっこらさんの猫看板」と入れると出てきます。超簡単な仕様で恐縮ですが、そこで確認できます。

アニメーション制作ソフト

アニメーション制作ソフトの紹介

私たちはAdobe PhotoshopやAdobe Animateを使用していますが、なかなかそのような環境を作ることも難しいのでいくつかのデザインソフトを紹介します。

  • Adobe PhotoshopとAdobe Animate
  • CLIP STUDIO PAINT
  • GIMPとFire alpaca(フリーソフト)

連番ファイルの連結ソフト

上記で紹介したデザインソフトを使用すると、アニメーション状態になった静止画連番ファイルが生成されます。

そのままの連番ファイルのかたまりでは使用できないので、「APNG」というひとつのファイルにまとめるコンテナを作成する必要があります。

今回は、LINEクリエイターズマーケットの公式動画で紹介されている「Pngyu」と「APNGb-v2.0.1」を使用しました。

その理由ですが、公式で紹介されているこのソフトはうまく動作しない部分がある情報が多かったので、不具合が起きないような手順を説明していきます。

アニメーションフレームの書き出し

アニメーションフレームの書き出し

アニメーションスタンプを作っていくために、あらためて仕様をおさらいします。

画像の形式

  • メイン画像 240×240ピクセル APNG形式
  • スタンプ画像 320×270ピクセル APNG形式
  • トークルームタブ画像 96×74ピクセル PNG形式

APNGの形式

  • フレーム数は5〜20フレーム/秒まで
  • ループ数は4回まで
  • 最大再生時間は4秒まで
  • 画像の容量は300KB以内

その他

  • 検証環境はFirefoxの最新バージョンを推奨
  • ストアでは、1コマ目がサムネイル表示される
  • カラーモードはRGBにする
  • 余白のトリミングをちゃんと行うこと

アニメーションフレームは5コマからになっていますが、5コマ間の間をフェードインはクロスフェードのエフェクトを使用して、コマ移動の間をスムーズに表現してあげることでリッチなコンテンツになるので、手間はかかりますがなんとか頑張りましょう。

アニメーションフレームの圧縮

アニメーションフレームの圧縮を圧縮する

今回は、アニメーションの連番ファイルが一つのスタンプあたり20ファイル出ていることを想定します。

圧縮ソフトの起動

ここで連番ファイルの圧縮を行います。連番ファイルの圧縮は非常にシンプルです。

現在、ファイル構造はアニメーションの書き出し時に、スタンプごとに「01」「02」「03」となっているはずです。

圧縮前に、圧縮するファイルを丸ごとコピーしてバックアップした状態にしておきましょう。

ファイル圧縮のイメージ

「Pngyu」には、各スタンプ画像のフォルダを丸ごと投げ込んでしまえば一気に圧縮ができます。

「Compress Start」を押すだけで完了します。

圧縮前のファイルは、1コマ30KB~50KBくらいの容量のはずです。

圧縮後は1コマあたり10KBくらいまで圧縮されるので、「容量」の問題はクリアになります。

アニメーションフレームの連結

アニメーションスタンプのAPNGの書き出し方法画像イメージ

圧縮されたアニメーションフレームの連結作業に入ります。

ここでは「APNGb-v2.0.1」を使用します。

もし、設定情報はとにかくすぐに簡単に書き出したいということであれば下記の記事で別のソフトを紹介しています。

APNGデータを作る記事のカバー画像
アニメーションフレームを連結する

画像の圧縮のときは、フォルダごとソフトに投げ込んで圧縮しましたが、「APNGb-v2.0.1」では、フォルダ内の連番ファイルを全て選択してソフトにドロップします。

下記に「APNG」にする時の設定項目を書いていくのですが、前提条件は

  1. スタンプのコマ数は20コマである
  2. 1コマ20フレーム再生を想定
  3. 4回ループをさせる
設定項目
  1. 「Loops」に4と入力する
  2. 「All frames delay」を1/20と入力する
  3. プレイボタンを押して「APNG」生成

たったこれだけです。変換後、保存場所が設定できるので、「名前の変更後」に所定のフォルダに保管していきましょう。

拡張子は「.png」なので注意が必要です。

完成したアニメーションのサンプル
実際のAPNGデータです
画像をダウンローしてブラウザにドロップするとAPNGの動きを確認できます

これをデザインしたアニメーションスタンプほ数だけ行います。

「APNGb-v2.0.1」は、ひとつ前に設定した情報が反映されないようで、見た目の数字は合っているのですが、実はデフォルトの数字が適用されるバグがあります。

再度、同じ数字を入力し直すと正常に変換できますので、繰り返しは大変ですがやってみてください。

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

LINEスタンプの作り方をわかりやすく解説
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業に対して出資や資金調達などのサポートを中心に事業を行っていました。

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

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

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

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

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

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

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

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。

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

教育関連では複数の教育機関で定期的に講演を行っており、主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演しました。

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

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

ユニコーンコンサルティング®|公式Webサイト