けものフレンズのロゴってカラフルでかわいいですよね！そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。
使いかたはサーバルちゃんでもわかるくらい簡単！テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればＯＫです。ロゴの画像は背景が透明なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みしてください。
Qiitaなので一応技術的な部分に触れておくと、フレームワークはVanilla.js、Github Pages上の静的なHTMLペラ一枚、ロゴはCanvas APIの力技で描いています。仮想DOM？ Babel？ なにそれおいしいの？ うーんでもあとでPureScriptで書きなおすかも……。
いまのところ一番の課題は画像を投稿する手順で、わかる人は単に画像を共有すればいいってすぐわかると思うんですが、それだとブラウザごとに手順が異なってしまうので戸惑う人も多いだろうし、『この結果をツイートする』みたいなボタンを設けるのが一番わかりやすいとは思います。そうなると画像を保存してURLを付与するための何らかのストレージが必要になり、github pagesだけではどうしようもないわけです。Firebaseとか使えば一瞬なんですが、もったいないのであんまり無料枠も使いたくないし……。なんかサーバ貸してください。単なる画像のシェアにしてしまうと、自分の作ったものを投稿したときにツイートにリンクが乗らない場合があるので、サービスのシェアが広がりにくくなります。今回は趣味の一発ネタなので別にサービスが流行らなくてもいいですが、これがもし広告収入を得るためのサービスだったりしたら致命的です。ちゃんと『この画像を投稿する』ボタンを作って、作品をツイートすると同時にサービスへのリンクが乗るようにするべきですね。さらに、できればアプリ連携の権限も掠め取っておくといいんでしょう。私はそういうノウハウないのでわからないんですけど。
あともう一個課題を思い出しました。上の小さめの文字ですが、少しランダムに傾くせいで文字がわずかに重なり、そこで影が汚くなります。そのためあんまりシャドウを掛けないようにしているのですが、元ネタの再現度を考えるとちゃんとシャドウをかけたいです。そのうち直します。それと画像の解像度を調節できたほうがいいかもしれませんね。素材として使う場合、いまの仕様だと解像度がちょっと足りない感じがします。
フォントはキルゴUを使っています。キルミーベイベー！ 漢字やアルファベットも使えます。そんなわけであくまでカラーリングとかが『っぽい』というだけであって、実はフォント自体は別のものです。当初の構想では、フォントも自分で作ってあの可愛さを忠実に再現したくて、オリジナルのロゴと同じように耳を生やしたりとかしっぽをつけたりとかしたかったのですが、想定される作業量の前に断念しました。誰かが、けものフレンズのフォントを作ってくれたら、ぜひそれを使いたいと思います。フォント制作に慣れている人はぜひよろしくお願いします。
けものフレンズっぽいフリーフォント『ジャパリフォント』を作りました。ひらがなカタカナ数字と一部の記号に対応してます。漢字はむずかしくてよめないよー！のため含まれません。利用規約とダウンロードはリンク先からどうぞ。https://t.co/jEpBgAAW3k #けものフレンズ pic.twitter.com/V7T0Ht5aeS
— 赤宮文也◆M3う-27b (@yfmy) 2017年2月3日
おいコラ。サーバルの顔も三度までやぞ。
ちなみに、このロゴを含む、けものフレンズの一連のアートディレクションは、株式会社Y'sさんによるものだそうです。デザインがとくいなフレンズなんだね！
大好評放送中のアニメ「けものフレンズ」のアートディレクションを弊社で担当しております。
— 株式会社Y's (@Ysincorporated) 2017年2月16日
ロゴ制作から広告など、すべてをデザインさせていただいております！
現在アニメパッケージも鋭意製作中です！たーのしー！
(c)けものフレンズプロジェクト／KFPA#けものフレンズ #けもフレ pic.twitter.com/2VOS2i1JCM