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

ズルいデザインを使った Rails 用 gem "zurui-sass-rails" の使って、実際にデザインの作り方を体験できるハンズオンです。

体験用レポジトリ
https://github.com/prog4designer/zurui-hands-on

zurui-sass-rails
https://github.com/mahm/zurui-sass-rails

ズルいデザインについて - 前半のスライド
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku-in-rubyhiroba-p4dwakusiyotupu

Transcript

1. ズルいデザイン ハンズオン in RubyHiroba Jun. 2th, 2013 Rubyistのための #P4Dデザイナー向けプログラミング部 Presents @ken_c_lo TAEKO AKATSUKA いそのー、 Sass やろうぜー © @ayumiko
2. 1 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 準備 Use Middleman http://middlemanapp.com 今回のハンズオン用のサンプルファイル https://github.com/prog4designer/zurui-hands-on $ gem install middleman $ git clone git@github.com:prog4designer/zurui-hands-on.git $ bundle install $ bundle exec middleman See -> http://localhost:4567
3. 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
4. 3 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 趣旨 Use Haml Sass(indented syntax) compass 今回は使いませんがサンプルコード のソースは Haml になってます 巷では SCSS の方が主流ですが、 Rubyist の方なら、 、と 個人的により便利だと思う Sass 記法 （インデント記法）を今回は使います Thanks @machida 今回の Middleman のサンプルは machida さんの作ったものから Fork してズルいデザイン用に作りました。
5. 4 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 これが…
6. 5 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 こうなる！
7. 6 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今回はこのファイルを編集して ズルいデザインを体験します。 Open /source/stylesheets/zurui/_tryout.css.sass
8. 7 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン
9. 8 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体の背景を変える // コメントアウトをはずしてみる Zurui Design Hands-on 1 ズルい背景パターン 15行目 background: $base-color url(/images/paper.png)
10. 9 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 紙のテクスチャ http://subtlepatterns.com/paper/ body 全体の背景を変える
11. 10 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero の背景画像を変える Zurui Design Hands-on 1 ズルい背景パターン 59行目 background: #EACB95 url(/images/purty_wood.png) // コメントアウトをはずしてみる #hero
12. 11 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 1 ズルい背景パターン 木目のテクスチャ http://subtlepatterns.com/purty-wood/ #hero の背景画像を変える このスライドと 同じテクスチャです
13. 12 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線
14. 13 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダナビゲーションにズルい線 // コメントアウトをはずしてみる Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2)
15. 14 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 2 ズルい線 51行目 +zurui-line-right($op1: .2, $op2: .2) 黒い線の透明度 0.2 白い線の透明度 0.2
16. 15 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに Zurui Design Hands-on 2 ズルい線 +zurui-line-right($op1: 1, $op2: 1) とかやってみると、線の濃さが変わるのが確認できる。 背景に彫り込まれているようにみせるには、 見えるか見えないかく らいまで薄くするのがコツ !
17. 16 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ
18. 17 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 body 全体へのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 17行目 +zurui-ts-fff(1)
19. 18 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙に彫り込まれたような 自然な立体感 17行目 +zurui-ts-fff(1) 白いテキストシャドウ 透明度 1 （100%） Zurui Design Hands-on 3 ズルいテキストシャドウ
20. 19 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 紙テクスチャ以外の場所がちょっと変！ 木目ベースだとハイライトが濃すぎる… 白文字がにじんでしまった… Zurui Design Hands-on 3 ズルいテキストシャドウ
21. 20 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ヘッダのテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3)
22. 21 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 40行目 +zurui-ts-000(.3) 黒いテキストシャドウ 透明度 0.3 (30%)
23. 22 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 #hero （木目部分）にテキストシャドウ // コメントアウトをはずしてみる Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-000(.3)
24. 23 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 3 ズルいテキストシャドウ 60行目 +zurui-ts-fff(.5) 白いテキストシャドウ 透明度 0.5 (50%) 透明度 1 -> 0.5 alpha を落として 背景の木目になじむ濃さに
25. 24 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 4 ズルいグラデーション
26. 25 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 header にズルいグラデーション // コメントアウトをはずしてみる Zurui Design Hands-on 4 ズルいグラデーション 38行目 +zurui-gradient-top-lighten($main-color, 10%)
27. 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
28. 27 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 5 ズルいボタンを作ってみよう
29. 28 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにテキストシャドウをつける Zurui Design Hands-on 5 ズルいボタン 66行目 +zurui-ts-000(.3)
30. 29 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタンにズルいグラデーションを適用 Zurui Design Hands-on 5 ズルいボタン 64行目 +zurui-gradient-top-lighten($accent-color)
31. 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% の場合省略できます。
32. 31 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ボタン hover 時にもズルいグラデーション Zurui Design Hands-on 5 ズルいボタン 70行目 +zurui-gradient-top-lighten(lighten($accent-color, 5%)) 下辺が $accent-color より 5% 明るい色、 上辺が 下辺より10% 明るい色のグラデーション
33. 32 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ちなみに、 $accent-color は $main-color の色相を 200° 転換 5行目参照 $accent-color: adjust-hue($main-color, 200) Zurui Design Hands-on 5 ズルいボタン
34. 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% 程度の面積で 利用すると効果的
35. 34 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ズルいボックスシャドウで立体感を Zurui Design Hands-on 5 ズルいボタン 67行目 +zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2)
36. 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
37. 36 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 ためしに +zurui-box-emboss($border: 1, $shadow: 1, $highlight: 1) とかやってみると、それぞれの濃さが変わるのが確認できる。 Zurui Design Hands-on 5 ズルいボタン 濃すぎ！
38. 37 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 6 おまけ 1) ヘッダに影をつける
39. 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
40. 39 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 しかしこれだけでは影がつかない ！ Zurui Design Hands-on 6 ヘッダに影をつける ヘッダよりも #hero の方が 上のレイヤーになってし まっているので 影が隠れている ！ header のレイヤーを上にする必要がある
41. 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 の指定が必要
42. 41 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Zurui Design Hands-on 7 おまけ 2) ズルいフォント
43. 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', ' ＭＳ Ｐゴシック ', sans-serif
44. 43 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント
45. 44 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 Lato http://www.google.com/fonts/specimen/Lato Zurui Design Hands-on 7 ズルいフォント Lato かわいい。Lato おすすめ - シンプルでかわいらしいゴシック - ウェイト （太さ）の種類が豊富 - はやりのフラット UI にも合う
46. 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/
47. 46 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 まとめ
48. 47 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 今日やったものの完成版 Sass がこれ の中の のコメントアウトを外してあげると読み込めます source/stylesheets/zurui/_sample.css.sass source/stylesheets/application.sass // @import zurui/sample
49. 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
50. 49 #P4D ズルいデザイン ハンズオン in RubyHiroba 2013 © @ayumiko Enjoy!