※これはMisskey.art アドベントカレンダー2024（1枠目）の12日目の記事です。
※Misskey.art アドベントカレンダー2024（2枠目）はこちら
※この記事におけるカスタム絵文字とは、主に分散型SNSソフトウェア「Misskey」で使われることを想定したものです。
皆さんおはこんばんちは。晴木ヨウキです。昨年は漫画のセリフのフォントの話をしましたが、今年は手書きでカスタム絵文字を作ろうと題して、自己流のレタリングの話をしようと思います。
前回が文字の形・デザインの選び方の話とすれば、今回は文字を書く・デザインする話ということで、若干内容が重複する部分もあるかもしれません。
あと私のレタリングに関してはほとんど独学で素人に毛が生えたようなもんなので、これから真面目に極めたい人は他の教本・参考書も探して読んだ方がいいと思います。はい。
【もくじ】
・あえて手書きで作るワケ
・ざっくりメイキング
・文字の形の作り方
・色の選び方
・カスタム絵文字の容量と大きさについて
あえて手書きで作るワケ
フォントの規約・権利を気にしなくていい！
フォントによっては文字主体の画像素材の配布が禁止されてる場合があります。明確に禁止と書いてなくてもMisskeyは分散型SNSという性質上、あっちこっちのサーバーに絵文字のデータが飛んでいくので、そのあたりが再配布に該当≒規約違反になるかもしれなくてちょっと怖いとこあります…。
ど～～～しても使いたいフォントがある場合はメーカー・制作者様に問い合わせるのが一番といえばそれはそう。
既存のフォントにない味が出せる！
カスタム絵文字メーカーならばフォントの権利面を気にせずに手軽に作れます。もちろんカスタム絵文字メーカーで作るのも楽しいです。でも絵文字メーカーにあるフォントでは出せない雰囲気が欲しい！あるいは他とは違った味が欲しい！そう思う時ありませんか？ならばいっそのこと自分の手で書いて描いてしまえばいいのです。
手書きはたのしい！！！！！
これに尽きます。手書きは楽しいよ。フォント使うより何倍も手間はかかってしまいますが、イイ感じの文字ができるとテンション上がりますわよ。作ろう！自分だけの文字！！
ざっくりメイキング
カスタム絵文字を作る流れをざっくりとご紹介します。個人的なやりやすさと好みで途中まではアナログでの作業工程になりますが、最初から任意のお絵かきソフトを使っても書き方（描き方）はだいたい一緒です。むしろ最初からデジタルの方が微調整とか変形とかやりやすい説あります。
アタリを取る
作りたい文字列を決めたらとりあえず書いてアタリを取ります。この時点である程度バランスを考えながら書きます。そうでなくても普段のメモ書きよりは気持ち丁寧に書きます。一行か二行で収めるのがカスタム絵文字として作りやすいし見やすいかなあ。
方眼罫の用紙を使うと全体のバランスが取りやすくなると最近になって気付きました。今更？？？
フルデジタルでもキャンバスにグリッド線を表示する機能を使ったり、グリッド線の素材を下のレイヤーに置く等の方法で方眼罫の再現はできるかと思います。
形を作る
ざっくりアタリが取れたらそれを元に肉付けして形を作っていきます。バランスを見つついい感じに整えます。この過程でアタリの意味とは…になることもあります。
おい一番肝心なところなのに説明が雑すぎないか？？？
すみません。どんな雰囲気にしたいかで形の取り方も変わってくるのでそうとしか言えませぬ。どう肉付けしたらどういう感じになるかはこの後でもうちょい詳しく書きます。
しかしレタリングのバランス感覚とかセンスというのは…既存のフォントやロゴをいろいろ見て学ぶ、そして描いてみる、ということをやっていかないとどーにも身につけようがないんちゃうかな。知らんけど。この文字のこの部分をあのような形にするのか～、という気付きをざっくり真似たりしてな。
私の場合はもともと個性的なフォントを見るのが好きだったり、漫画を制作する過程で（効果音の）文字を描く機会もあったりで、そこら辺の経験がレタリングに活きているのかなあと思います。とはいえ素人に毛が生えた程度のレベルしかないので、まだまだ要勉強・要研究ですわね。
清書する
この上からそのまま清書してもいいんですが、私はペンを入れた後に消しゴムをかけたくないので新しい紙にトレースする派です。最近のトレース台は薄くて取り回しやすくて良い。ズレないようにマスキングテープでとめて清書していきます。
書いた（描いた）文字のサイズにもよりますが、私は小さめに作りがちなので0.1mm以下の細いミリペンで輪郭をなぞります。細かいところはなぞったついでに塗ってしまったりします。
輪郭ができたらやや太めのペンで塗りつぶします。筆ペンを使うと広いところと狭いところの両方に対応しやすくて便利です。なお塗りつぶさない場合は0.5mm以上のもう少し太いミリペンでもう一度なぞって輪郭を太くします。
スキャンと編集
最後はパソコンでの作業になります。清書した文字をスキャンして取り込み、クリップスタジオペイントで編集します。いったんモノクロ二値化すると後の加工が楽です。ここで文字の形を微修正したり位置を微調整しなおすこともあります。
アナログで描いた線を取り込んでパソコンの画面から見ると、なんか思ってたよりも結構ガタガタしてんな…となって直しちゃいがちなんですが、直し過ぎると手書きらしさ・アナログっぽさがなくなっちゃう気がするので難しいところです。これはレタリングに限らずお絵かきにも言えます…。
あとは色を変えたりフチをつけたりすればできあがり！
実際カスタム絵文字として仕上げる際は余白を極力作らないようにミチミチにします。でないと絵文字として実装された時に思ってたより小さい！ということになりかねないのでお気を付けください。
文字の形の作り方
お待たせしましたメインディッシュ（？）です。ここでは作例も交えつつ文字の形の作り方について自己流で書いていきます。
文字の太らせ方
まずは簡単な太い文字の作り方をご説明しましょう。とりあえず任意の文字を普通に丁寧に書きます。これが文字の骨組みになります。
先ほど書いた文字の線を囲うように（縁取りをつけるように）線を描きます。
中を塗りつぶしてみました。少し太くなりましたね。
先ほどと同じように、縁取りをつけるように文字を囲う線を描きます。
囲んだら塗りつぶし。さらに太い文字ができあがりました。ね、簡単でしょ？
線の太さによる印象の違い
ここに二つの「重」があります。どちらがより重そうに見えますか？たぶん右→と答える方が多いかなと思います。この通り文字の線の幅を太くすると重い・強い印象になります。太ければ太いほど「圧」が強い感じになりますが、太くし過ぎると絵文字サイズに小さくしたとき細かいところが潰れちゃうので塩梅が難しいところです。
逆に細めの文字で書くと軽い・弱弱しい印象になります。上のように線を細めに、形を少し崩して書いてみるとユル～い雰囲気が出ます。あんまり細すぎると文字色によっては縮小された時に見づらいのでやっぱり塩梅が難しい。なにごとも程々に。
丸みをつけてみる
左は線の端を角っぽく、右は端を丸っこくしました。どちらがよりやわらかそうに見えますか？おそらく右→と答える方が多数でしょう。形を丸っこくするとやわらかい、やさしい印象になります。
かわいくしたい時にもおすすめです。これは女児向けグッズ的なきゃぴっ♪とカワイイ感じにしたかったので、端っこだけでなく文字全体の形も丸っこくなるように意識してみました。
おてがる？オシャレ文字
文字のタテの線をぶっとくする。たぶんこれが一番お手軽にオシャレっぽくなる方法だと思います。要は極太の明朝体を描くのに近いイメージです。ここからウロコ（ヨコの線の右端に描く三角▲）を描くとだいたい明朝体です。お好みで添えたり添えなかったりしてください。
ナナメの線はどうしたらいいのかというと…片側だけ太くして先細るようにするか、いっそのことタテの線ヨコの線にしてしまうかでどうにかします。他の文字とのバランスとか見て考えます。ここはセンスが問われるな…。なんもわからん場合は明朝体系のフォントを参考にすれば何かヒントが得られるかも。知らんけど。
逆にヨコの線だけを太くするのもまた違った印象になって面白いです。なんかちょっとレトロ感ありますね。
タテの線を太くした一例。「優雅」という言葉の意味に沿うように角とか先端をちょっと丸くしてみました。斜体にするとちょっとスペシャルな感じになります。方眼罫使うと斜体の文字も作りやすくなります。まあ通常通り描いてみて後で自由変形で斜めにする方がラクで早いですが（後から気付いたアホ）
エセ筆文字
筆で書いたっぽい文字の再現。あくまでそれっぽく見えたらエエというやつです。上の作例で赤丸で囲った部分は筆の「入り」で、特に筆書きっぽさが出てるかな～という部分です。ナナメに筆をトンと置いた跡を誇張して描いてみるとかなり筆書きっぽさが増します。
もちろんトメ・ハネ・ハライも忘れずに。お習字の時間を思い出しながらやってみましょう。トメの部分もちょっと誇張するとエセ筆文字らしさが出ます。あと四角く曲がるところを丸くするとそれっぽさが増す気がします。
もっと雑に言うとこう。ヨコの線を少し波っぽくうねらせるとなんかそれっぽくなるよ。
ホラーな文字
「イナクズレ」というフォントをご存知ですか？名前は知らなくてもたぶん一度は見たことあると思います。漫画のセリフで恐ろしいものや不気味なものを表現する時によく使われているアレです。これらはイナクズレのリスペクトです。輪郭をガタガタにすることで不気味さ・おどろおどろしさを表現しています。
こんなに画数多い文字でも、さらにぶっとくしても、輪郭さえガタガタさせればホラなんか不気味な感じ、するでしょう？
お店のポップにありそうな文字
ドラッグストアとか某驚安のお店とかにありそうなやつです。まずは文字を読めなくなるギリギリまでめっちゃ太く膨らませましょう。隙間もなくなっちゃうほどに。そこまで太くすると文字が潰れちゃうのでは？そんな時は豪快にハミ出してしまいましょう。
パンパンに膨らんでると如何にもお得っぽさが出ますわね。膨らませたら一番外側のフチを太くしてみましょう。もう既にそれらしくなってきましたね。
鮮やかな赤色とか黄色とかで塗りつぶして、白で少しハイライトを入れてやるとさらにお店のポップらしくなります。カスタム絵文字として作る場合、最後に黒フチの外側にも白フチを付けましょう（ダークモードで黒フチが埋れてしまわないように！）
色の選び方
Misskeyはライトモード（白背景）とダークモード（黒背景）があるので、両方のモードでちゃんと見えるように作らなければなりません。視認性は大事です。絵文字ですから読めてナンボです。
Misskeyプロジェクトの公式サイトやdarq氏のカスタム絵文字プレビューで申請前に確認ができます。便利！ありがてえ～
白背景と黒背景どちらにも対応するなら、とりあえずフチをつけるのが無難ではあります。ただしある程度の太さがないと潰れて見づらいかもしれないです。
上のようなキンキラのグラデとかふんわりしたグラデとかは濃いめの色のフチを付けてあげたい。容量面を考えるとグラデにするとその分色の数が増えるので…つまり容量も増えちゃうんでホントは避けた方がいいのかもだけど、やっぱゴージャスなのも欲しいじゃん？…お許しください！
フチをつけたくないな～ということもあるかと思います。その場合はどちらのモードでも読める色にしなければなりませんが、こうして見ると結構使える色が限定されますね（上の例の中にはギリじゃね？と思うのもあるかもしれませんが）
ただし上で示した範囲内であっても濃い青や紫はダークモードではめちゃくちゃ見づらいのでもっと明るい色にするか白フチをつけましょう…。
明るい黄色はライトモードで見づらくなるので要注意です。もっと暗い色にするか、濃い色のフチをつけましょう。
色による印象の違いとか、どういう意図でこういう色にしたのかも話そうかと思いましたが、ただでさえ今の時点でも長いのにさらに長ったらしくなってしまうので割愛します。色彩とか配色の資料は探せばいろいろあるので、気になる方は調べてみてください（
カスタム絵文字の容量と大きさについて
Misskey.artの場合、容量の上限（具体的に何KBか）は設定されてないようですが、サーバーへの負荷を小さくするため？カスタム絵文字に使用する画像の容量はできるだけ軽くする方が望ましいとされています。
サーバーによっては容量の上限が設定されていることもあります。
（例：Misskey.ioの場合 上限64KBまで、静止画かつ文字のみ画像は10KB未満が望ましい）
画像の大きさも特に絶対コレ！という数値はないようですが、タテ幅は128pxが主流ぽい？と以前調べた時に見たので私は基本そうしています。容量のことも考えるとあんまり大きくしない方がいいかも。1000px×1000pxとか。デカ過ぎて申請しても突っ返されるわ。
実際のタイムラインのノート上ではタテ幅30px前後、リアクション欄では表示サイズ「大」でも約33pxに縮小されて表示されるので、もっと小さく60pxとか80pxくらいでも十分なのかも？
ただしMFM $[x4 ] で4倍のサイズに拡大すると約200pxくらいにはなるから…小さくしすぎると拡大された時ガビガビに見えることはあるかもしれない…。とはいえ4倍拡大はそう頻繁に使われるものでもないし、さほど気にしなくてもいいかもしれませんが。
ヨコ幅も特に制限ないっぽいですが、リアクションの最大ヨコ幅制限をオンにしている場合、一定以上のヨコ幅を超えると（見かけ上の縦横比を保ったまま）ヨコ幅70pxにぎゅっと縮小されるので、気になる方は縦横比1：2までに収めるといいと思います。ヨコ幅どのくらいから縮小されるかはリアクションの表示サイズ設定によって変わりますが、「中」サイズでも縦横比1：3あるとちょっと小さくなります。
※サイズについてはカスタム絵文字プレビューやブラウザの検証ツールで調べました…ひょっとしたら環境次第で数値はある程度変動するかもしれません。
※カスタム絵文字のルールについてはサーバーによって異なるので、必ずご利用のサーバーのルールを確認してください。
Misskey.artの場合はこちら（絵文字申請テンプレート）
最後まで読んでくださってありがとうございます。普段レタリングするときに雰囲気でやってることを、拙いながらもなんとか文章にしてお伝えしましたが、少しでもレタリングしたい方、カスタム絵文字を作りたい方の参考になれば幸いです。
そしてもっと手書きでカスタム絵文字を作る人が増えてくれたら、それはとっても嬉しいなと思います。
