Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

2 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 趣旨 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

4 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 これが…

Slide 6

Slide 6 text

5 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 こうなる!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

7 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

9 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 紙のテクスチャ http://subtlepatterns.com/paper/ body 全体の背景を変える

Slide 11

Slide 11 text

10 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero の背景画像を変える Zurui Design Hands-on 1 ズルい背景パターン 59行目 background: #EACB95 url(/images/purty_wood.png) // コメントアウトをはずしてみる #hero

Slide 12

Slide 12 text

11 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 木目のテクスチャ http://subtlepatterns.com/purty-wood/ #hero の背景画像を変える このスライドと 同じテクスチャです

Slide 13

Slide 13 text

12 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線

Slide 14

Slide 14 text

13 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダナビゲーションにズルい線 // コメントアウトをはずしてみる Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2)

Slide 15

Slide 15 text

14 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2) 黒い線の透明度 0.2 白い線の透明度 0.2

Slide 16

Slide 16 text

15 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに Zurui Design Hands-on 2 ズルい線 +zurui-line-right($op1: 1, $op2: 1) とかやってみると、線の濃さが変わるのが確認できる。 背景に彫り込まれているようにみせるには、 見えるか見えないかく らいまで薄くするのがコツ !

Slide 17

Slide 17 text

16 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ

Slide 18

Slide 18 text

17 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体へのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 17行目 +zurui-ts-fff(1)

Slide 19

Slide 19 text

18 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙に彫り込まれたような 自然な立体感 17行目 +zurui-ts-fff(1) 白いテキストシャドウ 透明度 1 (100%) Zurui Design Hands-on 3 ズルいテキストシャドウ

Slide 20

Slide 20 text

19 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙テクスチャ以外の場所がちょっと変! 木目ベースだとハイライトが濃すぎる… 白文字がにじんでしまった… Zurui Design Hands-on 3 ズルいテキストシャドウ

Slide 21

Slide 21 text

20 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3)

Slide 22

Slide 22 text

21 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3) 黒いテキストシャドウ 透明度 0.3 (30%)

Slide 23

Slide 23 text

22 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero (木目部分)にテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-000(.3)

Slide 24

Slide 24 text

23 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-fff(.5) 白いテキストシャドウ 透明度 0.5 (50%) 透明度 1 -> 0.5 alpha を落として 背景の木目になじむ濃さに

Slide 25

Slide 25 text

24 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 4 ズルいグラデーション

Slide 26

Slide 26 text

25 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header にズルいグラデーション // コメントアウトをはずしてみる Zurui Design Hands-on 4 ズルいグラデーション 38行目 +zurui-gradient-top-lighten($main-color, 10%)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

27 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタンを作ってみよう

Slide 29

Slide 29 text

28 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにテキストシャドウをつける Zurui Design Hands-on 5 ズルいボタン 66行目 +zurui-ts-000(.3)

Slide 30

Slide 30 text

29 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにズルいグラデーションを適用 Zurui Design Hands-on 5 ズルいボタン 64行目 +zurui-gradient-top-lighten($accent-color)

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

31 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタン hover 時にもズルいグラデーション Zurui Design Hands-on 5 ズルいボタン 70行目 +zurui-gradient-top-lighten(lighten($accent-color, 5%)) 下辺が $accent-color より 5% 明るい色、 上辺が 下辺より10% 明るい色のグラデーション

Slide 33

Slide 33 text

32 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ちなみに、 $accent-color は $main-color の色相を 200° 転換 5行目参照 $accent-color: adjust-hue($main-color, 200) Zurui Design Hands-on 5 ズルいボタン

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

34 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ズルいボックスシャドウで立体感を Zurui Design Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)

Slide 36

Slide 36 text

35 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2) 線の透明度 0.3 $shadow $highlight 影の透明度 0.1 ハイライトの透明度 0.2

Slide 37

Slide 37 text

36 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに +zurui-box-emboss($border: 1, $shadow: 1, $highlight: 1) とかやってみると、それぞれの濃さが変わるのが確認できる。 Zurui Design Hands-on 5 ズルいボタン 濃すぎ!

Slide 38

Slide 38 text

37 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 6 おまけ 1) ヘッダに影をつける

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

39 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 しかしこれだけでは影がつかない ! Zurui Design Hands-on 6 ヘッダに影をつける ヘッダよりも #hero の方が 上のレイヤーになってし まっているので 影が隠れている ! header のレイヤーを上にする必要がある

Slide 41

Slide 41 text

40 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header のレイヤーを z-index: 2 に Zurui Design Hands-on 6 ヘッダに影をつける 41-42行目 position: relative z-index: 2 ヘッダが、body 内の他の要素よりも上のレイヤーになる → 影がみえる ! ※ z-index (レイヤー)の指定には、 position の指定が必要

Slide 42

Slide 42 text

41 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 7 おまけ 2) ズルいフォント

Slide 43

Slide 43 text

42 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 全体のフォントを変えてみよう 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', ' MS Pゴシック ', sans-serif

Slide 44

Slide 44 text

43 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント

Slide 45

Slide 45 text

44 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント Lato かわいい。Lato おすすめ - シンプルでかわいらしいゴシック - ウェイト (太さ)の種類が豊富 - はやりのフラット UI にも合う

Slide 46

Slide 46 text

45 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント これも Lato http://designmodo.github.io/Flat-UI/

Slide 47

Slide 47 text

46 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 まとめ

Slide 48

Slide 48 text

47 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今日やったものの完成版 Sass がこれ の中の のコメントアウトを外してあげると読み込めます source/stylesheets/zurui/_sample.css.sass source/stylesheets/application.sass // @import zurui/sample

Slide 49

Slide 49 text

48 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 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

Slide 50

Slide 50 text

49 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 © @ayumiko Enjoy!