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

立ち絵ディスプレイの作り方、TRPGでキャラクターの立ち絵やビジュアルの背景を作るやり方、絵が描けなくても無料ツールで出来る方法。応用すればトレイラーの作り方にも!

※絵も描けない!デザインも出来ない!
でもディスプレイ作りたい!という人用の記事です。

男子A
男子A

立ち絵をあげる時に、
背景を良く付けているな

ディスプレイの
作り方か…?

男子C
男子C
男子A
男子A

それがしたい

ある程度なら
伝えられると思う

男子C
男子C
目次

ディスプレイでよく使っているサイズ(個人差あります)

縦横はどっちがいい?

男子C
男子C
男子A
男子A

どっちでも

縦ディスプレイ
横900×縦1200

横ディスプレイ
横1600×縦900

ディスプレイで使う時は
このサイズで作ってる

男子C
男子C

ディスプレイ作成例

この二つに関しては後でパーツ分解して説明します

※両シナリオ共に、未読・未プレイの為、ネタバレは一切御座いません(22.5.26作成)

以下はステータス等が載っているので、少しイメージとは違いますが参考までに

ディスプレイを作る時によくあるパターン!

ディスプレイを作る時によくあるパターンの作り方を伝えてから、
上の画像は、そのパターンの何を使っているか
詳細を書いていきます

なら、
よくあるパターンを
知っておくと楽!

男子C
男子C
男子A
男子A

使うツールは、Canva

そう、Canva。

ここでアドビ使えとかは

流石に言わない。

無料ブラウザ

ツールでやる

男子C
男子C

-こなせ根

※此方でも、Canvaを使った画像作成の説明をしています。

今回の流れは
やり方を教えてから、
見本をバラして、
このやり方でやった!と
説明するスタンス!

男子C
男子C

編集画面までの行き方と画像のサイズ設定

Canvaを開く

男子C
男子C
男子A
男子A

開いた

デザインを作成を押す

男子C
男子C

「カスタムサイズ」を
クリック

男子C
男子C

あとは好きなサイズに
設定すればOK!

男子C
男子C
男子A
男子A

縦ディスプレイにしたいから
幅900の高さ1200にした

設定できると、
編集の画面に飛ぶと思う

男子C
男子C
男子A
男子A

飛んだな。
PowerPointの感覚で
切り貼りするのか!

そう!
何が何処にあるかも
分かりやすいから
ぱぱっと作る時に本当に便利

男子C
男子C

よくあるディスプレイ① タイトルを中抜きにして、大きく配置

シナリオタイトルを
中抜きにして
表示してるのを
よく見かける

男子C
男子C
男子A
男子A

妙にダサいな

これから
帯の文字も付けるから
未完成品なんだよ

男子C
男子C
男子A
男子A

で、
これは
どうやるんだ?

エフェクト欄に
中抜きがあるから
図解するわ

男子C
男子C

…とまず、
テキストの
入力し方からだな

男子C
男子C
男子A
男子A

左端のメニューバーを
見る事は分かっている

かなり優秀!

男子C
男子C

と言う事で、
何でも良いから
文字入力して

男子C
男子C
男子A
男子A

入力した

次は、
メニュー画面の方に
目を向けてもらって
「エフェクト」を押して

男子C
男子C
男子A
男子A

押したら、
ネオンとか
色々なスタイル?が
出てきた。

早いな。
真ん中の左!
中抜きがあるから
押してみて

男子C
男子C
男子A
男子A

押したが、
まだ中途半端だ…

大丈夫、
それを
今から調整する!

男子C
男子C

中抜きを
クリックすると
太さの詳細が選べる
から
2~5ぐらいの細さにする!

男子C
男子C

何も考えずに、
左へ動かして!

男子C
男子C
男子A
男子A

頭を使わないのは得意だ

太さの値を、
左に動かす。

男子A
男子A

それっぽくなった!

よし!
これで中抜きはOK!

男子C
男子C

文字を縦向きにする方法

男子A
男子A

縦向きにするには
どうすれば良いんだ?

なんと
T↓を
クリックするだけで
出来る…

男子C
男子C
男子A
男子A

押してみる

男子A
男子A

本当だ。
あっけなかった…

後の微調整は
好きな感じで!

男子C
男子C

よくあるディスプレイ② 文字に帯が付いている

あとは
音楽動画でもある
この帯もよく見るよな

男子C
男子C
男子A
男子A

やり方は?

これも
エフェクト欄で
解決!

男子C
男子C
男子A
男子A

なら文字を
入力した

なら、
次はエフェクトだ

男子C
男子C
男子A
男子A

さっき
やった奴だな

男子A
男子A

諸君、見てくれ

諸君ではないけど
どーした?

男子C
男子C
男子A
男子A

…やたら黄色になった

例のごとく、
今から調整すっから

男子C
男子C
男子A
男子A

良かった…

前と同じで
メニューバーに注目

男子C
男子C

丸みとスプレッドは「0」
透明度は変更なし
カラーは黒にして

男子C
男子C
男子A
男子A

?????

察しは付いてるけど
どうした?

男子C
男子C
男子A
男子A

文字が
黒く塗り潰された

黒い文字の背景を
黒にしたら、
そりゃそうなる

男子C
男子C
男子A
男子A

!!!
つまり、
白い文字に変更するんだな!

正解!

男子C
男子C

文字の色の変え方

男子A
男子A

色変えは
上のメニューから
出来たな

男子A
男子A

好きな色を選択して、
今回は白でいいか

男子A
男子A

出来た

いや、
ちょっと文字幅が
キツいな…

男子C
男子C
男子A
男子A

このぐらい
妥協を覚えろ

妥協して、なお
許せない
って話だな?

男子C
男子C
男子A
男子A

我儘だ…

文字の幅を微調整する方法

まず、
文字をクリックすると
メニューが現れる

男子C
男子C
男子A
男子A

押した

で、
三本線と↔の付いた
マークをクリックする!

男子C
男子C
男子A
男子A

バーが出てきた

この文字間隔と
行間隔は、感覚でやってるから
色々動かして調整
してる!

男子C
男子C
男子A
男子A

???
あれだけ細かい事を
言っておいて、
感覚と言われると困るんだが

あー……
それは正論な気がする

男子C
男子C

帯の文字?は
ワンポイントで
置くことが多い
印象

男子C
男子C

よくあるディスプレイ③
写真背景の時に透明度をあげる方法、
雰囲気を足したい時は、うっすら写真を入れている

写真の背景にし、
その上に無地の背景を重ね、その透明度を上げることで、
うっすら写真の背景が見える仕様にできます。

模様よりも、
もっと明確な背景が
欲しい時は
透明度を使う

男子C
男子C

例えば、
夜の街という背景を
作りたいとする。

男子C
男子C

……
「の」を忘れた

男子C
男子C
男子A
男子A

間違えたなら、
いっそ
このままやろうか

仕方ない、
第一段階だしな。

今のは、どうだ?

男子C
男子C
男子A
男子A

色々
余白が目立つな

なら、
これに写真を置いて

男子C
男子C
男子A
男子A

マシにはなったが、
取ってつけた感だ

率直だな…?

男子C
男子C

で、
これを背景にする

男子C
男子C

今はこんな感じ

男子C
男子C
男子A
男子A

文字が
全く読めないな

ここで、
透明度をさげる!

男子C
男子C

今回は透明度41にしています

これで
出来たものが、これ

男子C
男子C
男子A
男子A

マシにはなったが
余白が気になる…

正直しくったな、と
思っていたから
同じ意見で助かる

男子C
男子C

よくあるディスプレイ④ 物足りない場所は、そっと模様入れてる

余白が余ったら、
薄い色で模様付けたりする

男子C
男子C
男子A
男子A

模様の出し方は?

サムネイルの時の説明と
被るけど、
ざっと言うと、こう!

男子C
男子C
男子A
男子A

色々出てきたな

此処にはないけど、
王冠マークある奴は
有料。

無料素材で
事足りるけどな

男子C
男子C

そして、
これは無理矢理に
装飾付けて
なんか誤魔化した図

男子C
男子C
男子A
男子A

英語はなんて
書いてあるんだ?

『こんにちは、皆さん。
私はタナカ シンと言います』

男子C
男子C
男子A
男子A

ふざけた文字列でも
お洒落にはなるんだな

最近流行っている柄は「メンフィス」で検索すると出る!

よく見る柄でも作りたいから、
色々調べたら
「メンフィス」と入力すると
それっぽいのが出ると判明。

男子C
男子C

簡単なスクリーンショットのやり方(色を抽出するときに使う為に説明)

トレイラーの色を使うと
シナリオらしさのあるディスプレイ
になる
を重視。
(イラストの色と相性が悪い場合は、イラストの補色や同系色をお勧めします。

色の抽出し方の為に、スクリーンショットのやり方の説明

後で使うかもしれないから
パソコンでの
スクリーンショットの
やり方を伝える

男子C
男子C

Snipping Toolって言う
スクリーンショットみたいな機能が
Windowsに元から入ってる。

男子C
男子C
男子A
男子A

便利な奴だな、
たまに使う

これで一時的に
トレイラーを切り取って
Canvaでスポイトしてる

男子C
男子C

スポイトのやり方

男子A
男子A

スポイトは
どうやるんだ?

リンゴを
二つ用意した

男子C
男子C
男子A
男子A

リンゴだな

まず、図形をクリックして
色のメニューから
虹のマークをクリックする

男子C
男子C
男子A
男子A

押すと、
このようになった

なら、
スポイトのマークを押して
本物のリンゴの色を抽出!

男子C
男子C
男子A
男子A

クリックした!

男子A
男子A

リンゴが
リンゴの色になった!

よしよし。
そんな感じで
スポイトの色抽出は行う

男子C
男子C

「シナリオっぽい」ディスプレイの作り方

①トレイラーの色をスポイトで抽出する
②そのシナリオっぽいフォントにする

③モチーフを入れ込む

男子A
男子A

先程の二つは
ぱっと見で
「そのシナリオ」だと
分かったが、どうすれば良いんだ?

コツは3つ

男子C
男子C

テーマカラー
フォント
モチーフ

男子C
男子C
男子A
男子A

???

パーツに
分けて説明しようか

男子C
男子C

海も枯れるまでっぽいディスプレイで使った素材例

※現在、未読・未プレイの為、ネタバレは一切御座いません

海も枯れるまで
イメージで作った
ディスプレイはこれ

男子C
男子C
男子C
男子C

中身をばらすと、こう。

中身の詳細は、
さっき伝えたやり方で
全部出来る。

男子C
男子C

はんなり明朝はフォント名です。

男子A
男子A

フォントについては
聞いていない

フォントに関しては
トレイラーと見比べて
それっぽいのを選んでるかな

男子C
男子C

VOIDっぽいディスプレイで使った素材例

※現在、未読・未プレイの為、ネタバレは一切御座いません

VOID
イメージで作った
ディスプレイはこれ

男子C
男子C
男子C
男子C

中身をばらすと、こう。

トレイラーが
シンプルだから、
シンプルめだな

男子A
男子A
男子C
男子C

中身の詳細は、
こんな感じ

コメットはフォント名です

キャラクター台詞あると
ぱっと目につくから
結構おすすめ

男子C
男子C

ディスプレイについてのおすすめツイート

基本的に手前から 立ち絵┃空間┃背景 の構成だわ! メインは立ち絵だから背景に溶け込まないように 空間 のところにトーンやらシルエットやら文字やら置いて背景に立ち絵べた貼りにならないように(奥行きが出るように)してるね!

元ツイートツリーより

おすすめ立ち絵ディスプレイBOOTH素材の一覧まとめ

秒速で作りたい場合は
BOOTHテンプレに
頼るのもおすすめ!

男子C
男子C

【無料/投げ銭】一枚でいい感じにディスプレイが作れるテンプレート①

RPGの立ち絵ディスプレイに使えるテンプレート素材です。
探索者に合わせてorシナリオに合わせて使えるように幅広い種類をご用意しています。

TRPG以外でも使えそうなものがあればご自由にどうぞ。

300dpi JPEGデータ
データ内容
【無料版内容物】
・テンプレート素材 15種類

【投げ銭版内容物】
・テンプレート素材 200種類

お約束など
【OK】
・色変え
・書き込み、変形などの加工

【NG】
・素材の再配布、再販売
・自作発言

立ち絵ディスプレイ用背景

TRPGの立ち絵ディスプレイに利用できる背景です。
モノクロでテキスト情報も少ないので様々なシステムやキャラクターの雰囲気に合わせられるようになっています。
また、有料版には背景透過verも同梱されているので、キャラクターに合わせたディスプレイにしていただくことも出来ます。

【一部無料】立ち絵ディスプレイ用背景vol.2

TRPGの立ち絵ディスプレイに利用できる背景vol.2です。モノクロでテキスト情報も少ないので様々なシステムやキャラクターの雰囲気に合わせられるようになっています。また、有料版には背景透過verも同梱されているので、キャラクターに合わせたディスプレイにしていただくことも出来ます。


【無印版との違い】
・横に長い構図が追加されています
・前回よりもやや複雑なデザインにしました
・複雑なデザインにしたためパーツごとに分けたものも追加しました
・前回よりも内容量は少ないです
・有料版から非透過背景を削除しました(無駄なファイル削減のため)

立ち絵ディスプレイ01【無料/全7色】

【基本無料】ちょっと高級感のある立ち絵ディスプレイ用素材

【基本無料】シンプルな立ち絵ディスプレイ素材

立ち絵ディスプレイ02【無料/全7色】

【基本無料】バストアップ用立ち絵ディスプレイ素材

立ち絵ディスプレイ テンプレート

【無料/有料】立ち絵ディスプレイ素材【TRPG用】

終わりに

デザインもイラストも
やったことない!

男子C
男子C

…って人でも
ディスプレイが作れるように
なったらうれしい!

男子C
男子C

一夜漬けテンションで
一気に説明したから、
説明とかに穴があるかも

男子C
男子C
男子A
男子A

そうなったら、
再録すれば
いいまでだろう?

時代の流れや
得た情報によって
内容変えたりしてるからな

まあ、修正は追々

男子C
男子C

関連記事

サムネイルの作り方(TRPGトレイラー作成の参考例)

リプレイ動画・配信枠の作り方

秘匿シナリオページ、KPレスシ、立ち絵まとめページ用、ホームページの作成方法

ココフォリアでの部屋の作り方

マーカーパネルの使い方

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

この記事を書いた人

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

目次