こんにちは。Forkwell の中の人、大岡（おおか）です。
今回も、Forkwell の各種スキルのロゴのお話。
Forkwell に登録されているスキルは、2012年4月20日現在およそ800種類。その内59種類は、スキルのロゴに人手で加工・編集した画像を当て込んでいるというのは前回の記事でご説明したわけですが、それ以外のロゴはどうなっているのでしょうか。
たとえばこの RSpec のロゴ。
どなたかのツイートで「（Forkwell の）RSpec のロゴに愛を感じる」というのを見かけました。しかし申し訳ないのですが、実はこのロゴは自動的に生成され、当てられているものなのです。
マウスで「rspec」の文字をドラッグするとわかりますが、その部分は純粋なHTMLのテキストです。（ページ内をそのテキストで検索して、反転させてみるのもおもしろいです）
緑の背景色と黒線の枠、ネズミの絵はdivクラスの背景画像ですが、文字の部分はWebフォントが使われています。テキストの縁取りもCSSで行っています。
それらを適用するのに、Lettering.js という JQuery のプラグインを使用しています。
Lettering.js はあらかじめ用意されたCSSのセット設定を動的に当てはめるもの。
たとえば1文字目はこのCSSセット、2文字目はこのCSSセット、3文字目はこれを適用…というような場合でも lettering() メソッド一発でそれが可能です。
Forkwell ではやっていませんが、CSSにアクションを仕込めば、マウスオーバーでタイポグラフィが切り替わるようにしたりだとか、文字が雪のように降ってきたりだとか、さらに見栄えのする演出を行うことができます。
以下、Forkwell にどんなタイポグラフィが用意されているか、ひとつずつ説明していきます。
ちなみに呼称は、そのまま小文字でCSSのクラス名になっています。（伏字でお見苦しいところもありますが、そこは大人の事情ということでよろしくお願いします）
①Jeans
ジーンズ地に刺繍のイメージ。使用フォントは Lobster。
②Orange
オレンジの輪切り面に白抜きの文字。使用フォントは LuxiSans。
③Alice
『不思議の国のアリス』をモチーフにしたもの。使用フォントは Bienetresocial。
④Be○tles
世界的に超有名なバンドのドラムヘッドロゴをインスパイアしたもの。使用フォントは Bootle。
⑤Ma○rix
世界的に大ヒットしたサイバーSF映画のロゴをインスパイアしたもの。使用フォントは Bienetresocial。
⑥Toradora
竹宮ゆゆこ先生のライトノベルを原作としたアニメ「とらドラ！」のロゴをインスパイアしたもの。使用フォントは Josefin Sans Std。
「超弩級ラブコメ」の異名をとるこの作品は、釘宮ファンならずとも必見。
⑦Ma○io
一斉を風靡した国民的人気アクションゲームのタイトル画面をインスパイアしたもの。使用フォントは Super Plumber Brothers。
⑧Final
タイトルに「ファイナル」とついているのに続編が10本以上作られている、人気シリーズRPGのロゴをインスパイアしたもの。使用フォントは Ferrum。
⑨Pit○gora
某公共放送局の幼児向けミニ番組のロゴをインスパイアしたもの。使用フォントは Full Dece Sans。
ちなみにこのネズミの絵も、大岡がマウスで描いてます。
⑩Retro
60年代レトロを彷彿とさせる花柄のデザイン。使用フォントは Josefin Sans Std。
⑪Monochrome
雰囲気のあるモノクローム写真をフィーチャーしたもの。使用フォントは Vegur Bold。
⑫St○rwars
SF映画の金字塔とも言われる一大スペースオペラ作品のロゴをインスパイアしたもの。使用フォントは Star Jedi Hollow。
⑬Chiyo
千代紙アートをイメージしたもの。使用フォントは James Fajado。
ちなみに上の画像のロゴは「zsh (Z Shell)」であって「2ch」ではありません。
⑭LCD
一昔前のガジェットのモノクロ液晶画面を再現したもの。使用フォントは LCD Solid。
⑮Headline
英字新聞の見出しをイメージしたもの。使用フォントは Headline One HPLHS。
よく見ると「FORKWELL REPORT」という架空の新聞の誌面になっています。
⑯Al○en
SFホラーの古典として知られる名作映画のロゴをインスパイアしたもの。使用フォントは Xenophobia。
⑰Bubble
シンプルなピンボケした光の泡の写真を使ったもの。使用フォントは Josefin Sans Std。
⑱Kyoto
JR東海の京都観光キャンペーンのCM「そうだ 京都、行こう」をお手本にしたもの。使用フォントは Bienetresocial。
⑲Woody
年季の入った板に焼印が施されたイメージのデザイン。使用フォントは Stamp Act Jumbled。
以上、ざっと19種類すべてのご紹介でした。
ところでなぜ20ではなく中途半端な19という数なのかというと、当初20種類用意するつもりだったのですが、20個目のパワーパフガールズをインスパイアしたものがチームメンバーに不評で取り下げる羽目になったからです。（パワーパフガールズかわいいのに…）
「インスパイア多いな、版権的に大丈夫なの？」とご心配される向きもあるでしょうが、怒られたらすぐに引っ込めますのであしからず。
最後に、どのタイポグラフィがどのタイミングで当たるのかということについてのご説明を。
各種それぞれ字数や文節に制限はあるのですが、どのタイポグラフィが当たるかは完全にランダムです。
しかし N88-BASIC に LCD が当たるとか、Redbull に Kyoto が当たるとか、偶然とは思えないマッチングがたまにあるのですが、運営側としてもこれは Forkwell の七不思議のひとつとして見つけるたびに驚いてます。とりあえず2012年4月20日現在までは、人の手でこれを当てはめようとしたことは一度もありません。
どのタイミングでタイポグラフィが当たるかですが、新しいスキルタグが作成された時点ではまだ決定されていません。
新規に作成されたタグのページ（http://forkwell.com/skilltags/{スキルタグの名前}）に最初の一人がアクセスした時点で決まるようになっています。
ですのでレアケースですがトップページで、スキルタグにロゴが適用されておらず白地に青文字でスキル名が書かれたリンクを見かけることがあるかもしれません。それは作られたばかりで、まだページにアクセスされてないスキルタグですので、記念に一番乗りで踏んでみてください。
CSSと Lettering.js を使えば、Forkwell のトップページでやっているようなことがそれほど難しくなく実現できます。
作っているサービスのページがシンプルすぎるので何か彩りを加えたいと思っている方などは、試してみてはどうでしょうか。
