Overlays（オーバーレイ） の変更点
Top > Overlays（オーバーレイ）
- 追加された行はこの色です。
- 削除された行はこの色です。
- Overlays（オーバーレイ） へ行く。
*&color(#000000,transparent){Overlays機能について}; [#uc69751c]
&color(#000000,transparent){Overlaysは2026年3月に実装されたWplaceの機能です。};&br;&color(#000000,transparent){画面右側に配置されている、ひし形が2つ重なっているアイコンです。};
#ref(./Overlays_25.png)
*&color(#000000,transparent){この機能でできること}; [#t6e37159]
-&color(#000000,transparent){&color(,transparent){画像データを読み込み、イラストのテンプレートとして地図上に表示させることができます。};};
#ref(./Overlays_17.png,50%)
&color(#000000,transparent){テンプレートの上から色を置いていくことで、お手本に沿ったイラストを作成できます。};&br;&color(#000000,transparent){元々はBlue MarbleやMr. Wplaceなどの非公式ツールに搭載されている機能でしたが、バージョンアップデートに伴い公式機能として実装されました。};
-&color(#000000,transparent){登録したテンプレートをwplace形式で出力し、他ユーザーに共有できます。};
&color(#000000,transparent){WPLACE形式データとはWplaceから出力できる専用ファイルで、Wplaceにインポートすることで画像・サイズ・座標・色の情報が指定された状態のテンプレートを登録できます。};
-&color(#000000,transparent){WPLACE形式データを読み込んで、他ユーザーが設定したテンプレートを自分のアカウントに登録することができます。};
&color(#000000,transparent){wplace形式データとはWplaceから出力できる専用ファイルで、Wplaceにインポートすることで画像・サイズ・座標・色の情報が指定された状態のテンプレートを登録できます。};
-&color(#000000,transparent){wplace形式データを読み込んで、他ユーザーが設定したテンプレートを自分のアカウントに登録することができます。};
&color(#000000,transparent){テンプレート登録の際、手動で座標や色設定などの各種設定をする必要がありません。};
*&color(#000000,transparent){使用するメリット}; [#c0373c59]
-&color(#000000,transparent){テンプレート画像が地図上に表示されるため、お手本に沿ったイラストを作成しやすい};
-&color(#000000,transparent){イラストを描く前に位置調整が簡単にできる};
-&color(#000000,transparent){大人数で協力して作品を作りやすくなる};
-&color(#000000,transparent){複数のテンプレートを保存して一覧で管理できる};
-&color(#000000,transparent){非公式の類似ツールと比べて動作が軽め};
-&color(#000000,transparent){Wplaceのカラーパレットに合わせて色を変換してくれるため、コンバーターや画像編集ソフトがなくても色の調整が可能};
-&color(#000000,transparent){指定した単色のピクセルのみテンプレート表示することができるため、より正確なペイントの補助となる};
*&color(#000000,transparent){画像データを読み込む場合の手順}; [#cb8a83c7]
&color(#000000,transparent){対応しているファイル形式はPNG、WEBP、JPGです。};&br;&color(#000000,transparent){画像サイズや色味はWplace上でも調整可能です。};
&color(#000000,transparent){他ユーザーとテンプレート画像を共有する場合は、画像サイズ・色味ともに調整済みのものを用意することをおすすめします。};
#br
#ref(./Overlays_1.png)
&color(#000000,transparent){今回は例としてこの画像をテンプレートとして使用します。サイズは横50ピクセル×縦30ピクセルです。};
&color(#000000,transparent){背景、左の赤いハートおよび顔は無料色(Yellow・Red・Light Pink・White)、右のピンクのハートは解放色(Light Red・Light Beige)を使用しています。};
#br
&color(#000000,transparent){画面右側にあるOverlaysボタンをクリックします。};
#ref(./Overlays_3.png,50%)
#br
&color(#000000,transparent){Overlaysギャラリーに移動します。「＋New Overlay」ボタン、または「＋Add Image」ボタンをクリックします。};
#ref(./Overlays_4_1.png,50%)
&br;&color(#000000,transparent){端末からテンプレートとして使用したい画像データを選択します。};
#ref(./Overlays_5.png,50%)
&br;&color(#000000,transparent){データを選択すると、地図上に画像とメニュー画面が表示されます。};
#ref(./Overlays_6.png,50%)
&br;&color(#000000,transparent){この状態で画像をスライドさせると、位置の調節ができます。};&br;&color(#000000,transparent){また、画面周囲にある丸印をクリックして動かすことで画像サイズ・縦横比を調整できます。};&br;&color(#000000,transparent){スマートフォンの場合は丸印をタッチ＋スライドで同様の操作となります。};
#ref(./Overlays_27.gif,50%)
&br;&color(#000000,transparent){右上のメニュー画面から各種設定を変更することができます。};
#ref(./Overlays_8.png)
**&color(#000000,transparent){①Hide menu}; [#if70e73f]
&color(#000000,transparent){メニュー画面の表示を小さくします。};
**&color(#000000,transparent){②Rename}; [#u8c619b7]
&color(#000000,transparent){ファイル名を変更します。};&br;&color(#000000,transparent){設定したファイル名はWplace上に保存されるテンプレートの名前として使用されます。};
**&color(#000000,transparent){③画像サイズ表記}; [#wfa1fd11]
&color(#000000,transparent){画像の横×縦のピクセル数を表示します。};&br;&color(#000000,transparent){画像サイズを手動で調整すると、この欄の数値も連動します。};
**&color(#000000,transparent){④Restore Orignal dimensions(画像サイズリセット)}; [#jee86f1e]
&color(#000000,transparent){画像サイズを手動で変更している場合、ここをクリックすると読み込み時の初期サイズに戻すことができます。};
**&color(#000000,transparent){⑤COLOR MODE(カラーモード)}; [#zf989b81]
&color(#000000,transparent){画像の色をWplace用に変換する際の方式を選択することができます。};
-&color(#000000,transparent){Perceptual(知覚的)};
-&color(#000000,transparent){Weighted RGB(重み付きRGB)};
&color(#000000,transparent){Perceptualと比較して、Weighted RGBは画像内の灰色部分に青みが入る傾向にあります。};&br;&color(#000000,transparent){2つのカラーモードを切り替えて見比べることができますので、好みで選択してください。};&br;''&color(#000000,transparent){※Overlays機能を使用して他ユーザーと共同で作品を作るときは、カラーモード設定も共有することを推奨します。};''
**&color(#000000,transparent){⑥COLOR PALETTE(カラーパレット)}; [#z6a3e7ab]
&color(#000000,transparent){テンプレ};&color(#000000){ートに使用する色を選択できます。};
***&color(#000000){All colors(全色)}; [#w2eb7b9f]
&color(#000000){Wplace上で使用できる63色＋透明色全ての色で表現します。};
&ref(./Overlays_9.png,50%);
***&color(#000000){Free colors(無料色)}; [#h46fee46]
&color(#000000){最初から使える};&color(#000000){31色＋透明色で表現します。};
#ref(./Overlays_10.png,50%)
***&br;&color(#000000){Unlocked colors(無料色＋解放色)}; [#cc47f21f]
&color(#000000){初期から使える};&color(#000000){3};&color(#000000){1色＋透明色＋現時点で自分が解放している色で};&color(#000000,transparent){表現します。};
&br;''&color(#000000,transparent){※Overlays機能を使用して他ユーザーと共同で作品を作るときは、カラーパレット設定も共有することを推奨します。};''
#br
**&color(#000000,transparent){⑦Dithering(ディザリング)}; [#xcba6fee]
&color(#000000,transparent){画像の「ディザリング」とは、限られた色数で中間色や滑らかな階調を擬似的に表現する技術です。};&br;&color(#000000,transparent){例えばカラーパレットをFree colorsとし、ディザリングをONにすると、無料色を複数混ぜて元画像の色味を表現しようとします。};
&color(#000000,transparent){&ref(./Overlays_11.png,50%);};&br;&color(#000000,transparent){複雑な色味の写真・イラストは、ディザリングを使用することで更に元画像の表現に近付けることができることがあります。};
&color(#000000,transparent){ただし塗りが複雑になることに留意してください。};
**&color(#000000,transparent){⑧Flip Horizontally}; [#a7bb4b5f]
&color(#000000,transparent){テンプレート画像を左右反転します。再度クリックすると元に戻ります。};
#ref(./Overlays_12.png,50%)
**&color(#000000,transparent){⑨Flip vertically}; [#n4bb9b3a]
&color(#000000,transparent){テンプレート画像を上下反転します。再度クリックすると元に戻ります。};
#ref(./Overlays_13.png,50%)
**&color(#000000,transparent){⑩Center(センター)}; [#j472d428]
&color(#000000,transparent){クリックすると画面中央にテンプレート画像が全面に表示されるように地図を拡大・縮小します。};
**&color(#000000,transparent){⑪Rertore Ratio(アスペクト比リセット)}; [#r06a9345]
&color(#000000,transparent){画像テンプレートの縦横比率を手動で変えている場合、このボタンをクリックすると元画像の縦横比へ戻すことができます。};
&br;&color(#000000,transparent){Rertore Ratio適用前};
#ref(./Overlays_14.png,50%)
&br;&color(#000000,transparent){Rertore Ratio適用後};
#ref(./Overlays_15.png,50%)
&br;&color(#000000,transparent){画像テンプレートの大きさは元に戻らないため、初期サイズへ戻したい場合は「Restore Orignal dimensions」ボタンを使用してください。};
**&color(#000000,transparent){⑫×ボタン}; [#p6db28e2]
&color(#000000,transparent){テンプレートの登録をやめる場合は、このボタンをクリックしてください。};
**&color(#000000,transparent){⑬チェックボタン}; [#q5aae084]
&color(#000000,transparent){テンプレートの位置・サイズ等が確定したら、このボタンをクリックしてください。};&br;&color(#000000,transparent){チェックボタンをクリックすると、Overlaysギャラリーの中に画像情報が保存されます。};
#ref(./Overlays_16_1.png,50%)
&br;&color(#000000,transparent){Overlaysギャラリーより、使用したいテンプレートをクリックすると、地図上に先ほど設定したテンプレートが表示されます。};
#ref(./Overlays_17.png,50%)
&br;&color(#000000,transparent){この時点ではまだペイントが確定されていませんので、設定したテンプレートを他ユーザーから見られることはありません。};
#br
&br;&color(#000000,transparent){テンプレートの上から同じ色をペイントしていきます。};&br;&color(#000000,transparent){テンプレートの色がついている箇所をスポイトすることで、テンプレートと同じ色を選択することが可能です。};
#ref(./Overlays_18.png,50%)
#br
*&color(#000000,transparent){wplace形式データを読み込む場合の手順}; [#p80cb64d]
&color(#000000,transparent){WPLACE形式のデータを準備します。};
#ref(./Overlays_26.png)
&br;&color(#000000,transparent){画面右側にあるOverlaysボタンをクリックします。};
&ref(./Overlays_3.png,50%);
&br;&color(#000000,transparent){Overlaysギャラリーの「Import」をクリックします。};
#ref(./Overlays_4_1.png,50%)
&br;&color(#000000,transparent){端末からインポートしたいWPLACE形式データを選択します。};
&color(#000000,transparent){&ref(./Overlays_29.png,50%);};
#br
&color(#000000,transparent){もし希望のデータが表示されない場合は、「WPLACE形式」となっている項目を「すべてのファイル」へ変更するとフォルダの全てのデータが表示されます。};
&ref(./Overlays_39.png,50%);
&br;&color(#000000,transparent){Overlaysギャラリーの中にテンプレート情報が保存されます。};
#ref(./Overlays_16_1.png,50%)
&br;&color(#000000,transparent){Overlaysギャラリーより、使用したいテンプレートをクリックすると、ペイント画面に先ほど設定したテンプレートが表示されます。};
&color(#000000,transparent){&ref(./Overlays_17.png,50%);};
&br;&color(#000000,transparent){この時点ではまだペイントが確定されていませんので、設定したテンプレートを他ユーザーから見られることはありません。};
&br;&color(#000000,transparent){テンプレートの上から同じ色をペイントしていきます。};&br;&color(#000000,transparent){テンプレートの色がついている箇所をスポイトすることで、テンプレートと同じ色を選択することが可能です。};
#ref(./Overlays_18.png,50%)
*&color(#000000,transparent){Overlays適用中のメニュー画面について}; [#w2c5900f]
&color(#000000,transparent){画面右上のメニューで設定が変更できます。};
**&color(#000000,transparent){Back to gallery}; [#mbb5d027]
&color(#000000,transparent){Overlaysギャラリーに戻ります。};
**&color(#000000,transparent){Center dot}; [#e925ab85]
&color(#000000,transparent){四角形のドットでテンプレートを表現します。};
&ref(./Overlays_20.png,50%);
**&color(#000000,transparent){Full pixel}; [#mafeec6e]
&color(#000000,transparent){半透明のピクセルでテンプレートを表現します。};&br;&color(#000000,transparent){半透明ピクセルの上からスポイト機能を利用することも可能です。};
#ref(./Overlays_21.png,50%)
**&color(#000000,transparent){Diagonal half}; [#id5ba49a]
&color(#000000,transparent){三角形のドットでテンプレートを表現します。};
&ref(./Overlays_22.png,50%);
**&color(#000000,transparent){Highlight selected color}; [#l0eb0d2d]
&color(#000000,transparent){カラーパレットで色を選択した状態でクリックすると、選択した色のピクセルのみテンプレートを表示させます。};
&color(#000000,transparent){例えばカラーパレットでRedを選択した状態で「Highlight selected color」をクリックします。};
#ref(./Overlays_23.png,50%)
&br;&color(#000000,transparent){するとRedで塗るべきピクセルのみテンプレートが表示されるようになりました。};&br;&color(#000000,transparent){色数が多く、複雑な塗りの際に便利な機能です。};
#ref(./Overlays_24.png,50%)
*&color(#000000,transparent){Overlaysギャラリーの操作について}; [#t25fd70f]
#ref(./Overlays_30_1.png)
**&color(#000000){①オーバーレイ数}; [#sc1eaed8]
&color(#000000){現在登録されているテンプレート数が表示されます。};
**&color(#000000){②New Overlays}; [#taa86862]
&color(#000000,transparent){新しいテンプレートを登録することができます。};
**&color(#000000,transparent){③Import(インポート)}; [#g1898f0d]
&color(#000000,transparent){wplace形式データを読み込んで、テンプレートとして登録することができます。};
**&color(#000000,transparent){④Connect Google D};&color(#000000,transparent){rive}; [#e82148e0]
ログインしているグーグルアカウントのドライブにテンプレートデータを共有することができます。
**&color(#000000,transparent){⑤More Options(…)}; [#v107310d]
&color(#000000,transparent){⑤～⑧のオプションを開きます。};
#ref(./Overlays_31_1.png)
**&color(#000000,transparent){⑥Edit}; [#l50747ce]
&color(#000000,transparent){登録したテンプレートを再編集できます。};&br;&color(#000000,transparent){座標、サイズ、カラーモード、カラーパレット、フリップを変更できます。};
**&color(#000000,transparent){⑦Convert to legacy colors(レガシーカラーに変換)}; [#p88818b8]
&color(#000000,transparent){v1.3.1から追加された機能です。};&br;&color(#000000,transparent){テンプレートの配色をv1.3.0以前の色変換方式に合わせます。};&br;&color(#000000,transparent){アップデート前に登録したテンプレートの色味が不自然になった場合に使用すると、アップデート前の状態へ戻ります。};
**&color(#000000,transparent){⑧Export(エクスポート・出力)}; [#jb1e68d9]
&color(#000000,transparent){登録したテンプレート情報をWPLACE形式で出力することができます。};
**&color(#000000,transparent){⑨Delete(デリート・削除)}; [#a0db53c5]
&color(#000000,transparent){保存したテンプレートをOverlaysギャラリーから削除します。};
#br
#br
#br
#br
#br
#br
*&color(#000000,transparent){wplace形式データを出力する手順}; [#p80cb64d]
出力したいテンプレートデータの右側にある三点リーダー(…)マークをクリックします。
&ref(./Overlays_32.png);
#br
Exportボタンをクリックします。
&ref(./Overlays_33.png);
#br
端末にwplace形式のデータが出力されます。
このデータをWplace上にインポートすることで、座標・色設定・大きさが指定されたテンプレートを一発で読み込むことができます。
&ref(./Overlays_34.png);
#br
なお、Discordなどの外部ツール経由でダウンロードすると、ファイル名の末尾が「～.json」となることがあります。
&ref(./Overlays_35.png);
#br
このままではWplace上で読み込みができないことがありますが、末尾の「～.json」を手動で削除することで正常に認識するようになります。
&ref(./Overlays_36.png);
#br
「拡張子を変更すると、ファイルが使えなくなる可能性があります。」というエラーが出た場合は「はい」をクリックします。
&ref(./Overlays_37.png);
#br
&ref(./Overlays_38.png);