pictSQUAREのイベント会場で使えるエフェクトを自分でつくってみよう！

2024.11.13: 【PRO】【EX】どちらでも使用できるようにテンプレートを24fps→12fpsに変更し、解説を少し変更致しました。

はじめに

オンライン即売会サービス『pictSQUARE(ピクスク)』ではアバターの周りにアニメーションを表示させるエフェクト機能があります。
デフォルト8種類に加え、オリジナルのエフェクトも10個まで登録することができます。
イベントの雰囲気を盛り上げるツールとしてめちゃくちゃ便利なので自作してみよう！ということで制作方法をまとめてみました。
テンプレートもあるヨ！説明が長いヨ！ごめん！！！！！！！！！！！！

01エフェクトのイメージ

私が作ったエフェクト画像です。はじめて作ってみたのですがなかなか可愛く出来たと思います。
(※うんちネタは身内イベントのネタが通じる人たち以外の場所で使っちゃダメだよ！)

2枚目の画像のように、96×96ピクセルの連番画像を左上から右に並べた1枚のpng画像をアップロードするとエフェクトとして使用できるようになります。
エフェクト画像はアバターの上に重ねて表示されるので、透かしたい部分は透過して作りましょう！
上の例ではアバターを隠すようにレインボーの背景を置き、その上にアニメーションを描いています。

今回のメイキングでは、文字を使ったエフェクトを新しく作ってみようと思います。

02テンプレートについて

96px四方のグリッドが16個敷き詰められた384px四方のガイドライン画像を用意しました。
十字線が入ったエリアでアニメーションを作成し、仕上げ時に分解して各番号エリアに配置する使い方を想定しています。

このメイキングではCLIP STUDIOのアニメーション機能を使用します。
テンプレートはアニメーション用にレイヤーを構成してタイムラインに配置した.clip形式です。
png画像だけでいいや！という方は上の画像を保存してお使いください。

下記をお読みになってから下のダウンロードボタンを押してください。

ご使用の前に

報告やクレジットは不要でお使い頂けますが、これを参考に作ってみたよ～と当記事のリンクを紹介して頂けると私のモチベーションが上がります。

いいこと

テンプレートを使用して作成したエフェクトの使用・公開
テンプレートを使用して作成したエフェクトの配布・販売

だめなこと

pictSQUARE以外での使用
テンプレートの再配布・販売
テンプレートの自作発言

template.clip ダウンロード

Googleドライブが開きます

レイヤー構成

レイヤー構成はこんな感じになっています。

[作業フォルダ]はアニメーション機能用の【アニメーションフォルダー】なので削除したりしないでください。
[作画ガイド]、 [テンプレ]は通常のレイヤーフォルダーです。
ロックが掛かっているレイヤー以外は好きに動かしても大丈夫です。

アニメーションフォルダーって何？

【アニメーションフォルダー】はパラパラ漫画の1ページ1ページがまとめられた箱のようなものです。
箱の中に入ってる紙＝【アニメーションセル】と思ってください。

「作業フォルダ：16」と表示されているように、16枚のセルがこのフォルダーの中に入っています。
この16枚のセルを、【タイムライン】という表に配置して並び順や切り替えのタイミングを決めます。

【アニメーションフォルダー】内にある【アニメーションセル】を【タイムライン】に配置してパラパラ漫画の冊子をひとつ作るイメージですね。ややこしいので詳しくは後述しますね！

アニメーション機能の説明

アニメーション機能はかなり複雑なので今回使う機能だけ簡単に説明します。

とりあえず、普段使っているイラストや漫画用のワークスペースではアニメーション作りに必要なツールが表示されていないので、最初に下準備をしましょう！

まずアニメーションを描くために必要な【タイムラインパレット】と【アニメーションセルパレット】を表示させます。
上のメニューから「ウインドウ」「アニメーションセル」「タイムライン」にチェックをつけてください。

多少の違いはあると思いますが、上のような画面になったと思います。(拡大して確認してね)
アニメーションセルパレットは狭いと思うので広げたりしてください。

以下は上の説明画像の長々した補足みたいな感じなので、上でわかったぜ！という方はショートカットキーの設定まで飛ばしちゃって大丈夫です。

セルレイヤーとセルフォルダー

レイヤーパレットには上で説明したレイヤーが表示されているはずです。

[作業フォルダ]を開くと1～16までのレイヤーフォルダーが入っています。このフォルダーが上で説明した【アニメーションセル】になります。

パラパラ漫画の1ページがペラじゃなくて複数のレイヤーで出来てると思ってください。レイヤーの場合はセルレイヤー、フォルダーの場合はセルフォルダーと呼びます。

実際にアニメーションを描画する際は各セルフォルダーの中にレイヤーを追加して描き込んでいきます。
セルフォルダー外にあるレイヤー(タイムラインに配置されてないセル)はキャンバスに表示されないので注意してくださいね。

アニメーションセルパレット

セルの描画に関することはアニメーションセルパレットで操作します。
描画ガイドを表示させたり色々出来るのですが、今回は使用しないので電球のようなマーク等は全てオフにしておいてください。

アニメーションセルパレットでは、編集中のセルが表示されます。
セルがフォルダーの場合はフォルダー内のレイヤーが表示されます。

セルパレットとレイヤーパレットの両方でレイヤーを操作できます。
レイヤーの補助パレットみたいな感じですね。
アニメーションを作る時はどうしてもレイヤー数が多くなるので、このパレットを出しておくと何かと助かります。

レイヤーパレット、もしくはタイムライン上で適当なセルを選択してみてください。セルフォルダーの中にある[-]というレイヤーが表示されると思います。
なんとレイヤーパレット上でフォルダーを閉じてもアニメーションセルパレットでは開いたままにしておけるのです！
編集中のレイヤーをスクロールして探して開いて……という煩わしさから解放されます。
地味ですが最高に便利な機能です。漫画とかでもこの機能が欲しい。

タイムライン

このテンプレートでは既にタイムライン上にセルを配置しています。
厳密な設定が分からないので実際のエフェクトの速度と違うかもしれませんが……まあそこはご愛敬で……

アニメーションの動きに関することはタイムラインパレットで操作します。
今回は既にセルを配置しているので、プレビューの再生やオニオンスキンのオンオフくらいでしかいじりません。
セルの位置や終了フレームの青いバー等はドラッグで動かせるので、うっかりずらしてしまったりしたら上の画像に合わせて直してください。

ちなみに私はサムネイルが邪魔に感じてしまうので非表示にしています。
アニメーションメニューから【サムネイルのサイズ】を【なし】に設定するとセル番号のみの表示になります。スッキリ！

オニオンスキン

トレース台で透かしたように前後の絵を表示できる機能です。これがないとアニメが描けません。
アニメーションメニュー「アニメーションセル表示」「オニオンスキン設定」で表示する枚数や色の設定ができます。透明度や色など作業しやすいようにカスタマイズしてください！

表示できるのは編集中のセル(タイムラインで選択しているセル)の前後です。
前後じゃないセルを透かしたいよ～という場合は表示枚数を変更するかセルを入れ替えましょう。
タイムライン上のセル番号を右クリックするとメニューが表示されるので、入れ替えたいセルを選択して指定します。
セルを入れ替える方法はタイムラインの順番がバラバラになってしまうので、動かした後はちゃんと番号順に戻しましょう！

長々書きましたが、とりあえず

セルレイヤー(フォルダー)…パラパラ漫画の1ページ
アニメーションセルパレット…レイヤーパレットの補助
タイムライン…動きの管理をするパレット
オニオンスキン…前後の絵を透かして表示する機能

と思ってくれれば大丈夫です！

	いちいちこれ押すのめちゃくちゃ面倒臭いですよね

03エフェクトの制作方法

前置きが長くなりましたが、制作方法を解説していきます。
ここからはサクサクいきます！

下準備

エフェクトを作成する前に、まず位置合わせとしてアバター画像を読み込みます。
[作画ガイド]フォルダーを選択し、「ファイル」「読み込み」「画像」でアバター正面画像を読み込みます。
オブジェクトツールを使用して、オブジェクト枠線が水色エリアに合うように配置してください。

	アバターはミニドット絵メーカー３で作成しました。アバター画像合体ツール for pictSQUAREを併せて利用するとピクスクのオリジナルアバターが楽に作れます。

画像をコピペで貼り付けるのと違い、「読み込み」で読み込んだ画像は【画像レイヤー】となります。
元画像が保持されるので、回転操作や縮小した後にまた拡大してもガビガビにならないぞ！

素材は大きさを変えたりすることが多いので、基本的に私は「読み込み」で貼り付けています。
このままだと切り張りや加筆ができないので、必要な時は「ラスタライズ」して【ラスターレイヤー】に変換してくださいね。

ラフ

次はいよいよエフェクトのラフを描いていきます。
[作画ガイド]フォルダー内の [ラフ]フォルダーの中に、適当にレイヤーを追加してイメージラフを描きます。

	「大変にスケベだなぁ！」素晴らしい展示を見て体の中央にエナジーが集まってくる、そんな感じのイメージです。

………突発企画だからなんも構想が無い。
こんな作例で大変に申し訳ない。

（直接的な表現は人を不快にさせる可能性があるのでイベントで使う時は気をつけようね！）

動きの考え方のコツ

アニメーションと言っても基本的にはパラパラ漫画です。
少しずつ位置や形を変えて絵を描けば動いているように見えます。
じゃあどうやってその位置や形を決めるのか！？

まず軌道線を引いて、それからキーとなるポイントに点を打つとイメージが掴みやすいと思います。
ヒューーンとかぐぅうう～～んん…とかシュビャッ！とか擬音を言いながらやるのがコツだ！

	こういうイメージ。軌道やタイミングがずれると変な動きになってしまうので、ラフではこの部分をちゃんと考えます。

理科の教科書で見た等速直線運動や等加速度運動のストロボ写真を思い出してみてください。
移動幅が大きいほど速く、小さいほど遅い動きになります。

といっても、なかなか頭の中で作るのは難しいです。
この段階ではアタリ程度に済まして、動きは実際に描いてプレビューを見ながら調整していきましょう！

素材作成

まずイメージの固まってる文字素材から作り始めます。

文字はインパクトのあるクソデカド派手フォントにしたいので、別のキャンバスを作成して作ります。
素材は何かとデカい方が安心なので2倍～くらいで作ります。

	かなり胡乱な感じの文字が出来上がりました。

透過pngで保存しておきます。
ちなみに、私が大変お世話になっているこちらのオートアクションを利用すると激アツなフォントが簡単に作れます。

激アツ加工オートアクション - CLIP STUDIO ASSETS

イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

テンプレートに戻りましょう。
[ラフ]フォルダーを選択し「ファイル」「読み込み」「画像」で作成した文字を配置します。

さらにグリッターテクスチャを読み込んで文字にクリッピングしました。
合成方法をオーバーレイに変更してギラギラになったぞ！

1コマ毎にテクスチャ画像をスライドさせることで光の反射を簡易的に表現できるはず。
96x96の小さい画像なので適当にやってもどうにかなります！！

アニメーションつくり

次はアニメーションを描いていきます。パラパラ漫画の要領でいきましょう。
描きづらいのでガイドと文字はとりあえず非表示にしておきます。

色が見づらい場合は[テンプレ]内の[背景色]の色を都度変更して見やすくしてください。

オニオンスキンで軌道を見ながら線を描き、＜＞で前後をパラパラめくって動きを確認しながら位置や形を調整していきます。
複数の動きを組み合わせるように、パーツ毎にレイヤーと色を分けて描くと修正がしやすいです。

エフェクトを描く

	ギラギラ明滅するイメージ。中心を揃えトゲの位置を変えながら大小繰り返します。

	外から内へ、エネルギーが中心に集まってくるイメージを重ねます。真っ直ぐした軌道になるように気を付けます。

	電撃っぽいものを描きます。適当にうねうねさせ、先っぽを縄のように暴れさせるとバチバチ感が出ます。

	線を白く変え、複製したレイヤーをぼかして発光感を出します。 1枚ごとにレイヤー透明度を変更していい感じ点滅させます。二値線は「フィルター」「ぼかし」「スムージング」でアンチエイリアスをかけられます。

なかなか良い感じになったんじゃないでしょうか！
ちなみにピクスク会場では加算などの効果を重ねて表示できないので、通常レイヤーを使って描くようにしてください！

文字を動かす

[ラフ]に置いておいた文字をコピーして全てのセルに貼り付けます。
先ほど書いたように、文字レイヤーにテクスチャをクリッピングし、スライドさせることでキラキラ感を表現してみようと思います。

本来であれば、文字のみのアニメーションフォルダーを作って、さらにその上にテクスチャフォルダーを作りクリッピングする方が楽なのですが……
今回は最終的にアニメーションフォルダーを分解して配置する必要があるために1つのアニメーションフォルダー内で作業を行います。

それでは光らせる前に……

とりあえず揺らします！

上下の文字をそれぞれ選択して切り取り、小刻みに移動させました。
だいぶ落ち着きが無い感じになってきましたね。

ちなみに【画像レイヤー】のままだと一部分の切り取り等ができないのでレイヤーを右クリックして「ラスタライズ」してください！

	レイヤー名の左にアイコンがついてるものが【画像レイヤー】です

今回は文字レイヤーの上に2枚のテクスチャを重ねてクリッピングしています。
これを1枚ずつずらしてキラキラ感を出します。

素敵なテクスチャはこちらから頂きました。キラキラ素材はあればあるほど良い。

キラキラシール - CLIP STUDIO ASSETS

グリッター素材集 -Perspective-【39枚】 - CLIP STUDIO ASSETS

それでは、適当にずらしていくと……

こんなんなりました！！！！
かなり心の昂ぶりやきらめきが表現できてきた気がします。

情報量を増やす

これでもう充分な気がするのですが、やはりイベントで昂るオタクの感情をクソデカに伝えたい……
ということで、ダメ押しの情報量アゲ加筆をしていきます。

	［エアブラシ］〔飛沫ブラシ〕で文字の上に白、文字の後ろに黒のスパッタリングを飛ばしました。

	文字レイヤーを複製し、ピンク色に塗りつぶして裏に置きます。「フィルタ」「ぼかし」「放射ぼかし」でランダムに方向を変えながらぼかしました。なんとなく揺らめく雰囲気が出たような気がします。

	〔虹光彩綺羅ブラシ〕でキラキラを追加します

地味にですがド派手さが増しました！ヤッターーー！！

〔虹光彩綺羅ブラシ〕はこちらから頂きました。ヘビロテしてます本当にありがとうございます。

虹光彩綺羅 - CLIP STUDIO ASSETS

完成

[背景色]の色を変えたり、会場の背景を貼り付けたりして視認性・判読性などの確認をします。
だいたいヨシ！完成！！！！！！！

書き出しと登録

アニメーションが完成したので、ピクスクの仕様に合う形式にしていきます。

修正する可能性もあるので、安全のために[作業フォルダ]を複製したものに操作を加えます。
オリジナルのフォルダは非表示にしておいてください。

グリッドに配置する

複製した[作業フォルダ]を選択状態にします。
メニューから「レイヤー」「レイヤーフォルダーを解除」を選択してください。
アニメーションフォルダーが解除され、16個の通常レイヤーフォルダーになりました。

	マスク外の範囲が暗く表示されていない場合、1～16フォルダーを選択した状態で【マスク範囲を表示】にチェックを入れておきましょう。

［レイヤー移動］ツールで各番号エリアにフォルダーを移動させます。
角を合わせ、明るい部分がマスの中にきっちり収まるようにしてください。

16個すべて並べると下のようになります。
下にあるレイヤーをすべて非表示にして、背景が透明になっているか確認してください。

書き出し

「ファイル」「画像を結合して書き出し」「png」で画像を書き出します。
設定ダイアログが出てくるので、この時にサイズが384px×384pxになっているか一応確認してください。

「別名で保存」「複製して保存」でもpngで保存できますが、「画像を結合して書き出し」ではICCプロファイルという色の表現範囲の情報を加えることができます。
ピクスクに画像をアップロードすると、どうやらICCプロファイルが強制的に外れてしまうようなのですが…… ICCプロファイルが無い画像はブラウザによって色が変わってしまう可能性があるので、基本的には埋め込んで保存するようにしています。

これでエフェクト画像の完成です！お疲れさまでした！

エフェクトの登録

pictSQUAREにログインし、ダッシュボードを開きます。
左のメニュー内の［マイページ］［アバター設定］にある［エフェクト］タブを開きます。
エフェクトのアップロードや削除はこのページで行います。

先ほど保存したpng画像を選択してアップロードしましょう！

反映までラグのある店舗外観と違い、エフェクトはアップロードしてすぐに使えます。

早速デモ会場やテスト出展会場で確認してみましょう。
既に会場内にいる場合は、一旦退出してからページを更新して再入場してください。

チャット入力欄の右にあるマークからエフェクト一覧を表示できます。
先ほどアップロードしたエフェクトを選択すると……

見事にエフェクトが表示されました！！ヤッターーーーー！（録画画質が悪くてすいません）

04さいごに

以上、pictSQUAREで使用できるアバターエフェクトの作り方でした。
クリスタのアニメーション機能は複雑なので前置きがかなり長くなってしまいました……せ、説明が難しい。

「エフェクトって自分で作れるの！？作ってみたら楽しい！みんなも作ろうよ！！」というイベント中の思い付きでメイキング記事を書いてみました。
みなさまの楽しい同人ライフの一助になれば幸いです。

このブログを検索

13poopie

CLIP STUDIOで作るピクスクアバターエフェクトメイキング＆テンプレ配布【pictSQUARE】