デザイナー向けプログラム部のハッカソンに参加させていただきました。

デザイナー向けプログラム部のハッカソンとは！？

デザイナーとエンジニアでペアを組み、何か1日でできる規模のものを開発する集いです。 p4d： http://prog4designer.heroku.com/11

作ったもの

僕は @tkawa さんとペアを組んでForkMeというサイトを作りました。 github用のフォローミーバッジ（ こんなの ）をつくれたり、あとみんなのリポジトリ毎にfavつけれる機能をつけて、アクセス数やfavの人気順とかでリポジトリを探しやすくするようなソーシャルブックマークっぽいサイトを作ろうと奮闘しました。 結果は完成までこぎつける事が出来なかったのですが凄く良い経験になりました。

バッジ部分はとりあえず動いたのでこのページの右側にお試しで貼りつけてみてます。

githubは凄く好きなサービスなんですが、目的のプロジェクトを上手く探せない事に不満を感じていて、webデザインのブックマークサイトのような使い勝手で上手く可視化して検索できたら良いなーと思って提案してみました。 （octcatもカワイイですよね。余談ですがtwitterの鳥の絵を描いたイラストレーターさんと 同一人物 だそうです。）

デザインについて

テーマが明確だったので絵は案外手早く作れたのですが、 折角参加させていただいたので簡単なフローと自分なりの時間短縮Tipsなんかのご紹介を。

レイアウト

ワイヤーフレームとかを作っている暇は無さそうだったので、 無印のノートを持って行って最初の数十分で手書きで項目を細かく摺り合わせました。 時間の制限もあるので手早く見栄えが良くなるよう、レイアウトの段階で予めヘッダは画像1枚になるように決めておきました。

ロゴ周りのデザインフロー

1.「ForkMe」なんで勿論フォーク使うでしょ！という単純なノリでフリー素材の写真からお皿とフォークをパス抜き 2.ロゴを作ってのっける 3.トレンドのノイズとかCSS3っぽいエンボスとかを味付けして出来上がり 4.と思ったら色合い的に寂しかったので、下にランチョンマットっぽいのを敷いてみる 5.まだ寂しい感じだったので食卓っぽく見えそうな北欧っぽいファブリックのテクスチャを貼ってみる 6.全体の色合いを調整して今度こそ完成 というような流れで制作したので案外あっさり出来上がりました。

コーディング

最近よく耳にする「レスポンシブWebデザイン」のCSSフレームワークのうちSkeltonというのを試してみました。 あらかじめいくつか試していたのですが、これがフレームワーク自体の主張も少なくソースもシンプルで自分的に一番使い勝手が良かったです。 ただ、レスポンシブレイアウトにするとウィンドウ幅によってメニューの幅も可変してしまうので、いつも通りのコーディングだと崩れてしまって、やはり微調整とあと慣れが必要だなと思いました。 Skelton： http://www.getskeleton.com/

カラーピッカー

カラーピッカーの部分凄い！ってお褒め頂きましたが・・・すいません・・・ jscolorっていうライブラリを使用してました・・・ 他もjQueryのfadeIn,fadeOutとかです・・・ jscolor： http://jscolor.com/

バッジ部分

JSで呼び出す仕組みはブログパーツとかと同じような構成になっています。 背景の色が変わる仕組みは左のような透過のpngを使用し、 後ろにdiv要素を作り、その色を変更しています。

グラデーション用+テキストのエンボス用のCSS3コード

CSS3 Button Generatorでボタンを作った時とかにお気に入りのグラデを見つけてスニペットに保存してます。 グラデだけ作るサイトもあれば良いのに・・・作ろうかな・・・ CSS3 Button Generator ： http://css3button.net/

Ultimate CSS Gradient Generator： http://www.colorzilla.com/gradient-editor/

スニペット管理

CodeBoxというアプリが非常に使い勝手が良いです。 作業時間を短縮させようと思ったらスニペットアプリの利用が非常に効率的だと思います。 考えながらタイピングしてデバッグするより 1.AlfredでCodeBoxを起動 2.tagで検索 でコピペした方が数倍早いです。 僕は各言語ごとのスニペットファイルを作成し、DropBox上で同期させて使っています。 CodeBox： http://www.codeboxapp.com/ Alfred： http://www.alfredapp.com/

反省点

・・偉そうに時間短縮Tipsを語っておきながら時間内に間に合わなかった事が一番の反省点ですｗ

「せーの」ではじめて1日で作る。というところが凄く楽しそうだったので、先に手を動かす事を躊躇していたのですが、結論から言うと完成までこぎつけるためには「自分に足りないスキル」を考慮した上で、ある程度準備が必要だったと後悔しました。

前田製作所さんも ブログ で

プログラマから見たらデザイナーのマシンは「実家のお父さんのパソコン」と同じようなものなので、その辺を事前準備で攻略しておくといいのかもしれません。

と書かれておられますが、初歩的な質問で何度かエンジニアさんの手を止めてしまったりしていて、もうお父さん通り越しておじいちゃんの域でした。反省です・・・

あとやはりアレコレやりたいではなく、ワンアイデアに絞って1日で完成までこぎつける事が魅力的なプロダクトを作るコツだと周りを見渡してしみじみ思いました。

気になった技術

WebSocketを使用していたチームがいくつかおられたのですが凄く気になる技術でした。これは流行りそう！多分。僕が無知なだけでもうすでに有名なのかも知れないですがw あとここ最近何度も耳にするようになったsinatra、mongoDBはちょっとでも触れるようになっておきたいと思いました。

まとめ

デザイナーがエンジニアさんと手を組むと自分の知識だけでは到底実現できないサイトを作成する事が可能で夢ひろがりんぐでした。

エンジニアさん > デザインをのっける事で単に見栄えが良くなるだけじゃなくて、使いやすさなんかの面も考慮した設計ができるので、タッグを組ませていただくときっと損はさせません・・・！！是非これを機会に今後もドシドシ一緒にモノを作っていけるような状況が作れたら嬉しいです。

はじめてお会いする方が多く緊張していたのですが、若い方からベテランの方まで一緒に作業ができて、非常に刺激的で勉強になりました。