#p4d 第6回デザイナー向けプログラム部に参加しての感想

2012.3.20に、第6回デザイナー向けプログラム部に参加してきました。
今回で2回目の参加。今回も、株式会社 KDDIウェブコミュニケーションズ (KDDI Web Communications Inc.)さんが会場でした。自己紹介中の風景はこんな感じ
今回は人すごい多かったです。前回の倍ぐらい？

Roomzの紹介

@shu_0115さんからRoomzの紹介。勉強会などのイベントで、#p4dといったハッシュタグでみなさんつぶやくと思うのですが、その検索結果が割と最近のものしか参照できないとのこと。

そこで、Roomzに#p4d部屋を作って、そこからつぶやくとtwitterにも連携されて、Roomzにもログが残るというすぐれもの。今日はこちらでつぶやいてみてくださいとの紹介でした。

これ確かに便利で、イベントのログとか後でチェックするとかの手間が省けていい感じです。

イベント後にこのようなお話させてもらったりしました。今後がすごい楽しみです。

画像を使わないデザインについてのお話

@machidaさんの発表。画像を使わないデザインについてのお話。

compassの紹介、すごくためになりました。mixinがすごい直感的に出来て素晴らしい。ついでにmixiの使いどろこってどこなんだろうと思って行ったんですが、clearfixの例がすごく参考になりました。

class="clearfix"とかしがちな、シーンで見た目の調整用の処理をclass追加で対応するのではくて、本来の要素のstyleにmixinするという例でした。いままで腑に落ちなかったmixinが理解できてよかったです。

そして今回のお話、we love herokuを題材にして頂いておりまして、びっくりました。ありがとうございます。デザインテロ楽しみだなぁという感じで首を長くしてお待ちしております。楽しみだなぁ。とにかくカッコ良かったんですよ。

githubにあげてあるwebサービスは以下のような点が考慮されていると嬉しいとのこと。うーん。言われてみれば本当、そうですね。勉強になります。

ローカルですぐ動く手順欲しい
SQLiteだとうれしい
初期データ入っていると良い

CSS3でグラデーション設定とかを作りたいときは、 Ultimate CSS Gradient Generatorが便利とのこと。

f:id:naoto5959:20120323013945p:plain

:afterなどの擬似要素便利というお話も。これは、デザイン用のdiv使っちゃうのださいよねーというシーンで、:afterのcontent指定したりborderで線作ったりすると便利だよーというお話。これたしかに便利で、まじいろんなところで使えるのですが、contentに文字列入れたい時とかはローカライズ時にCSSも別途ローカライズ用に分ける必要があるねーというお話。なるほど。これに関しては、言語によってcssの横幅を変える必要出ること多いので、そういう言語用のCSS定義時に工夫するといいかなーと思いました。

具体的にはこんな感じで共通CSSを上書きするみたいな？

common.cssを読む
en.cssを読み込む(ここでcommon.cssの内容を上書きする)

デザイン試行錯誤するとき、rgba使うと便利だよーというのあったんですが、個人的にはhslをよく使ってて IE対応してないとかがあれなんですが、scssとかだと勝手に#から始まる16進数に変換してくれたりして実用的です。 hslってのはHue(色相)、Saturation(彩度)、Lightness(輝度)で色を指定できるものです。色相固定して、彩度をいじるとか、彩度固定して色相をいじるとかすると簡単に統一感出たデザインが出来ていいなーと思っております。