Ruby Hiroba P4D(Webデザインを学びたいRubyistのための)参加

開発コミュニティの独特の雰囲気に触れられて、良い一日でした。

参加前に思ったこととか

インターン先のRailsサービスは、フロントがSass/Haml 。自分は見慣れていない感じです。

Ruby HirobaP4D(デザイナー向けプログラム部)は、@machidaさんや @ayumikoさんがスタッフをされているそうで、ぜひ参加してみたいと思いました。

告知を見て、「前提知識は、Ruby、SassとCompassなのだろう」とあたりをつけた。

Ruby 環境はある。sass/compassは、無知・・・。→前日にドットインストールを見てさわりを理解した。

Ruby Hiroba P4D

こんなに可愛いステッカーを差し置いて、カツオのステッカーは残念ながらすでに売り切れ。

素敵スライドが公開されているので、本編についてはこちらには書きません。


以下、スライドには無い質疑のメモです。正確では無いかも。違っていたらすみません。

参加者による作品発表

その1:sendagaya.rb メンバー、京都からいらしている方より。Vim でデザインしたっぽいデザイン?!

→ ギラギラしてますね。
→ 色って、どうやって選べば良いの?

→ HUE/360
という便利なサイトがあります。これで選ぶと変な風にはならない。マンセル環。

RGB ベースで色を選ぶと、ギラギラした感じになりがちです。

詳しくはノンデザイナーのための配色理論

# 講師@ken_c_lo さんが「ノンデザイナーのための」の「のん」を打ち込んだら「飲んでいる」というサジェストが出てきて、おおっ!と思いました。

その2:Pankaku の方より。メインカラーが赤、黒背景のかっこいい作品。

→ 黒背景に赤のタイトル文字が沈んで見える?
→ メインカラーに lighten 5% かけるとどうだろう。
→ あんまり明るくしすぎると今度は下品になる。

参加者によるデザイン相談

その1:FBの人狼BBSサイトの中の人。@aileron さん。

汝は人狼なりや

Twitter Bootstrap 使用。どういったデザインアプローチがあるのか?

  • by いけのさん
    • 背景は、濃いブラウンあたりが良いかな。中世のゲームにあった雰囲気を出すと良い。ふきだしを、たとえば羊皮紙。英語を入れて筆記体にする。
  • by あかつかさん。
    • ヘッダ、ナビゲーション、コンテンツの配置はもうちょっとありがちな感じにまとめても良いか。
  • by まちださん。
    • Bootstrap のラップによる制作事例紹介。DEVLOVE2012。ヘッダタイトル文字、黄色なんだけれど、Gold に見せるスタイル。Herokuのタイトルでも使ってある。そのままスタイルコピペしたらできる。
    • 周りに暗い影をつける。RGBA とbox-shadow。素材を買わずに済むので手軽。
  • by くまごろうさん
    • ヘッダ見出しを serif や明朝系にすると目がいくようになる。
その2:DeckNotesの中の人。@fukajun さん

http://decknotes.com/
手軽にスライド作成。Qiita、Gist からインポートすることもできる。Slideshare にPDFでUPすることも可能。
プロっぽくするには?

  • by まちださん
    • TwitterBootstrap を、手間をかけずにカスタマイズしたい、とよく訊かれる(<私もちょうど、実務上知りたいところだったのでした)。


この日は、大先輩であるkwappaさんをお見かけしてご挨拶させて頂くこともできました。
スタッフの皆様、スポンサー企業様、ありがとうございました!