『第一回プログラマ向けデザイン勉強会』に参加しました #design4p

はじめに

現役デザイナーの方々にデザインを伝授していただけると @satococoa さんに聞いて『第一回プログラマ向けデザイン勉強会 - connpass』に参加しました。各発表の自分用メモを書いていきます。

Twitter Bootstrap のカスタマイズ例 - @machida さん

メモ

スライド RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 // Speaker Deck
カスタマイズされたコード machida/CustomizedTwitterBootstrap
基本はベース、メイン、アクセント（目立つ色。クリックされたいボタンとか）カラーの三色。70:20:5 くらいの比がいいらしい
sass でコーディングするときは三色を変数にして基本はそれをつかう
背景にテクスチャーをつかうと高級感が出る
次のサイトを用いた三色の決め方
- Color Trends + Palettes :: COLOURlovers
- Dribbble - Popular
文字を囲っている要素の背景色の明度を上下させて内部の文字色を決める
ボタンのマウスオーバーしたときの色は明度を変えるとつくりやすい
補色とは色相関で逆の位置にある色。彩度とは派手・地味ぐあい
三色の選び方としてロゴとかアニメキャラとかから選んでみる例
Firebug で調整しながらスクリーンショットをとって見比べると、どっちがいいか決めやすい
herounit の代わり eyecatch をつかうと Twitter Bootstrap っぽさを消せる
デザインに便利な Gem
- compass-rails: JS でいう jQuery みたいなもの。角丸を一行で書けたり、CSSスプライトを自動でやってくれたりする
- sassy-botton: デザインされたボタンを一行でつくれる
- font-awesome-sass-rails: アイコン系
- compass-rgbapng: rgba を IE でも表示されるようにしてくれる
LESS は JavaScript でできてる。Sass は Rails で使われるのを想定しているので色々やりやすい。

感想

いままで LESS のままで Twitter Bootstrap を使っていたのですが、sass のほうが使いやすそうかもと思いました。ベース、メイン、アクセントカラーを変数において調整するようにすれば、サイト全体の彩度を変えるなどの一括の変更をすぐにできそうで素敵！

少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック - @ken_c_lo さん

メモ

スライド zurui-design.pdf // Speaker Deck
ズルいシリーズ。現実的な質感のあるそれっぽくなるデザイン
光源を想定して shadow を設定するといい感じになる
ずるい線の mixin。自前で mixin を用意してつかう
text の shadow: 光源と同じか逆かの方向に shadow をいれる。前者はほられている感や出て、後者は浮き出している感じが出る
ズルい背景パターン Subtle Patterns | Free textures for your next web project
ズルいグレー。#FFF に近い色。高級感が増したりする
ズルいグラデーション。カラーコードで各1桁目が2くらいの差がいいらしい
ズルい角丸。section は 5〜6px, ボタンは 4px, アイコンは 2〜3px がオススメ
ズルい box-shadow。section にかけたり、リボンとかボタンにモノ感をつけたいときは内側にシャドーをかける
ズルいボタン。いままでの総まとめ。sassy-button よさそう

感想

今風っぽいデザインを”ズルい”という名前で呼んでて面白かったですｗ　いままで text-shadow は適当に座標をずらしてみてたのですが、仕組みがよくわかりました。今度からは考えてデザインできそうです。ズルいパターンの RubyGems を作っているそうです。公開が楽しみです^^

ノンデザイナーのための配色理論 - @saucerjp さん

メモ

スライドノンデザイナーのための配色理論
色の選びかた。picker とかいい色から選ぶのもいいけど、落とし穴がある
色相、彩度、明度の調整のしかた。ただこれは RGB で選んでしまってる
調和のとれた色。混色系と顕色系。紙のデザインは顕色系
顕色系は人間の知覚に近いので色の組み合わせを想像しやすい。混色系は数学的に表しやすい、つまりコンピュータ系に向いてる
RGBは彩度が高くなりやすいから気をつける。高彩度の配色はやりにくいらしい
マンセルは彩度がほどよく抑えられている。減法混色。調和のとれた色を選びやすい
色彩調和論はいろいろある。その一つがムーン＆スペンサー。マンセルをベースにして考えられた
色相差の調和: スライドの白いところが調和であろう色（同等、類似、対比）
上記の理論にもとづいて色を選べる神ツール！！ HUE / 360 The Color Scheme Application
対角にあるグラデーションは、色相環で色を結んだ時に間のグレーをとおって汚くなりがちなので難しい
国ごとのデザインをするときは伝統色（顔料とか染料とか）がキーワードかもしれない
デザインはし続けるもの。要素、たとえば文字が増えると黒が増えると視差（他の色に巻き込まれて見え方が異なること）が起きて見え方が変わる。そのためデザインに影響が出る。だから調整し続けるものだ

感想

今まで色を選ぶときはピッカーから適当に選んだり、他のサイトを参考にしたり、”HTML 色一覧” みたいに検索してよさげな色を「なんとなく」選んでいました。色はちゃんとロジカルに選べることがわかりアハ体験しました。『HUE/360』が神ツールすぎます。配色に必携です！

ライブデザインコンサルティング

残りの時間はデザイナーの方々に希望者のサイトのデザインを見ていただける（！）という粋すぎるはからいがありました。あまりにもいい機会すぎるのですぐさま手をあげて Gogengo! を見ていただきました。自分にとって素敵すぎる時間でした。ありがとうございます＞＜　次の写真はいただいたフィードバックです。

次に @ursm さんの QA@IT でした。ユーザセグメントの違いからフィードバックの違いもあり興味深かったです。フィードバックの写真です。