表参道フォークウヱル別館（旧）

皆様、ゴールデンウィークをいかがお過ごしでしょうか。（ちなみにこの記事は、休日出勤して書いているわけではなく、予約投稿です）

今回は Forkwell とはあまり関係ない話題。
私事ですが、職場で使っているキーボードを新調しました。

購入したのは東プレ製「Realforce91UBK-S」。テンキーなし日本語配列の静音モデルです。
そう、

です。（すいません、これが言いたかっただけです）

「弘法筆を選ばず」と申しますが、私に言わせれば、あんなのは道具にこだわりがなくてケチりたい人が半分やっかみで言い始めたようなもの。
たとえば一流のアスリートが、そのへんのホームセンターで買ってきたような安物のスニーカーを履いて試合に出るでしょうか？

別に統計を取ったわけではありませんが、おおかのプログラマー人生で出会ってきた人たちの中では、すごい人ほど必ずと言っていいくらいキーボードにはその人なりのこだわりを持っていました。
またキーボードに限らず、ディスプレイやエディター等の開発環境、はたまたオフィスチェアに至るまで、彼らが普段使う道具の選定にはまさに「職人」さながらの信念みたいなものが感じられました。

逆に道具にこだわりのない人というのは、そもそもいい道具を見分けられるだけの目利き力を持っていません。
これまで私が1万円以上するキーボードを職場に持ち込んだときなど、「信じられない、お金の無駄遣い」のようなことを言う人たちがいたわけですが、そういう人たちに限って「コードなんて綺麗じゃなくても動けばいい」みたいな仕事ぶりのことが多かったです。

日本のギークが使うキーボードと言えば、PFU の Happy Hacking Keyboard (Professional) と東プレの Realforce が双璧をなしているわけですが、どちらを選ぶかによってその人がどんなタイプのプログラマーなのかがおおまかに分かるというのが、おおかの持論です。

まずは Happy Hacking Keyboard (HHK)。
これは「日本で最初のハッカー」と呼ばれた和田栄一氏と PFU の共同開発により生まれたキーボードです。

まさにUNIX使いによるUNIX使いのためのキーボードと言ってよく、テンキーはもちろんのことファンクションキーやDeleteキー、Home/Endキーのような軟弱なキーは除外、さらに上位機種の Professional シリーズでは矢印カーソルキーまでをも取っ払った超ミニマムな構成となっており、省スペースとホームポジションでのキー入力に徹底的にこだわった製品です。各キーの押下圧も、全て45gで統一されています。

極めつけは Professional2 の墨/無刻印モデル。英語配列なのは当然として、なんとキートップに入力文字の表示がありません。
「真のエキスパート」だけが使うことを許された道具。ガンダムに喩えるとするなら、ニュータイプ専用機として開発された「Ζガンダム」や「キュベレイ」のような機体。
キーに文字なんか書いてなくても、「…そこっ！」とバシバシ打ち落としてしまうニュータイプだけが使いこなせるキーボードです。

そして、もう一方の雄。Realforce。
これは HHK とは対照的に、「普通を極めたキーボード」と言ってよい製品です。

メーカーの東プレは、金融機関などのデータ入力などの業務利用に使われるキーボードをOEM提供していた会社であり、その思想は一般ユーザーにとっての打ちやすさを追求したもの。
キー配列も「ザ・ノーマル」なPC/AT互換機の配列。さらにそこからテンキーだけを除外して他のキーをそのまま残したモデルも用意されています。

東プレは HHK Pro でも採用されている静電容量無接点方式スイッチの開発元であり、最初にこのスイッチがキーボードに採用されたのも Realforce。安物のメンブレン方式とは一線を画す、非常に軽快なタッチです。
キーの押下圧は、中心が一番重くて55g、そこから遠くなるにつれて45g、30gと３段階に軽くなっていき、指を酷使しがちで腱鞘炎になりやすいキーパンチャーにも優しい設計になっています。（※91UDK-G等の一部のモデルを除く）

冒頭でも触れましたが、今回おおかが購入したのも、この Realforce です。
エッジが立ちまくった HHK と違い、これはオールドタイプが最高のパフォーマンスを発揮するための機体。
これまたガンダムに喩えると、量産機ながらその整備性と運動性の良さで一般兵から長く愛されたエゥーゴの主力機「リック・ディアス」や、スタンダードな設計ながらもＶガンダムと同じジェネレータを使用した高出力と機動性でリガ・ミリティア戦力の中核を担った「ガンイージ」を彷彿とさせるキーボードです。（お値段的には、Realforce は HHK Pro に引けを取りませんが）

HHK は廉価版の Lite も使ったことがありますが、おおかはやはりニュータイプではない凡人なので、癖のない Realforce が一番しっくりきます。

実はこれで Realforce を買ったのは3枚目。
ずっと職場で使っていたのも Realforce89。PS/2インターフェースでWindowsキーとアプリケーションキーがないという2003年発売の年期モノです。（調べてみたら、2006年にはもう生産終了していました）
買ったのはよく覚えていませんがおそらく2004年頃なので、8年近く使っていた計算になります。

普通に使っている分にはさほど不満はなかったのですが、2年ほど前に自宅用に Realforce91U を買って使ったときに、キータッチの進化に驚き、また必要ないと思っていた Windows キーも、デスクトップ Linux では地味にアサインされていたりして、あれば便利かなと思っていたのでした。
またたいていの職場ではディスプレイがブラックなので、ホワイトのキーボードとの色の取り合わせが悪いなと感じていたのもあり、このあいだ Facebook 友達が「Realforce 買ったよー！」とシェアしていたのにつられて、そのまま Amazon で 91UBK-S をポチってしまった次第です。

セッティングして使ってみると、その上質のキータッチは静音機構のおかげか、さらに洗練されているように感じられます。
今回、わざわざ割高な静音モデルにした理由は、耳が結構敏感で Enter キーを強く叩いたときの「パシィッ！」という音で鼓膜が一瞬萎縮するくらいなのですが、それが軽減されるかもと思ったから。
「通常モデルより30％静音化」との売り文句でしたが、通常キーはもちろんのことスペースキーやEnterキーといった大きいキーを強く叩いても、「…カシュッ」くらいの音なのが気に入りました。

これでこのブログを書くにも、これからは滑らかに筆が運びそう。
今のところ、Forkwell チームでは HHK 派が2名に対して、Realforce 派がおおかの1名のみと劣勢なのですが、無派閥のメンバーに今回ちょっと使わせてみてあげたところけっこう感銘を受けていた様子。これを期に Realforce 派を増やしたいものです。

2011年8月に、＠IT自分戦略研究所で突然はじまった、「きのこる先生のエンジニア転職指南」。
中の人が誰なのかという謎もさることながら、その内容の的確さ、示唆するところの多さによってエンジニアたちの話題を集めました。
連載は今年の3月に最終回を迎えたわけですが、連載を終えた「きのこる先生」に都内某所（居酒屋）にてインタビューする機会がありました。
今回の記事では、その内容をお届けしたいと思います。

――8回に渡る連載、おつかれさまでした。今は何をされているんですか？

今は、いただいた原稿料でiPadを買ったり、次回作の構想を練ったりしています。

――じゃあまた、きのこる先生は帰って来られると？

もちろん、そのつもりです。

――毎回、力の入った内容でしたが、特に最終回の「転職したいITエンジニアが知るべき97のこと」は、97個もネタを考えるのは大変だったんじゃないですか？

大変でした！ なぜ97なのかは、皆さんご存知の『プログラマが知るべき97のこと』を始めとするオライリーの「97」シリーズからいただいたんですが、いちおうネタは全部自分で用意しました。

――タイトルにやたらとアニメとかのサブカルネタが多かったような気がしますが？（「36. わぁい勉強会　あかり勉強会大好き」、「39. 『SIerに転職しないのかい？』『私の戦場はここじゃない』」）

実は、あれは編集さんのアシストでして。個人的に押さえているのは「まどマギ」くらいです。

――えっ。じゃあ、きのこる先生は別に「ゆるゆり」ファンというわけではないと？　このあと「ゆるゆりで、きのこる先生の嫁は誰ですか？」という質問を用意していたのが無駄になってしまいました…。ちなみに私は櫻子推しです。

――…それは置いておいて、話を戻しますが、あの連載はどういう経緯で始まったんですか？

あれはですね、第1回の連載でも書いたんですが、私がそれまでプログラマー職一本で来ていたところを、会社の辞令によって人事系の仕事をすることになったのがきっかけです。

そして人事の仕事を続けていく中で、あまりにもあまりに思うところが多々あり、それらを誰かに伝えることはできないものかと思っていました。
たまたま以前からお付き合いのあった編集さんとお会いする機会があったときに、「こんなことを書いてみたいんです。需要ありますか？」とお話ししたところ、すぐ編集会議にかけていただいて、そのまま連載が決定したと、こういう経緯になります。

――なるほど。プログラマーとしての経験と、人事担当としての経験とその両方を持っている人ってなかなかいませんよね。あの連載の説得力は、きのこる先生ご自身の実体験あればこそなんでしょうね。
――その「思うところ多々」が一番色濃く出ているのは連載の第1回と第2回だと思うのですが、その内容は「エンジニアは自己アピールが下手」ということでした。他の職種の人たちと比べても、やはりエンジニアは特に自己アピールが苦手なんでしょうか？

そう思いますね。経験が少ないせいで余裕がないというのもあるのでしょうが、それ以前に自分のアピールの仕方を知らないというのが大きいと思います。
そのせいか転職エージェントを先生、自分を生徒みたいに考えて、先生からもらったお手本のテンプレに自分のデータを当てはめて終了、みたいなパターンが多かったです。
その書類を誰が読むかということに思いを巡らせるのは、考えてみれば当然なんですが、その当然のところに気づくきっかけをあげたかったというのが、第2回の内容の目的でした。

――第6回は、SIエンジニアがWeb企業に転職する際の心構えを説かれていたわけですが、最近はSIerからWeb系に転職したい人が増えているのでしょうか？

そうですね。応募書面を見ているだけでも、はっきりとその流れがわかります。
メーカー系、独立大手、それらの関連会社だったりと、私が見ていた期間だけでも右肩上がりに増えていました。

ただ記事でも触れましたが、Web企業に過大な幻想を抱いて、まるでそこにはギークの楽園があるかのごとく考えている人だとか、毎日深夜までこき使われているのが嫌で、Web系に行きさえすればそこから逃れられるみたいに考えている人というのが少なからずいるのが問題ですね。
Web企業の華々しい自社サービスの裏には、往々にしてそびえ立つレガシーコードの山が存在していたりして、それを自分が何とかしてやろうと言えるような人を企業も求めているわけです。
単にSIerが嫌だからWeb系に逃げたいという人は、状況に流されているだけで、自力で問題を見つけ解決にもっていく気力や能力に乏しいことがほとんど。それじゃダメなんです。
じゃどうすればいいかというのが、あの連載の後半で言いたかったことで、来るならこんな覚悟が必要ですよという示唆が述べられています。

――面接でのエピソードをいくつか教えていただけましたら。

「ボクはPGには未来がないことを知っているので、早くSEになりたいです(ｷﾘｯ」と、プログラマーの私に向けて言い放った若者がいました（笑）
その場には私以外にももう1人、現役のプログラマーがいたんですが。

――その面接の後の展開が気になりますけど。

追い返したい気持ちを抑えつつ彼の言い分を聞いてみたところ、彼の親戚に40代くらいのうだつの上がらない「PG」の方がいたらしく、ことあるごとに彼に「PGなんてやるもんじゃないよ」と愚痴り続けていたということがわかりました。

これはオトナが仕事に誇りを持ってその背中を見せるということをしなかった結果であり、彼はその被害者と言えなくもないと思えて、以後は彼への怒りが収まりました。

――なるほど。他にもありますか？

「やろうと思ってます」という、「やるやる詐欺」の人。
「Rubyに興味があるんです！」「何かRubyで書いてみましたか？」「採用されたらやろうと思ってます！」みたいな人たちは本当に多いです。

そこで「どうしてやろうと思ってるのに今までやらなかったんですか？」と聞きたかったんですが、それをやると圧迫面接みたいになってしまうので、慣れてからは聞き流すことにしていました（笑）

――転職を考えているエンジニアに対して、エージェントとの付き合い方のアドバイスをお願いします。

転職エージェントというのは、単純に人をGetしてPutしたらその年収の何割かがもらえるビジネスモデルで、アサインした人が幸せになるかどうかは彼らのビジネスのドメインの外にあります。

半年から1年間はフォローしますというエージェントさんもいますが、それも転職していった人たちのためではなく、次の転職候補者に対しての情報収集のためということが多い。
彼らがやっていることは、扱っているものが人というだけで利ざや稼ぎの普通の商売であって、彼らは先生でもお母さんでもありません。君の将来に対して、本気で親身になって案じているわけではないのです。

もちろん、知らなかった優良企業を教えてくれるとか、やりづらい面接の時間や給与の交渉をしてくれるとかといったメリットもありますので、ビジネスの相手ということを常に念頭に置いた上で、対等の立場として利用するというスタンスで臨むべきでしょうね。

――では、その転職エージェントの人たちに対して言っておきたいことはありますか？

言い方は悪いですけど転職エージェントの業務は「情弱ビジネス」というか、入手しにくい情報を占有して、それを必要とするところへうまく流すことによって成り立ってきた商売です。

求職者に対しては、業界知識や面接の心構え、隠れた優良企業の情報等を。求人企業に対しては、有望な転職候補者の情報を。
しかしそれ例外のルートの情報の流れが、今すごく活発になってきています。まさに Forkwell のようなサービスもそう。「この人はこれができる」というのが今までは Word で書かれた自己申告の職務経歴書で不十分にしかわからなかった情報が、ネット上で公開されている。
そんな中で、転職エージェントの人たちはどうすればこの先生きのこることができるか考えていかないといけないでしょうね。
年収500万の人をつっこんだら、30%の150万ゲットという世界は、もうすぐ潰えると思ったほうがいいです。

――Forkwell について言及していただきましたが、実は最終回の「97のこと」の中の71番で Forkwell のことを紹介してくださっているんですよね。ありがとうございます。

――ところで連載が始まった2011年7月と今を比べて、転職トレンドで目につくことはありますか？

ずっと言ってきた「ソーシャル転職」の事例が身近に増えてきたことでしょうか。

――個人ブログの「退職エントリー」とか、本当に増えましたよね。

そう。そして有望なエンジニアの「退職エントリー」に、めぼしい企業の人事が群がる構図が目立ちますね。

去年のことなんですが、知人の某エンジニアが「退職しました。次はまだ決まっていません」というブログ記事を上げていたので、「ウチどうですか？」というメッセージを送ったところ、「御社からのアプローチは4人目です」と言われたことがありました（笑）
彼の話では、それだけでなくありとあらゆる手段での企業からの連絡が、ひっきりなしに来ていたそうです。メールを始めとして電話、Twitter、Facebook、はてなのIDコールに至るまで。
延べ15件から20件くらいのアプローチがあり、あえて自分から転職活動をする必要がなかったとのこと。

でもそれって彼が普段からアウトプットをし続けていて、エンジニアのコミュニティで自分の存在をアピールしていたからこその結果であって、一足飛びにそこだけマネをして「オレも退職エントリー書けばモテモテだぜ」みたいに勘違いしてしまうのだけは気をつけてほしいですね。

ただ例えばオープンソースでライブラリを作って、それを GitHub で公開して、Gem でインストールできるようにしています等というのは、プラスにこそなれマイナスになる要因は全くないので、どんどんやればいいと思います。
万が一、それを名前を出してやることで会社から咎められるようなことがあれば、それこそいいネタになるのでそこで退職エントリーを書くべきでしょうね。そんな会社にいる価値は、今の時代もうないので。

――最後に、きのこる先生から Forkwell に対して何か言いたいことがありましたら。

あの連載っていうのは全体的に、転職エージェントの時代がそろそろ終わりつつあるというところを起点にしています。ただ、エージェントに乗っかって行う転職というのは求職者にとってはすごく楽で、これまではエージェントが売りやすい人材を演じればどこかに売ってもらえるという時代だったわけです。

でもそれが、特にソフトウェアエンジニアに関しては、個人のスキルが可視化・公開される流れになってきている。Forkwell はまさにその流れを加速させるサービスだと思います。

連載の第1回、第2回は「エンジニアの職務経歴書が残念過ぎる」ということに言及していたわけですが、今のフォーマットではたとえ綺麗に書いてもらったとしてもわかることには限界があります。
Forkwell もそのひとつだと思いますが、自分のスキルをアピールする看板としてエンジニアにはこういったサービスをどんどん利用してほしいし、その看板がちゃんと読める人事担当も増えてほしいですね。

――いやあ、ものすごく綺麗にまとめていただいてありがとうございます（笑）

ステマじゃないですよ（笑）
エンジニアの看板がもっと増えてほしいし、その中の有力な選択肢として、Forkwell の今と今後にはすごく期待しています。

――ありがとうございます。きのこる先生の期待に応えるべく、チーム一同全力を尽くします。
きのこる先生、本日はどうもありがとうございました。次回作も楽しみにしています！

実は昨日（2012年4月26日）だったのですが、ひっそりとコミッター登録機能というものをリリースしました。
これはスキルに対応するプロダクトについて、そのコミッターやコントリビューターのユーザーが自分を登録できる機能です。

コミッター登録を行うと、

①その人のプロフィールページの該当スキルタグの中に星（コミッター：ゴールドの星2つ、コントリビューター：シルバーの星1つ）が表示されるようになる

②該当スキルタグページに「コミッター」タブが作られ、コミッター一覧にその人が登録される

といった具合になります。

星は階級章をイメージしたメタリックな質感のもので、これが自分のスキルタグにつくとちょっとかっこいい感じになります。
（ただ「タグの中の星があまり目立ってない」という声もあったので、星の大きさや明度についてはまた調整する予定）

コミッター登録およびコントリビューター登録の方法ですが、該当スキルのスキル登録を行っていただいた上で、

①自分のプロフィールページの該当スキルタグにマウスオン、ポップアップしたボックス右上の☆★アイコンをクリック

②該当スキルページ（http://forkwell.com/skilltags/スキル名）の「コミッターとして登録（Register as a committer）」リンクをクリック

の2通りの入り口があり、そこから「コミッター (Committer)」か「コントリビューター (Contributor)」を選んで登録していただく形になります。

また、コミッターおよびコントリビューターの方は、スキルタグページにそのプロダクトの「公式サイト」と「レポジトリ」のURLを登録することができます。
（ただリリースしてから考えましたが、別にこのURL登録はコミッター、コントリビューターに限定しなくてもいいですね。スキル登録しているユーザーにも近日中に開放したいと思います）

と、ここまでは機能のご紹介。
ここからはこの「コミッター登録機能」をリリースした目的についてお話しします。

それはタイトルにもある通り、大小様々なプロダクトのコミッター名鑑をインターネット上に作りたいということです。
Forkwell にはそのサービスの目的のひとつに、「エンジニアのブランディングを支援する」というものがあります。

一般メディアに取り上げられエンジニア以外にも知られているようなごく一部の超有名人は別として、それ以外でふだん私たちが業務上でお世話になっているオープンソース／商用に関わらず大小様々なプロダクトを誰が開発しているかについて、私たちは今まであまりに知らなさすぎたんじゃないでしょうか。

たとえば、Ruby on Rails をモバイル対応（主にフィーチャーフォン）させるためのプラグイン、jpmobile。
昨今のGREE、Mobageブームの中で、Rails で携帯ソーシャルゲームを開発している企業も少なくないと思いますが、その開発に携わっているエンジニアの中の何割が jpmobile のメイン開発者が小川伸一郎さんだということを知っているでしょうか。
（※jpmobile は設樂洋爾さんが元々開発を始めたもので、現在は小川さんがそれを引き継いでいます）

しかしオープンソースなので当然とは言え、ゲームプロバイダは無償で jpmobile を使わせてもらっているわけで、それならせめてそのゲーム開発に携わっているエンジニアたちだけでも小川さんの名前を知り、彼に感謝するべきではないでしょうか。

そして会社に働きかけて小川さんの『Ruby on Rails 3で作る jpmobileによるモバイルサイト構築』をエンジニアの頭数分、購入すべきではないでしょうか（笑）

少なくとも、Twitter で jpmobile の挙動にグチをこぼすのではなく、小川さん個人を認識した上でちゃんと GitHub Issues にレポートを上げるべきだと思うのです。
（jpmobile を使っている人たちがそうしてくれないために、小川さんはわざわざ Twitter の検索でユーザーの声を拾っているそうです）

または、この「表参道フォークウヱル別館」でも使用している Ruby 製のブログシステム、Lokka。
Ruby でプロダクトを作っている会社であっても、その運営するブログに WordPress を使っているところが多々見受けられるようですが。

そこはぜひ、日本人の駒形真幸さんがメインで開発していて、ちゃんと要望やトラブルシューティングに日本語が通じる Lokka を使うべきところではないでしょうか。
（Help me, hackers! というサイトで質問すると、運が良ければ作者直々に答えてもらえます）

使用できるテーマが少ないとか、企業なのですから社員のデザイナーにカスタマイズしてもらえばいいわけですし。
機能が足りないと思うなら、そこは社員のエンジニアに開発に参加してもらえば、自社の技術力を誇示するチャンスにもなりますし。

そういったところに貢献できればというのが、Forkwell の「コミッター登録機能」の狙いです。

しかし「インターネット上に大小様々なプロダクトのコミッター名鑑を作る」などというのは、現在の Forkwell の規模ではまだまだ力不足だというのも認識しています。
現状、この機能は完全に自己申告制ですし、そもそも彼らが全員 Forkwell のユーザーというわけでも当然ないので、これはかなり長期に渡っての目標になりそうです。

ただ、まだ数は少ないですが、先述した jpmobile や Lokka に加え、Heroku や手前味噌ですが Forkwell（※商用プロダクトも登録可です）といったスキルタグページにコミッターの方々がすでに登録してくださっています。
ここに挙げたことについて賛同できるコミッター、コントリビューターの方々がいらっしゃいましたら、お手数ですが自主的に登録をお願いできますでしょうか。

なおコミッター登録していただいたスキルのプロダクトについては、優先的にロゴ画像の作成を行っていく予定です。
（jpmobile と Lokka も連休明けくらいまでには対応します）

最後にネタタグ、もしくは一般的なスキルのタグについて。
これまでスキルタグの作成および登録については、基本は不干渉でユーザーの方々の自由に任せていました。今後もそれについては変えるつもりはないのですが、コミッター登録機能については例外とさせていただきます。

ここで Forkwell における「コミッター」「コントリビューター」の定義を明らかにしておきますと、

コミッター
　プロダクトの公式なリポジトリ（＝ソースコードの保管場所）への書き換え権限を所有している人。端的に言えば「そのプロダクトのコミット権を持った人」。

コントリビューター
　プロダクトに自分が書いたパッチが採用される、または公式ドキュメントの作成や翻訳等でその開発プロジェクトに貢献していて、かつコミット権を持っていない人のこと。

となります。
ですので、自分以外に誰が使っているかわからないプラグインであっても、GitHub にレポジトリがあってコミット権を持っていれば、その人はそのスキルタグを Forkwell に登録し、コミッター登録を行うことができます。

ただしこの定義では、「beer」とか「presentation」タグ等でのコミッター登録はありえないということになります。
運営側の対応としては、それらにコミッター登録している方を見つけたら個別に登録を解除するようお願いし、聞いていただけない場合は強制解除の上、そのスキルについては今後誰もコミッター登録ができないようにさせていただきます。
ですのでそのあたりは、健全なサービスとして運営していくためにも、ぜひともご協力よろしくお願い致します。

先日、TechCrunch にこんな記事が上がっていて、興味深く読みました。

どうやったら開発のコストを少なくできるか？ 答え：コードを書かない - TechCrunch JAPAN

開発者は新しいプロダクトを作るのに、まずはコードを書いて簡単なデモレベルのものをつくろうとする。だけど、彼はコードを「書く」前にもやることがあるという。たとえば紙によるモックアップだ。これだけでも十分な役割を果たすことがある。
（中略）
先にペイパーモックアップを作って（ウェブなら画像をブラウザーで見せるだとか）、それをもとにユーザーにヒアリングをして、そからフィードバックを得て実際に製品の開発にはいるんだそうだ。

私たちは「プロトタイプ」「ペーパープロトタイピング（紙でプロトタイプを作り、検証すること）」と呼んでいましたが、Forkwell の開発ではコーディングに入る前の1ヶ月あまり、ひたすらこのペーパープロトタイピングを行っていました。

参考にしたのはこの本。タイトルもそのものズバリ、『ペーパープロトタイピング』。

とはいえこの本、非常に分厚くて内容も少々冗長なので、とりあえずざっと流し読みした後はひたすら実践でした。
当初は先に挙げた記事やこの本に書いてあったように、紙に手書きがベース、さらに書いたものをコピーしてパーツごとに分解、はがせる糊などで組み合わせてよりフレキシブルにというようなことをやっていました。

そしてできあがったものを自分以外の人に見てもらったわけですが、これが本に書いてあるようにはうまく機能しませんでした。
作り手としてはそのページの目的等、周辺事項も含めて全て理解しているため、手書きの貧弱な表現でもそこは想像力で補って読み進むことができるのですが、初見のユーザーとしてはそうもいきません。

すでに慣れているショッピングサイトとかだとまだ類似サービスから想像のしようがあったのでしょうが、Forkwell みたいなサービスはまだ誰も使ったことがないため、手書きの汚いプロトタイプを見せられて、何をすればいいか理解できる人はほぼ皆無でした。

そこで考えたのが、巷にあるプロトタイピングツールを使うこと。
Balasamiq Mockups のような商用ソフトも試してみましたが、結局選んだのは、オープンソースプロダクトの Pencil というツールでした。

• これはすごい！Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」 - MOONGIFT
  
• Web制作に超便利！無料のプロトタイプ作成ツール : ASCII.jp
  

日本語フォントが普通に使える、外部画像もコピー＆ペーストで簡単にインポートできる、全体をPNG画像に簡単にエクスポートできる、手書き風の描画パーツと通常のページデザイン風の描画パーツと両方用意されている、といったところが決め手になりました。

FireFox のアドオンとして提供されているのですが、XULRunner という Mozilla のランタイムパッケージをかませることで、単独のアプリケーションのように使うこともできます。
（公式サイトによると Mac はこれには対応していない模様）

この Pencil を使って作ったプロトタイプが、以下の画像のようなものになります。

これはユーザープロフィールページですが、実際の画面と比較するために並べてみました。
担当のデザイナーには、このプロトタイプを渡してHTMLとCSSに落としてもらっています。
（※実際には「プロトタイプ→ページデザイン」の一方通行ではなく、「プロトタイプ←デザインサンプル」にフィードバックする場合も多々あります）

Pencil を導入してカラープリントの綺麗なプロトタイプを見せられるようになってからは、テストユーザーからのフィードバックはぐっと良くなりました。
類似のサービスがないためにどうすればいいか想像できず戸惑うことがあるという点には変わりありませんでしたが、少なくとも、「これって何のパーツですか？」「このテキストって何て書いてあるんですか？」とは聞かれなくなりました。

また作成プロセスも手書きと比べると1ページ作りきるまでは手間がかかるようになりましたが、一度できてしまえばあとはカット＆ペースト、ドラッグ＆ドロップで要素の入れ替えも簡単なので、差し引きゼロとまではいきませんが、それほど苦にはなりませんでした。

コーディングにとりかかるまでの1ヶ月あまり、これによるペーパープロトタイプ作成とユーザーテストをじっくり行えたおかげで、本来ならコードを書きながら試行錯誤を行わなければならなかっただろう時間と労力を、かなり削減できたと思っています。

私も経験があるのでわかるのですが、プログラマーは一度作ったものを「やっぱりイメージと違った。作り直して」と言われるとモチベーションが一気に下がりがちです。
アジャイル開発ではスクラップ＆ビルドは当たり前と言えど、自分たちが苦労して作ったものがいとも簡単に捨てられるのが頻繁に繰り返されると、そこはやはり人間ですので徒労感と無力感にさいなまれて「どうでもいいや」という気分になってくるものです。

ですので、できるものなら試行錯誤は実際にコードを書く前までに極力終わらせておきたい。
ただそうは言っても、実際に動くものができてから触ってみたらやっぱり使いにくかったということは少なからずあるわけですが、それもできれば最小限にしたいわけです。

そういうときに、ペーパープロトタイピングは非常に有効な解決策となりうるというのが、今回 Forkwell の開発で Pencil を使って行ってみた感想です。
プログラマーやデザイナーのモチベーションも守られ、全体で見た工数の節約にもなるので経営者としても嬉しい。トライ＆エラーのコストが下がれば、そのぶん回数を増やせてプロダクトの改善につながる。ペーパープロトタイピングを行うことで、四方ハッピーに収まります。

唯一、ディレクターに課される膨大な手間を除けば（笑）
ペーパープロトタイピングを行うのは非常に手間がかかります。これまで適当に Excel で作って「はい、おしまい」だったものを、このようなツールで細部に渡るまで作りこみ、それをユーザーにテストしてもらってそのフィードバックにより改善を繰り返す。
「ああしてこうして。それじゃわからない？ そんなの良きに計らってよ」みたいな自分で手を動かすのを嫌がるタイプのディレクターなら、まずやりたがらないでしょう。

しかしこれを行うことでチームとしての開発作業がスムーズになり、いいものが作れるならそこは手間を厭わずやるべきです。

最近では「ユーザー中心設計」の必要性が叫ばれるようになり、その中ではペルソナ・シナリオ作成やユーザーテストの実施等に混じって「ペーパープロトタイピング」「ワイヤーフレーム作成」が当たり前のように実施項目として挙げられていたりします。

一生懸命作ってみたはいいけど誰にも使ってもらえなかったみたいな悲劇（ありがちな悲劇ですが）をできるだけ避けるためにも、ペーパープロトタイピングはおすすめです。

（最後に載せた写真は、2011年11月後半の時点のプロトタイプと、2012年4月現在の最新のプロトタイプをプリントアウトして並べたもの。右のほうが最新版。5ヶ月足らずでずいぶん変わっていますが、この試行錯誤をコーディングしながら行っていたら、かなり大変だったでしょう）

こんにちは。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 のトップページでやっているようなことがそれほど難しくなく実現できます。
作っているサービスのページがシンプルすぎるので何か彩りを加えたいと思っている方などは、試してみてはどうでしょうか。