※チャットノベル形式となります
000
ココフォリアPROの機能が知りたい方は此方↓
![](https://sazano123.com/wp-content/uploads/2023/03/image-2023-03-22T173110.386-300x158.webp)
ココフォリア関係の記事一覧(今見ている記事が、基礎の基礎です)
–
ココフォリアの部屋、どうしている?
(どうでもいい導入)
そういえば部屋
どうやって作っている?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
いらすとやに次ぐ
いらすとやで
いらすとやします
ん?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
音楽は?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
心で感じればいいので
無音です
ほう…
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
設定が
分からないけど
強がってどうにかしてる
パターンだな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/6_144-3-300x300.png)
ココフォリアを開いてベースの部屋を作成する所までは、前回の記事やWikiなどにて!
使い方、教えようか?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
欲しいものリスト
開いて下さい
そこまで凄い説明は
出来ないからパスで
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
お使いする素材
今回は基本Canvaで
検索かけて出たやつ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
を、同じサイトで
編集してサイズ合わせた
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
あとは
オーダンよく使うかな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2022/04/構図サンプル-右一番端(白瀬さん)→令-右から2番目(三峰)→和-12-300x158.jpg)
–
前景や背景のサイズについて
個人差あるので自由!は大前提
初期設定のアスペクト比
「幅:高さ=4:3」の為
はじめは
幅1200×高さ900がおすすめ
まず前景とかの
サイズどうしてる?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
適当に入れても
サイズ比合わせてくれるので
ぶち込んでいます
ありと言えばあり!
こだわる場合は
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/image-56.png)
アスペクト比
4:3が初期設定
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
ややこしい場合は、
画像は1200*900ピクセルが
丁度良いと聞くな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
ココフォリアで背景と前景を入れるやり方(すごく簡易的)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-1024x538.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-1-1024x538.png)
前景と背景の効果について
背景を変えると「前景に、背景と同じ画像が自動表示される」
→実際、前景はNoImage状態(画像が入っていない)
前景を変更すると、「前景のみが変わる」
試しにこれを
ココフォリアに入れると
どうなる?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定-1200-x-900-px-3-1024x768.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
試すまでもなく全部黒ですが
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-2021-10-19T205000.309-1024x538.png)
じゃあこっち
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定-1200-x-900-px-4-1024x768.png)
前景と背景が一緒の場合例
これを背景にしてみろ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-2021-10-19T205432.867-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
後ろと前が変わりましたね
分かっているとは思うけど
後ろを「背景」
前を「前景」という
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
なら、次は
背景を真っ黒に戻して
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定のデザイン-2021-10-19T205000.309-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
戻しました
それから
「前景」で
蝋燭の画像を
入れてみろ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
前景と背景が異なる場合例
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-2-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
成程、
前景以外は
黒のままです
そう、これが
前景と背景を
変えることの良さ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
シーン一覧の使い方について、シーン保存のやり方について
さっきの
シーン保存しておいて
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
シーン保存?
あ、成程?
それなら、説明するわ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-4-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
マーカーパネル…?
それもあとで
説明するとして
シーン保存な
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
順番は変えられるけど、
黒→蝋燭の順で!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
前の状態にして
「+」を押す
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-6-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
成程…
これは楽
便利だろ?
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
それから、
蝋燭の状態ですね
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-5-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
シーンのサムネイル押せば
いつでも切り替え放題です?
そうそう
音もマーカーパネルも
自在で本当に便利
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
マーカーパネルについて
スクリーンパネル
よく使うものに適している
(NPCアイコンや手に入れたアイテム等)
マーカーパネル
そのシーンでしか使わないものに適している
※準備時点で設置しておかないと
「小さすぎて見えない!!」状態になる
(儀式の文様など)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
で、そのマーカーパネルは
スクリーンパネルとは
違うんですか?
マーカーパネルは
そのシーンだけに使うもの
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
そうだな…
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/名称未設定-1200-x-900-px-5-1024x768.png)
この素材を
マーカーパネルに
してみろ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
ココフォリアでのマーカーパネルの追加仕方
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-8-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
挿入した後、
ウィンドウ閉じてしまうんですね
そうだな
だから、もう一度
開いて画像選択すると出てくる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-9-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
出てきませんが
いや、マーカーパネル、
ほんっっとうに
小さいから
カーソル合わせると見つかる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-10-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
出てきたので、
大きくし直しました
なら、
ここでシーン保存
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-11-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
保存したのですが、
変わらないですね?
順に押してみれば
わかる
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
本当だ…
お使いするフリー音源(クレジット表記は必要なサイトも含みます)
まず音源、
BGM1からだな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
個人的に
かなり好きなのが此処
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
少し前にまとめた記事も
↓に貼っておきますね
![](https://sazano123.com/wp-content/uploads/2022/04/image-4-300x158.webp)
BGM2。
SE関係は
効果音ラボ様だな!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
音源のつけ方(SEサウンドエフェクト、BGM1とBGM2について)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-12-1024x538.png)
一番初めのシーンに
BGMっぽいBGMを
入れてほしい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
BGM1で良いですか?
「もしも,この雪に…」
にしました
OK,
こっちでも聞こえている
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
音量下げますね
各パソコンでやるから
音量は気にしないでOK!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
一定の音量でないと
たまに事故るけどな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-14-1024x538.png)
で、それを
シーン保存すると
音もシーン保存される
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
便利ですね
![](https://sazano123.com/wp-content/uploads/2021/10/image-57.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
これ、どうすれば
順番変えられます?
気合?
ほい
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/押すと出てくる-16-1024x538.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
それなら、
♪と上書き保存を押していけば
すぐ変えることができますね
あとは
魔法的な効果音を
BGM2に入れて
一旦完成だ
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
お借りするAPNG素材
木星雑貨店様 きらきらほこりっぽい光APNG
今回ここのAPNGを
お借りしている
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
BOOTHにて「APNG素材」と調べると、色々な素材がヒットします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
え、動くんですか
最近、結構動いているの
多い印象だな
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
まあハードル上がりすぎて
苦しくならないように
自由に楽しく作るのが
最高だと思う!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/1_144-300x300.png)
APNG画像の導入仕方
今回も
マーカーパネルにする
他でも可!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![](https://sazano123.com/wp-content/uploads/2021/10/image-58.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
いつものが出てきました
OKで良いですよね
?
言い忘れてた!
絶対「キャンセル」で!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
OK押すと
静止画になることある
![男子C](https://sazano123.com/wp-content/uploads/2021/04/5_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
出来ました
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
少しの工夫で
変わりますね
あとは重なりとかも
もう少し工夫すると
良くなる!
![男子C](https://sazano123.com/wp-content/uploads/2021/04/2_144-1-300x300.png)
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
あ、結構です
分かった。
じゃあ、
また機会があったら
![男子C](https://sazano123.com/wp-content/uploads/2021/04/3_144-1-300x300.png)
–
参考になるツイート様
完全に我流のココフォリア部屋の作り方です
メイキングとしては多分役に立たないけど、言いたいことは2枚目右下のやつ。これ。これだけです。これさえできればいい。 pic.twitter.com/3dOQ0ySBEj— 【公式】兼業主婦 (@M_KENGYOOOH) February 28, 2023
関連記事一覧
ココフォリアでの部屋の作り方(シーン分けやはじめの一歩編)
![画像に alt 属性が指定されていません。ファイル名: %E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-2021-10-19T231031.792-1024x538.png](https://sazano123.com/wp-content/uploads/2021/10/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-2021-10-19T231031.792-1024x538.png)
–
ココフォリアでの部屋の作り方(スクリーンパネル編)
![画像に alt 属性が指定されていません。ファイル名: %E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-8-1024x538.jpg](https://sazano123.com/wp-content/uploads/2022/02/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-8-1024x538.jpg)
ココフォリアの部屋の作り方、マーカーパネル素材の使い方。
![画像に alt 属性が指定されていません。ファイル名: image-4-1024x538.png](https://sazano123.com/wp-content/uploads/2023/01/image-4-1024x538.png)
ファンブルとクリティカルのカットインの作り方は此方
![画像に alt 属性が指定されていません。ファイル名: Enter-to-win-12-1024x576.jpg](https://sazano123.com/wp-content/uploads/2022/01/Enter-to-win-12-1024x576.jpg)
ココフォリア部屋の小技。システム音の作り方、@アットマークの使い方、差分の切り替え方について
![画像に alt 属性が指定されていません。ファイル名: image-5-1024x538.png](https://sazano123.com/wp-content/uploads/2023/01/image-5-1024x538.png)
インスタントココフォリア部屋、部屋Zip素材まとめ、お部屋がドラックアンドドロップで何もしなくても完成できる!ZIP部屋の作り方、おすすめのココフォリア部屋素材まとめ
![画像に alt 属性が指定されていません。ファイル名: image-1-28-1024x538.webp](https://sazano123.com/wp-content/uploads/2022/10/image-1-28-1024x538.webp)
立ち絵瞬きAPNGの作り方
![画像に alt 属性が指定されていません。ファイル名: %E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF-21-1024x538.jpg](https://sazano123.com/wp-content/uploads/2021/12/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF-21-1024x538.jpg)
–
TRPGのリプレイ動画や配信画面の作り方
![画像に alt 属性が指定されていません。ファイル名: music-5-1024x538.jpg](https://sazano123.com/wp-content/uploads/2022/02/music-5-1024x538.jpg)
ココフォリア初めてのPLさんに必要なところだけ教える為の記事。KPやDLの際にPLさんにぜひ!サンプルのキャラシ。クトゥルフ神話TRPG6版、エモクロアのサンプルキャラクターデータ。キャラクターコマの作成仕方、チャットパレットの出し方、ダイスの振り方、秘匿チャットのやり方、ログの保存し方。
![画像に alt 属性が指定されていません。ファイル名: PC2%E3%83%AD%E3%83%83%E3%83%97%E7%9B%AE%E7%B7%9A-50-1024x576.webp](https://sazano123.com/wp-content/uploads/2022/09/PC2%E3%83%AD%E3%83%83%E3%83%97%E7%9B%AE%E7%B7%9A-50-1024x576.webp)
ココフォリアPROの登録し方・PROが使える機能について、タイマー機能、Zipファイルデータの作り方、出力し方、お部屋の複製し方、Unsplashの画像検索機能も紹介。
![](https://sazano123.com/wp-content/uploads/2023/03/image-2023-03-22T173110.386-1024x538.webp)
立ち絵ディスプレイの作成し方
![画像に alt 属性が指定されていません。ファイル名: image-2022-05-26T124343.830-1024x576.webp](https://sazano123.com/wp-content/uploads/2022/05/image-2022-05-26T124343.830-1024x576.webp)
RPGトレイラー4枚を作る前編!キャッチコピー編!Canvaを使ったトレイラー作成方法。キャッチコピーや人を引き付ける台詞をどうやって作るのか、キャッチコピーやタイトルを付けるコツや型について紹介!
![](https://sazano123.com/wp-content/uploads/2022/10/image-88-4-1024x576.webp)
TRPGトレイラー4枚を作る後編!トレイラー画像編!Canvaを使ったトレイラー作成方法。概要に何を書くのか、シナリオのロスト率基準について、1枚目から4枚目って何に書いているのか。Twitterでもおしゃれに見えるトレイラー画像を作る!
クトゥルフ神話TRPG第六版の説明
![「TRPGって何?」超初心者向けの簡単なやり方と実践準備編。いあキャラでのキャラクター作成、ココフォリアの使い方から、チャットパレットの設定まで。ルールブックとシナリオさえあれば、すぐ遊べる手前までチャットノベル形式で紹介!(前編)](https://sazano123.com/wp-content/uploads/2021/03/Simple-Work-Blog-Banner-1-1024x576.png)
–
サムネイルの作り方(TRPGトレイラー作成の参考例)
![](https://sazano123.com/wp-content/uploads/2021/11/image-42-1024x576.webp)
ディスコードの使い方
![](https://sazano123.com/wp-content/uploads/2022/02/music-4-1024x538.jpg)
–
–TOP
–
–
—