アニメーションスタンプの制作ガイドラインを発表」)。アニメーションスタンプは別名「ウゴスタ」とも呼ばれ、ユーザーにも人気のあるスタンプで、SNSをはじめ話題になっています。発表と同時に公開された「アニメーションスタンプ制作ガイドライン」にはファイル形式としてAPNG形式(アニメーションするPNG形式)が指定されてます。APNGファイルの作り方はあまり知られていないので、本記事では制作ガイドラインに沿ったAPNGファイルの作り方を徹底解説します。アニメーションスタンプの仕様アニメーションスタンプには次のような仕様があります。項目が多く感じるかもしれませんが、本記事で解説する方法で作成すればクリアできるので安心してください。詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください。この記事の情報もガイドラインの更新にあわせて随時アップデートしています。制作ガイドラインに沿ったAPNGファイルは次のような手順で進めます。各ステップで気をつけるポイントがあるのでチェックください。CC)を使用しましょう。CCは有料のソフトウェアですが、無料で試せる体験版期間あります。CCには次のようなメリットがあるので、アニメーションスタンプ制作に最適です。CCでLINEアニメスタンプ制作」で紹介してますので、あわせてご覧ください。CCやGIMPでも可能ですが、手間がかかります。アニメーションを滑らかにするにはコマを多くする必要があるからです。CCだと自動的に中間のコマを補完してくれる「トゥイーン」機能があるので作業の手間が激減します。CCでLINEアニメスタンプ制作」として紹介しているのでご参照ください。CCでのLINEアニメスタンプの作り方が紹介されています。実際にスタンプを販売しているクリエイターの記事なので、とても参考になるでしょう。アニメーションを作成する前の下ごしらえ本記事で作成したアニメーションスタンプのサンプルは次のURLからダウンロードできます。このファイルを参考にしながら読み進めてください。CCをインストールして起動します。起動したら[キャラクターアニメーション]の一覧から適当なサイズのプリセットを選びます。この後の設定で適切な内容に調整しますので、いまは適当な選択で構いません。3.0])を選択しておきます。作成後に任意の場所に保存すると、.flaという拡張子のファイルが生成されます。フレームレートの設定フレームレートを設定します。フレームレートとは、1秒間に何コマ(フレーム)切り替わるのかというものです(fpsという単位で表します)。アニメーションスタンプの仕様の中で「再生時間」の項目に関係します。最大フレーム(コマ)数は5〜20フレーム1〜4回ループ可能(再生時間4秒を超えない範囲内)上記の仕様は複雑に感じるかと思いますが、よくわからない方はフレームレートを20fpsに設定しましょう。10コマで0.5秒、20コマで1秒といった形で作成するとなめらかなアニメーションができます。サンプルでは、書き出したアニメーションスタンプのデータ容量との兼ね合いで、フレームレートを15fpsで設定しています。ステージサイズの設定ステージサイズを設定します。ステージサイズとは、アニメーションを描画する領域の大きさのことです。H:270」に設定します(Wは横幅、Hは高さ)。これでアニメーションを作成する下ごしらえが完了しました。※アニメーションスタンプの仕様で、アニメーションが描画されない余白は削除する必要があるので、左右もしくは上下に余白が生じる場合はステージサイズを調整してください。アニメーションを作成アニメーションの作成はタイムラインで行います。タイムラインとは、次の図のようなマス目のようになっているパネルです。縦方向がレイヤー順(重ね順)で、横方向が時間を表します。▲実際に作成したアニメーションのタイムライン。使い方」で紹介しています▲テキストのアニメーションを調整している様子。CCでアニメーションを作成したら、PNG形式で連番画像を書き出します。メニューより[ファイル]→[書き出し]→[ムービーの書き出し]を選択します。書き出したい画像の名前を入力します。ここではframe.pngとしていますが、生成時にframe0001.pngと自動でフレーム番号を割り振られます。シーケンス(*.png)]を選択し保存ボタンをクリックします。連番画像をステージサイズで書き出されるように設定します。透過(アルファチャンネル)を表現したいため次のように連番画像が書き出されます。ここまできたらあとはAPNGファイルに変換するだけです。連番画像を「アニメ画像に変換する君」でAPNGファイルに変換APNGファイルの変換には無料のツール「アニメ画像に変換する君」を使用します。WindowsとmacOSで利用できるソフトウェアです。ソフトウェアをインストールしましょう。「アニメ画像に変換する君」の使い方1連番画像の読み込み「アニメ画像に変換する君」を起動し、[ファイルを選択]ボタンを選択します。ファイルダイアログでは、ファイルをShiftキーを押しながら複数枚選択し、[開く]をクリックします。すると、「アニメ画像に変換する君」の画面内に複数の画像が読み込まれ、自動的にアニメーションが再生されます。「アニメ画像に変換する君」の[用途]は「LINEアニメーションスタンプ」と「ウェブページ用アニメ」から選択できます。今回は「LINEアニメーションスタンプ」を選択します。[フレームレート]と[ループ回数]を設定しましょう。アニメーションスタンプの仕様で1つのAPNGファイルあたり1〜4回ループ可能(再生時間4秒を超えない範囲内)とあるので、再生時間を気にしながら調整しましょう。サンプルではフレームレートを15fpsで作成していたので、[フレームレート]には「15」と入力します。3アニメ画像を保存[アニメ画像を保存する]ボタンをクリックして、ファイルの保存先を選択します。4APNGファイルの確認LINEアニメーションスタンプのAPNGファイルは拡張子は.pngです(.apngではありません)。出力したAPNGファイルをFirefoxブラウザを使って開き、アニメーションの再生を確認しましょう。5LINEアニメーションスタンプのルールのチェックLINEアニメーションスタンプのガイドラインには難しいルールが掲載されてます。このソフトウェアではルールに適合しているかチェックする機能があります。ファイルの保存後に、ルールに適合してない点があったらアラートで教えてくれます(ルールに適合していればアラートは表示されません)。ファイル容量」などガイドラインの一部ですが、少し安心してファイル保存できるようになると思います。容量が300KBを超えるようであれば[画質設定]タブからオプションを調整しましょう(デフォルトの設定で、PNG連番画像の最適化機能が有効になっているので、他のソフトウェアに比べてかなり容量が小さくなるはずです)。▲作成したアニメーションスタンプこれでアニメーションスタンプが完成しました。スタンプシミュレーターで確認LINEにはスタンプを確認できるWebアプリケーション「スタンプシミュレータ」が提供されています。Market」のマイページへアクセスし、左下にある[シミュレータを使ってみよう!]ボタンをクリックします。実際に使ったときの使用感や、雰囲気がチェックできるので、提出前に試しておきましょう。Marketで自作のスタンプが販売できるようになると発表があり、子供から大人、クリエイターや俳優とさまざまな方がスタンプを作って盛り上がりました。今でも楽しいスタンプが日々生まれています。そのような中で飛び込んできたアニメーションスタンプの発表。平成30年12月1日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。