見出し画像

【Google AI Studio】時短クッキング No.64：LINE Animation Sticker Studioがv2.0にアップデートしアニメーション絵文字のAPNGに対応

ROROSUKE LABO

毎度、rorosukeです。
LINEスタンプ、作ってますか？

最近は、これまで公開してきたツール類を順次アップデートしていますが、今回もその流れです。

以前、APNG画像の解析アプリを発展させ、LINEスタンプの制作ガイドラインに合わせて画像を自動調整する機能を搭載したWebアプリ
「LINE Animation Sticker Studio」を公開しました。

そして前回アップデートでは、各フレームの表示時間を調整できる「可変FPSエディター」を搭載しました。そのときの記事がこちらです。

これまで「LINE Animation Sticker Studio」は、次のスタンプ種類に対応していました。

  • 静止画スタンプ

  • アニメーションスタンプ

  • ポップアップスタンプ

今回、ここに新たに、

  • 絵文字

  • アニメーション絵文字

への対応を追加し、「LINE Animation Sticker Studio v2.0」として公開しました。

これにより、アニメーションスタンプ用のAPNGをアニメーション絵文字用に変換したり、アニメーション絵文字のフレーム表示時間を「可変FPSエディター」で調整したりできるようになりました。


基本的なツールの能力

まずは、「LINE Animation Sticker Studio」で何ができるのかを簡単に紹介しておきます。

ここで紹介するのは、前バージョンから搭載されている基本機能です。

機能1：さまざまなサイズの画像をLINE用に変換できる

さまざまなサイズのPNG／APNGデータを、選択したLINEスタンプ種類に合わせて変換できます。

次の画像は、1280pxのオリジナルデータを、アニメーション絵文字用の180×180pxに変換した例です。

変換前：1280サイズのオリジナルデータ
変換後：アニメーション絵文字サイズ

小さな画像を大きなサイズへ拡大すると、輪郭がぼやけたり、画質が低下したりします。大きな画像から小さな画像へ縮小することで回避できます。

機能2：選択した種類に応じて必要なファイルを出力できる

選択している種類に応じて、必要な形式のデータが出力されます。

「静止画スタンプ」または「絵文字」を選択した場合はPNG形式の静止画データが、「アニメーションスタンプ」または「アニメーション絵文字」を選択した場合はAPNG形式のアニメーションデータが出力されます。

また、ポップアップスタンプでは、

  • スタンプ画像となる静止画

  • ポップアップ画像となるアニメーション

の2種類が必要です。ポップアップスタンプを選択して保存すると、この2種類のデータがまとめて出力されます。

機能3：メイン画像とトークルームタブ画像を生成できる

メイン画像やトークルームタブ画像を、ボタン1つで生成できます。

スタンプ種類が、静止画スタンプ、アニメーションスタンプ、ポップアップスタンプ、絵文字、アニメーション絵文字のどれであるかを判定し、それぞれに必要な画像だけを出力します。

たとえば、ポップアップスタンプでは、2種類のメイン画像と1種類のトークルームタブ画像が必要ですが、本ツールではこれらをまとめて生成できます。

メイン・タブ画像生成ボタン
ポップアップ用として出力された2種類のメイン画像とタブ画像

機能4：フレームごとの表示時間を調整できる

「可変FPSエディター」では、各フレームの表示時間を細かく設定できます。

たとえば、

  • 1フレーム目を100ms表示

  • 2フレーム目を200ms表示

  • 最後のフレームだけ長く表示

といった調整が可能です。

操作を簡単にするため、

  • 均等配置

  • だんだん早く

  • だんだん遅く

  • 最後だけ長く

といったプリセットも用意しています。

設定したフレーム時間はCSVファイルとして書き出せます。また、保存したCSVファイルを読み込み、設定を再利用することもできます。

機能5：静止画から簡易アニメーションを作成できる

静止画をアニメーションデータに変換するには、複数のフレームを作成し、画像に何らかの変化を加える必要があります。

本ツールでは、静止画から5フレームを生成し、モザイク状の変化を加えることで、簡易的なアニメーションデータを作成します。

こちらは、本格的なアニメーション制作機能というよりも、静止画から動くデータを試作するためのオマケ機能です。

静止画→アニメ変換で5フレームのモザイクアニメになる


v2.0の主なアップデート内容

今回のアップデートの中心は、絵文字とアニメーション絵文字への対応です。それ以外にもいくつかの改善を行いましたので、まとめて紹介します。

1．絵文字・アニメーション絵文字用サイズへの対応

選択した種類に合わせて、画像を絵文字用のキャンバスサイズである180×180pxへ自動的にリサイズします。

静止画の絵文字はPNG形式、アニメーション絵文字はAPNG形式で出力します。

元画像の縦横比が180×180pxと異なる場合も、画像全体がキャンバス内に収まるように自動調整します。

絵文字は1ファイル1MB以下、アニメーション絵文字は1ファイル300KB以下になるように自動調整します。調整方法は色数の削減で対応しています。

2．絵文字専用の画像生成ロジックを追加

通常のスタンプでは、メイン画像とトークルームタブ画像をそれぞれファイルとして用意します。

絵文字またはアニメーション絵文字を選択している場合、「メイン・タブ画像を生成」ボタンを押すと、トークルームタブ画像の「tab.png」だけを生成・保存するようにしました。

3．プレビューの拡大・縮小表示と背景色選択に対応

前バージョンでは、読み込んだ画像を原寸大でプレビュー表示していましたが、v2.0では新たに次の表示倍率に対応しています。

  • 2倍表示

  • 等倍表示

  • 1/2倍表示

また、透明部分を確認しやすくするため、プレビュー画面の背景色を選択できるようにしました。

4．ファイル名による自動判定を追加

アップロードしたファイル名に「emoji」という文字列が含まれている場合、自動的に絵文字系のデータであると判定するロジックを追加しました。

静止画であれば「絵文字」、APNGであれば「アニメーション絵文字」が自動的に選択されます。

５．余白調整のオン／オフ

LINEスタンプのルールに、上下左右に10px程度の余白を求められます。この「余白」とは透明色部分を意味します（白地の部分ではないので注意）。このチェックを行うかどうかの「余白調整」スイッチを追加しました。オンにすれば調整する、オフにすれば調整しないになります。

右端にあるのが「予約調整」

余白調整をオフにしておくと、余白に関しては何もしません。オンにした場合には次の調整を行います。余白は、一般的には画像作成時に調整済みであるはずなので、通常はオフでよいかと思います。

静止画、アニメーション、ポップアップの場合
上下か左右に10pxの余白を設けます。イラストは基本中央に配置されます。アニメーションの場合には、すべてのフレームを調査して全体的に余白を調整します。

絵文字、アニメーション絵文字の場合
上下左右に余白があった場合、削除します。イラストは基本中央に配置されます。アニメーションの場合には、すべてのフレームを調査して全体的に余白を調整します。


基本的な使い方

基本的な操作方法は前バージョンと同じです。

ここでは、初めて使用する方向けに簡単に説明します。

1．PNGまたはAPNGをアップロードする
アプリを起動すると、ファイルを読み込むための画面が表示されます。処理したいPNGまたはAPNGファイルを、画面上へドラッグ＆ドロップしてください。

一度に選択できるファイルは1つです。

ファイルを読み込むと、画像またはアニメーションのプレビューが表示されます。

2．変換する種類を選択する
変換先として、次のいずれかを選択します。

  • 静止画スタンプ

  • アニメーションスタンプ

  • ポップアップスタンプ

  • 絵文字

  • アニメーション絵文字

種類を選択したら、「LINE基準で修正」ボタンを押します。選択した種類に合わせて、画像サイズやアニメーションの再生時間などが調整されます。

最適化中は、画面に処理状況を示すステータスメッセージが表示されます。

最適化中のステータスメッセージ

3．変換したデータを保存する
この時点では、まだデータはディスクに保存されていません。保存したいときには「保存」ボタンを押します。

４．メイン・タブ画像を作成する
「メイン・タブ画像を生成」ボタンを押します。表示と保存データの種類は、選択中のスタンプ種類によって変わります。

5．可変FPSエディターを使用する
可変FPSエディターは、各フレームの表示時間を10ms単位で調整する機能です。各フレームの数値を直接入力する方法のほか、次のプリセットを利用できます。

  • 均等配置

  • だんだん早く

  • だんだん遅く

  • 最後だけ長く

プリセットを適用したあと、必要な部分だけ数値を微調整することもできます。


公開URLはこちらです

使いたいときには、こちらへアクセスしてください。

シェアURLはこちらです。


まとめ：アニメーション絵文字の制作も、できるだけ簡単に

LINEスタンプやLINE絵文字の制作ガイドラインには、画像サイズ、ファイル形式、フレーム数、再生時間、ファイル容量など、さまざまな条件があります。

苦労してデータを作成したにもかかわらず、アップロード時にエラーが表示され、原因が分からず途方に暮れることもあります。

静止画でも調整項目は少なくありませんが、アニメーションになると、さらに作業が複雑になります。

アニメーションスタンプとアニメーション絵文字では、1個あたり5～20フレームに収める必要があります。また、アニメーション絵文字の再生時間は最大4秒です。

フレームごとの表示時間を調整しながら、規定の再生時間内に収める作業は、専用ツールがなければなかなか大変です。

そのようなときこそ、「LINE Animation Sticker Studio」の出番です。

画像サイズや再生時間などの面倒な調整をツールに任せることで、制作者はデザインや動きといった、よりクリエイティブな作業に集中できます。

そして今回、「LINE Animation Sticker Studio v2.0」は、絵文字とアニメーション絵文字にも対応してほしいといというユーザーさんのご要望にお応えしたものとなります。

アニメーション絵文字を制作している方や、アニメーションスタンプ用の素材を絵文字として活用したい方に、ぜひ使っていただければと思います。

以上！


関連アプリの紹介

本サイト（ROROSUKE LABO）では、他にもさまざまなツールを公開していますので、興味ある方はご覧になってください。

MP4,MOV,GIF,APNG形式からAPNG形式に変換するアプリ

さまざまな動画ファイルをAPNG形式に変換するアプリです。範囲を選択したり、クロップして一部だけを抜きだすこともできます。

APNG形式からアニメＧIF形式に変換するアプリ

上記の逆で、APNG形式からアニメーションGIF形式に変換するアプリです。アニメ―ションスタンプをnoteに掲載したいときに、GIF形式であればブラウザ上で動きを再現することができます。


#GoogleAIStudio #LINEスタンプ #LINE絵文字 #アニメーションスタンプ #アニメーション絵文字 #APNG #画像変換 #Webアプリ #生成AI #時短ツール

いいなと思ったら応援しよう！

ROROSUKE LABO 記事なり、プログラムなりが役に立ったと思った方は、 チップの応援よろしくお願いいたします。 次の開発もがんばろうかな、という気になりますのだ （笑）