表情メーカー Expression Maker

パーツを読み込む

ここにPNGフォルダをドロップ
(フォルダ名がそのままカテゴリになるよ)

作者用

読み込んだパーツを parts.js にまとめて書き出すと、index.html と一緒に配ればそのまま開いて使えるようになるよ。
ふだんは、うっかり消してしまわないように パーツの × を隠しています
いらないパーツを消したいときだけ、このボタンをONにしてね。
アプリを開き直すと自動でOFFに戻ります。
ヘッダーに「📖 使い方」ボタンが出て、押すと別のタブで開くよ。
配布フォルダに manual.html を一緒に入れてね。 Webに置いた使い方ページのURLを直接入れてもOK。
1ファイル版(HTMLだけ)で配るときは、このボタンをOFFにしてね。

アプリのアイコン

いまプレビューに出ている表情で、スマホのホーム画面やタブに出るアイコンを作るよ。
先に「顔」の表情を決めてから調整してね。
iPhone
Android
タブ
80%
0%
0%
14
ZIPの中の icons フォルダを、配布フォルダの icons と入れ替えるだけでOK。
この設定は parts.js にも保存されるので、タブのアイコンはZIPを入れなくても切り替わるよ。
30%
5.5%
プレビュー・配信モード・書き出し画像のすべてに入るよ。この設定は parts.js に保存されるので、デモ用だけONにして書き出してね。
フォルダごと書き出す
渡す形のフォルダを ZIP 1つにまとめるよ。解凍すればそのまま渡せる・アップできる。
ひとつずつ書き出したいときはこちら。
拡大して顔の位置を決めたあとにこれを押すと、その見え方が「顔」ボタンの基準として保存されるよ。
1ファイル版はアプリもパーツも全部入り。AirDropでiPhoneに送ったり、メールに添付したりできるよ。
このパソコンでは、次からもこのメニューを出したままにするよ。依頼者さんの見え方を確認したいときは下のボタンでいったん戻せます。
拡大 100%

実績シート

左のパーツで表情を作って「+」で追加。マスを押すとその表情を編集できるよ。
目や口のグループは、ふだん 01(ふつうの顔) が表示されるよ。 ウィンクや目つむりをマスに入れたいときは、上のボタンを押して 02, 03… のコマを直接選んでね。
3
14
14%
30
6
55%
100%
0%
0%
28
36
420px

アニメーション

100%=足元を固定(スライムっぽい)/50%=真ん中で伸縮
動いたときに頭や白フチが切れないように、自動で少しだけ小さく表示するよ。

自動の動き

配信の待機画面・BRB用。ゆーっくり呼吸するだけの静かな動きになるよ。もう一度押すと元の設定に戻る。
0.30秒
4.0秒
1.0x
1.5x
1.0x
1.0x
大きい声や笑い声にあわせてジャンプするよ。配信中は Jキー でも跳ねられる。
パーツを 目/ノーマル/01.png, 02.png… のようにサブフォルダで分けておくと、 そのグループのコマで自動的に動くよ。
01 がいつも表示される絵で、番号が大きいほど動いた状態 (目なら閉じ、口なら開き)。ノーマル-1.png のようなファイル名でもOK。

白フチ(シール風)

14px
イラスト全体の外側にフチが付くよ。パーツ1つだけに付けたいときは、 そのカテゴリの ⚙ から「フチの太さ」を上げてね。

表情プリセット

配信モードで数字キー 1〜9 を押すと切り替わるよ。
作ったプリセットはこのブラウザに自動で保存されるので、閉じても消えません。
OBSの中のパネルにも移したいときは、上の 「OBSに渡すコードをコピー」を押して、 パネルの「表情を読み込む」に貼り付けてね。

配信(OBS)

OBSで「ブラウザソース」を追加して、下のURLを貼り付けてね。背景は自動で透過するよ。

コントロールパネル

配信中にOBSの中から表情を切り替えられる小さな操作パネルだよ。
OBSの上のメニュー ドック → カスタムブラウザドック を開いて、 名前に「表情」、URLに下のアドレスを入れて「適用」。 OBSの右側にパネルが出てくるので、ボタンを押すだけ!
※ ブラウザソースとパネルは同じアドレス(https://〜)から開いてね。 ファイルを直接開いた状態だとつながらないことがあるよ。
※ 表情プリセットを作り直すと、開いているパネルにもすぐ反映されるよ。 OBSの中のパネルだけは別のブラウザなので、 プリセット欄の「OBSに渡すコードをコピー」で移してね。

書き出し

決まったパターンでしゃべるので、書き出すたびに同じ結果になってきれいにループするよ。
動画は透過できないことが多いよ。完全な透過なら連番PNGか配信モードがおすすめ。 グリーンを選べばOBSのクロマキーで抜けます。
あなたのキャラも、動かせます まばたき・口パクつきのミニキャラを制作します 料金・ご依頼はこちら →
タップで表情が切り替わるよ。
配信中はPCの数字キー 1〜9、またはOBS内のパネルで切り替えます
配信モード
数字キー 1〜9:表情プリセット切替
0:最初の状態へ J:ジャンプ B:待機モード
Esc(または右上のボタン):編集に戻る
OBSでは「ブラウザソース」にこのページを指定してね。
(OBSの中では、操作パネルを1回クリックしてからキーを押してね)
表情コントロールボタンを押すと配信画面が切り替わるよ
表情(クリックで切り替え)
動き
表情を読み込む
編集画面の「OBSに渡すコードをコピー」で出したコードを、ここに貼り付けてね。
スマホ表示プレビュー
書き出しできたよ!
書き出し中…