ポップアップスタンプの制作方法

ポップアップスタンプの詳しいつくり方、ポイントをまとめました。

もくじ

ポップアップスタンプの特徴

ポップアップスタンプは、静止画のスタンプ画像とアニメーションするポップアップ画像の2種類から構成されます。

  • ポップアップ画像
  • スタンプ画像

ポップアップ画像は、トークルーム画面全体にアニメーションを表示することができます。

※スタンプ画像とポップアップ画像は、同じイラストを使う必要はありません。

※アニメーションスタンプのように、APNGの1フレーム目が静止画のスタンプ画像に使われることはありません。

画像サイズ

ポップアップ画像は、縦横いずれかの辺を必ず480pxにする必要があります。
そのうえで、以下の制限があります。
- 横が480pxの場合は、縦が320px以上
- 縦が480pxの場合は、横が200px以上
- 最大サイズは、横480px × 縦480px

ポップアップ画像は、画像が見切れない範囲で、トークルームの画面いっぱいまで拡大されます。

  • トークルームの画面全体を隙間なく画像で覆いたい場合は、以下の画像サイズがおすすめです。
  • iPhone6/7/8で表示する場合 : 横326px × 縦480px
    iPhone11/XRで表示する場合 : 横274px × 縦480px
  • ※端末によって画面の縦横比は変わります。すべての端末で隙間なく表示することはできません。
    ※上記の画像サイズは縦表示を想定しています。

表示位置

ポップアップ画像は、垂直方向の表示位置を3パターンから選べます。

- Top
- Center
- Bottom

アニメーションに適した表示位置を選ぶことで、より適した見せ方が可能になります。

例:画面上部からキャラクターが垂れ下がるポップアップ画像の場合「top」を選択

1画像あたりのフレーム数とループ回数

  • · 再生時間は最長3秒です。単位は1、2、3秒のいずれかとなり、端数(1.5秒など)は設定できません。
  • · ループ回数は最大3回です。
  • · フレーム(イラスト)数は、5~20フレームです。
    ※APNG作成ツール(APNG Assemblerなど)でAPNGデータをつくる場合、同じ画像を連続して使うと1フレームとしてつくられることがあります。
    ※すべてのフレームが同じ画像の場合は、アニメーションとして動作しないため、アップロードのときにエラーになります。

1秒 で 20フレーム × 3回ループ = 3秒

3秒 で 20フレーム × 1回ループ = 3秒

1秒 で 50フレーム × 1回ループ = 1秒(最大フレーム数を超えている)

2秒で20フレーム × 2回ループ = 4秒(最大再生時間の3秒を超えている)

APNG作成時の容量オーバーしやすい例

べた塗りでなく、グラデーションを多用したイラスト

アニメーションエリアの大半に動く背景があるもの

炎や集中線、キラキラする光や花びらなど、広い範囲で細かいアニメーション効果があるもの

APNG作成時の容量オーバーしにくい例

べた塗りで色数が少ない

アニメーションの中で同じフレームを使いまわす (マークのついているものが同じフレーム)