【解説】同人CG集等におけるクリスタを利用した文字入れの方法について　第2回

※この記事はクリエイター向けの情報記事です
（最後のほうに制作途中の作品サンプル画像がありますので、興味があればそちらだけでも覗いてみてください）

前書き

　前回からかなり時間が経ってしまいました。

【解説】同人CG集等におけるクリスタを利用した文字入れの方法について　第1回

　需要のほどはわかりませんが、備忘録も兼ねて、残りの項目を一つずつ解説していきたいと思います。
　前回では「テキスト設定」に触れたため、今回は「行間・揃え」「テキスト」「ルビ」「文字一覧」「変形設定」について記述いたします。

行間・揃え

　この項目では、文章が二行にまたがったときの行間や、揃え方を設定できます。

行揃え

　三種類の揃え方を選ぶことができますが、基本的にデフォルトの上揃え以外を使うことはあまりないと思いますので、いじる必要性のない部分です。
　文字演出をする時に、もしかしたら中央揃えを利用することがあるかもしれない……といった程度でしょうか。

行間

　文章の読みやすさに大きく関わる、重要な設定項目です。
　行間の数値を増やすことで、行と行の間のスペースが広がります。この数値が低すぎると、文字が詰まって非常に読みづらくなってしまいます。
　この数値指定も、フォントサイズと同様に画像サイズとdpiによって1ポイントあたりの大きさが変わってきます。画像サイズかdpiを変更した時は、あらためて数値を調整しないと行間の間隔が変わってしまいますので、ご注意ください。
（ただしパーセント指定をする時は、割合なので一定になります）

指定方法

　絶対値かパーセント値のどちらで行間を調整するか選べます。
　パーセント設定にすると、画像サイズやdpiが変わっても行の間隔はつねに同じ割合になります。設定の再調整が必要なくなるので、パーセント指定に変更しておくと良いかと思います。
　細かい数値までパーセントは指定できますが、デフォルトの100%はもともとの行間が狭すぎるので、もう少し広げたほうがいいでしょう。
　私はパーセント指定を123%にしています。
（ただしルビのある行の行間は、ルビが前の行とかぶらないように、そこだけ150%に変更しています）

テキスト

　かなり重要な設定項目が揃っています。

文字方向

　横書きか、縦書きかを選択できます。
　用途に合わせて、文字方向を変更しましょう。

アンチエイリアス

　アンチエイリアスをオンにすると、文字のギザギザを軽減して滑らかに表示させられます。
　オフにするメリットがないので、基本的にオンにしておきましょう。

自動縦中横

　半角文字を入力した時に、自動的に全角一文字ぶんの枠内に収める機能です。
　たとえば自動縦中横を「2文字」に設定した場合、「!?」と入力すると全角一文字ぶんとして扱われるようになります。

　このような感じで、設定文字数を増やすとその数値ぶん半角文字を一枠に収められます。
　が、見映え上の観点からすると2文字が最適ですので、よほどのこだわりがないかぎりは、2文字に設定しておくと良いかと思います。

約物の字幅を半角にする

　約物とは、たとえば「」や、。といったものを指します。
　これを半角にすると一行中に本来より多くの文字を収められますが、行ごとに文字の並びがズレるようになります。結果的に可読性や見映えが悪化することが多いので、オフに設定しておくのを推奨します。

フレームで折り返す

　これをオンにしていないと、編集がものすごく大変になります。
　基本的にはオンにしておきましょう。

フレーム揃え

　テキスト全体の位置を、フレームのどこに揃えるかを設定できます。
　これは文字演出や編集方法によって都合のいい揃え方が変わってきます。自分のやりやすいものを選んでください。

フチ

フチの色

　イラストに文字を入れる際に、もっとも重要になってくる設定項目です。
　これをオンにすることで、文字がフチ取りされます。たとえば文字色が背景色とかぶっていても、フチ取りをしていれば文字の形を視認しやすくなります。
　フチのサイズも大きくすればするほど、見やすさは向上します。ただし見映えの問題もあるので、確認しながら調整をしましょう。

　このように、背景とテキスト色が同じ明色だと見づらくなりますが、フチを取ることによってはっきりと文字が視認できるようになります。
　フチの色は黒または白が定番です。この辺は好みの問題だと思います。
　フチを黒（暗色）にした場合は、テキスト色を明色に。また、フチを白（明色）にした場合は、テキスト色を暗色にしましょう。

背景色

不透明度

　この設定をいじると、テキスト領域の背景色を指定することができ、また不透明度も調整することができます。
　以下は、背景色がない場合と、背景色を付けた場合の比較になります。

　フチ取りがされているので文章自体は読めますが、背景色の有無でなんとなく印象が変わってくると思います。
　基本的に背景色があったほうが文章は読みやすくなります。テキスト領域が視覚的に認識されやすくなり、文字に集中することができるからです。
　同時に、バックのイラストが目立たなくなるデメリットもあります。この点はトレードオフなので、背景色を設定するか否か、また透過度をどの程度にするかをよく考えましょう。
　個人的な考えとしては、長文になると背景色がないと読む時に目が滑ってしまうので、文章を読ませたいなら薄くでも背景色を入れておくと良いかと思います。

ルビ

　使いどころがけっこうあるルビ設定です。

ルビフォント

　ルビのフォントを変更できます。基本的には、本文のフォントと同じものを指定すると良いでしょう。
　ただし、ルビのサイズは本文の50%ほどが基本なので、フォントによっては形状が潰れてしまうことがあるかもしれません。その時は、明朝体やゴシック体などを指定して視認できるものを選びましょう。

ルビサイズ

　ルビサイズを指定できます。
　基本的に、いじらないほうが無難です。50%に設定しておきましょう。

ルビ位置

　ルビの位置を指定できます。
　見映えが良くなるのは「中央揃え」です。私は中央揃えを利用しています。

ルビ調整

　数値を変更することで、ルビの位置をずらせます。配置がどうしても悪くなる場合は、ここで調整しましょう。
　ただ中央揃えにしておけば、だいたい綺麗に表示されると思いますので、あまりいじる機会はないかと思います。

ルビと本文の間隔

　マイナスにすると本文とルビの距離が縮まり、逆にプラスにすると距離が広がります。
　ゼロが基本ですが、位置が気になる場合は数値調整してください。

ルビ字間

　ルビ文字の字間を細かく調整できます。
　見映えが良いのは「均等２」だと思います。「自由」を選ぶと自分で数値入力して調整できるので、必要があればそちらを使っても良いでしょう。

　さて、上記の項目を踏まえたうえで、ルビを使う時に多くの人が困る場面があります。
　それは「ルビのある行だけ変に行間が離れてしまう（行間を長さ指定した時）」または「ルビが前の行とかぶってしまう（行間をパーセント指定した時）」です。
　以下は、行間を123%でパーセント指定してルビを使用した例です。

　ルビを無視して行間を一定にしているので、ルビ文字が前の行とかぶっています。これを直す必要がありますね。

　ルビを考慮して150%に指定しましたが、今度は前の行のルビがない部分に妙な隙間ができてしまいました。これは前の行が２行にまたがっているために、折り返した部分も行間が150%になってしまっているわけです。
　行間を150%にしたいのは、ルビの表示されている部分の行間だけ。では、どうやってそこだけを調整するか。
　力技になりますが、正解は「前の行を改行してしまう」になります。
　前の行は「穏やかで清純そうな…(中略)…いつ見ても綺麗な女性が、そこにいる。」となっていますが、これを「…(前略)…いつ見ても綺麗 /改行/ な女性が、そこにいる。」と改行を差し込んでしまいます。
　見た目は変わりませんが、内部的には別の行として扱われるため、行間の指定をルビのある部分だけに影響させられます。

　これでルビのある行間だけ、違和感のないように調整することができました。
　デフォルトだと、ルビを使うと行間がかなり変になるので、ルビを使う時はできるだけ手動で、このような調整を施してあげましょう。

文字一覧

　選択フォントの、Unicodeに従った文字のリストが表示されます。
　あまり使う機会がないと思いますが、しいて言うなら特殊記号を探すときなどに眺めたりするくらいでしょうか。

変形設定

リサイズハンドルを表示

　表示させることで、文字領域の枠の調整ができます。
　基本的にオンにしておきましょう。

変形方法

　デフォルトだと「拡大・縮小・回転」になっていますが、これは罠設定です。
　テキスト枠を伸ばそうとして間違えて回転させてしまうケースが起こるので、設定は「拡大・縮小」にしておきましょう。
（斜めに編集したい時は、後述の「回転角」からいじったほうが無難です）

縦横比固定

　オンにすると、拡大などをしても縦横比がつねに一定に保たれます。
　テキスト入力で縦横比を保つ必要性があまりないので、オフにしておきましょう。

回転角

　数値を変更すると、テキスト枠を回転させることができます。
　演出などで文字の角度を変形させたい時は、これをいじりましょう。

傾き(横)

傾き(縦)

　回転角と違って、これで調整すると文字がかなり歪みます。
　通常の文章表示では利用することはないと思います。
（ロゴなどを作るときには使えるかもしれません）

今回のあとがき

　ざっとですが、残ったクリスタの文字入力設定もすべて解説させていただきました。
　画像に文字を入れるなら、クリスタは非常によいソフトとなります。とくに同人作品などを作るときには欠かせませんので、使い方を覚えておいて損はありませんね。

　文章入力・表示に関しては、もっといろいろ知識や仕様もあったりするのですが、その辺のことについてはまた時間があるときにできればと思います。

　何かご質問や、ご要望などがございましたら、お気軽にコメントをしていただけたら幸いです。
　Ci-en内のコメントのほか、ツイッターなどからでもお声がけいただいてもかまいません。

石刻テト（ツイッター）

同人作品の制作進捗について

　以前に5月下旬が販売目標と書いていましたが、お恥ずかしいことに作業が終わらないため、6月中に販売できたら……と思っています。
　シナリオテキストはほぼ完成しているので、あとはイラストレーターさんの絵と組み合わせて出力する作業が難所でしょうか。
　初めての作品なので至らないところも多いとは思いますが、なんとか人様に見せられるクオリティーの作品を送り出せればと思います。

　そして、CG集の内容がどんな感じなのかサンプルも兼ねて……。
　こちらはイラストレーターmiyako様と制作中の内容の、スチルの一枚となります。

　あまりCG集形式の作品ではライターがテキスト担当することがありませんが、こうして文章と組み合わせると物語への没入感も高まり、通常の同人作品とはまた趣の違った感じに映るのではないかと思います。
　多くの方々にお楽しみいただけるように、がんばって制作してまいりますので、今後ともどうぞよろしくお願いします……！

【解説】同人CG集等におけるクリスタを利用した文字入れの方法について　第1回

※この記事はクリエイター向けの情報記事です

概要

　同人CG集などに限らず、イラストとの組み合わせの表現として「文字」を入れることが、たびたびあるかと思います。
　擬音や短い言葉であれば描き文字として作ってしまう方法もありますが、長文になるとそのような手法はかなり労力がかかります。そこで多くの人は、ペイントソフトの文字入れ機能を利用することになるでしょう。
　文字入れのソフトはいくつかあるのですが、この場合では安価に入手できる『CLIP STUDIO PAINT』（以下、クリスタ）を使った例を解説していきたいと思います。
（なお、クリスタにはPROとEXの二つのバージョンが存在しますが、文字入れに関しては5000円で購入できるPROだけでまったく問題がありません）

文字入れの例

　では、実際どのように文字を入れることができるのか。
　クリスタにはかなり高機能の設定項目が存在しており、ただテキストを表示させるだけとは異なることが、以下の画像からわかると思います。

　この画像は現在、イラストレーターのみやこ様（ツイッターリンク）と制作している途中の作品のサンプルとなります。
　ストーリーを表現するうえでは、私がノベルゲームなどを嗜んでいたこともあり、このようにややノベルゲームチックな形式を採用しました。

　さて、クリスタの文字入れではいくつか機能的に注目すべき点があります。
　上記の画像からわかる点を挙げていきましょう。

縦書きがしっかりできる

　単純すぎて当たり前と思うかもしれませんが、これは重要な点です。
　たとえば無料の画像編集ソフトには『GIMP』なども存在しますが、これは言語としては日本語と相性が悪く、縦書きの文字入れをしようとするとテキストの形が崩れることが頻発します。
　クリスタの場合はしっかりと日本語を縦書きで表示できます。また、フォントサイズ・字間・行間・ルビなどの基本的テキスト機能のほか、縦中横（※後述）なども備えており快適です。

フチ取りができる

　これは重大で、テキストの視認性に深く影響する機能です。
　サンプルを拡大するとわかると思いますが、テキストには文字色のほかに、縁が黒色で塗りつぶされていることが確認できます。これによって、テキストが背景色と同化することを防ぎ、確実にユーザーが文字を視認できるようにしています。

背景色の指定ができる

　これも文字の視認性に影響します。

　さて、クリスタを使うとこのように文字入れできることがわかりました。
　しかし、実際どのように設定すればいいのか。
　まずはフォント項目から、一つずつ解説していきましょう。

テキスト設定

　設定を開くと、いちばん上に「フォント」があると思います
　それを見ていきましょう。

（※袋文字より下は、テキストボックス内を開いた状態で設定ボタンを押した時のみ表示されます）

フォント

　まずは字体の設定です。
　基本的にPCには、複数のフォントが事前にインストールされています。明朝体やゴシック体などは一般的な字体です。
　これは人によって好みがあるので、どれがいいとは限りません。ただし、私はやや小説調の文章を書くので、縦書きで読みやすい「UD デジタル 教科書体 N-R」を使用しています。

　ここで少し、フォントに関する補足をします。
　フォントによっては「P」が付いているものがあります。「MS Pゴシック」や「UD デジタル 教科書体 NP-R」などが該当しますね。知らない人は「何が違うのか？」と混乱するかもしれません。
　この「P」はプロポーショナルフォントを指しています。
　可変幅フォントとも呼ばれ、つまり文字の幅をモノによって変えるわけですね。
　それでは、実際に「MS 明朝」および「MS P明朝」で二つの差を見ていきましょう。

　比べると、明らかな違いがうかがえますね。
　まず、縦書きではプロポーショナルフォントのほうが読みづらく感じる人が大多数でしょう。なぜかというと、文字が非常に詰められて配置されるからです。画像で示したように、小文字の「っ」などは凄まじい文字の詰め方をされています。
　いっぽう、非プロポーショナルフォントのほうは整然としていて読みやすいと感じるのではないでしょうか。
　実際、小説などにおいてはテキストは非プロポーショナルのフォントを使うことが基本となっています。普段から縦書きの文章を読むときは、私たちはこちらのほうで見慣れているというわけです。
　したがって、基本的には、縦書きの時は非プロポーショナルのフォントを使うことを推奨します。
（ただしフリーフォントなどの一部は、字幅が一定幅に統一されていないものが存在します。そのようなフォントを使う時は、プロポーショナルフォントのデメリットも理解したうえでお使いください）

合成フォント

「フォント」の下には合成フォントが存在します。これは「ひらがな」「漢字」「半角アルファベット」などを種類別に特定のフォントに自動切り替えができるという機能です。
　しかし特定のグループだけ特定のフォントにしたい、という場面はあまりないと思うので、基本的には操作しなくてもよい部分だと思います。

サイズ

　文字のサイズです。
　注意してください。この数値の設定は、キャンバスの「dpi」によって見える大きさが変わってきます。
　つまり、「300dpiでフォントサイズ10」にした文字は「600dpiでフォントサイズ5」にしたものと同等の大きさになります。ややこしすぎますね。
　dpiが高くなるほどフォントサイズの細かい調整が小数点以下になってしまうので、基本的には文字入れするイラストは300or350dpiほどで考えたほうがよいと思われます。

水平比率、垂直比率

　水平比率で文字の横幅、垂直比率で文字の縦幅をいじれます。
　しかし変形させると見映えが確実に悪くなるので、基本的に100%でいじらないことを推奨します。

字間、文字詰め

　文字の間隔を調整できます。
　文章表現を気にする場合は、この機能にお世話になることが多いかもしれません。
　実際の使用例を見てみましょう。

　二つを見比べてみてください。微妙に違いに気づくはずです。
　左は字間と文字詰めで微妙に字幅を調整しており、改行後にくる文字を操作しています。たとえば、改行部分を「/」で表すと、

「あとで聞/くとそれは」→「あとで聞く/とそれは」
「種族であったそう/だ。」→「種族であったそうだ。/」
「別段恐/ろしいとも思わなかった」→「別段/恐ろしいとも思わなかった」

　このようになります。
　一つの単語が次の段にまたがってしまうことを、専門用語では「泣き別れ」と呼びます。また、句読点などが文頭に来てしまうことは文章としては禁則であり、この場合は字間を詰めて無理やり1行に入れたり（これを「追い込み」と呼びます）、また逆に字間を空けて文字を次の行に送り込んだりします（これを「追い出し」と呼びます）。

　さすがに上の例のように、ここまで字間をいじるのは極端ですが、場合によっては大事な単語などを泣き別れさせたくない時もあると思います。
　そのような場合には、特定の文字列を範囲選択したまま設定を開き、字間などの数値をいじることで選択部分だけを調整することができます。これで見映えを変えたりすることができますので、覚えておいて損はないでしょう。

スタイル

　太字、斜体の効果を選べます。
　用途に合わせてお使いください。
　ちなみにフォントによっては、デフォルトで太字（Bold）的なものもあります。
　たとえば「UD デジタル 教科書体 N-R」に対して、「UD デジタル 教科書体 N-B」は太めの書体となっています。いろいろとフォントによって性質が異なるので、好みのものをお探しください。

袋文字

　白抜き文字、中抜き文字などとも呼ばれる文字修飾です。輪郭線だけが残され、それ以外の内部が透過になります。
　美術的な文字デザインをおこなう時には利用できると思いますが、普通の文章を表現するのには不向きです。基本的には考えなくていい項目でしょう。

色

　文字色です。
　これは完全に好みですが、私は同人CG集などのようなライトに楽しむ作品では、登場人物ごとにセリフを色分けしたほうが良いかなと思っています。
　ヒロインは赤やピンク、主人公は青などの固有のカラーを決めておくと、ユーザーが流し読みした時でも誰のセリフか一瞬でわかりますね。

縦中横

　縦中横は縦書きで特定の文字列を横書きにする機能です。
　その代表的な使用例は「!?」という記号です。小説（とくにライトノベルなど）を見ると、おそらく100%の確率で「!?」という記号を見つけることができます。
　しかし、これは「!?」という文字があるわけではなく、「!」と「?」を一纏めにして横向きに表示させているだけです。この処理を縦中横と呼びます。
　クリスタには自動縦中横機能も搭載されており、基本的にはこの自動縦中横をオンにしていれば困ることはないので、この「フォント」欄にある手動縦中横はあまり利用することがないと思います。

　全角の「！」と「？」を入力しただけでは、全角文字として認識されてしまい、縦中横されませんのでご注意ください。
「テキスト」の項目に自動縦中横の設定ができるのですが、「2文字」に設定してオンにすると良いと思われます。

今回のあとがき

　さすがに全項目を解説するのは厳しかったので、「フォント」だけの記事でした。申し訳ありません。
　もし需要があるようならば、次の記事も早めに書いていこうかなと思います。
　このほか、クリエイター向けの情報記事としては文章の書き方講座などもいいかな、などと考えています。
（イラストレーターで同人作品を作っている方のなかには、文章を考えるのが苦手という人も多いと思うので）

　何かご質問や、ご要望などがございましたら、お気軽にコメントをしていただけたら幸いです。
　Ci-en内のコメントのほか、ツイッターなどからでもお声がけいただいてもかまいません。

石刻テト（ツイッター）

　同人作品はやや作業が遅れ、販売時期は5月下旬あたりが目標となっておりますが、興味がございましたらCi-enやTwitterをフォローしていただければ励みになります。
　今後とも、どうぞよろしくお願いします……！