シン・エヴァンゲリオンを早速見てきて、興奮冷めやらないのでこんなものを作ってみました。
エヴァンゲリオン風フォントジェネレーター
↑の画像は全てこのジェネレーターで作ったものです
リンク：https://app.tanukizzan.com/eva-font/
その名の通り、テキストを入力するだけでエヴァンゲリオンの印象的な明朝体フォントを再現できるサイトです。WindowsとMacのChrome、iPadのSafariでのみ動作確認しております。その他スマートフォンなどでは正常に動作しない可能性があります。
使用例
↑自分のロゴに合わせてみた
↑画像によってはシン・ゴジラ風にもなります
↑南極のフリー素材もあっという間にエヴァ化します
使い方
- 表示したいテキストを入力します。（エンターキーを押すとすぐ表示されます）
- 背景を選択します。「黒」を選ぶと黒背景に白文字が、「白」を選ぶと白背景に黒文字が、「画像を選択」を選ぶと自分の持っている画像を背景に設定できます。
- 文字色を選択します。ブラウザデフォルトのカラーピッカーが表示されます。
- フォントの垂直比率をスライダーで選択します。0.5から2まで選べます。デフォルトでは個人的に一番エヴァっぽいと思った1.3に設定しています。
- フォントサイズを数値で選択します。デフォルトでは60を設定しています。
- エリア内の縦の位置を選択します。上、中央、下と選べます。デフォルトでは中央に設定しています。
- エリア内の横の位置を選択します。左、中央、右と選べます。デフォルトでは中央に設定しています。
- 決定ボタンを押すとテキストが表示されます。またテキストを表示しながら設定を変えることもできます。
画像を保存したい場合
端末標準のスクリーンショット機能を使用してください。フルスクリーンボタンを押して全画面表示にすることでトリミングの手間が省けますが、その代わり端末の表示領域に依存した表示になります。（iPadでは仕様上左上にバツボタンが表示されます）
Twiiterへは一番下のツイートボタンから共有できます！
裏技
入力欄に<br>タグを入れると改行できます。
解説
エヴァ化するためのCSS
.eva{font-family:"Times New Roman","游明朝",YuMincho,serif;font-weight:900;letter-spacing:-1px;font-feature-settings:"palt";transform:scaleY(1.3);}See the Pen MWbdLrJ by tanukizzan (@tanukizzan) on CodePen.
本来のエヴァの明朝体はマティスEBを使用されていますが、持っている人はなかなかいないと思うのでWindowsにもMacにも入っている游明朝を使用しました。
font-feature-settings: "palt";という設定を今回初めて知ったんですが、日本語フォントでも英文のように隙間を詰められるようになってよりエヴァっぽくなります。ics.mediaさんで詳しく解説されています。
またエヴァのフォントは少し縦長になっているためtransform: scaleY(1.3);で少し縦長にしています。ただ調べるとこの垂直比率は作品や場面によって変わっている（シン・エヴァより他の新劇場版の方がより縦長な気がする）みたいなのでお好みで調整してください。
スマホ対応できない理由
最初はスマートフォンにも対応しようと思ったんですが、Androidには明朝体フォントが入っていないためできませんでした。
しかしWebフォントを使えばAndroidでも明朝体を表示できるため、Googleフォントの「Noto Serif JP」試してみましたが、Webフォントを使用すると↑で紹介したfont-feature-settings: "palt";が効かないことが判明して使えませんでした。これを設定するとよりエヴァらしくなるためスマホ対応は断念しました。
まとめ
エヴァ好きな方はぜひ遊んでみてください〜
GitHubはこちらです