Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ

ズルいデザイン
ハンズオン
in RubyHiroba Jun. 2th, 2013
Rubyistのための
#P4Dデザイナー向けプログラミング部
Presents
@ken_c_lo
TAEKO AKATSUKA
いそのー、
Sass やろうぜー
© @ayumiko

View Slide

1
#P4D ズルいデザインハンズオン in RubyHiroba 2013
準備
Use Middleman
http://middlemanapp.com
今回のハンズオン用のサンプルファイル
https://github.com/prog4designer/zurui-hands-on
$ gem install middleman
$ git clone [email protected]:prog4designer/zurui-hands-on.git
$ bundle install
$ bundle exec middleman
See -> http://localhost:4567

View Slide

2
趣旨
zurui-sass-rails
by @mah_lab
https://github.com/mahm/zurui-sass-rails
ズルいデザインの Rails 用 Gem
zurui-sass-rails の mixin の使い方を、ハンズオンで実際に体験。
今日からあなたの Rails アプリにズルいデザインが導入できる！
※今回の middleman のサンプルには zurui-sass-rails と同様の
　Sass ファイルがバンドル済みです。
Use

View Slide

3
趣旨
Use
Haml
Sass(indented syntax)
compass
今回は使いませんがサンプルコード
のソースは Haml になってます
巷では SCSS の方が主流ですが、
Rubyist の方なら、
、と
個人的により便利だと思う Sass 記法
（インデント記法）を今回は使います
Thanks @machida
今回の Middleman のサンプルは machida さんの作ったものから Fork してズルいデザイン用に作りました。

View Slide

4
これが…

View Slide

5
こうなる！

View Slide

6
今回はこのファイルを編集して
ズルいデザインを体験します。
Open
/source/stylesheets/zurui/_tryout.css.sass

View Slide

7
Zurui Design Hands-on
1
ズルい背景パターン

View Slide

8
body 全体の背景を変える
// コメントアウトをはずしてみる
Zurui Design Hands-on 1 ズルい背景パターン
15行目
background: $base-color url(/images/paper.png)

View Slide

9
紙のテクスチャ
http://subtlepatterns.com/paper/
body 全体の背景を変える

View Slide

10
#hero の背景画像を変える
59行目
background: #EACB95 url(/images/purty_wood.png)
#hero

View Slide

11
木目のテクスチャ
http://subtlepatterns.com/purty-wood/
#hero の背景画像を変える
このスライドと
同じテクスチャです

View Slide

12
2
ズルい線

View Slide

13
ヘッダナビゲーションにズルい線
Zurui Design Hands-on 2 ズルい線
51行目
+zurui-line-right($op1: .2, $op2: .2)

View Slide

14
51行目
+zurui-line-right($op1: .2, $op2: .2)
黒い線の透明度 0.2 白い線の透明度 0.2

View Slide

15
ためしに
+zurui-line-right($op1: 1, $op2: 1)
とかやってみると、線の濃さが変わるのが確認できる。
背景に彫り込まれているようにみせるには、
見えるか見えないかく
らいまで薄くするのがコツ !

View Slide

16
3
ズルいテキストシャドウ

View Slide

17
body 全体へのテキストシャドウ
Zurui Design Hands-on 3 ズルいテキストシャドウ
17行目
+zurui-ts-fff(1)

View Slide

18
紙に彫り込まれたような
自然な立体感
17行目
+zurui-ts-fff(1)
白いテキストシャドウ透明度 1
（100%）

View Slide

19
紙テクスチャ以外の場所がちょっと変！
木目ベースだとハイライトが濃すぎる… 白文字がにじんでしまった…

View Slide

20
ヘッダのテキストシャドウ
40行目
+zurui-ts-000(.3)

View Slide

21
40行目
+zurui-ts-000(.3)
黒いテキストシャドウ透明度 0.3 (30%)

View Slide

22
#hero
（木目部分）にテキストシャドウ
60行目
+zurui-ts-000(.3)

View Slide

23
60行目
+zurui-ts-fff(.5)
白いテキストシャドウ透明度 0.5 (50%)
透明度 1 -> 0.5
alpha を落として
背景の木目になじむ濃さに

View Slide

24
4
ズルいグラデーション

View Slide

25
header にズルいグラデーション
Zurui Design Hands-on 4 ズルいグラデーション
38行目
+zurui-gradient-top-lighten($main-color, 10%)

View Slide

26
Zurui Design Hands-on 4 ズルいグラデーション
38行目
+zurui-gradient-top-lighten($main-color, 10%)
下辺が $main-color(#b13b23),
上辺が $main-colorより10% 明るいグラデーション
$main-color より
10% 明るい
$main-color

View Slide

27
5
ズルいボタンを作ってみよう

View Slide

28
ボタンにテキストシャドウをつける
Zurui Design Hands-on 5 ズルいボタン
66行目
+zurui-ts-000(.3)

View Slide

29
ボタンにズルいグラデーションを適用
64行目
+zurui-gradient-top-lighten($accent-color)

View Slide

30
64行目
+zurui-gradient-top-lighten($accent-color)
下辺が $accent-color, 上辺が $main-colorより10% 明るいグラデーション
($accent-color, 10%) と同じ意味ですが、ズルいグラデーションはデフォルトが
10% 明るく / 暗くに設定しているので、10% の場合省略できます。

View Slide

31
ボタン hover 時にもズルいグラデーション
70行目
+zurui-gradient-top-lighten(lighten($accent-color, 5%))
下辺が $accent-color より 5% 明るい色、
上辺が下辺より10% 明るい色のグラデーション

View Slide

32
ちなみに、
$accent-color は $main-color の色相を 200°
転換
5行目参照
$accent-color: adjust-hue($main-color, 200)

View Slide

33
5行目参照
$accent-color: adjust-hue($main-color, 200)
色相を転換 200°
$accent-color
#236ab0
200°
$main-color
#b03b23
アクセントカラー：目立つ色
重要なボタンなど
少ない面積に使用すると効果的
（全体の面積の 5% く
らい）
メインカラー：中心となる色
サイトのイメージを表す色
（あの赤いサイトだよねー）
ヘッダやロゴ色、リンク、見出しの色等、
全体の 10 〜 20% 程度の面積で
利用すると効果的

View Slide

34
ズルいボックスシャドウで立体感を
67行目
+zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)

View Slide

35
67行目
+zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)
線の透明度
0.3
$shadow
$highlight
影の透明度
0.1
ハイライトの透明度
0.2

View Slide

36
ためしに
+zurui-box-emboss($border: 1, $shadow: 1, $highlight: 1)
とかやってみると、それぞれの濃さが変わるのが確認できる。
濃すぎ！

View Slide

37
6
おまけ 1) ヘッダに影をつける

View Slide

38
header にズルいグラデーション
Zurui Design Hands-on 6 ヘッダに影をつける
43行目
+box-shadow(rgba(0,0,0,.2) 0 2px 5px)
黒 / 透明度 0.2 / 下に 2px / ぼかし 5px の影
Compass

View Slide

39
しかしこれだけでは影がつかない
！
ヘッダよりも
#hero の方が
上のレイヤーになってし
まっているので
影が隠れている
！
header のレイヤーを上にする必要がある

View Slide

40
header のレイヤーを z-index: 2 に
41-42行目
position: relative
z-index: 2
ヘッダが、body 内の他の要素よりも上のレイヤーになる
→ 影がみえる
！
※ z-index
（レイヤー）の指定には、 position の指定が必要

View Slide

41
7
おまけ 2) ズルいフォント

View Slide

42
全体のフォントを変えてみよう
Zurui Design Hands-on 7 ズルいフォント
8行目
12行目
@import url(http://fonts.googleapis.com/css?family=Lato)
font-family: 'Lato', Arial, ' メイリオ ', Meiryo ,' ヒラギノ角ゴ Pro W3'
,'Hiragino Kaku Gothic Pro', ' ＭＳＰゴシック ', sans-serif

View Slide

43
Lato
http://www.google.com/fonts/specimen/Lato

View Slide

44
Lato
Lato かわいい。Lato おすすめ
- シンプルでかわいらしいゴシック
- ウェイト
（太さ）の種類が豊富
- はやりのフラット UI にも合う

View Slide

45
Lato
これも Lato
http://designmodo.github.io/Flat-UI/

View Slide

46
まとめ

View Slide

47
今日やったものの完成版 Sass がこれ
の中の
のコメントアウトを外してあげると読み込めます
source/stylesheets/zurui/_sample.css.sass
source/stylesheets/application.sass
// @import zurui/sample

View Slide

48
zurui-sass-rails by @mah_lab
https://github.com/mahm/zurui-sass-rails
帰ったらぜひ使ってみてください
For Rails Rails 以外（Middleman など）
Gemfile に追加以下のコマンドを実行して、ローカルに _
zurui-sass.sass をダウンロード
application.css.sass 的なファイルに追加
Compass の使える環境で _zurui-sass.
sass をインポート
group :assets do
gem 'sass-rails'
gem 'compass-rails'
gem 'zurui-sass-rails'
end
curl https://raw.github.com/mahm/zurui-sass-
rails/master/vendor/assets/stylesheets/_zurui-
sass.sass > _zurui-sass.sass
@import compass/utilities
@import compass/css3
@import zurui-sass
@import compass/utilities
@import compass/css3
@import zurui-sass

View Slide

Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ

Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ

ken_c_lo / TAEKO AKATSUKA

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Featured

Transcript