こんにちは。Forkwell の中の人、大岡(おおか)です。
Forkwell にアクセスしてまず目につくのが、トップページに敷き詰められている、スキルに紐づく各種プロダクトのカラフルなたくさんのロゴ。
「Pi○terest のパクリ」と言われたりもして、今さらそれを否定する気もありませんが、でもこれらのロゴ画像がどうやって作られているか気になりませんか?
今回の記事は、そのスキルのロゴ画像について。
各種スキルのロゴ画像については、内容的に2種類のグループに分かれます。
- 固有の画像があらかじめ用意されているもの
- 固有の画像がなく、CSSのタイポグラフィが動的に当てられているもの
今回は、1の「固有の画像があらかじめ用意されているもの」をご説明したいと思います。
技術的に面白いのは2のほうなのですが、それはまた次回の記事にて。
Ruby、Python、Java、MySQL といったスキルのロゴについては、220x220のPNG画像があらかじめ用意されており、それが表示されています。
用意されている画像は、2012年4月18日現在、59個。
つまり59種類のスキルには人の手によって作られた画像が当て込まれているわけですが、実はこれらは全て、大岡が加工・編集したものとなっています。
GIMP と Inkscape を駆使して(※大岡のデスクトップOSは Linux Mint なので)、開発元がベクター画像を用意して提供してくれているものはそれを使用し、そうでないものは似たフォントを探してきたり、イメージに合う写真を加工したりして作っています。
なぜデザイナーに作ってもらわないかというと、単純に手が足りないからです(苦笑)
プロのデザイナーさんが見れば拙い仕上がりかもしれませんが、でもエンジニアが作っているからこそ、そのプロダクトのバックグラウンドまでを考慮した画像にできている部分もあるのではないかと思っています。
たとえば Haskell のロゴ。
公式に配布されているのは「λ(ラムダ)」をモチーフにしたシンボルのみ。白の背景にこれを置いただけでは味気ない。
ですのでまず、ラムダのイメージにあったフォント探し。Black Chancery というフォントがしっくり来そうだったので、このフォントで「Haskell」のテキストを作成。
さらに「Haskell」の名前は、論理学者の Haskell Curry に由来しています。(関数言語の「カリー化」も彼の名前からとられています。苗字も名前もちなんで技術の名前に使われるなんてすごいですね)
よって、Curry(カレー)にちなんでロゴの背景は香辛料にしてみました。
こんなふうにして59種類の画像は作られています。
ちなみに本日3つの画像(bitbucket、JIRA、Confluence)が増えたのですが、これは Atlassian Software の大澤さんから「公式にロゴのベクター画像を用意してあるので使ってほしい」との依頼を個人的にいただいたので、それを使って作成した画像を追加したのでした。
今回のように、オリジナルロゴのベクター画像ファイル(.svg/.eps/.aiファイル)さえ用意していただければロゴ画像は作れますので、ウチのこのプロダクトを公式のロゴを使ったものに置き換えてほしいという依頼には積極的に対応していきたいと思います。
また、依頼がなくても大岡の手が足りる範囲で、少しずつロゴ画像は増やしていく予定です。
将来的には、ユーザーの方が自分で作ったロゴ画像を Forkwell にアップして、既存のものをユーザー投票で上回ればそれにロゴが差し変わる、みたいな仕組みを考えています。
それはまだ先の話になりますが、その前でも自分の作ったロゴ画像を Forkwell で使ってほしいという要望がもしありましたら、大歓迎ですので順次応じさせていただきます。
ただ、その際には素材画像の著作権には、くれぐれも注意していただけますよう。
たとえば Ruby on Rails のよく見かけるロゴ、あれは DHH に権利があり、彼は第三者に使用を認めていないため、勝手に使うことはできません。(ですので Forkwell では、Rails のロゴ は、線路の写真を加工したものになっています)
またフォントやクリップアート、写真といったものも購入済みでライセンスをクリアしたものか、商用利用可のフリーのものをご使用ください。
次回の記事は、冒頭の2の「固有の画像がなく、CSSのタイポグラフィが動的に当てられている」スキルロゴについての説明です。
普通にロゴは全部が画像だと思っているユーザーの方も少なくないようですが、実は違うというお話。お楽しみに。