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

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

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

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

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

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

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

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

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

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

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

動く部分と動かない部分

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

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

動く部分

アニメーション部分

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

動かない部分

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

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

重ねるとどうなるか

合成したアニメーション

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

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

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

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

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

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

そのままの連番ファイルのかたまりでは使用できないので、「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
ユニコブログの執筆者である小林玲王奈のアイコン
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

放送業界や映画業界で映像制作や新規事業の立ち上げを中心に16年間働いて2019年に独立。2020年1月にユニコーンコンサルティング株式会社を設立しました。現在は、国内・海外向けのWebメディアを複数サイト運営しながら、経営コンサルタントとして数社の技術顧問、及び複数の教育機関で特別講義をおこなったり、Web講演をしています。|BBT経営塾(旧:大前経営塾)第10期生 卒塾

当ブログの運営者情報は下記のページから確認できます。

運営者のプロフィール詳細