作れるサイト見本
2PL用サンプルサイト
※テンプレート有、完成形とテンプレートのみの2種あります
4PL用サンプルサイト
※4PL用テンプレートないですが、
2PLを2枚に増やせばほぼそれっぽく作れます。
WixやエディタXでの探索者まとめサイト
![](https://sazano123.com/wp-content/uploads/2023/10/image-21-6-1024x538.webp)
CMSというエクセルの様なデータで管理しています↓
作り方ページは①~⑮あり、①が↓です。
画像さえあれば、真似れば出来る仕様にしました。
![](https://sazano123.com/wp-content/uploads/2023/10/image-24-6.webp)
Notionのデータベースで作る
notion、探索者図鑑みたいでめちゃめちゃ楽しいから全TRPGプレイヤーは作って欲しい
ズラっと並べるだけで壮観だし、自分でいろいろ設定すればイメージカラーとか身長順とか誕生日とかでスっと並び変えれるのでキャラ作成とかくそ捗る❕❕
通過卓管理とかうちよそ管理もめちゃしやすいのでおすすめ pic.twitter.com/RcctAeLKml
— こより✿ (@koyori_0000) September 29, 2022
–
こちらの場合はテンプレートを作って下さった方がいるので、
真似すれば作れます↓
![](https://sazano123.com/wp-content/uploads/2022/10/image-2022-10-02T161532.374.webp)
川崎様:TRPG探索者まとめサイト(Wixにて作成)
![](https://sazano123.com/wp-content/uploads/2023/09/image-5-9.webp)
Wixの使い方については此方↓
※旧フォーマットでの説明かつ、やや至らない所があります。
![](https://sazano123.com/wp-content/uploads/2022/09/image-26-8-300x158.webp)
導入
Canvaでサイト作成も
出来るようになったそうです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2023/06/image-30-3-1024x538.webp)
操作方法は画像作成と
あまり変わらないので
サクサク作っていきましょう。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
記事の途中でCanvaの使い方で躓いた場合、
立ち絵ディスプレイのやり方も参考にどうぞ↓
![](https://sazano123.com/wp-content/uploads/2022/05/image-2022-05-26T124343.830-300x169.webp)
用意するもの
立ち絵と立ち絵を使う許可
(Picrewや創作キャラクター立ち絵)、
まず、
立ち絵が欲しいです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
4PLだと面倒なので
2人が理想
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
なら、これで。
![](https://i2.wp.com/sazano123.com/wp-content/uploads/2022/11/image-1-8.webp?ssl=1)
![](https://i0.wp.com/sazano123.com/wp-content/uploads/2022/11/image-101.webp?ssl=1)
立ち絵はNovelAIにて生成
NovelAIでの呪文(プロンプト)
メイド服ツインテール桃色髪のメイド服少女、クール顔、剣を持っている。
プロンプト
((ultra-detailed)),masterpiece,best quality,(illustration),((((full-length figure)))), ((transparent background)),((((1)))),(((girl))),(wearing shoes on boots),standing,looking right,cool girl,maid uniform,wearing a sword, beautiful detailed eyes, good looking,((an extremely delicate and beautiful)),On the left,On the left,pink hair,expressionless,pigtails,((masterpiece)), (((best quality))), ((ultra-detailed)), ((illustration)), ((disheveled hair)),Make the eyes the same shape and color on both sides,eyes of the same eye,cool girl,grim face,carrying a western sword on har back,(eyes of the same color),gray eyes,
ネガティブプロンプト
((((boy)))),((((man)))),picture frame,gate,,mirror,pattern,circle,Spotlight,wall,lower body image,curtain,fog,cloud,haze,screen,background decoration,long hem,weird cloth, long sleeves, cloak, mecha, machinery, long hair, motionless, wings, dragon,Image of lower body only,powered suit,child,feet only,childhood,faceless,longbody, lowres, bad anatomy, bad hands, missing fingers, pubic hair,extra digit, fewer digits, cropped, worst quality, low quality,
—
高そうな椅子に座るドリル髪寄りの少女、我儘、イケメン顔、金髪の少女
1回目生成
プロンプト
((ultra-detailed)),masterpiece,best quality,(illustration),((((full-length figure)))), ((transparent background)),(1),(((girl))),((sitting Luxury chair)),(wearing shoes on feet), wearing a cute dress,pretty girl,spoiled pretty girl,celebrity pretty girl, beautiful detailed eyes, good looking,((an extremely delicate and beautiful)),On the left,On the left, blonde hair,ringlets,
ネガティブプロンプト
((((boy)))),((((man)))),picture frame,gate,,mirror,pattern,circle,Spotlight,wall,lower body image,curtain,fog,cloud,haze,screen,background decoration,long hem,weird cloth, long sleeves, cloak, mecha, machinery, long hair, motionless, wings, dragon,Image of lower body only,powered suit,child,feet only,childhood,faceless,longbody, lowres, bad anatomy, bad hands, missing fingers, pubic hair,extra digit, fewer digits, cropped, worst quality, low quality,
Seed固定無しの1回目画像参照の生成にて
Strenth:0.8 Noise:0.1
→
天使の雰囲気があるクールな顔のかわいい女の子
プロンプト
((masterpiece)), (((best quality))), ((ultra-detailed)), ((illustration)), ((disheveled hair)),Make the eyes the same shape and color on both sides,eyes of the same eye,cool girl,angel,(eyes of the same color),blue eyes,(angel smaile),cute
ネガティブプロンプト
longbody, lowres, bad anatomy, bad hands, missing fingers, pubic hair,extra digit, fewer digits, cropped, worst quality, low quality,Uncomfortable eyes,strange eyelid,an eye over an eye,Alien eye,unnatural eyes
3人いますね?
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
戦闘差分として使うから、
1人だ。
成程、
では削除して下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
……どうやれば
なら、そこから
始めましょうか。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
背景透過のやり方、尺使い過ぎたので
こちらにログがあります。↓
![](https://sazano123.com/wp-content/uploads/2022/11/image-56-4-300x158.webp)
透過後
![](https://i2.wp.com/sazano123.com/wp-content/uploads/2022/11/image-58-4-683x1024.webp?ssl=1)
![](https://i2.wp.com/sazano123.com/wp-content/uploads/2022/11/image-57-4-683x1024.webp?ssl=1)
–
背景はミッドジャーニーにて作成
![](https://sazano123.com/wp-content/uploads/2022/12/image-2-3.webp)
Guest room in an exclusive mansion::5,makoto sinkai style,kawaii,anime, high-definition –ar 16:9
キャラクターサイトのテンプレート
まず、全体のテンプレートを
作ったので
見せておきますね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
その前に
表紙を作る作業に入るので
ダウンロードは
まだできない様に
しています。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
テンプレート中身
![](https://sazano123.com/wp-content/uploads/2022/11/image-67-4-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-65-4-1024x576.webp)
–
![](https://sazano123.com/wp-content/uploads/2022/11/image-66-5-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-68-3-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-69-4-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-70-3-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-71-4-1024x576.webp)
![](https://sazano123.com/wp-content/uploads/2022/11/image-72-4-1024x576.webp)
簡単に言えば、
好きな背景と立ち絵載せて
編集すれば
それっぽくなるようにしました。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
色々改造したり
しても良いのか?
自陣で遊ぶ範囲なら、
何してもらっても
大丈夫ですよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
手順① 表紙作成
![](https://sazano123.com/wp-content/uploads/2022/11/image-67-4-1024x576.webp)
–
まず、白い部分を
作成していきたいと
思っています
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
白い部分。
表紙画像作成用の
テンプレート用意しました
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-10-1-1024x497.webp)
キャラクターの画像と
背景を載せれば完成です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
説明は以上です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 怒り-1-231x300.png)
投げたな?
……
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
分かりました
やりましょう
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
テンプレートの使用し方
![](https://sazano123.com/wp-content/uploads/2022/12/image-11-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
テンプレートの使用で良いか
はい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-1-3-1024x627.webp)
①キャラクターを載せる
シルエットが載っているところに、
立ち絵を載せる。
シルエットは消す、立ち絵の場所は変更OK
まず、
この人間がいるところの上に
キャラクター画像を
載せてみてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-3-2-1024x674.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
載せた
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
…事案
……確かに
黒いと不審者みたいな
絵面ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
不審者は
消して下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
消した
![](https://sazano123.com/wp-content/uploads/2022/12/image-4-2-1024x386.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
これだけで
既にそれっぽいな…
![](https://sazano123.com/wp-content/uploads/2022/12/image-5-1.webp)
②背景を載せる
タイトルロゴを消して、
背景を載せる。
次に
背景にしようかな。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
まずロゴと黒い縦線を
消してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
立ち絵の場所が
ズレそうになるが…
また良さげな所に
調整すればいいので、
ズレてもOKですよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-1-4-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
殺風景になった。
では、
背景を入れましょう
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-2-3.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
ファイルを
アップロードして、
背景画像を入れる
![](https://sazano123.com/wp-content/uploads/2022/12/image-7-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
入れた画像をクリックする
![](https://sazano123.com/wp-content/uploads/2022/12/image-8-1-1024x497.webp)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
画像が出てきたが…
![](https://sazano123.com/wp-content/uploads/2022/12/image-9-1-1024x497.webp)
その画像を
クリックしながら
動かしてみてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
適当に
動かせば良いか?
はい、
適当に動かしてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
…!
![](https://sazano123.com/wp-content/uploads/2022/12/image-10-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
背景になるのか…!
そうなんです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
さっきの空と山の素材は
画像を良い感じに配置してくれる
「フレーム素材」
というもので――
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
難しい事は
分からないが、
いい感じになる事は
分かった。
そう、
それさえ分かればいいです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
手を放せば、完了
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
クリックしている
指を離す
![](https://sazano123.com/wp-content/uploads/2022/12/image-11-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
無事に
背景になった。
もし、フレーム画像から
画像を切り離したい場合は、
背景の上で右クリックすると、
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-32-1-1024x497.webp)
このように
「画像を切り取る」機能が
出てくるので
修正が出来るように
なっています。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
ロゴを作って載せる
3枚目のロゴの文字を変えるだけでOK!
最後にロゴです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
ロゴ、
作ったことないんだが
その為の
ロゴテンプレートが、
3枚目にあります。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-12-1-1024x497.webp)
文字が変更できる仕様に
なっているので、
クリックして、
好きな三行に変えてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
こうか
![](https://sazano123.com/wp-content/uploads/2022/12/image-13-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
今日は、
松坂牛を食べに行く
自慢された
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
では、
文字の色を
白に変えましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
焼肉と言ったからと言って
文字を白に――
いえ、元から文字は
白くする予定でした
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
肉で悔しがることの方が
リップサービスですので
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
そ、そうか
ムキになっていて面倒だな…?
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
文字の色を変える方法
文字色は
慣れていると思うので
さくっと行きますね
変えたい場所を
クリックして、
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-19-1-1024x497.webp)
色の変更ボタンを
押して
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-20-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
白色に変更、だな
そうです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-21-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
出来た。
![](https://sazano123.com/wp-content/uploads/2022/12/image-22-1-1024x497.webp)
黒い棒も、
白にできますか?
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
分かった。
![](https://sazano123.com/wp-content/uploads/2022/12/image-23-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
これも白にする
![](https://sazano123.com/wp-content/uploads/2022/12/image-24-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
隣も白にして…
・・・
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
出来た
![](https://sazano123.com/wp-content/uploads/2022/12/image-25-1-1024x497.webp)
コピーして、元ページに貼り付ける
では、コピーして
貼り付けの作業ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
先ほどの
キャラクター立ち絵が
ある場所にか?
はい、コピーした時と
同じ配置で貼り付けされるので
貼り付けるだけで
完成になるはずです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
右クリックを押して、
コピーを選択した
![](https://sazano123.com/wp-content/uploads/2022/12/image-27-1-1024x497.webp)
では、貼り付けで
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
分かった。
右クリックを押して、
貼り付けを選択
![](https://sazano123.com/wp-content/uploads/2022/12/image-28-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
許可を求めている、と出てきたが。
![](https://sazano123.com/wp-content/uploads/2022/12/image-30-1-1024x497.webp)
許可する、にして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
分かった。
許可をしてやろう
–
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
・・・白い文字が
無事についたな
![](https://sazano123.com/wp-content/uploads/2022/12/image-31-1-1024x497.webp)
うん、完璧ですね。
とても良い感じに
なりました
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
文字が見にくいが、
色を変えた方がいいか?
影を付ければ解決するので、
今回はその方向で行きましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
文字に影を付ける
編集したい文字を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
クリックした
![](https://sazano123.com/wp-content/uploads/2022/12/image-33-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
メニューが
変わったな
そうです。
そこの「エフェクト」を
押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
エフェクトを押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-34-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
沢山のエフェクトが出てきた
![](https://sazano123.com/wp-content/uploads/2022/12/image-35-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
影付き、で良いんだな?
文字をはっきり見せたいので、
「浮き出し」の方に
して欲しいです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-36-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 怒り-1-231x300.png)
影つけると言った癖に
浮き出しの方が、
影付くので
機能名を付けた奴が悪い
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 怒り-1-231x300.png)
Canvaに怒られろ
–
–
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
…浮き出しにしたら、
若干文字が
みえやすくなったな
![](https://sazano123.com/wp-content/uploads/2022/12/image-37-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
いや、そんなに
見やすくはないか
そうですね
もう少し、
読みやすくしたいので
強度を100まで上げましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-38-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
確かにこの方が……?
読みやすくなっている、のか…?
比較画像
置きましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://i2.wp.com/sazano123.com/wp-content/uploads/2022/12/image-39.webp?ssl=1)
![](https://i1.wp.com/sazano123.com/wp-content/uploads/2022/12/image-40.webp?ssl=1)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
こう見ると、
確かに影有りの方が
見やすい事が分かるな
手順①+α アニメーション機能
表紙としての使用より、Twitterのディスプレイ使用などの用途をおすすめします。
軽い動きも付けられるので
軽く流す程度に、だけ
お伝えしておきますね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
–
文字をクリックして、
上にあるアニメーションを
クリック
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-41-1024x497.webp)
色々なアニメーションが
ありますが、
文字に相性が良いのは
タイプライターかな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-42-1024x497.webp)
同じ感じで
立ち絵を
クリックして選択。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
–
右の子は「写真フロー」で
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-43-1024x497.webp)
左の子は
テクトニクスにします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-52-1024x497.webp)
これで
アニメーションは完了。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
此処は好みで
変えて良いので、
色々試して見てください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
GIF・動画出力の違い
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
出来たものが此方
動画の場合
–
–
GIFの場合
![](https://sazano123.com/wp-content/uploads/2022/12/表紙:738-×-768-px作成テンプレートのコピー-1.gif)
GIFの場合、
色合いが変わるので
絵師様に
描いてもらった絵などは
非推奨です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
動画の場合の悪い点は?
クリックしないと
動かない所かな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
一周回って、
静止画の方が
良い気もしてきたな…?
そういう時も結構あります。
やりたいことに
合わせて使って下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
GIF・動画ダウンロードのやり方
まず、
共有を押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
共有を押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-53-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
表示が出てきたな
![](https://sazano123.com/wp-content/uploads/2022/12/image-54-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
ダウンロードで
いいか?
はい、
ダウンロードで
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
MP3形式の動画
と出てきた
動画にしたい場合は、
ページを指定して、
ダウンロードで完了です。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
GIFの場合は
どうだろうか
GIFの場合は、
ファイルの種類を変えるので
動画の部分をクリックします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-55-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
ファイルの種類に
PNGもGIFもあるな
なので、
今回はGIFを
選択しましょう
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-56-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
GIFを選択した。
それで
ファイル形式はOKです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
ダウンロードページの選択
すべてのページを
ダウンロードすることに
なっているので
ページを指定しましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
ページ選択の
プルダウンメニューを
クリックする
![](https://sazano123.com/wp-content/uploads/2022/12/image-57-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
保存したいのは、
5ページだな
![](https://sazano123.com/wp-content/uploads/2022/12/image-58-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
完了を押す
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
そして、
ダウンロード
![](https://sazano123.com/wp-content/uploads/2022/12/image-59-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
これで、完成だな
はい、表紙は
これでもうできたので
あとは背景はめたり
文字入れ替えたりで
完成ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
手順② テンプレートに表紙を入れ込む。
では、ホームページ用の
テンプレートを
開きましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/11/image-73-4-1024x497.webp)
テンプレートURLを
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
テンプレートの使用、
でいいのか
![](https://sazano123.com/wp-content/uploads/2022/12/image-15-1-1024x497.webp)
OKです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
–
まず、幅×高さの文章はいらないので
消して大丈夫です。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-72-1024x497.webp)
消し方は、
右クリックの削除からでも
キーボードの
削除キーからでも
消せます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-74-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
消した
![](https://sazano123.com/wp-content/uploads/2022/12/image-73-1024x497.webp)
画像の
アップロードし方は
前と同じなので、
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-40.webp)
さっき
ダウンロードした素材を
アップロードして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
・・・
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
これでいいのか?
![](https://sazano123.com/wp-content/uploads/2022/12/image-75-1024x497.webp)
白い四角と
同じサイズなので、
被せる感じで
載せてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
これでいいのか
![](https://sazano123.com/wp-content/uploads/2022/12/image-76-1024x497.webp)
そうです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
あとは
右の文字を修正して、
日時とかを
変更しておいて下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-78-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
卓予定もないため、
適当に変更しておいた
大丈夫です、
変更出来れば
何でもいいので。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
これで
1ページ目は
完了です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
手順③ 背景を透明にして、他のページにも背景を入れ込む
あとは、
背景設定ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
–
–
–
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
これを
![](https://sazano123.com/wp-content/uploads/2022/11/image-65-4-1024x576.webp)
↓
![](https://sazano123.com/wp-content/uploads/2022/12/image-79-1024x576.webp)
このようにします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
背景を
出せば良いんだな?
![](https://sazano123.com/wp-content/uploads/2022/12/image-80-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
アップロードから、
背景をクリックする
–
![](https://sazano123.com/wp-content/uploads/2022/12/image-81-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
ここまでは出来た
仕事が
早くて何よりです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
–
–
では、
背景にする方法を
伝えますね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
画像を背景に設定する方法
まず、
背景にしたい画像を
右クリックします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
右クリックしたら、
「背景を差し替え」
という項目があった
![](https://sazano123.com/wp-content/uploads/2022/12/image-82-1024x497.webp)
まさにそれを
クリックしてほしいです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
背景に設定されたな
![](https://sazano123.com/wp-content/uploads/2022/12/image-1-5-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
…と言いたいが、
明らかに文字が見にくい
背景画像を
透明にして
見やすくしましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
背景画像を透明にする方法
まず透明にしたい画像を
クリックします
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
クリックしたら、
紫の枠に囲まれた
さらに、
上にメニューが
増えているのも
分かると思います
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-32-4-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
本当だ、
これのどこを押すんだ?
右上の市松模様が
消えかかっているような図
ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-4-3-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
透明度、が
出てきたが……
100と言う事は
既に透明と言うこと、か…?
いえ、0で透明になります。
なので、
42辺りまで下げてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
下げよう
![](https://sazano123.com/wp-content/uploads/2022/12/image-5-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
文字が見やすくなって、
いかにも
「背景」になったな
![](https://sazano123.com/wp-content/uploads/2022/12/image-6-2-1024x497.webp)
ええ、
これが理想形なので
こんな感じかな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
他のページにもコピー貼り付けをする
他のページも、
全部背景を
付けてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
表紙には
背景を付けるのか?
1ページ目は
好みによるかな?
僕はつけていない
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-33-3-1024x750.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
どうすればいい?
先ほどの画像を
クリックしてコピー、
その後に
別のページで
貼り付ければ完了です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-7-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
分かった。
・・・
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
これで
すべてのページに
背景画ついたと思われる
–
![](https://sazano123.com/wp-content/uploads/2022/12/image-8-2-1024x497.webp)
これだけで、本当に
本格的な雰囲気に
なりますよね…。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
手順④ 文字の装飾や、修正をする(お好みや自陣に合わせて加工する)
土台部分が完成したので
あとは自分のスタイルに合わせて
編集する流れになります。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
–
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
Canvaの基本操作に関しては、
Cとか岸とかの
纏めたログを参考に
![](https://sazano123.com/wp-content/uploads/2021/11/image-42-300x169.webp)
–
![](https://sazano123.com/wp-content/uploads/2022/05/image-2022-05-26T124343.830-300x169.webp)
やれば
なんとかなるかな、
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
また投げたな
同じ説明3回もしていたら、
それはそれで
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
画像のリンクの仕方と
シルエットの仕方ぐらいは
知りたい
!
確かにそうですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
なら、
その二つは
伝えておきましょうか
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
テクニック① 画像へのリンクの貼り方
リンクを貼りたい画像を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
クリックすると、
紫の枠に囲われた
![](https://sazano123.com/wp-content/uploads/2022/12/image-9-2-1024x497.webp)
それから、
右クリック
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
!
「リンク」項目があった
![](https://sazano123.com/wp-content/uploads/2022/12/image-10-3-1024x497.webp)
うん、
それを押せば良いです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
押したら、
メニューが出てきた。
![](https://sazano123.com/wp-content/uploads/2022/12/image-11-3-1024x497.webp)
そこにURLを入れるか、
好きなページを選択すれば
リンクが作れます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
URLを入れて、
Enterを押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-12-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
リンクが追加された
これで完了です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
テクニック② シルエットの作成し方
次に
シルエット画像の
作成ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-13-2-1024x497.webp)
シルエットにしたい
立ち絵画像を
クリックして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
クリックして、
枠を出した
![](https://sazano123.com/wp-content/uploads/2022/12/image-14-1-1024x497.webp)
左上に
メニューが出たと思うので
画像を編集をクリックで
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
これを押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-15-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
画像を
編集という枠が
出てきたな
–
そこの
「ダブルトーン」を
選択してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
二色だが?
やれば分かる押せ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-16-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
押したら、
凄い色のが沢山出てきた
![](https://sazano123.com/wp-content/uploads/2022/12/image-14-5-1024x497.webp)
–
色は後で変えるので、
とりあえずチェリーを
選択してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 気まずい-233x300.png)
選択する
![](https://sazano123.com/wp-content/uploads/2022/12/image-17-1-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
案の定、
凄い色になったな
![](https://sazano123.com/wp-content/uploads/2022/12/image-16-6-1024x497.webp)
では、
色を調整しましょうか。
もう一度チェリーを
押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
?
押す
![](https://sazano123.com/wp-content/uploads/2022/12/image-18-2-1024x497.webp)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
ハイライトと影付き?が
出てきた
![](https://sazano123.com/wp-content/uploads/2022/12/image-19-2-1024x497.webp)
そこの色を
同じ色にすれば、
シルエットが出来ます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
成程。
なら、
ハイライトを押そう
–
![](https://sazano123.com/wp-content/uploads/2022/12/image-20-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
何色が
良いだろうか
![](https://sazano123.com/wp-content/uploads/2022/12/image-17-5-1024x497.webp)
キャラクターの
ワンポイントに
なっている色を
スポイトで採る事を
おすすめするかな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
全体に使っている色を
明るくしたり、
暗くした色もおすすめ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
今回の場合の
具体的なカラーコードは?
…#E05353、
靴の色から摂ってきました
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-21-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
なら、それで
影付きも
同じ色にして下さい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
分かった
![](https://sazano123.com/wp-content/uploads/2022/12/image-22-2-1024x497.webp)
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
これで
同じ色になった。
![](https://sazano123.com/wp-content/uploads/2022/12/image-23-3-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
!
確かにこれなら、
シルエットだな…!
そう、
あとは
元のイラストを
もう一度貼って
後ろに付ければ完成です
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
貼ってみよう
![](https://sazano123.com/wp-content/uploads/2022/12/image-24-2-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.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)
手順⑤ 有料会員素材の差し替え
有料素材を
3点使ってしまっていたので、
消す
OR
差し替え候補の画像に差し替えて下さい
何も気づかずに
有料会員素材使っていたので
差し替え候補を
紹介しておきます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
差し替えをしないと
どうなる?
有料素材は
1点120円なので、
その金額を請求されます
サブスク会員は無料
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-1-6-1024x497.webp)
![](https://sazano123.com/wp-content/uploads/2022/12/image-18-6-1024x497.webp)
この手順が完了したら、
ホームページとして
公開する方法かな
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
手順⑥ ホームページとして表示する方法
では、
Webサイトを公開を
押してください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
押した
![](https://sazano123.com/wp-content/uploads/2022/12/image-20-6-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 通常-238x300.png)
無料のドメイン、
でいいのか?
![](https://sazano123.com/wp-content/uploads/2022/12/image-21-5-1024x497.webp)
はい、それで
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
サブドメインを選択…?
サイトURLを
設定するのですが、
後で変えられるので
自由で良いですよ
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-22-6-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
なら、適当に
![](https://sazano123.com/wp-content/uploads/2022/12/image-23-7-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
出来たら、
続行で良いか?
はい、
そうです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 通常-2-254x300.png)
–
それから、
設定の確認で色々な設定を
変更できます。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-24-6-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
URLとブラウザタブと、
サイトの説明が
変えられるんだな
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 気まずい-233x300.png)
ブラウザタブ、URL、
サイト説明……
–
–
–
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
……何のことだろうか
これで
分かりそうですか?
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-25-5-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
!
それのことか!
そうです。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
Webサイトの説明の部分は、
何処に当たるのだろうか
恐らく、此処ですね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-26-3-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
検索する時に
引っかかりやすいように
する場所か
SEO関係の知識が
ある事に驚いてますが
まあそうです
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 不安-2-257x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/ダウンロード-2.png)
身内用に作ったのに
検索に載るのか…
その場合は、
項目の下にあるチェックを押せば
問題なくなります
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-27-4-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
鍵も付けられるのは便利だな
使い道分からないが
秘匿情報のネタバレ防止には
便利かな、と
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
設定が完了したら、
続行で良いんだな?
はい
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-28-5-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
準備中と出た
そうですね
2分も待たずに直ぐできます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
![](https://sazano123.com/wp-content/uploads/2022/12/image-29-4-1024x497.webp)
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 笑顔-243x300.png)
出来たな…!
![](https://sazano123.com/wp-content/uploads/2022/12/image-30-4-1024x497.webp)
これでサイトの公開が
完了なので、
全部の工程が
終了になります。
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
完成形&テンプレート配布
先ほどのに
手を加えた完成形を
テンプレートとして作ったので
URL置いておきますね
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
![](https://sazano123.com/wp-content/uploads/2022/12/image-31-4-1024x497.webp)
終わり
![男子A](https://sazano123.com/wp-content/uploads/2021/02/制服男子 すまし顔-1-237x300.png)
無料で感覚的に
サイトが作れるのは
便利だな
説明すると長くなりますが、
本当に便利で革命的だと
思ってます
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 嬉しい-2-267x300.png)
–
今回は
キャラクター紹介ページに
しましたが、
応用は色々可能なので、
遊んでみてください
![男子B](https://sazano123.com/wp-content/uploads/2021/02/男子B 笑顔-1-261x300.png)
関連記事
Notionで探索者図鑑を作る!キャラクター図鑑の作り方、キャラクターサイトの作り方、Notionを使ってTRPGや創作のキャラクターの整理をする方法
![](https://sazano123.com/wp-content/uploads/2022/10/image-2022-10-02T161532.374-1024x538.webp)
Lit.Link(リットリンク)の作り方や使い方、立ち絵一覧のあるプロフィールの作り方
![](https://sazano123.com/wp-content/uploads/2022/07/Lit.-2-1024x538.png)
Canvaでの画像透過、背景透過のやり方の説明、立ち絵の背景透過、トリミング機能などの説明
ディスプレイの作り方、ディスプレイでよくあるデザイン。トレイラー作成にも応用可!
![](https://sazano123.com/wp-content/uploads/2022/05/image-2022-05-26T124343.830-1024x576.webp)
YoutubeサムネイルやTRPGトレイラーで使える画像の作り方。無料ツールを使っての画像作成の仕方、動画サムネ画像を簡単作成!インストール不要なツールCanva無料版にて作成
![](https://sazano123.com/wp-content/uploads/2021/11/image-42-1024x576.webp)
TRPGトレイラー4枚を作る前編!キャッチコピー編!Canvaを使ったトレイラー作成方法。
![](https://sazano123.com/wp-content/uploads/2022/10/image-66-2-1024x538.webp)
TRPGトレイラー4枚を作る後編!トレイラー画像編!Canvaを使ったトレイラー作成方法。
TRPG配信画面や動画の作り方、枠の作成方法。
![](https://sazano123.com/wp-content/uploads/2022/02/music-5-1024x538.jpg)
Youtubeでの配信の仕方。見たままを行うだけ!OBSとYoutubeを使って配信する方法。
–
–