#p4dのメモ
主催 海老沢さん @satococoa
- -
町田哲平さん
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli
gemでいれる
sassなのはコンパイルする前にカスタマイズしたいから＞精神的なもの
まず3色にしぼる！
-ベースカラー70%
-メインカラー25%
-アクセント5%
ベースカラー 地味な色を選ぼう
アクセントカラー
- クリックさせたいとか
- メインカラーと隣り合わせでも目立つものを選ぶ
メインカラー 自分が好きな色
参考URL あとでツィートする
選べないので、パクる！ "color lovers"
色は変数！
_varuales.scss
背景テクスチャーの方がプロっぽい。
文字の色の決め方
Sassを使って行う
- 明度をあげる lighten
- 明度をさげる darken
- 直接演算する + , -
演算するのは自由すぎるのをふせぐ
herounitを調整する
日本語ひどい
margin-bottomをいじって、スクリーンショットを取って、見比べていくといい。
目立たせたいときにはスキマをあけよう
CompassはSassを使うためのライブラリ
"webpay"はとても参考になる
_try.css.sass
- -
@ken_c_io
ズルいデザインの話
http://www.atmarkit.co.jp/ait/articles/1212/06/news004.html
スマートフォンのときは上から下へライトがあたってるようなデザインで設定されてる
背景色の濃淡で透明度の設定が必要
ナチュラル素材は親近感をうけやすい
ダメなのは
- 大柄、彩度が強い、
角丸
- 大きすぎないようにする
- 5,6px
box-shadowはみえるかみえないかぐらい
どの効果も気づくか気づかないぐらいがいい
http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/
- -
おばら つかささん
Ruby Kajaのデザイン
ノンデザイナーのための配色理論
調和のとれた色は選びにくい
混色系 機会向き
顕色系 人間向き マンセル、PCCS
失敗2
- RBG色空間 マンセル色空間
マンセル色空間の方が彩度がおさえられてる
配色理論
http://hue360.herokuapp.com/
同一調和 同じ色で彩度だけ変わる ただし、単調になりがち
類似調和 となりの色相を使う
対比調和 派手。主張が強いけど、失敗すると目が痛い
スプリットコメンタリー カラフル 元気な感じ
