シナリオ執筆の為、更新停滞気味です

キャラクター紹介サイトをCanvaで作る方法!自陣サイトテンプレートを使っての作成、自探索者まとめサイトや創作用サイトなどにも応用可能。ホームページをCanvaで作成する方法

目次

作れるサイト見本

2PL用サンプルサイト

※テンプレート有、完成形とテンプレートのみの2種あります

4PL用サンプルサイト

※4PL用テンプレートないですが、
2PLを2枚に増やせばほぼそれっぽく作れます。

川崎様:TRPG探索者まとめサイト(Wixにて作成)

今回の説明はCanvaで作る内容ですので、Wixの場合は別内容になります。

Wixの使い方については此方↓
※旧フォーマットでの説明かつ、やや至らない所があります。

Notionのデータベースで作る

こちらの場合はテンプレートを作って下さった方がいるので、
真似すれば作れます↓

導入

Canvaでサイト作成も
出来るようになったそうです。

男子B
男子B

操作方法は画像作成と
あまり変わらないので
サクサク作っていきましょう。

男子B
男子B

記事の途中でCanvaの使い方で躓いた場合、
立ち絵ディスプレイのやり方も参考にどうぞ↓

用意するもの

立ち絵立ち絵を使う許可
(Picrewや創作キャラクター立ち絵)、

まず、
立ち絵が欲しいです

男子B
男子B

4PLだと面倒なので
2人が理想

男子B
男子B
男子A
男子A

なら、これで。

立ち絵は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
男子B
男子A
男子A

戦闘差分として使うから、
1人だ。

成程、
では削除して下さい

男子B
男子B
男子A
男子A

……どうやれば

なら、そこから
始めましょうか。

男子B
男子B

背景透過のやり方、尺使い過ぎたので
こちらにログがあります。↓

透過後

背景はミッドジャーニーにて作成

Guest room in an exclusive mansion::5,makoto sinkai style,kawaii,anime, high-definition –ar 16:9

キャラクターサイトのテンプレート

まず、全体のテンプレートを
作ったので
見せておきますね

男子B
男子B

その前に
表紙を作る作業に入るので
ダウンロードは
まだできない様に
しています。

男子B
男子B

テンプレート中身

簡単に言えば、
好きな背景と立ち絵載せて
編集すれば
それっぽくなるようにしました。

男子B
男子B
男子A
男子A

色々改造したり
しても良いのか?

自陣で遊ぶ範囲なら、
何してもらっても
大丈夫ですよ

男子B
男子B


手順① 表紙作成

まず、白い部分を
作成していきたいと
思っています

男子B
男子B
男子A
男子A

白い部分。

表紙画像作成用の
テンプレート用意しました

男子B
男子B

キャラクターの画像と
背景を載せれば完成です

男子B
男子B

説明は以上です

男子B
男子B
男子A
男子A

投げたな?

……

男子B
男子B

分かりました
やりましょう

男子B
男子B

テンプレートの使用し方

男子A
男子A

テンプレートの使用で良いか

はい

男子B
男子B

①キャラクターを載せる

シルエットが載っているところに、
立ち絵を載せる。


シルエットは消す、立ち絵の場所は変更OK

まず、
この人間がいるところの上に
キャラクター画像を
載せてみてください

男子B
男子B
男子A
男子A

載せた

男子A
男子A

……確かに
黒いと不審者みたいな
絵面ですね

男子B
男子B

不審者は
消して下さい

男子B
男子B
男子A
男子A

消した

男子A
男子A

これだけで
既にそれっぽいな…

②背景を載せる

タイトルロゴを消して、
背景を載せる。

次に
背景にしようかな。

男子B
男子B

まずロゴと黒い縦線を
消してください

男子B
男子B
男子A
男子A

立ち絵の場所が
ズレそうになるが…

また良さげな所に
調整すればいいので、
ズレてもOKですよ

男子B
男子B
男子A
男子A

殺風景になった。

では、
背景を入れましょう

男子B
男子B
男子A
男子A

ファイルを
アップロードして、
背景画像を入れる

男子A
男子A

入れた画像をクリックする

男子A
男子A

画像が出てきたが…

その画像を
クリックしながら
動かしてみてください

男子B
男子B
男子A
男子A

適当に
動かせば良いか?

はい、
適当に動かしてください

男子B
男子B
男子A
男子A

…!

男子A
男子A

背景になるのか…!

そうなんです

男子B
男子B

さっきの空と山の素材は
画像を良い感じに配置してくれる
「フレーム素材」
というもので――

男子B
男子B
男子A
男子A

難しい事は
分からないが、
いい感じになる事は
分かった。

そう、
それさえ分かればいいです。

男子B
男子B

手を放せば、完了

男子B
男子B
男子A
男子A

クリックしている
指を離す

男子A
男子A

無事に
背景になった。

もし、フレーム画像から
画像を切り離したい場合は、
背景の上で右クリックすると、

男子B
男子B

このように
「画像を切り取る」機能が
出てくるので
修正が出来るように
なっています。

男子B
男子B

ロゴを作って載せる

3枚目のロゴの文字を変えるだけでOK!

最後にロゴです

男子B
男子B
男子A
男子A

ロゴ、
作ったことないんだが

その為の
ロゴテンプレートが、
3枚目にあります。

男子B
男子B

文字が変更できる仕様に
なっているので、
クリックして、
好きな三行に変えてください

男子B
男子B
男子A
男子A

こうか

男子A
男子A

今日は、
松坂牛を食べに行く

自慢された

男子B
男子B

では、
文字の色を
白に変えましょうか

男子B
男子B
男子A
男子A

焼肉と言ったからと言って
文字を白に――

いえ、元から文字は
白くする予定でした

男子B
男子B

肉で悔しがることの方が
リップサービスですので

男子B
男子B
男子A
男子A

そ、そうか

ムキになっていて面倒だな…?

男子A
男子A

文字の色を変える方法

文字色は
慣れていると思うので
さくっと行きますね

変えたい場所を
クリックして、

男子B
男子B

色の変更ボタンを
押して

男子B
男子B
男子A
男子A

白色に変更、だな

そうです

男子B
男子B
男子A
男子A

出来た。

黒い棒も、
白にできますか?

男子B
男子B
男子A
男子A

分かった。

男子A
男子A

これも白にする

男子A
男子A

隣も白にして…

・・・

男子A
男子A

出来た

コピーして、元ページに貼り付ける

では、コピーして
貼り付けの作業ですね

男子B
男子B
男子A
男子A

先ほどの
キャラクター立ち絵が
ある場所にか?

はい、コピーした時と
同じ配置で貼り付けされるので
貼り付けるだけで
完成になるはずです

男子B
男子B
男子A
男子A

右クリックを押して、
コピーを選択した

では、貼り付けで

男子B
男子B
男子A
男子A

分かった。
右クリックを押して、
貼り付けを選択

男子A
男子A

許可を求めている、と出てきたが。

許可する、にして下さい

男子B
男子B
男子A
男子A

分かった。
許可をしてやろう

男子A
男子A

・・・白い文字が
無事についたな

うん、完璧ですね。
とても良い感じに
なりました

男子B
男子B
男子A
男子A

文字が見にくいが、
色を変えた方がいいか?

影を付ければ解決するので、
今回はその方向で行きましょうか

男子B
男子B

文字に影を付ける

編集したい文字を
クリックして下さい

男子B
男子B
男子A
男子A

クリックした

男子A
男子A

メニューが
変わったな

そうです。
そこの「エフェクト」を
押してください

男子B
男子B
男子A
男子A

エフェクトを押す

男子A
男子A

沢山のエフェクトが出てきた

男子A
男子A

影付き、で良いんだな?

文字をはっきり見せたいので、
「浮き出し」の方に
して欲しいです

男子B
男子B
男子A
男子A

影つけると言った癖に

浮き出しの方が、
影付くので
機能名を付けた奴が悪い

男子B
男子B
男子A
男子A

Canvaに怒られろ

男子A
男子A

…浮き出しにしたら、
若干文字が
みえやすくなったな 

男子A
男子A

いや、そんなに
見やすくはないか

そうですね
もう少し、
読みやすくしたいので
強度を100まで上げましょうか

男子B
男子B
男子A
男子A

確かにこの方が……?
読みやすくなっている、のか…?

比較画像
置きましょうか

男子B
男子B
男子A
男子A

こう見ると、
確かに影有りの方が
見やすい事が分かるな

手順①+α アニメーション機能

動画埋め込み(再生ボタン必須)も、GIF出力(画質は落ちる)も
出来ることにはできるので、
アニメーション機能を使うやり方も紹介しています。

表紙としての使用より、Twitterのディスプレイ使用などの用途をおすすめします。

軽い動きも付けられるので
軽く流す程度に、だけ
お伝えしておきますね

男子B
男子B

文字をクリックして、
上にあるアニメーションを
クリック

男子B
男子B

色々なアニメーションが
ありますが、
文字に相性が良いのは
タイプライターかな

男子B
男子B

同じ感じで
立ち絵を
クリックして選択。

男子B
男子B

右の子は「写真フロー」で

男子B
男子B

左の子は
テクトニクスにします

男子B
男子B

これで
アニメーションは完了。

男子B
男子B

此処は好みで
変えて良いので、
色々試して見てください

男子B
男子B

GIF・動画出力の違い

男子B
男子B

出来たものが此方

動画の場合

GIFの場合

GIFの場合、
色合いが変わるので
絵師様に
描いてもらった絵などは
非推奨です

男子B
男子B
男子A
男子A

動画の場合の悪い点は?

クリックしないと
動かない所かな

男子B
男子B
男子A
男子A

一周回って、
静止画の方が
良い気もしてきたな…?

そういう時も結構あります。
やりたいことに
合わせて使って下さい

男子B
男子B

GIF・動画ダウンロードのやり方

まず、
共有を押してください

男子B
男子B
男子A
男子A

共有を押す

男子A
男子A

表示が出てきたな

男子A
男子A

ダウンロードで
いいか?

はい、
ダウンロードで

男子B
男子B
男子A
男子A

MP3形式の動画
と出てきた

動画にしたい場合は、
ページを指定して、
ダウンロードで完了です。

男子B
男子B
男子A
男子A

GIFの場合は
どうだろうか

GIFの場合は、
ファイルの種類を変えるので
動画の部分をクリックします

男子B
男子B
男子A
男子A

ファイルの種類に
PNGもGIFもあるな

なので、
今回はGIFを
選択しましょう

男子B
男子B
男子A
男子A

GIFを選択した。

それで
ファイル形式はOKです

男子B
男子B

ダウンロードページの選択

すべてのページを
ダウンロードすることに
なっているので
ページを指定しましょうか

男子B
男子B
男子A
男子A

ページ選択の
プルダウンメニューを
クリックする

男子A
男子A

保存したいのは、
5ページだな

男子A
男子A

完了を押す

男子A
男子A

そして、
ダウンロード

男子A
男子A

これで、完成だな

はい、表紙は
これでもうできたので
あとは背景はめたり
文字入れ替えたりで
完成ですね

男子B
男子B

手順② テンプレートに表紙を入れ込む。

では、ホームページ用の
テンプレートを
開きましょうか

男子B
男子B

テンプレートURLを
クリックして下さい

男子B
男子B

男子A
男子A

テンプレートの使用、
でいいのか

OKです

男子B
男子B

まず、幅×高さの文章はいらないので
消して大丈夫です。

男子B
男子B

消し方は、
右クリックの削除からでも
キーボードの
削除キーからでも
消せます

男子B
男子B
男子A
男子A

消した

画像の
アップロードし方は
前と同じなので、

男子B
男子B

さっき
ダウンロードした素材を
アップロードして下さい

男子B
男子B

・・・

男子A
男子A

これでいいのか?

白い四角と
同じサイズなので、
被せる感じで
載せてください

男子B
男子B
男子A
男子A

これでいいのか

そうです。

男子B
男子B

あとは
右の文字を修正して、
日時とかを
変更しておいて下さい

男子B
男子B
男子A
男子A

卓予定もないため、
適当に変更しておいた

大丈夫です、
変更出来れば
何でもいいので。

男子B
男子B

これで
1ページ目は
完了です

男子B
男子B

手順③ 背景を透明にして、他のページにも背景を入れ込む

あとは、
背景設定ですね

男子B
男子B

男子B
男子B

これを

このようにします

男子B
男子B

男子A
男子A

背景を
出せば良いんだな?

男子A
男子A

アップロードから、
背景をクリックする

男子A
男子A

ここまでは出来た

仕事が
早くて何よりです。

男子B
男子B

では、
背景にする方法を
伝えますね

男子B
男子B

画像を背景に設定する方法

まず、
背景にしたい画像を
右クリックします

男子B
男子B
男子A
男子A

右クリックしたら、
「背景を差し替え」
という項目があった

まさにそれを
クリックしてほしいです

男子B
男子B
男子A
男子A

背景に設定されたな

男子A
男子A

…と言いたいが、
明らかに文字が見にくい

背景画像を
透明にして
見やすく
しましょうか

男子B
男子B

背景画像を透明にする方法

まず透明にしたい画像を
クリックします

男子B
男子B
男子A
男子A

クリックしたら、
紫の枠に囲まれた

さらに、
上にメニューが
増えているのも
分かると思います

男子B
男子B
男子A
男子A

本当だ、
これのどこを押すんだ?

右上の市松模様が
消えかかっているような図
ですね

男子B
男子B

男子A
男子A

押す

男子A
男子A

透明度、が
出てきたが……
100と言う事は
既に透明と言うこと、か…?

いえ、0で透明になります。
なので、
42辺りまで下げてください

男子B
男子B
男子A
男子A

下げよう

男子A
男子A

文字が見やすくなって、
いかにも
「背景」になったな

ええ、
これが理想形なので
こんな感じかな

男子B
男子B

他のページにもコピー貼り付けをする

他のページも、
全部背景を
付けてください

男子B
男子B
男子A
男子A

表紙には
背景を付けるのか?

1ページ目は
好みによるかな?
僕はつけていない

男子B
男子B
男子A
男子A

どうすればいい?

先ほどの画像を
クリックしてコピー、

その後に
別のページで
貼り付ければ完了です

男子B
男子B
男子A
男子A

分かった。

・・・

男子A
男子A

これで
すべてのページに
背景画ついたと思われる

これだけで、本当に
本格的な雰囲気に
なりますよね…。

男子B
男子B

手順④ 文字の装飾や、修正をする(お好みや自陣に合わせて加工する)

土台部分が完成したので
あとは自分のスタイルに合わせて
編集する流れになります。

男子B
男子B

男子B
男子B

Canvaの基本操作に関しては、
Cとか岸とかの
纏めたログを参考に

やれば
なんとかなるかな、

男子B
男子B
男子A
男子A

また投げたな

同じ説明3回もしていたら、
それはそれで

男子B
男子B

男子A
男子A

画像のリンクの仕方と
シルエットの仕方ぐらいは
知りたい


確かにそうですね

男子B
男子B

なら、
その二つは
伝えておきましょうか

男子B
男子B

テクニック① 画像へのリンクの貼り方

リンクを貼りたい画像を
クリックして下さい

男子B
男子B
男子A
男子A

クリックすると、
紫の枠に囲われた

それから、
右クリック

男子B
男子B

男子A
男子A

! 
「リンク」項目があった

うん、
それを押せば良いです

男子B
男子B
男子A
男子A

押したら、
メニューが出てきた。

そこにURLを入れるか、
好きなページを選択すれば
リンクが作れます

男子B
男子B
男子A
男子A

URLを入れて、
Enterを押す

男子A
男子A

リンクが追加された

これで完了です

男子B
男子B

テクニック② シルエットの作成し方

次に
シルエット画像の
作成ですね

男子B
男子B

シルエットにしたい
立ち絵画像を
クリックして下さい

男子B
男子B

男子A
男子A

クリックして、
枠を出した

左上に
メニューが出たと思うので
画像を編集をクリックで

男子B
男子B

男子A
男子A

これを押す

男子A
男子A

画像を
編集という枠が
出てきたな

そこの
「ダブルトーン」を
選択してください

男子B
男子B
男子A
男子A

二色だが?

やれば分かる押せ

男子B
男子B
男子A
男子A

押したら、
凄い色のが沢山出てきた

色は後で変えるので、
とりあえずチェリーを
選択してください

男子B
男子B
男子A
男子A

選択する

男子A
男子A

案の定、
凄い色になったな

では、
色を調整しましょうか。

もう一度チェリーを
押してください

男子B
男子B

男子A
男子A


押す

男子A
男子A

ハイライトと影付き?が
出てきた

そこの色を
同じ色にすれば、
シルエットが出来ます

男子B
男子B
男子A
男子A

成程。

なら、
ハイライトを押そう

男子A
男子A

何色が
良いだろうか

キャラクターの
ワンポイントに
なっている色を
スポイトで採る
事を
おすすめするかな

男子B
男子B

全体に使っている色を
明るくしたり、
暗くした色もおすすめ

男子B
男子B

男子A
男子A

今回の場合の
具体的なカラーコードは?

…#E05353、
靴の色から摂ってきました

男子B
男子B
男子A
男子A

なら、それで

影付きも
同じ色にして下さい

男子B
男子B

男子A
男子A

分かった

男子A
男子A

これで
同じ色になった。

男子A
男子A


確かにこれなら、
シルエットだな…!

そう、
あとは
元のイラストを
もう一度貼って
後ろに付ければ完成です

男子B
男子B
男子A
男子A

貼ってみよう

男子A
男子A

もう少し薄い色の方が
それっぽくないか…?

即答でカラーコードを
聞かれる身にもなれ

男子B
男子B

自分で変えれば
良いので
次に行きますね

男子B
男子B

手順⑤ 有料会員素材の差し替え

有料素材を
3点
使ってしまっていたので、

消す
 OR
 差し替え候補の画像に差し替えて下さい

何も気づかずに
有料会員素材使っていたので
差し替え候補を
紹介しておきます

男子B
男子B
男子A
男子A

差し替えをしないと
どうなる?

有料素材は
1点120円なので、
その金額を請求されます

サブスク会員は無料

男子B
男子B

この手順が完了したら、
ホームページとして
公開する方法かな

男子B
男子B

手順⑥ ホームページとして表示する方法

では、
Webサイトを公開を
押してください

男子B
男子B
男子A
男子A

押した

男子A
男子A

無料のドメイン、
でいいのか?

はい、それで

男子B
男子B
男子A
男子A

サブドメインを選択…?

サイトURLを
設定するのですが、
後で変えられるので
自由で良いですよ

男子B
男子B
男子A
男子A

なら、適当に

男子A
男子A

出来たら、
続行で良いか?

はい、
そうです

男子B
男子B

それから、
設定の確認で色々な設定を
変更できます。

男子B
男子B
男子A
男子A

URLとブラウザタブと、
サイトの説明が
変えられるんだな

男子A
男子A

ブラウザタブ、URL、
サイト説明……

男子A
男子A

……何のことだろうか

これで
分かりそうですか?

男子B
男子B
男子A
男子A


それのことか!

そうです。

男子B
男子B
男子A
男子A

Webサイトの説明の部分は、
何処に当たるのだろうか

恐らく、此処ですね

男子B
男子B
男子A
男子A

検索する時に
引っかかりやすいように
する場所か

SEO関係の知識が
ある事に驚いてますが
まあそうです

男子B
男子B
男子A
男子A

身内用に作ったのに
検索に載るのか…

その場合は、
項目の下にあるチェックを押せば
問題なくなります

男子B
男子B
男子A
男子A

鍵も付けられるのは便利だな
使い道分からないが

秘匿情報のネタバレ防止には
便利かな、と

男子B
男子B
男子A
男子A

設定が完了したら、
続行で良いんだな?

はい

男子B
男子B
男子A
男子A

準備中と出た

そうですね
2分も待たずに直ぐできます

男子B
男子B

男子A
男子A

出来たな…!

これでサイトの公開が
完了なので、
全部の工程が
終了になります。

男子B
男子B

完成形&テンプレート配布

先ほどのに
手を加えた完成形を
テンプレートとして作ったので
URL置いておきますね

男子B
男子B

終わり

男子A
男子A

無料で感覚的に
サイトが作れるのは
便利だな

説明すると長くなりますが、
本当に便利で革命的だと
思ってます

男子B
男子B

今回は
キャラクター紹介ページに
しましたが、
応用は色々可能なので、
遊んでみてください

男子B
男子B

関連記事

Notionで探索者図鑑を作る!キャラクター図鑑の作り方、キャラクターサイトの作り方、Notionを使ってTRPGや創作のキャラクターの整理をする方法
Lit.Link(リットリンク)の作り方や使い方、立ち絵一覧のあるプロフィールの作り方
Canvaでの画像透過、背景透過のやり方の説明、立ち絵の背景透過、トリミング機能などの説明
ディスプレイの作り方、ディスプレイでよくあるデザイン。トレイラー作成にも応用可!
YoutubeサムネイルやTRPGトレイラーで使える画像の作り方。無料ツールを使っての画像作成の仕方、動画サムネ画像を簡単作成!インストール不要なツールCanva無料版にて作成
TRPGトレイラー4枚を作る前編!キャッチコピー編!Canvaを使ったトレイラー作成方法
TRPGトレイラー4枚を作る後編!トレイラー画像編!Canvaを使ったトレイラー作成方法。
TRPG配信画面や動画の作り方、枠の作成方法。
Youtubeでの配信の仕方。見たままを行うだけ!OBSとYoutubeを使って配信する方法。

多くの方に教えてくださると、喜びます!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

今はゲームシナリオを書いている者です。
アナログゲームを嗜む脚本家、小説家、人狼もマダミスも好き。

目次