佐久間まゆソロCDフォントを調べる
本記事は佐久間まゆ Advent Calendar 2017の12/8の記事です．
まゆのソロCDであるエヴリデイドリーム発売からかなり時間も経ってるのでジャケットに使われているフォントを特定してる人は多く見かけます．しかし特定しただけでそれがどのフォントなのかってところまでまとめてる人がいないのでこの記事を作りました．
特定したフォント名だけ載せるだけなのもつまらないのでどうやって特定したのかの手順もついでに記載しています．結果だけ見たいぞってオタクはその見出しまで適宜飛ばしてください．
目次
佐久間まゆソロCDフォント is なに
言葉で説明するのも難しいのでとりあえず画像をば．
この左上の「Mayu」って書いてあるところを指しています．パット見ただのリボンに見えるんですけどこれちゃんとフォントなんですよね．最初は気づきませんでした．
フォントということがわかってしまえば「じゃあ何のフォントなんだ」って思ってしまうのはやはりオタクの性なわけで..... しかも好きなキャラに縁があるわけならそりゃ特定しないわけにはいかないんですよ．
フォント特定すっぞ
フォントを特定するにあたって使うのがWhat Font isというサービス．画像を投げるといい感じにそのフォントを判定してくれるサービスです．流石にフォント一覧から自分の目でブルートフォースするわけにもいかないのでこういうサービスを積極的に頼っていきましょう．*1
下準備
What Font isを使うために必要な入力画像は「特定したいフォントで書かれている文字画像」です．エヴリデイドリームのジャケット画像をそのまま入力として使っても特定するにあたって(背景とかの)ノイズが多すぎてしまいます．なのである程度自分で(ツールが)判断しやすいように下処理をかけてあげましょう．
下処理と言っても今回はGIMPのファジー選択ツールで文字部分以外を除外してるだけです．あとは元のジャケット画像だと「Mayu」という文字が斜めになっているので水平になるよう回転してあげるくらいでしょうか．下図は下処理をかけたあとの画像です．暇な人はこの画像を使ってこの後の処理を一緒に追っていくと良いと思います．
フォントを特定する場合，出来るだけ文字数が多い方がもちろん良いわけですが「u」がまゆの頭で隠れてしまっているので今回は「May」だけで試してみましょう．
いざ What Font is へ
トップページは次のような画面です．僕のように英語で書かれてるとしんどい気持ちになってしまう人種もいるでしょうが良いサービスを使うには往々にして英語からは逃れられないので頑張っていきましょう．
正直もう後は書いてある英語に従っていくだけですがせっかくなので最後まで手順を書いていきます．
Browseボタンを押すと画像選択画面になるので先程下処理をかけた画像を選択しましょう．画像を選択したらContinueを押して次の処理に進みます．ここでサインインを求められることがあります．サインインをしていた方が判定結果候補が多く表示されるのでサインインしましょう．Googleアカウントとかでもサインイン出来るのでかなり楽です．
さて，Continueを押すと次の画面になります．英語を読まずに雰囲気でやっていくとここで意味がわからなくなりますが落ち着きましょう．
この画面では「入力画像内で文字の線と認識した部分」を表示しています．ただしかなり断片的に分割されているのでこれをドラッグで結合し1文字ずつ作っていきましょう．
結合した後の画像にはその文字が何の文字かを自分で書いてあげる必要があります．つまり「この画像パターンはこの文字だよ」と教えてあげる必要があるわけです．
これらの処理を終えると以下のような状態になります．
この結合が重要でこれによって検索結果がかなり変わっていきます．例えば今回のケースで言うなれば次のように結合すると求めているフォントが出てきません．
パッと見だとこちらのほうが「y」がちゃんと書けているので正しい結果が得られそうな予感がしますが何故か上手くいきません．この辺はしょうがないと割り切りましょう．このように実際に検索する場合はある程度結合方法の試行錯誤が必要です．
さて，結合し終えたあとは再びContinueを押しましょう．そうするとサービス側で「きっとこのフォントではないだろうか？」と提案してくれたフォント検索結果が表示されます．
ここで自分が求める結果がなければ先述したように結合を変えてみるといいかもしれません
佐久間まゆソロCDフォント is .....
というわけでこんな感じで調べていくと佐久間まゆソロCDフォントは「League Script」であることがわかりました．やったね．下の画像が比較です．
もちろんですけど使う時にはライセンスを確認しましょう．
フォントがわかったので
あとはもう好きなように遊びましょう．「Sakuma Mayu」と自分で書くだけでも何故かめちゃくちゃ楽しいです．
もちろんですがSVGで吐き出してCSSアニメーションをつけるぞ～～～～みたいなこともできます．とりあえず適当にSVGにして適当にアニメーションをつけた結果を貼っつけておきます．(はてブロでSVGをアニメーションさせられないっぽかったので結果画像はgifです)
SVGで手を加えたとしたら「i」の上の丸をハートに変えたくらい．
アニメーションは下のようなコード．サンプルコードを3秒くらいいじった結果なのでほぼそのままだしもっと綺麗に表示できるマンは頑張ってください．
.path{ stroke:#E82D44; fill:none; stroke-linecap: round; stroke-width: 3; stroke-dasharray: 5000; stroke-dashoffset:5000; animation: DASH 5.6s ease-in-out 0.4s forwards; } @keyframes DASH{ 0%{stroke-dashoffset:5000;} 100%{stroke-dashoffset:0;} }
しかもこのLeague Scriptとかいうフォント，Google Fontsに入ってるので*2色々面倒なことをしなくてもGoogleスライドとかのGoogleのサービスはもちろんWebフォントとして手軽に使えます．これでいつでもまゆを感じられる(？)．
公式デザインのこだわり
さて，フォントが特定できたのはいいもののエヴリデイドリームのジャケットと比べるとなにか違和感があります．「M」と「a」のつなぎ目に注目してみてください．
ベタ打ちのテキストでは「M」と「a」は離れていますがジャケットデザインではわざわざここを繋げるようにしていることがわかります．
「佐久間まゆ」から「赤い糸・リボン」というキーワードを抽出し，繊細で丸みがあってかわいらしい，且つリボン・糸のしなやかさを表現すべくスクリプト体であるこのLeague Scriptを選んだことは想像出来ますが，そのリボン・糸が途切れずに連続させることで(Mayuと書かれている赤い糸はジャケット内では一方の端しか描かれてないことからも)ジャケットの外のあなた(プロデューサー)に繋がっているという意図があるのかなと(勝手に)思ってます．デザインしてくれた方にひたすら感謝です．
終わりに
というわけでフォントが特定できました．フォントがわかるとイラストや動画などはもちろんプロデューサー名刺とかにも応用がきくので皆様ご参考にしていただければ幸いです．
以上で本記事を終了します．明日12/9はMeganedesuyo27さんが担当です．
*1:普段からフォント特定しているマンではないのでもしかしたらもっと効率がいい方法もあるかもしれない
