けものフレンズのロゴってカラフルでかわいいですよね！そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。（ただしＩＥはブラウザではないものとする。また、一部のブラウザでセキュリティ制限のため保存ができないという情報が入っています）
つかいかた！
使いかたはサーバルちゃんでもわかるくらい簡単！テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればＯＫです。下の方にダウンロードボタンもつけたので、これを押しても保存できます。ロゴの画像は背景が透明のPNG画像なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みしてください。
【追記】らいせんす！
何件か問い合わせがあったので、追記しておきます。私はロゴジェネレータの使い道について一切制約を設けるつもりはないので、『けものフレンズ ロゴジェネレータ』で生成したロゴ画像を利用するにあたり、私へ許諾を求めたり報告する必要は特にありません。本アプリで生成した画像について、私は個別に許諾を与えたりあるいは禁止したりということは一切していません。ただし、生成したロゴはもちろん元ネタのロゴのコンセプトを模倣したものであり、二次創作の範疇にあると考えられますから、『けものフレンズ』の二次創作ガイドラインにしたがって利用するほうがいいと思います（ガイドラインは、公式サイトの右上の『けものフレンズって？』というリンクを押すと出てきます）。また、このロゴジェネレータでは『キルゴU』フォントを使用しているため、『キルゴU』フォントの利用規約に従ってください(ダウンロードしたときについてくるreadme.txtに載ってます)。つまり厳密に言えば**『キルミーベイベー』の二次創作の範疇にもある**ことにもご留意ください。
私の個人的な見解をざっくりと申し上げるなら、慣例的に黙認されている一般的な二次創作の範囲内であれば、ウェブ上で無償でシェアされるファンアートや、経費程度の対価で頒布される同人誌等に使用しても、特に大きな問題にはならないかと思われます。っていうか、二次創作というのは、問い合わせて許諾を得るとかじゃなくて、自分の判断でひっそりと公開して、著作権者に叱られたらごめんなさいして引っ込める、というつもりでいればいいと思います。しかも『けものフレンズ』に関してはガイドラインが与えられているんですから、それに従えばいいだけです。それでも怒られそうで心配な内容なら、その二次創作は止めておいたほうがいいと思います。
フォント！
フォントはキルゴUを使っています。キルミーベイベー！ 漢字やアルファベットも使えます。そんなわけであくまでカラーリングとかが『っぽい』というだけであって、実はフォント自体は別のものです。当初の構想では、フォントも自分で作ってあの可愛さを忠実に再現したくて、オリジナルのロゴと同じように耳を生やしたりとかしっぽをつけたりとかしたかったのですが、想定される作業量の前に断念しました。誰かが、けものフレンズのフォントを作ってくれたら、ぜひそれを使いたいと思います。フォント制作に慣れている人はぜひよろしくお願いします。
フォントが違うので「あれでロゴジェネレーター名乗るの正気かよ」ってキレてた人もいました。ただし結局のところ、ほとんどの使っている人にとって重要だったのは「どれだけ元ネタをどれだけ正確に再現できているか」ではなく、「面白いか」「遊べるか」「簡単に作れるか」だったようです。たぶん、文字の種類や文字数の制限がなく自分の作りたいものが作れることや、三行もあってネタを挟みやすいこと、リアルタイムにプレビューできるので試行錯誤がしやすいこと、そういうポイントのほうが大切で、もし元ネタに合わせてひらがなとカタカナのみ７文字までといった制限を設けていたら、使ってくれるひとはもっと少なかったと思います。【追記】あとでフォントファイルを改造して、「けものフレンズ」の７文字だけは元ネタの文字と同じ形を再現するように改良しました。残りの文字をフレンズ化するのはちょっと大変すぎて断念しています。フォント制作はめちゃくちゃ大変です。
逆に、ここで元ネタの再現に変なこだわりを見せたら、作業量が膨れ上がって公開が大きく遅れるか、開発を断念していた可能性も大きいです。放送終了後に公開しても遅すぎます。100%の完成度のサービスを半年後に公開するより、60%の完成度のサービスを今公開して、要望や需要に合わせて完成度を高めていく方法を選んだわけです。100%のサービスを求めていた人には、いやぁ～めんごめんご～としか言えないです。筆者は完璧にこだわる血の気の多いフレンズじゃなくて、最初は手を抜いてそこそこのモノを作って提出して、外でごろごろしながら後で考えるタイプのフレンズなので。
けものフレンズっぽいフリーフォント『ジャパリフォント』を作りました。ひらがなカタカナ数字と一部の記号に対応してます。漢字はむずかしくてよめないよー！のため含まれません。利用規約とダウンロードはリンク先からどうぞ。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
つくりかた！
Qiitaなので一応技術的な部分に触れておくと、フレームワークはVanilla.js、Github Pages上の静的なHTMLペラ一枚、ロゴはCanvas APIの力技で描いています。仮想DOM？ Babel？ なにそれおいしいの？ うーんでもあとでPureScriptで書きなおすかも……。今回のは技術的には極めて古典的というかとんでもなく時代遅れの方法で書いていて、なぜこんな書きかたをしたのか本人もよく思い出せません。【追記】思い出しました。最初、画像の解像度の問題がないSVGで作ろうとしていて、でもpurescript-halogenにSVGのサポートがなくて、こんな一発ネタのためにpurescript-halonge-svgを自分で作るのも面倒だし、じゃあもう素のJavaScriptでいいかってことでこうなりました。でも、各ブラウザのSVGの実装があまりにガバガバだったせいで、結局はCanvas APIで描くことになったので、PureScriptに移植してもいいんですがそれも今更面倒くさいです。それに、今考えるとSVGを渡されても加工のしかたがわからないフレンズも多いと思うし、PNGにしておいて正解だったようです。
かだい……
いまのところ一番の課題は画像を投稿する手順です。わかる人は単に画像を共有すればいいってすぐわかると思うんですが、それだとブラウザごとに手順が異なってしまうので戸惑う人も多いだろうし、『この結果をツイートする』みたいなボタンを設けるのが一番わかりやすいとは思います。タイムラインを見てると、画像を保存したけど、画像を添付するのを忘れてそのままツイートしちゃったーとか、ツイートするボタンを押せば自分の作った画像をOGPで共有できると思っちゃったー（体力のあるサービスはそうなってると思いますが、私が作ったこのジェネレータは私は一円も経費を払っていない無料サービスなのです）、みたいな事故が起きてるみたいです。やっぱりそのへん一手間だと思いますし、なんとかしたいところです。
単なる画像のシェアにしてしまうと、自分の作ったものを投稿したときにツイートにリンクが乗らない場合があるので、サービスのシェアが広がりにくくなります。今回は趣味の一発ネタなので別にサービスが流行らなくてもいいですが、これがもし広告収入を得るためのサービスだったりしたら致命的です。ちゃんと『この画像を投稿する』ボタンを作って、作品をツイートすると同時にサービスへのリンクが乗るようにするべきですね。さらに、できればアプリ連携の権限も掠め取っておくといいんでしょう。私はそういうノウハウないのでわからないんですけど。
ただ、そうなると画像を保存してURLを付与するための何らかのストレージが必要になり、github pagesだけではどうしようもないわけです。Firebaseとか使えば一瞬で実装できるんですが、~~もったいないのであんまり無料枠も使いたくないし……。~~結果論ではありますが、今回もしFirebaseを使っていたとしても一瞬で枠を使いきっていたと思います。けものフレンズのコンテンツ力は、私の予想をはるかに上回っていました。
あともう一個課題を思い出しました。上の小さめの文字ですが、少しランダムに傾くせいで文字がわずかに重なり、そこで影が汚くなります。そのためあんまりシャドウを掛けないようにしているのですが、元ネタの再現度を考えるとちゃんとシャドウをかけたいです。そのうち直します。それと画像の解像度を調節できたほうがいいかもしれませんね。素材として使う場合、いまの仕様だと解像度がちょっと足りない感じがします。
【追記】それと、一部の環境で画像が保存できないようです。ようやく原因に思いあたったのですが、どうやらData URI Schemeの画像はセキュリティ上の理由でダウンロードが制限されている場合があるようです。
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
ただ、MSDNにそう書いてるわりに、私の環境ではEdgeでも問題なくダウンロードできています。具体的にどの環境なのかわからないのですが、超古いAndroidのWeb viewか何かでしょうか？また、ダウンロードしようとしても無言でキャンセルされるらしく、エラーメッセージを出すこともできません。github pagesのみでやっている限りは対策がありません。
へんこーりれき！
- 一部の文字が表示されない問題を修正しました。使っている『キルゴ』の一部の文字が、グリフが存在しないのではなく、空っぽのグリフになっていて、他のフォントへのフォールバックが効いていませんでした。FontForgeで空のグリフだけ削除して直しました。
けものフレンズのロゴジェネレータ、おそらく作者が淫夢厨に悪用されるのを予測したのだろう、使えない漢字がある pic.twitter.com/iLkUaRdalL
— うーろん (@you5696) 2017年2月22日
このツイートで気付きました。淫夢避けじゃなくてただのバグです。『淫』の文字も使えるように修正しました。
- ＳＮＳのシェアボタンを付けてなかったのですが、はてな民にブコメで煽られたので、はてな、ライン、フェイスブック、ぐぐたすのボタンを付けました。私はラインもフェイスブックもぐぐたすも使っていないので、あんまり自分が使っていないサービスへのシェアを誘導するのはやる気が起きなかっただけです。はてなはアカウントは持ってないんですが、ニュースサイト代わりとしてたまに覗いています。
- そういえばダウンロードボタンをつけたんでした。Edgeでdownload属性が利かなくて、これだけのためにポリフィルをふたつも導入することに。Edge切りたい（真顔）
- フォントファイルを改造して、「けものフレンズ」の７文字だけは元ネタのグリフを再現しました。