見出し画像

エヴァンゲリオン風フォントジェネレーター作ってみた

たぬきっつぁん

リンク：https://app.tanukizzan.com/eva-font/

その名の通り、テキストを入力するだけでエヴァンゲリオンの印象的な明朝体フォントを再現できるサイトをつくってみました。

WindowsとMacのChrome、iPadのSafariでのみ動作確認しております。その他スマートフォンなどでは正常に動作しない可能性があります。

「エヴァンゲリオン風フォントジェネレーター」はエヴァンゲリオンファンのたぬきっつぁんが個人的に作った非公式のサイトです。

使用例

新劇場版のフォントを真似してみた
写真に合わせるとシン・ゴジラ風にもなります
南極のフリー素材もあっという間にエヴァ化します

使い方

  1. 表示したいテキストを入力します。（エンターキーを押すとすぐ表示されます）

  2. 背景を選択します。「黒」を選ぶと黒背景に白文字が、「白」を選ぶと白背景に黒文字が、「画像を選択」を選ぶと自分の持っている画像を背景に設定できます。

  3. 文字色を選択します。ブラウザデフォルトのカラーピッカーが表示されます。

  4. フォントの垂直比率をスライダーで選択します。0.5から2まで選べます。デフォルトでは個人的に一番エヴァっぽいと思った1.3に設定しています。

  5. フォントサイズを数値で選択します。デフォルトでは60を設定しています。

  6. エリア内の縦の位置を選択します。上、中央、下と選べます。デフォルトでは中央に設定しています。

  7. エリア内の横の位置を選択します。左、中央、右と選べます。デフォルトでは中央に設定しています。

  8. 決定ボタンを押すとテキストが表示されます。またテキストを表示しながら設定を変えることもできます。

画像を保存したい場合

端末標準のスクリーンショット機能を使用してください。フルスクリーンボタンを押して全画面表示にすることでトリミングの手間が省けますが、その代わり端末の表示領域に依存した表示になります。（iPadでは仕様上左上にバツボタンが表示されます）

Twiiterへは一番下のツイートボタンから共有できます！

#エヴァ風フォントジェネレーター でツイートしてみてね！

技術的な解説

エヴァ化するためのCSS

.eva {
  font-family: "Times New Roman", "游明朝", YuMincho, serif;
  font-weight: 900;  letter-spacing: -1px;
  font-feature-settings: "palt";
  transform: scaleY(1.3);
}

本来のエヴァの明朝体はマティスEBというフォントを使用されているそうですが、持っている人はなかなかいないと思うのでWindowsにもMacにも入っている游明朝を使用しました。

font-feature-settings: "palt";という設定を今回初めて知ったんですが、日本語フォントでも英文のように隙間を詰められるようになってよりエヴァっぽくなります。ics.mediaさんで詳しく解説されています。

またエヴァのフォントは少し縦長になっているためtransform: scaleY(1.3);で少し縦長にしています。ただ調べるとこの垂直比率は作品や場面によって変わっている（シン・エヴァより他の新劇場版の方がより縦長な気がする）みたいなのでお好みで調整してください。

スマホ対応できない理由

最初はスマートフォンにも対応しようと思ったんですが、Androidには明朝体フォントが入っていないためできませんでした。

Webフォントを使えばいけるだろうと思い、Googleフォントの「Noto Serif JP」も試してみましたが、Webフォントを使用すると↑で紹介したfont-feature-settings: "palt";が効かないことが判明して使えませんでした。

これを設定するとよりエヴァらしくなるためAndroidでは今の所利用はできません。（サイト自体は動きますがあんまりエヴァっぽくなりません）

さいごに

エヴァ好きな方はぜひ遊んでみてください〜

GitHubはこちらです

この記事は過去に独自ドメイン（tanukizzan.com）のブログで書いた記事を加筆修正したものです。そのブログは既に閉鎖したのでこの度noteに移植しました。

ちなみにこのドメインは現在ポートフォリオサイトとして運用しているので良かったら見てみてください～（この他にもたくさんWebサイトを載せています！）

とはいえこの記事含め2つしか書いていなかったのでほとんどアクセスは0に近かったんですがね。。。ブログむずい。。。

いいなと思ったら応援しよう！

この記事が参加している募集

#私の作品紹介

110,193件

#つくってみた

22,384件